Overview
This portfolio showcases my work as a developer, designer and writer via an interactive & visually engaging experience. It brings together my projects, technical skills, certificates, achievements, published books and a glimpse into my learning journey within a unified platform.
Built around a black, white and purple color palette, it combines 3D elements, smooth animations, and responsive layouts to create an engaging browsing experience.
I've been working on this portfolio for the past year and since the beginning, I've continued refining the portfolio through UI improvements, performance optimizations, new features and regular content updates.
Demo Video - https://youtu.be/0SHrim7H4hI
Tech Stack
| Category | Technologies |
|---|---|
| Frontend | Next.js, React, TypeScript |
| Styling | Tailwind CSS |
| Animation | GSAP, Framer Motion |
| 3D | Three.js, React Three Fiber, Drei |
| Deployment | Vercel |
| Version Control | Git, GitHub |
Goal
The goal of this project was to create a portfolio that showcases my work while reflecting my personality through an engaging and intuitive user experience. I wanted the interface to feel visually consistent while remaining responsive, optimized and easy to navigate, allowing visitors to explore my projects, writings & achievements naturally.
Design & Development Journey
Foundation
Established the portfolio's structure, visual identity and core sections, creating a solid foundation for future development.
Expansion
Added new sections for projects, blogs, books, achievements, certificates and other content to showcase different aspects of my work.
Refinement
Improved layouts, animations, typography and overall consistency to create a smoother and more cohesive user experience.
Optimization
Focused on performance and responsiveness by optimizing assets, refining interactions and ensuring a smooth experience across different devices.
Continuous Improvements
The portfolio continues to evolve through new features, content updates, UI refinements and ongoing technical improvements.
Key Challenges
Balancing 3D Models and Animations
One of the biggest challenges was using both Three.js & GSAP on a single-page website. I had to make sure that both the animations and 3D models work smoothly and in coordination. They should look good without affecting the browsing experience.
Optimizing for Mobile (Smaller Screens)
Making the portfolio work well on mobile (smaller screens) took a lot of testing and improvements. I optimized the 3D models, animations and layouts to make sure the website stayed smooth and responsive on different screen sizes.
Building Custom Components
Instead of using pre-built components, I built several custom components from scratch, including the music player, draggable sticky notes, developer terminal, tech icon globe & 3D book models + carousel (most difficult out of all). Building these components helped give the portfolio its own unique feel & my personal touch.
Reflection
This portfolio has been one of my biggest learning experiences. It taught me that creating a good user experience is an ongoing process. It gave me the opportunity to experiment with new ideas, build custom components and improve my skills in frontend development, UI design, 3D graphics and performance optimization. As I continue learning, I'll continue refining and expanding the portfolio✌🏻😊🤍
Top comments (0)