Developer Portfolio Website

Project Overview

This portfolio website represents the culmination of my experience as a full-stack developer. Instead of using a template, I chose to build everything from scratch—a decision that allowed me to showcase my skills while creating something truly unique.

The goal was simple: create a portfolio that not only looks professional but also demonstrates technical depth through its implementation.

Key Features

🎨 Multi-Theme Architecture

One of the standout features is the ability to switch between 35+ DaisyUI themes instantly. Each theme automatically adjusts:

• All color schemes (backgrounds, text, accents)
• Photo filters to match light/dark modes
• Component states and hover effects
• Border radius and depth effects

⚡ Performance Optimization

Built with performance as a priority:

• Next.js Image optimization for all assets
• Server Components for reduced JavaScript
• Static site generation for instant loads
• Efficient CSS with Tailwind CSS 4

🎬 Smooth Animations

GSAP with ScrollTrigger powers all animations:

• Scroll-triggered section reveals
• Staggered card animations
• Infinite marquee for current learning topics
• Respects prefers-reduced-motion setting

📱 Responsive Design

Every component adapts gracefully from mobile to ultra-wide displays. The navigation transforms into a drawer on mobile, and grid layouts adjust intelligently.

Technical Implementation

Architecture

The project follows Next.js App Router patterns with clear separation:

• Server Components: Data fetching and static content
• Client Components: Interactive elements and animations
• Shared Components: Reusable UI pieces (buttons, cards, modals)

Styling Approach

All styling uses DaisyUI semantic classes (bg-primary, text-base-content) combined with Tailwind utilities. This enables:

• Automatic theme adaptation
• No custom CSS needed
• Consistent design system
• Easy maintainability

Content Management

Content is managed through TypeScript files for type safety, with an admin panel built for future dynamic content via Firebase.

Challenges Solved

Infinite Marquee

The "Currently Learning" section features a mathematically correct infinite scroll. The solution measures actual content width, dynamically duplicates content to fill the viewport, and animates by the exact measured distance—not percentages.

Theme-Aware Photos

Profile photos needed to look good across all 35+ themes. Custom CSS filters were implemented for each theme type—dark themes reduce brightness and increase contrast, while light themes add subtle saturation.

Results

• Lighthouse Performance Score: 95+
• First Contentful Paint: Under 1s
• Total Bundle Size: Optimized with code splitting
• Accessibility Score: 100

Future Enhancements

• MDX support for blog code highlighting
• Interactive project demos
• Real-time visitor analytics dashboard
• Dark mode for admin panel