7 Days: From Static HTML to Production Next.js App

Portfolio Rebuild: Shipped in One Week

We took a static HTML portfolio, migrated it to Next.js 15 with a full CMS backend, built animated project pages, and shipped to production. Total elapsed time: 7 days.

Not casual tinkering. Focused, deliberate development split across two sprints. October 4th to October 11th. One week that rebuilt our web presence.

Here is how we did it, and why shipping fast doesn't mean shipping sloppy.

Phase 1: The Foundation (October 4th)

The first sprint was architecture. We weren't moving files around—we were building the foundation for everything 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 interesting.

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 proved the architecture worked. We needed to move fast, but the Phase 1 foundation meant we could ship complex features without cutting corners.

The Technical Stack

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

1. 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.

1. 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.

1. Progressive Enhancement

Basic content worked immediately. Animations enhanced the experience but didn't block rendering. Videos loaded asynchronously. Every feature was additive, never blocking.

1. 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.