Back to Case Studies
Live Project
Full-Stack Portfolio Platform
Building a modern, high-performance portfolio with custom CMS, demonstrating that data engineers can also ship beautiful web applications.
100
Lighthouse Score
<1s
Load Time
SSR
Server Rendering
A+
SEO Grade
The Challenge
As a data engineer looking to transition to top tech companies, I needed more than just a resume. I needed a platform that would:
- Showcase technical depth - Not just list skills, but demonstrate them through the site itself
- Host detailed case studies - With code samples, architecture diagrams, and real metrics
- Publish technical blogs - To share knowledge and improve discoverability
- Be maintainable - Easy to update without touching code every time
- Load fast everywhere - Performance is a feature, especially for technical audiences
Technology Stack
Frontend
Next.js 14- App Router with Server Components
TypeScript- Type safety and better DX
Tailwind CSS- Utility-first styling
Framer Motion- Smooth animations
Backend & Infrastructure
Supabase- PostgreSQL + Auth + Storage
Vercel- Edge deployment & CDN
MDX- Markdown with React components
API Routes- Serverless functions
Architecture Overview
┌─────────────────────────────────────────────────────────────────────────┐
│ VISITORS │
└────────────────────────────────┬────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────────────┐
│ VERCEL EDGE NETWORK │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ CDN │ │ Edge │ │ Static │ │ ISR │ │
│ │ Caching │ │ Functions │ │ Assets │ │ Revalidate │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ └─────────────┘ │
└────────────────────────────────┬────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────────────┐
│ NEXT.JS APPLICATION │
│ │
│ ┌──────────────────────┐ ┌──────────────────────┐ │
│ │ Server Components │ │ Client Components │ │
│ │ • Blog pages │ │ • Animations │ │
│ │ • Case studies │ │ • Theme toggle │ │
│ │ • Static pages │ │ • Interactive UI │ │
│ └──────────┬───────────┘ └──────────────────────┘ │
│ │ │
│ ▼ │
│ ┌──────────────────────┐ ┌──────────────────────┐ │
│ │ API Routes │ │ Admin Dashboard │ │
│ │ • /api/articles │ │ • CRUD operations │ │
│ │ • /api/contact │ │ • Image upload │ │
│ │ • /api/views │ │ • Preview mode │ │
│ └──────────┬───────────┘ └──────────────────────┘ │
│ │ │
└─────────────┼────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────────────┐
│ SUPABASE │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ PostgreSQL │ │ Storage │ │ Auth │ │
│ │ • articles │ │ • images │ │ • admin │ │
│ │ • views │ │ • covers │ │ • sessions │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
└─────────────────────────────────────────────────────────────────────────┘Key Features Built
Custom CMS
Full admin dashboard with markdown editor, image uploads, tagging, and draft/publish workflow.
ReactSupabaseMDX
Dark/Light Mode
System-aware theme with smooth transitions and persistent preference storage.
CSS VariablesLocalStorageTailwind
Blog System
MDX-powered blog with syntax highlighting, reading time, related posts, and SEO optimization.
MDXnext-mdx-remoterehype
Contact Form
Serverless form handling with validation, rate limiting, and email notifications.
API RoutesZodResend
Responsive Design
Mobile-first approach with fluid typography, adaptive layouts, and touch-friendly interactions.
TailwindCSS GridFlexbox
Performance Optimized
Image optimization, code splitting, font subsetting, and aggressive caching strategies.
Next/ImageDynamic ImportsISR
Performance Results
100
Performance
100
Accessibility
100
Best Practices
100
SEO
Optimization Techniques
Server-side rendering for initial page loads
Static generation for blog posts with ISR
Image optimization with next/image
Font subsetting and display swap
Code splitting with dynamic imports
Edge caching via Vercel CDN
Minimal JavaScript bundle size
CSS-in-JS with zero runtime (Tailwind)
Admin CMS Features
Admin Dashboard Features ======================== 📝 Article Management ├── Create/Edit with live preview ├── Markdown toolbar (bold, italic, code, links) ├── Auto-save every 30 seconds ├── Draft/Published workflow ├── Featured article toggle └── Reading time calculation 🖼️ Media Management ├── Drag & drop image upload ├── Automatic image optimization ├── Cover image positioning └── Storage via Supabase 🏷️ Organization ├── Tag management ├── Search & filter articles ├── Sort by date/status └── Quick stats dashboard 🔐 Security ├── Password-protected admin ├── API route authentication ├── Rate limiting └── Input sanitization
Lessons Learned
What Worked Well
- • Next.js App Router provides excellent DX and performance out of the box
- • Supabase is perfect for MVPs - auth, database, and storage in one place
- • Tailwind + Framer Motion combination enables rapid UI development
- • Server Components reduce client-side JavaScript significantly
Challenges Faced
- • MDX rendering quirks required careful content formatting
- • Dark mode with CSS variables needed system color-scheme handling
- • Image optimization strategy for user-uploaded content
- • Balancing animations with performance on mobile devices
Future Improvements
- • Add view count analytics per article
- • Implement newsletter subscription
- • Add comment system for blog posts
- • Create RSS feed for blog syndication