How I transformed my portfolio: One exciting upgrade at a time
Summary
The portfolio began with design creation and development using basic tools, then evolved with the use of AstroJS and a custom domain for better performance and professionalism. The next phase involves migrating to Next.js and Sanity CMS to add richer content and more flexibility.
The foundational build
During this initial phase, I dove into conceptual design, carefully crafting detailed lo-fi wireframes for desktop, tablet, and mobile, and setting the visual tone with mood boards and style tiles. Then, I brought it to life with basic implementation, using HTML for structure, CSS for styling, and a touch of basic JavaScript for interactivity. I proudly launched this first live version on GitHub Pages. It was crucial for me to grasp user flows, understand responsive design principles, and learn the essential building blocks of a web presence. This phase truly laid the groundwork for everything that followed.
Professional refinement & performance
Seeking a more professional and high-performing site, I upgraded to AstroJS for its SEO benefits, speed, and developer experience; I also adopted a custom domain (eddesign.dev). I used Markdown for content, presenting my projects as separate articles. With a single main page and project articles, development was faster. However, I discovered the site wasn’t indexed well by search engines, highlighting the need to learn more about SEO.
The next evolution
I'm building v3 of my portfolio to enable dynamic content management and better project storytelling. With Sanity CMS, I can update content easily, while Next.js ensures fast performance, SEO, and simple API integration. I'm exploring Google Search Console and Analytics to boost discoverability. For styling, Tailwind CSS will speed up UI development and keep the design consistent. This version will be flexible, scalable, and showcase my work in greater depth.
Key learnings
This multi-stage portfolio project has been a valuable and continuous learning experience. Through this process, I've come to understand the immense value of iterative design and development, seeing how continuous improvement and phased development truly make a difference. I've also gained more hands-on experience with modern web technologies, working with cutting-edge frameworks like Next.js, utility-first CSS such as Tailwind CSS, and headless CMS solutions like Sanity. I'm actively learning how to strategically position myself online through personal branding and SEO, identifying crucial aspects of search engine visibility.
Challenges
Transitioning between technologies required a new mindset and skill acquisition as I moved from foundational HTML/CSS/JS to modern frameworks and styling approaches. A hurdle was identifying and addressing the initial lack of search engine indexing for my site. Looking ahead, planning the content migration and structuring it for a CMS demands careful architectural consideration. And through it all, it's a constant effort to balance simplicity with the desire for in-depth project showcases, striving to maintain a clean and navigable user experience.