7 Days: From Static HTML to Production Next.js App
Here's what we pulled off: took a static HTML portfolio, migrated it to Next.js 15 with a full CMS backend, built rich animated project pages, and shipped to production. Total elapsed time? 7 days.
We Shipped a Complete Portfolio Rebuild in One Week
Here's what we pulled off: took a static HTML portfolio, migrated it to Next.js 15 with a full CMS backend, built rich animated project pages, and shipped to production. Total elapsed time? 7 days.
Not 7 days of casual tinkering. 7 days of focused, deliberate development work split across two intense sprints. October 4th to October 11th. One week that transformed our entire web presence.
This is the story of how we did it, what we learned, and why shipping fast doesn't mean shipping sloppy.
Phase 1: The Foundation (October 4th)
The first sprint was all about architecture. We weren't just moving files around—we were building the foundation for everything that would come after.
What we shipped:
Complete Next.js 15 migration with App Router
Atomic Design component architecture
TypeScript throughout (strict mode, no compromises)
Tailwind CSS theming system
44 files, 20+ reusable components
Production-ready deployment
We made a critical decision early: build it right from day one. No "we'll refactor later" compromises. Atomic Design from the start. Proper TypeScript interfaces. Component composition patterns that would scale.
The payoff? When Phase 2 hit, we had solid building blocks ready to go.
Phase 2: Rich Experiences (October 11th)
One week later, we shipped the second phase. This is where things got exciting.
New capabilities:
Dynamic project pages with Sanity CMS integration
Video backgrounds with intersection observers
Smooth scroll animations (60fps, monitored)
Benefits showcase with icon system
Interactive feature cards
Responsive layouts across all breakpoints
The numbers:
3,972 lines of code added
6 new components built
4 custom React hooks
Zero performance regressions
This phase was about proving the architecture worked. We needed to move fast, but the foundation we built in Phase 1 meant we could ship complex features without cutting corners.
The Technical Stack
We went modern, but practical:
Frontend:
Next.js 15 (App Router, React Server Components)
TypeScript 5.x (strict mode)
Tailwind CSS (custom design tokens)
Framer Motion (60fps animations)
Content:
Sanity CMS (structured content, image optimization)
GROQ queries (efficient data fetching)
Architecture:
Atomic Design (atoms → molecules → organisms → pages)
Server-first rendering (performance by default)
Component composition (reusability without duplication)
Every choice was deliberate. Every tool earned its place.
What Made This Possible
- Clear Architecture Decisions
We didn't debate patterns mid-sprint. Atomic Design, TypeScript strict mode, server components—all decided before we wrote code. When you know your constraints, you move faster.
- Component Reusability
The ProjectCard component we built in Phase 1? Used across 3 different contexts in Phase 2 without modification. The BenefitCard? Composed from atoms we already had. This is why architecture matters.
- Progressive Enhancement
Basic content worked immediately. Animations enhanced the experience but didn't block rendering. Videos loaded asynchronously. Every feature was additive, never blocking.
- Performance as a Feature
We monitored bundle sizes, animation frame rates, and accessibility scores throughout. Final bundle: <200KB. Frame rate: 60fps sustained. Accessibility: WCAG 2.1 AA compliant. Performance wasn't an afterthought—it was a requirement.
The Lessons
Ship in phases, not all-at-once.
Two focused sprints beat one marathon push. Each phase had clear goals, shipped independently, and built on the previous foundation.
Architecture compounds.
The time we spent on Atomic Design in Phase 1 paid off 10x in Phase 2. Good patterns make fast iteration possible.
Constraints accelerate.
7 days forced us to focus. No feature bloat. No "nice-to-haves" that distract from core value. Tight timelines can be clarifying.
Modern tools matter.
Next.js 15's App Router, Sanity's structured content, Tailwind's utility-first CSS—these tools let us move faster without sacrificing quality. The ecosystem has matured.
What's Next
This portfolio isn't done—it's a platform. Now we have:
A CMS that lets us add projects without touching code
Components we can remix into new experiences
A performance budget we can maintain
A foundation that scales with our ambition
The next phase? AI automation showcases, interactive demos, maybe even a blog powered by the same CMS. The infrastructure is ready. Now we can experiment freely.
The Real Win
Here's what matters most: we proved we can ship fast without sacrificing craft. 7 days. Production quality. Zero shortcuts that would haunt us later.
That's the energy we're bringing to everything we build. Fast, focused, and done right.
