Having an iterative mindset
The idea of having a personal website started when Flash was a thing. Over the past eight years, a personal website had served different functions for me, creative outlet, a portfolio, a writing medium, etc.
After making a couple of websites, I realized I've always struggled to have an iterative mindset. I get stuck in these loops where I redesign the thing once every few years and am left so thoroughly exhausted and frustrated by the process that I don't want to touch the website ever again. If you've ever dreaded the notion of having to redesign your portfolio, you probably can relate.
Iterative change is the concept that software develops & modify over time by making small modifications. The faster we can iterate, the quicker we can learn and discover good ideas. It frees me from the notion of being perfect.
Here are a couple of intentional decisions I took so that there is always room to grow and adapt along the building process.
Previously shipping new material is a lot of work, and before deploying it, it had various manual steps. CI tools now became more accessible and more straightforward. It's good to see tools like Vercel and Github pushing developer experience.
The new website made with NextJS + Vercel. The deployment is simple as pushing the changes to Github. Github Actions runs image compressions. Vercel does all the build processes and deploys the website.
NextJS with SSR does data fetching at build time. Thus, users don't have to wait for data to get loaded. The whole page with data served when requested.
In my opinion, NextJS has one of the leading developer experience for the React ecosystem. React now has strikingly many similarities to creating a sketch with symbols (Components) and overrides(Props + State).
The second concern was adding content without having many constraints on how stories are presented. I wanted the ability to ship new content with the least amount of effort.
In all of my past websites, data is tightly coupled with the view logic of the website. Thus adding new content required me to write content in the View language (HTML, Erb, Haml). I did this mainly because it gave me the flexibility to craft a story by adding custom components.
Using MDX (Markdown + Components) gave me enough flexibility to write content in any Markdown editor I prefer and add React components to the markdown for richer storytelling elements.
Design Constraints
Frequently I get pulled into this zone mode, spendings hours on making sure things are near perfect. So fewer the design elements, the less time I have to struggle with my OCD.
A lot of my OCD time derails my focus away from content creation. Thus, I deliberately added constraints that make potential iterations less dreadful. Few of these restriction includes site's container width so that I only have to test the website in a shorter set of viewports. Use of design tokens for margins and paddings. Only two heading definitions in articles.
Instead of thinking of this website as a portfolio, I wanted this website to be more of a personal website. Which has the main objective is to tell my story as a designer. Portfolios have always been just a means of getting a job for me. Once that is done, I had no motivation to update or improve it until the next job search.
By making a personal website, I always have the motivation to tell my part of the story, and it doesn't die after I got the job.
Happy Thursday!