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/impactdive into deep case studies./docs,/content, and/videoshowcase writing, tutorials, and launches./socialaggregates live channels and embeds./about+/contactgive 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.tsso 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
- WindSurf for rapid layout exploration.
- OpenClaw for editing, linting, testing, and running the Firebase Function pipeline.
- GitHub Actions run
npm ci,npm run build, andfirebase deployon every push tomain. - 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/videoroutes that act like a media kit. /socialhub 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.









