Log of suzie.world

As of 2024, I have released the third version of my personal website. I'd love to share the past logs of suzie.world and walk you through the process I've made this time, from ideation to launch.

Very First Portfolio

Dating back to 2019, that was a time when I barely went out and spent most of my days with my laptop. I was so happy to finally convert my knowledge from a few months of learning into something that worked online. The concept of building your own projects without spending much time and labor (compared to building something in the real world like a house or a building) was fascinating to me. I needed to test if things really worked with just these three things: HTML, CSS, and Vanilla JavaScript. I worked on a few simple projects like a weather app and a to-do list. I built my very first website with static site generator called Gatsby. I also started documenting on my blog what I learned and how I applied it to my projects, just for the sake of records and my future self. I looked it up what tools are good for content management and decided to go with Contentful and deploy it on Netlify. Eventually, these works became something I could call a "portfolio," and it helped me find a job as a junior software engineer.

Work in progress…

Not long after, React became my go-to tool for work and personal projects. When I realized I wasn’t using pure JavaScript anymore, I decided to renovate my personal website since the main page displaying my vanilla JavaScript projects was ready to be archived. I focused on writing blog posts to document what I had learned and implemented. I also wanted to try something new without spending too much time on design and template creation, so I used the hello-glitch template on Eleventy. This time, I saved markdown files locally, allowing me to publish posts more frequently.

Introducing the new suzie.world

Fast forward to today, the blog you see now is a brand new version of suzie.world! I wiped out all the previous posts (though you can still find them here) as they were all written in Korean. I am now starting my new journey as a freelance software engineer with clients worldwide! There were some necessary changes as my focus shifted. I designed the website from scratch, decided not to use a static site generator, and built it with NextJS, deploying it on Vercel. Let’s break down the process I went through to get here and connect with more people out there (including you!)

Ideation and Define Tasks

the first thing I did was collect all the requirements for my blog. I wanted to add a newsletter, categorize each blog post, and enhance the blog's characteristics as part of personal branding. Having this clear outline helped me move on to the second task, which was defining the work. Since I’ve been using JIRA ever since I started working, I know how important it is to have visible tickets for productivity. I divided the tasks into five different sections: Ideation and Research, Design, Development, Launch, and Backlog. Each ticket comes with a status, due dates, priority, and summary with acceptance criteria. Below is the outcome of my board, and as you can see, most of the work has been done. (Yay!)

Design

I believe there is no exact line dividing the work required to build a product. On top of that, I wanted to design my own personal website and build it from scratch. I researched various design references for inspiration from their color palettes, typography, or layouts—anything I could use! Once I gathered all the references, it was time to find a color palette, font family, and illustrations. It took me a good two weeks to be satisfied with the choices, and I was able to create a guideline for the rest of my design work.

Drawing wireframes and creating all the required components, like the hero section on the landing page, header, navigation, footer, newsletter component, and blog post page, was such a fun time after two weeks of research. Now it was my time to shine, and I had every tool I needed to do that. I generated at least five design options for each component and then finally assembled them into one cohesive frame and… here is the outcome!

Deployment

I didn’t use a static site generator this time. I wanted my personal website to be flexible in any dimension. For the blog posts, I found a headless CMS, Sanity, to help me manage my content and easily retrieve the information I need through defined schemas. I built the site with Next.js 14 using the App Router and deployed it on Vercel for the best compatibility. The experience was quite nice and smooth, so I’d love to cover how it was using Next.js with Sanity in my next post.

Currently, my website is fairly simple. It has three pages: Home, Blog, and About, along with a few common shared components: Header, Footer, and Newsletter. I used the App Router instead of the Page Router this time for performance and flexibility. Adding the newsletter feature was also a first for me, and I’d love to cover it next time as well. I used a free service, ConvertKit. Transferring the Domain Name Server from Netlify to Vercel, deploying the project, and monitoring it on Vercel were the final stages of my development (at this moment), even though there are still some tasks left.

You can check the full source code here.

Maintenance and Updates

So is it all done? Well, everything I mentioned and did is just the groundwork for upcoming tasks. As soon as I launch this, backlog tickets will start stacking up, and that is totally fine! I have completed 80% of the work at this stage, and the remaining 20% will bring another 80% of the tasks, which excites me. I will upload blog posts at least once every fortnight and keep adding content, whether it’s related to my new projects or other media forms. So, stay tuned!