The Challenge
Most developer portfolios are built to impress other developers — packed with tech jargon, animation libraries, and zero focus on the person who's actually hiring. I needed a portfolio that speaks directly to non-technical SaaS founders and proves my performance claims with measurable results.
The site had to:
- Position me as a SaaS frontend specialist, not a generic developer
- Score 90+ on PageSpeed to back up my performance guarantee
- Convert founder visitors into discovery call bookings
- Include a full admin dashboard for managing content
What I Built
A full-stack Next.js 14 application with:
- Founder-focused homepage — Hero with specific promise ("Your SaaS, Live in 14 Days"), outcome metrics instead of tech skills, comparison table (Agency vs Freelancer vs Me), free audit lead magnet, and FAQ
- Fixed-price packages page — 3 clear packages with pricing, deliverables, and CTAs — no "contact for pricing" ambiguity
- Process page — 5-step visual workflow (Discovery → Wireframes → Build → Review → Launch) with day-by-day timeline
- Blog system — Full CMS with MongoDB, markdown rendering, comments with Google auth, like system, and view tracking
- Admin dashboard — Posts CRUD, projects CRUD, comments moderation, message inbox, analytics with views chart
- SEO infrastructure — JSON-LD structured data on every page, dynamic sitemap, RSS feed, Open Graph meta, proper heading hierarchy
- Performance architecture — GSAP and Lenis loaded via requestIdleCallback, below-fold sections lazy-loaded with IntersectionObserver, critical CSS inlined at build time
Performance
Technical Decisions
- Server Components by default — Only
'use client'where interactivity is required, keeping the JS bundle minimal - Hybrid SSR/SSG — Static pages for content, server-rendered for dynamic data (blog posts, project details, admin)
- Edge-compatible auth — Middleware uses a lean auth config (no Mongoose), while API routes use the full NextAuth with MongoDB adapter
- Inline critical CSS — Custom build script extracts and inlines above-fold styles to eliminate render-blocking CSS
- AVIF/WebP images — All images served in modern formats via Next.js Image component with proper
sizesattributes
Result
A portfolio that doesn't just describe performance expertise — it demonstrates it. Every page loads fast, ranks well, and is structured to convert founder visitors into booked calls. The site itself is the strongest case study.