Ever since the era of Flash, the concept of having a personal website has been a persistent idea in my mind. Over the span of the last eight years, my personal website has worn many hats, serving as a creative outlet, a portfolio, and a platform for my writing.
Throughout my journey of creating several iterations of websites, I've grappled with a recurring challenge—an innate tendency to get entangled in the web of continuous redesign. This would often leave me utterly drained and disheartened, robbing me of the motivation to revisit it. If you've ever experienced the apprehension that comes with revamping your portfolio, you'll relate to my struggle.
Enter the concept of iterative change, a philosophy that acknowledges software's ability to evolve and adapt over time through small, incremental tweaks. The faster we iterate, the more swiftly we learn and uncover innovative ideas. This mindset liberates me from the relentless pursuit of perfection.
To ensure room for growth and adaptability, I made a series of deliberate decisions. First and foremost, I selected the right technology stack. In the past, updating my website was a cumbersome process, involving numerous manual steps before deployment. However, the advent of Continuous Integration (CI) tools like Vercel and GitHub has made this process significantly more accessible and straightforward.
My new website is built using Next.js and deployed effortlessly by simply pushing changes to GitHub. GitHub Actions handle image compressions, while Vercel takes charge of all build processes and deployment. Thanks to Next.js and Server-Side Rendering (SSR), data fetching is performed during build time, ensuring users don't have to wait for data to load. The entire page, complete with data, is served upon request.
In my view, Next.js offers one of the most delightful developer experiences within the React ecosystem. React, with its striking resemblance to creating a sketch with symbols (components) and overrides (props + state), seamlessly integrates into this framework.
When it comes to content, my goal was to add new material with ease, without being constrained by rigid presentation rules. In my previous websites, data was tightly intertwined with view logic, making the addition of new content a tedious task that required coding in the view language (HTML, Erb, Haml). However, by embracing MDX (Markdown + Components), I now possess the flexibility to compose content in any Markdown editor and incorporate React components for more dynamic storytelling elements.
To prevent my perfectionist tendencies from diverting my attention away from content creation, I intentionally introduced design constraints. These constraints encompass limiting the site's container width, using design tokens for margins and paddings, and adopting just two heading styles in articles.
Lastly, I shifted my perspective away from considering this website as a mere portfolio. Instead, I envisioned it as a personal platform with the primary aim of narrating my journey as a designer. While portfolios have traditionally served as a means to secure employment, my personal website serves as a continuous narrative of my story, never fading into obscurity once the job is secured.