Rebuilding a portfolio that could scale with evolving work and content
While my previous portfolios were performing good, they didn't feel great. Adding any design modification required a lot of redesign and over time it started to feel dated very quickly. At the same time, this project became an opportunity to learn and explore a new tool to build websites and share resources that could help many other designers and developers.
Interactions without performance trade-offs
While Framer enables many interactions without code, more complex behaviors require custom logic. The goal was to build expressive, playful interactions without compromising performance or PageSpeed scores. Every custom component and animation was designed to feel modern, lightweight and reliable across devices.
Making accessibility a core design decision
PageSpeed became a constant reference while building this site. The goal was to ensure the site works for everyone, supporting screen readers, keyboard navigation and clear structure, while also improving overall search visibility.
Minimalism as the guiding principle
A minimal visual language helped keep the experience focused and easy to use. I limited third-party dependencies and leaned on native tools to achieve the same, if not better results.
A modular foundation for continuous growth
This was my fourth portfolio in two years. Each previous version reached a point where new ideas or interactions no longer fit the existing structure. This time, the foundation was designed to be modular, allowing future updates, experiments and additions without rebuilding the entire site.
From ideation to execution
To achieve all the goals I set for this portfolio, I followed a structured process from start to finish, focusing on clarity, scalability and long-term usability. Before starting out, I went through a list of features that could be built in Framer within the pre-determined time frame. To ensure my site felt modern, rather than checking out various other portfolio sites, I decided to look at some design elements that I could fit within the site.
Starting with reflection and research
I began by analysing my previous portfolio using Wix Studio’s analytics to understand user behaviour and bounce rates across key pages. This helped identify areas that needed improvement to increase engagement and time spent on the site.
Establishing a clear content and navigation flow
I planned the content and information architecture in parallel, starting with lightweight digital wireframing in Figma. Using Content Map - a plugin in Figma, I mapped out the goal of each section on every page and what they'd contain.
Aligning platform choice with a restrained color system
This stage required the most iteration. Supporting both light and dark themes was essential. in this portfolio. I explored multiple directions before settling on a restrained two-color system with supporting shades for hierarchy and states. Typography was also finalized alongside this decision. For performance and consistency, I went with Google Fonts, one primary font and a single accent font that aligned with the site’s minimal aesthetic.
Executing the design inside Framer
I began by setting up the text and color styles, refining font choices and spacing while testing responsiveness early on. Framer has a new 'Design space' that is similar to Figma where I translated my existing wireframes into structured layouts using stacks. I also used inline comments within containers as content reminders, significantly speeding up the build process. While building the site, performance was a key consideration throughout. I kept animations lightweight and intentional, avoiding heavy interactions that could impact mobile performance.
Refining through testing and final release
After building the site, I first published it using Framer’s default domain and ran detailed checks using PageSpeed Insights. I focused on the four core metrics that influence search visibility and real-world performance. Before finalizing the launch, I shared the site with a small group of friends and family to gather their feedback. Their inputs helped identify usability gaps and interaction issues that I was too close to notice myself.
Early impact of the new portfolio
Within less than a month of launch, the portfolio attracted 2000+ views from across the world with minimal promotion. It became my fastest-growing and most-viewed portfolio to date, outperforming all previous versions in both reach and engagement.
Different sections of the website showing interactions
Due to the reach and visibility, I built another page where I could simply show some animations and interactions I build in any platform. This was my first major update to the site after launch and I am planning to have those components or code publicly available so that everyone could use. This was a way for me to learn new interactions through experiements that I could use in other projects.