Portfolio 2.0
A website to showcase my past projects, explaining how they were built, the challenges I faced, and how I addressed them.
Project details
Duration
2 Weeks
Role
Creator
Technologies
Project Overview
My personal portfolio website was born out of the need for a single, unified place where I could share my thoughts with the world and showcase my work.
As the creator of my personal website, I had the freedom to experiment with different technologies; however, I chose to architect it using popular and proven solutions such as Next.js 16 with the App Router. For content management, I used Sanity CMS to handle structured data, while Turso helpedstoring email subscriptions.
The Challange
The primary obstacle was using Next.js for the first time. Having worked with more traditional technologies for most of my career, transitioning to something as modern and structured as Next.js was refreshing. However, it required some time spent reading the documentation and researching best practices. Ultimately, I was able to implement it successfully.
The goal was clear: to create a fresh-looking, performant website with an easy way to add structured content without needing to modify the codebase further.
- Aim for a good to perfect lighthouse score for performance.
- Create fresh UI design with animations.
- Add & update content without needing to modify the codebase further.
The Solution
Achieving a high Lighthouse score was not as easy as I initially expected. I had to closely inspect the bundle sizes of each library I used and evaluate how they were integrated. Some libraries offered optimized bundles while others did not, which ultimately became a key factor in choosing one solution over another.
Key Features
Smooth Scroll Animation
Using Lenis library was super easy yet so rewarding. It made the website feel premium and polished.
Responsive Design
Responsive design to cover all devices, everything looks good on each device.
Optimized for Performance
Fast loading times. Next.js latest features to asure performance and optimization.