Portfolio Website
A responsive portfolio that shows off my skills and projects.
Overview
The Website startet as a simple portfolio and then got more advanced with motion-first experience with glassmorphic UI, scroll-linked animations, and thoughtful microinteractions. The site balances visual richness with accessibility and performance.
Tech Stack
The Challenge
Most portfolios feel like static resumes. I wanted something that could demonstrate technical skills through execution itself and not just describe them. The challenge was creating a memorable experience without sacrificing maintainability, performance, or accessibility.
The Solution
I built a fully data-driven architecture where content is stored in typed TypeScript files, separate from presentation. This let me iterate rapidly on design while keeping content updates simple. The site evolved through several redesigns, adding sophisticated motion systems, glassmorphic effects, and interactive elements. Each iteration taught me something about balancing aesthetics with usability.
System Architecture
Built on Next.js 15 with App Router for optimal performance. Framer Motion powers complex animations, scroll-triggered reveals, and page transitions. The design system uses CSS custom properties for theming with a Deep Navy background, Vibrant Orange accents, and Neon Blue highlights. Glassmorphism and backdrop filters add depth. All animations respect prefers-reduced-motion for accessibility.
Key Features
Motion-First Design
Scroll-linked parallax, orchestrated section reveals, and physics-based interactions create a living interface that responds naturally to user input.
Glassmorphic UI
Layered transparency effects with backdrop blur, subtle borders, and controlled opacity for depth without visual clutter.
Ambient Background
Canvas-based animated blobs that react to mouse movement and scroll position, adding atmosphere while staying performant.
Accessible by Design
Semantic HTML, keyboard navigation, ARIA labels, and reduced-motion support ensure the site works for everyone.
Data-Driven Content
Projects, skills, and experience are defined in typed data files, making updates straightforward without touching components.
Lightbox Gallery
Fullscreen image viewing with keyboard navigation, thumbnails, and smooth transitions for showcasing project visuals.
Development Timeline
Concept & Planning
Defining the aesthetic and technical requirements.
Initial Build and Premium Redesign
Set up Next.js architecture with basic components and data structure. Overhauled with Vibrant Orange / Neon Blue palette, glassmorphism, and scroll animations.
Motion Refinement
Added ambient background, physics interactions, and microanimations throughout.
Polish & Accessibility
Improved motion quality, added reduced-motion support, and refined responsive behavior.