💡 Motivation

When I first started building my portfolio website, I only needed two pages to introduce myself and showcase my work. Later on, I wanted to create an additional space for my thoughts and notes. I tested out a couple of Gatsby starters, but ultimately decided to build my website from scratch because I wanted the flexibility of fully customizing my site, and I thought it would be a great opportunity to learn more about Gatsby and GraphQL.

👩🏻‍💻 Process

The process was mostly painless thanks to Gatsby's excellent tutorial and documentation. I was able to build and style a minimal two-page site after going through Parts 0 to 3 of the tutorial.

Parts 4 to 6 helped me learn how to query markdown files from the filesystem, transform them into blog posts, and then programmatically generate pages from page slugs using GraphQL and the gatsby-source-filesystem and gatsby-transformer-remark plugins.

Finally, in Part 7, I learnt to optimize my site's Lighthouse score and SEO rankings with gatsby-plugin-manifest and React Helmet.

💭 Thoughts

I ended up learning a lot more about working with Gatsby's powerful plugins, and discovered new libraries like typography.js and Emotion, which I used to refactor and style my website more productively. I also learned the basics of GraphQL, which I hope to explore further.

🔮 Future plans

1. Query and display images in blog posts.
2. Toggle dark mode.
3. Localization (i18n) for 中文, Español and Deutsch.