Personal Portfolio

Web Development

A modern, responsive portfolio website built with Next.js 15 and Three.js. Features an interactive 3D background, custom component system, and optimized performance for showcasing professional work and projects.

Next.js 15TypeScriptThree.jsTailwindCSSReact@react-three/fiber

Challenge

Create a unique, memorable portfolio that stands out while maintaining professional credibility and excellent performance across all devices.

Solution

Implemented a Three.js animated background with custom Silk component, built a reusable design system with SpotlightCard interactions, and optimized for both visual appeal and technical performance.

Results & Impact

Fast loading times with optimized Three.js bundle

Responsive design working across all devices

Professional presentation of technical skills

Interactive elements enhancing user engagement

Key Features

  • 3D animated background using Three.js

  • Custom SpotlightCard component with hover effects

  • Centralized Text component system for consistency

  • Responsive design with mobile-first approach

  • Dark theme with gradient text effects

  • FontAwesome icon integration

Technical Implementation

  • Next.js 15 App Router architecture

  • TypeScript for type safety

  • TailwindCSS 4.0 with CSS variables

  • Three.js with @react-three/fiber for 3D graphics

  • Custom utility functions with clsx and tailwind-merge

  • Optimized font loading with next/font