Overview
This portfolio is a creative, interactive showcase of my work as a developer, designer and writer. It brings together my projects, technical skills, certificates, achievements, published books, designs and a glimpse into my learning journey within a single platform.
I wanted to build something that felt more personal than a traditional portfolio, so I experimented with 3D elements, smooth animations, interactive components and a black, white and purple visual style to create an engaging browsing experience.
I've been working on this portfolio for over a year, and since the beginning, I've continued refining it through UI improvements, performance optimizations, new features and regular content updates.
Project Details
| Role | Designer & Developer |
| Type | Personal Portfolio |
| Timeline | 1+ year |
| Frontend | Next.js, React, TypeScript |
| Styling | Tailwind CSS |
| Animation | GSAP, Framer Motion |
| 3D | Three.js, React Three Fiber, Drei |
| Deployment | Vercel |
Demo Video: https://youtu.be/0SHrim7H4hI
The Goal
The goal of this project was to create a portfolio that showcases my work while also reflecting my personality through an engaging and intuitive user experience.
I wanted the portfolio to feel more personal and interactive than a traditional portfolio while still making it easy for visitors to explore my work, skills, achievements and other content.
Since the portfolio brings together different types of content, I also wanted the experience to feel visually consistent, responsive and easy to navigate across different devices.
Rather than treating the portfolio as a one-time project, I wanted to keep improving it over time by experimenting with new ideas, adding new features and refining the existing experience.
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 |
Design Direction
I wanted the visual style of the portfolio to feel bold, interactive and personal rather than following a traditional portfolio layout.
I built the visual identity around a black, white and purple color palette, using contrast to create a strong visual hierarchy across different sections.
The interface combines 3D elements, animations, glowing details, grid backgrounds and interactive components to make the experience more engaging while keeping the content easy to explore.
I also focused on keeping the visual style consistent across the different sections, while making sure the layouts remain responsive across screen sizes.
Visual Direction
- Black — Main background and overall base of the interface
- White — Headings, text and important content
- Purple — Accents, text, highlights and interactive elements
- 3D Elements — Used to add depth and personality
- Animations — Used throughout the interface to make interactions feel more dynamic
- Responsive Layouts — Designed to work across different screen sizes
The goal was not to make every section look the same, but to make the different parts of the portfolio feel like they belong to the same experience.
Structuring The Experience
Since the portfolio brings together different types of content, I wanted to structure it in a way that made everything easy to find without making the experience feel complicated.
I divided the portfolio into different sections based on the type of content being showcased, including About, Experience, Tech Stack, Projects, Achievements, Certificates, Books, Blogs and Designs.
The homepage acts as the main entry point, while dedicated pages and sections allow visitors to explore specific areas in more detail.
I also kept the navigation and content structure simple so visitors can navigate between sections naturally without having to search through too much information.
Portfolio Architecture
Portfolio
│
├── Home
│ ├── Hero
│ ├── About
│ ├── Experience
│ ├── Projects
│ ├── Tech Stack
│ ├── Achievements
│ └── Books
│
├── Projects
├── Certificates
├── Books
├── Blogs
└── Designs
The structure evolved as I continued adding new content and features to the portfolio, so the portfolio architecture was refined alongside the development of the website.
Designing The Interactions
I wanted the portfolio to feel interactive rather than being just a collection of static sections.
I experimented with different interactions and custom components throughout the website, including a music player, draggable sticky notes, developer terminal, interactive tech stack, 3D book models and a book carousel.
I also added interactions to different sections to enhance the user experience while keeping the main content easy to access.
Interactive Elements
- Music Player — Playable piano covers while browsing the portfolio.
- Developer Terminal — An interactive terminal-style component.
- Sticky Notes — Draggable notes that add a more playful element to the interface.
- Tech Stack — An interactive visual representation of the technologies I use.
- 3D Books — 3D book models with an interactive carousel.
- Projects, Blogs, Designs & Certificates — Dedicated pages with ways to explore the content more easily.
These interactions became an important part of the portfolio because they allowed me to experiment with different ways of presenting information while making the experience feel more personal.
From Idea To Experience
This portfolio started as a basic Next.js project and gradually evolved into a much larger interactive experience.
Instead of building everything at once, I continued adding new sections, features and improvements over time based on what I wanted the portfolio to showcase.
How It Evolved
Foundation
Started with the initial portfolio setup and gradually built the core sections and components.
Expansion
Added projects, certificates, books, achievements, blogs, designs and other content as the portfolio grew.
Refinement
Improved the UI, animations, layouts and content across different sections.
Optimization
Worked on image optimization, 3D model performance, mobile responsiveness and other performance-related improvements.
Continuous Improvements
Continued updating the portfolio with new content, UI changes, features and improvements as my work and skills evolved.
The portfolio is still an ongoing project, and I continue to refine it as I learn and build new things.
Challenges & Solutions
Building the portfolio over time came with several challenges, especially when combining 3D elements, animations and interactive components in the same experience.
Balancing 3D Models & Animations
One of the biggest challenges was using Three.js and GSAP together while making sure the 3D models and animations worked smoothly without affecting the browsing experience.
I had to experiment with the animations and interactions to make sure they worked well together.
Optimizing for Mobile
Making the portfolio work smoothly across different screen sizes required a lot of testing and improvements.
I optimized the 3D models, animations and layouts to make the experience more responsive and suitable for smaller screens.
Building Custom Components
Another challenge was creating several interactive components from scratch, including the music player, draggable sticky notes, developer terminal, interactive tech stack, 3D book models and book carousel.
Building these components gave me the opportunity to experiment with different interactions while also improving my frontend, UI and 3D development skills.
What I Learned
These challenges taught me that adding visual and interactive elements is only one part of the process. They also need to work smoothly together, remain responsive and still provide a good browsing experience.
Final Experience & Reflection
After continuously working on the portfolio, it has become more than just a place to showcase my work. It has become a space where I can experiment with frontend development, UI design, 3D graphics, animations and interactive experiences.
Working on this project for over a year has taught me that creating a good user experience is an ongoing process. As I continue learning and building new things, I also continue finding new ways to improve and expand the portfolio.
It has given me the opportunity to experiment with new ideas, build custom components and improve my skills across different areas of development and design.
The portfolio is still evolving, and I plan to keep refining it as my work, skills and ideas continue to grow.
Thanks for reading!😊🤍
Top comments (0)