This Portfolio
Immersive developer portfolio with a 3D dome gallery, scroll-driven animations, and an editorial bronze design system.
Overview
A personal engineering portfolio designed to showcase production software, engineering case studies, technical writing, and professional experience through a modern, interactive, and performance-focused user experience.
Built entirely from scratch — 3D canvas, animation system, content architecture, and design.
The Problem
Traditional portfolios provide only brief project summaries, making it difficult for recruiters and collaborators to understand the engineering process, technical depth, and problem-solving approach behind each project.
Why I Built It
To create a portfolio that emphasizes engineering thinking through detailed project case studies, clean design, and technical storytelling — presenting work the way engineering companies like Stripe and Vercel present their own products.
Objectives
- Showcase engineering depth through full case studies
- Create an immersive, memorable first impression
- Build a design system that scales across all content types
- Achieve excellent performance despite rich interactivity
- Make the portfolio itself a project worth showcasing
My Role
Designed the entire UI/UX, developed all frontend code, implemented the 3D dome gallery, built the animation system, created reusable component library, and architected the content system.
Architecture
Next.js App Router with React Server Components for optimal performance. Three.js powers the 3D dome gallery on the homepage. Framer Motion handles complex animations. Lenis provides smooth scroll behavior. CSS custom properties implement the design token system across light and dark modes.
Tech Stack
Framework
3D & Animation
Design System
Deployment
Engineering Challenges
3D Performance
Rendering a sphere of images in Three.js while maintaining smooth 60fps scroll required careful geometry optimization and texture management.
Light/Dark Mode Consistency
Maintaining a coherent bronze editorial aesthetic across both modes required a carefully designed token system rather than simple color inversions.
Scroll System Conflicts
Lenis smooth scroll conflicted with LinkedIn iframe embeds, the 3D gallery touch handling, and various overflow behaviors — required systematic debugging.
Development Process
- 01Defined design language — monochrome + bronze editorial aesthetic
- 02Built 3D dome gallery as the hero interactive element
- 03Developed navigation and routing architecture
- 04Created the journey timeline section with photo galleries
- 05Built all subpages with consistent design system
- 06Designed and implemented project case study template
- 07Added marquee ticker, pixel scramble text, and tilt card stack
- 08Tuned performance, scroll behavior, and accessibility
Key Features
3D Dome Gallery
Interactive sphere of photos rendered in Three.js — drag to rotate, click to enlarge.
Hover-Dial Projects
Slide cursor left/right to scrub through projects with velocity-based fan spread.
Pixel Scramble Text
Character-by-character scramble animation on hero headings using intersection observer.
Journey Timeline
Full visual timeline of events with photo galleries and story modals.
Spotlight Project List
Hover-activated spotlight rows for the projects page — non-hovered rows dim out.
Implementation Details
The site uses Next.js App Router with a clear separation between Server and Client Components. The 3D gallery is isolated in a client component with a server-rendered fallback. CSS custom properties handle the complete design token system. All animations respect prefers-reduced-motion.
Future Improvements
- Add WebGL shader effects to the dome gallery
- Build a blog section for technical writing
- Add cursor follower effects
- Animate page transitions with View Transitions API
Lessons Learned
Building your portfolio is one of the best ways to push your own technical boundaries
Design systems pay off immediately — consistent tokens make every new component faster
The intersection of design and engineering is where the most interesting work happens