Wednesday, May 1, 2024
The Portfolio 🚀
Akash AmanUpdated: November 2024
I am excited to share the fascinating journey of developing my digital portfolio. Crafting a compelling digital portfolio involves a perfect blend of creativity and technical prowess.
In this article, I will dive deep into the architecture & also discuss how I tackled two crucial web performance metrics, to ensure a seamless user experience for every visitor.
Journey
Building my portfolio was a thrilling journey filled with various challenges and exciting discoveries. I ventured into exploring different frameworks like Svelte, Astro, Gatsby, and Hugo, each offering unique possibilities for my project.
As I set out to find the perfect framework, my main goal was to create a frontend user experience that was as smooth as possible, accompanied by outstanding performance metrics. Svelte caught my attention with its impressive performance, but I noticed a slight delay during page transitions. After some investigation, I learned that this was due to page data not loading early enough when it came into view. Although it might be a bit technical, I strongly recommend giving Svelte a try. It's an ultra-performant magical framework that truly works wonders.
Despite Svelte's allure, I decided it might not be the ideal fit for my project. I sought a framework that would allow me to update static content quickly without enduring lengthy build times, which also led me to steer away from projects like Gatsby.
Astro and Hugo presented different challenges too. Astro's completely static build meant that page changes required a full page refresh, impacting the seamless experience I desired.
While exploring various solutions, I considered the architecture's long-term maintenance implications 💸👀. That's when I came up with an 😃 idea 💡: what if I converted markdown to JSON using multithreaded code ❓ Excitedly, I attempted to write multithreaded Go Lang code, but it didn't perform as well as I hoped, taking 10 - 16 minutes for 40K markdown records. Though amusingly, I knew I wouldn't be writing 40K records anytime soon! 😂 Nevertheless, my pursuit of top-notch performance was relentless.
In my quest for efficiency 🚀, I discovered that Hugo could conveniently convert markdown into JSON. So, I set up a Hugo project that performed this conversion and consumed the JSON in Svelte for server-side rendering. This approach significantly reduced build times, but there was still a slight delay in the frontend experience 😓.
Finally, after trying out several frameworks, I decided to give Next.js a shot. I created a new app directory with fantastic features like shared layouts between routes, which enhanced the UI's performance. These layouts preserved state, remained interactive, and avoided unnecessary re-renders. One crucial feature that impressed me greatly was On-Demand Incremental Static Regeneration (ISR), which saved me build time by generating static content on demand.
I've crafted this portfolio using Next.js 13 app directory structure, combined with a Strapi backend featuring GraphQL API endpoints to manage media and content.
One of my primary goals was to ensure a smooth user experience while maintaining the ability to update content without the hassle of rebuilding the entire project. Considering that the content is mostly static.
I opted for a powerful feature provided by Next.js called On Demand Incremental Static Regeneration (ISR).
This innovative technique enables the regeneration of static pages on-demand, saving valuable time and resources while ensuring that any content updates are efficiently propagated.