Description
Inspiration &
Vision
Why we started.
My portfolio is a digital representation of my identity. I wanted to break away from standard templates and build a space where code and creativity coexist.
A key element of this identity is the Interactive Profile Sidebar (shown right). This component doesn't just navigate; it lives. With complex entrance animations and smooth transitions, it guides users to the About page while maintaining context, serving as a constant, grounding visual anchor throughout the site.
What it is
The solution.
This website serves as a central hub for my professional work. The CS Projects section (shown below) utilizes a clean, card-based layout to present technical case studies, allowing users to filter by category and view live status updates.
Simultaneously, the Graphics Portfolio (featured in the banner) uses a custom masonry grid to showcase artistic works, proving that technical structure can support fluid, creative expression.
How it works
Under the hood.
Challenges
Roadblocks we faced.
The most significant challenge was balancing high-end aesthetics with optimal performance. Implementing heavy animations often leads to layout shifts or jank.
I solved this by using IntersectionObserver for efficient scroll detection and optimizing image loading strategies with next/image. Another challenge was creating a unified design language that worked for both technical case studies and visual art galleries.
Takeaways
Lessons learned.
Building this portfolio reinforced the importance of component reusability and disciplined state management in React. I learned deeply about the Next.js App Router paradigm and how to structure a large-scale application for long-term maintainability.