// the problem
Why This Needed to Exist
Generic portfolio templates don't communicate the specific identity of a cybersecurity/networking professional. Most developer portfolios look the same — light backgrounds, card grids, and basic page transitions. I needed something that would immediately signal to hiring managers that I live and breathe infrastructure and security, while also demonstrating frontend development capabilities.
// what i built
The Solution
I designed and built a portfolio from scratch with a dark, terminal-inspired aesthetic using Next.js 16, Framer Motion, and Tailwind CSS. The site features an interactive terminal, animated network graph backgrounds, glassmorphism cards, and a scalable project system where adding a new project is just adding one object to a data file. Every animation respects prefers-reduced-motion.
// key challenges
Problems I Solved
Performance vs Visual Complexity
Heavy animations caused frame drops on mobile. I optimized by using CSS transforms over layout properties, implementing intersection observers to only animate visible elements, and deferring the canvas-based particle system to after first contentful paint.
Hydration Mismatches with Client Components
Components using browser-only APIs (touch detection, window dimensions) caused SSR/client mismatches. I implemented a consistent isMounted pattern that renders null on server and initial client hydration, then reveals content after mount.
// outcomes
What I Learned
The portfolio is live, scores 95+ on all Lighthouse categories, and serves as both a showcase and a standalone portfolio project. The build process itself — documented through phases — demonstrates project management, design thinking, and engineering rigor.
// tech stack
Tools & How I Used Them
Next.js
App Router with static generation, dynamic routes, and metadata API
Framer Motion
Page transitions, scroll animations, and interactive hover effects
Tailwind CSS
Custom design token system with dark theme and glassmorphism
TypeScript
Full type safety across components, data models, and utilities
Vercel
Edge deployment with CI/CD from GitHub and analytics
// build timeline
Development Phases
Project Setup
Initialized Next.js with TypeScript, configured Tailwind CSS with custom cybersecurity theme, and deployed to Vercel.
Design & Layout
Established the dark cinematic aesthetic with custom color palette, typography system, and glassmorphism components.
Components
Built each component individually — Navbar, Hero, ProjectCard, Timeline, Terminal Block, and Contact Form.
Animations
Added Framer Motion animations: staggered text reveals, page transitions, 3D card tilts, and the loading screen.
Polish & Deploy
Optimized Lighthouse scores, finalized responsive design, and deployed the production build to Vercel.
// reflection
"Building this portfolio taught me that design details matter as much as technical skills. The biggest lesson was balancing visual complexity with performance — every animation needed to feel intentional, not just flashy. If I built it again, I'd start with a component library first."