It’s been many years since I updated my portfolio website. My previous portfolio was built using Nuxt.js (a framework based on Vue.js) and a headless CMS called DatoCMS. I wrote all the CSS by hand.
While convenient, I decided to abandon the headless CMS due to its maintenance difficulties. In my day-to-day job, I’ve been building custom Gutenberg blocks with my team and working on a new block theme. This modern WordPress theme uses Gutenberg blocks for almost all components, which is very convenient.
So I was thinking, “I think it’s time to change everything from scratch and I can use my knowledge to create my own theme with my own liking”.
My initial process was to divide the tasks into three main points. Which, I often find myself not focusing on one main point at a time and instead jumping around between them 😅
Plan
By planning things, such as deciding which stacks or platforms to use, it’s easier for me to move on to the next step.
Design
It’s crucial to have a general understanding of what needs to be displayed, so I initially design everything from scratch in Figma.
Code
After completing the two required steps, I proceed with coding based on the design I have planned and implement any features that are possible on the frontend and backend.
The initial plan was to switch the framework from Nuxt to Next and still use another headless CMS such as Contentful, but man….I don’t think I have the energy to re-learn everything from scratch again. Seeing how much WordPress has improved in general, I’ve decided to stick with WordPress as a platform to house my content in a CMS and build a block theme on WordPress from scratch.
The process of building the block theme is easier than I thought—we don’t have to dive into much back-end compared to the classic theme. Here is the difference between a block theme and a classic theme if you are curious!
I used this theme generator by Carolina Nymark. She also created a very nice and comprehensive course for people who want to get started building a block-based WordPress theme from scratch. She explains the terminology and other new things related to the development. You should check this out: Full Site Editing for Theme Developers.
Before even diving into creating the block theme, I designed the layout for my new portfolio website. I’d say I am proficient enough in using Figma to build a web design from scratch, check it out here. The design changed a lot when building this site layout since I had to adapt to the existing Gutenberg blocks as well to make everything work nicely, so it’s not exactly the same as I initially planned lmao 😆