Shipping the New lkilpatrick.com Portfolio with WindSurf, OpenClaw, and Next.js

Shipping the New lkilpatrick.com Portfolio with WindSurf, OpenClaw, and Next.js

After letting my old portfolio sit for too long, I rebuilt lkilpatrick.com the same way I ship most projects today: design fast, automate everything, and publish with zero manual steps. The result is a multi-section Next.js site with dedicated routes for About, Work, Projects, Docs, Content, Video, Social, and Impact—each statically generated and blazing fast on Firebase Hosting.

Why Multi-Page Instead of a Single Scroll

The original site was a single long page. The new structure gives every audience its own route:

  • / highlights availability, stats, and featured projects.
  • /work, /projects, and /impact dive into deep case studies.
  • /docs, /content, and /video showcase writing, tutorials, and launches.
  • /social aggregates live channels and embeds.
  • /about + /contact give context without exposing my inbox.

Next.js App Router + Static Site Generation (SSG) make it easy to prerender each route while keeping client-side navigation instant.

Tech Stack Overview

  • React + Next.js 16 — App Router, Server Components, Turbopack dev server.
  • TypeScript data layer — Everything from stats to videos lives in app/data/portfolio.ts so updates are structured data edits, not template rewrites.
  • WindSurf — I blocked out page layouts (hero, stats grid, project rails) visually before exporting to React to keep spacing + typography tight.
  • OpenClaw — Handles editing, linting, npm run dev, secrets, Firebase Functions, and deployment automation. Every tweak (like hiding my email) happened through OpenClaw commands.
  • Firebase Hosting + Functions — GitHub Actions build Next.js, deploy static assets to Firebase Hosting, and push the contact-form Cloud Function on every merge.

Building the Sections

Each top-level route shares a common layout but owns its own content slice:

  • Home — hero, availability badge, metrics, featured “builder” systems.
  • Work + Projects — seven detailed case studies covering AI agents, developer portals, Flutter apps, and audience-building experiments.
  • Docs / Content / Video — curated feeds of articles, launch videos, and documentation highlights.
  • Social — embeds for YouTube, TikTok, Instagram, and local video reels.
  • About — personal story, availability, and a contact modal routed through Firebase Functions.

Because every page is statically rendered, navigation is instant, SEO stays healthy, and it’s painless to keep sections updated independently.

Automation Workflow

  1. WindSurf for rapid layout exploration.
  2. OpenClaw for editing, linting, testing, and running the Firebase Function pipeline.
  3. GitHub Actions run npm ci, npm run build, and firebase deploy on every push to main.
  4. Firebase Hosting serves assets globally with zero maintenance.

What’s Live Today

  • Hero + stat cards with real availability and quick metrics.
  • Case-study grids for AI automation, DevEx platforms, IP systems, and growth experiments.
  • Dedicated /docs, /content, and /video routes that act like a media kit.
  • /social hub that pulls in active channels.
  • Contact modal wired to Firebase Functions so my email stays private.

What’s Next

  • Add filters and search inside /projects + /content.
  • Hook in a lightweight CMS or Supabase table so updates can happen via forms.
  • Surface Core Web Vitals per route so I get alerted when anything slows down.

If you’re curious about the stack, want to collaborate, or need help thinking through your own portfolio rebuild, ping me through the contact form—OpenClaw is standing by.