Since the days of Flash, I have had the idea of having a personal website. Over the past eight years, my personal website has served various purposes, from being a creative outlet to a portfolio to a writing medium.
Despite having created several websites, I found that I had a tendency to struggle with an iterative mindset. I would get stuck in redesigning my website every few years, which would leave me so thoroughly exhausted and frustrated that I would lose the motivation to touch it again. If you can relate to the feeling of dread that comes with redesigning your portfolio, then you probably understand my struggle.
The concept of iterative change is the idea that software can develop and modify over time by making small modifications. The faster we can iterate, the quicker we can learn and discover good ideas. This mindset frees me from the notion of perfection.
To ensure room for growth and adaptation, I made a few intentional decisions. Firstly, I chose the right stack. In the past, shipping new material was a lot of work, with many manual steps involved before deployment. However, with the rise of CI tools such as Vercel and Github, the process has become more accessible and straightforward.
I created my new website using NextJS and Vercel, with deployment as simple as pushing changes to Github. Github Actions runs image compressions, while Vercel handles all the build processes and deployment. With NextJS and SSR, data fetching is done at build time, so users don't have to wait for data to load. The entire page with data is served upon request.
In my opinion, NextJS has one of the best developer experiences for the React ecosystem, with React having striking similarities to creating a sketch with symbols (components) and overrides (props + state).
As for content, I wanted to have the ability to add new content with ease, without having too many constraints on how stories are presented. In my past websites, data was tightly coupled with the view logic, so adding new content required me to write in the view language (HTML, Erb, Haml). However, with the use of MDX (Markdown + Components), I now have enough flexibility to write content in any Markdown editor and add React components for richer storytelling elements.
To prevent my OCD from derailing my focus away from content creation, I deliberately added design constraints. This includes limiting the site's container width, using design tokens for margins and paddings, and having only two heading definitions in articles.
Finally, instead of thinking of this website as a portfolio, I wanted it to be a personal website with the main objective of telling my story as a designer. Portfolios have always been just a means of getting a job for me, but with a personal website, I always have the motivation to tell my story and it doesn't die after I get the job.