Portfolio

Inspiration

As a self-taught web developer and product builder, I wanted a platform to reflect my journey, showcase my work, and present my skills in a professional yet personal way. This portfolio was born out of a desire to create a space that represents both my technical ability and design sensibility.

What it does

The portfolio highlights my projects, skills, resume, and contact information. It allows visitors to explore my development experience, understand my background, and get in touch easily—all through a smooth, responsive interface.

How we built it

I built this portfolio using React.js, Next.js, and TypeScript, focusing on modular, reusable components. Styling is handled by Tailwind CSS, animations by Framer Motion, and 3D visuals by Three.js. For contact functionality, I integrated EmailJS to send emails directly from the site. The project is deployed on Vercel for fast, reliable hosting.

Challenges we ran into

The biggest challenge was balancing minimal design with rich interactivity. Integrating Three.js smoothly with Next.js and ensuring consistent performance across devices took effort. Optimizing for accessibility and fine-tuning animations were also key areas of focus.

Accomplishments that we're proud of

I'm proud of the clean, intuitive design and how well it reflects my personality and skills. The successful integration of animations, 3D elements, and form functionality makes it feel professional and engaging. Building it entirely from scratch with modern tools was incredibly rewarding.

What we learned

I deepened my understanding of Next.js architecture, animation workflows, and responsive design. I also improved my skills in integrating third-party services like EmailJS and deploying production-ready apps using Vercel.

What's next for Portfolio

I plan to add a blog section to share technical write-ups and project breakdowns, implement dark mode, and explore serverless functions to enable visitor interactions like project feedback, analytics, and resume downloads.

Built With

• accessibility
• css-frameworks/libraries:-next.js
• eslint
• figma
• framer
• framer-motion
• github
• html
• javascript
• next.js
• prettier-other:-responsive-design
• react.js
• seo-optimization
• tailwind-css
• three.js
• three.js-platforms/deployment:-vercel-apis:-emailjs-(for-contact-form-functionality)-tools:-git
• vs-code