How I Built a Universal Footer Using Claude Code

TL;DR by Goose▾

Ingredients

• Claude Code — terminal-based AI that edits files directly in your project ($200/yr)
• Vercel — hosting platform with automatic deployments (free)
• GitHub — code repository, Vercel deploys from it (free)
• Next.js — the React framework running the site (free)
• Terminal — where Claude Code runs and makes all the changes (free)
• Screenshots — inspiration from premium automotive and minimalist restaurant sites (free)

The Problem: The Site Had No Footer

When I launched joseandgoose.com, I focused on the pages that mattered most — homepage, about, work, writing, contact. The footer was an afterthought. It didn’t exist. Every page just ended at the bottom of its content: no navigation, no social links, no way to scroll back to the top or get in touch without hitting the browser’s back button.

Footers aren’t glamorous, but they do real work. They give visitors somewhere to go when they reach the bottom of a page, surface social links without cluttering the nav, and make a site feel complete rather than abandoned. A site without a footer feels like a book that ends mid-sentence.

This was also a chance to test something: how fast could Claude Code handle pure design iteration — no database, no API routes, just component design and CSS — compared to the heavier builds that came before it?

Why Claude Code vs Claude.ai

I’d built the entire site using Claude.ai in the browser — copy code, paste into VS Code, save, run git push in Terminal, repeat. That workflow worked, but it had friction:

• Every change required manual file switching between Claude.ai and VS Code
• Claude couldn’t see the full project structure, so it guessed file paths
• Design iteration meant downloading new versions and replacing entire files
• No way to automatically commit and push changes

Claude Code runs directly in Terminal with full read/write access to your project. It can see your file tree, read your existing code, edit files in place, run commands, and commit changes to Git — all from one conversation.

The Build: One 25-Minute Session

Evening, February 27 — ~25 minutes

Pace: Relentless iteration. No file-switching friction, just pure design refinement.

Sharing the Vision

I started by dropping two screenshots into Claude Code — one from a premium automotive brand with a centered scroll-up button, one from a minimalist restaurant site with vertically stacked social icons. I described what I wanted:

• Dark green background (matching the site’s existing --forest color variable)
• Scroll-up button at the top center
• Social icons (LinkedIn + Instagram) stacked vertically
• Right-aligned navigation menu without column headers
• Contact button in place of a newsletter signup
• Keep existing branding: “Jose and Goose”, copyright, “Made with intention”

Claude read the existing CSS file to extract the exact colors already in use, then generated the full footer component and styles in one response — writing directly into the project files rather than producing code blocks to copy and paste manually.

🔧 Developer section: Footer component generation

First Iteration

The initial footer had all the elements, but the layout felt off. I sent feedback in plain language:

• “Remove the lines between footer sections — I want one solid color”
• “Move the nav menu under ‘Jose and Goose’ on the left”
• “Stack the Contact button above the social icons”

Claude Code updated both files instantly. Refresh the browser at localhost:3000 — changes were live. No file hunting in VS Code. No copy-paste. Just conversational iteration.

Design Refinement (5 Rounds)

Over the next 15 minutes, we iterated five more times. Each round was a screenshot of the live site in my browser + notes on what to adjust:

• Round 2: “Remove ‘Jose and Goose’ header above the nav, move social icons to a horizontal row next to Contact, reduce all padding — I want it minimal and compact”
• Round 3: “The nav menu, scroll-up button, and CTAs should all be on the same horizontal line, top-aligned”
• Round 4: “Put scroll-up in the center, nav on the left, CTAs on the right — all aligned horizontally”
• Round 5: “Remove the nav menu (duplicates the header), keep just scroll-up centered and CTAs on the right”
• Round 6: “The copyright dot isn’t aligned with the scroll-up arrow — use CSS Grid to center it perfectly for symmetry”

Every round: Claude Code edited the files → I refreshed localhost:3000 → took a screenshot → sent feedback. No stopping to save in VS Code. No switching windows. No manual git commits between iterations.

Deployment

When the design was right, one instruction — “push it to the live site” — kicked off the full deployment. Claude handled every git step automatically: staging the changed files, writing the commit message, and pushing to GitHub, which triggered Vercel to deploy.

🔧 Developer section: Git deployment workflow

• Ran git status and git diff to see all modified files
• Staged the changes with git add
• Wrote a descriptive commit message following the repo’s existing style
• Pushed to GitHub with git push
• Vercel detected the push and auto-deployed in ~60 seconds

Footer live at joseandgoose.com. Total time from first prompt to production: 25 minutes.

Final Output

A production-ready universal footer component deployed across all pages at joseandgoose.com with dark green branding, centered scroll-up button, social media links (LinkedIn + Instagram), contact CTA, perfectly aligned copyright line with CSS Grid symmetry, full mobile responsiveness, and automatic git deployment — built in 25 minutes by someone working entirely in Terminal with no file-switching, guided by Claude Code.

What went fast

• Design iteration (6 rounds of feedback in 15 minutes — no copy-paste friction, just screenshot → feedback → refresh)
• File coordination (Claude Code updated Footer.tsx, globals.css, layout.tsx, and removed old footers from 7 page files in parallel)
• Git deployment (one command: “push it to the live site” — Claude Code handled staging, commit message, and push)
• Color matching (Claude Code read globals.css to extract the exact --forest variable instead of guessing)

What was different from browser Claude

• No manual file editing (browser workflow: download from Claude → open VS Code → paste → save → repeat; terminal workflow: Claude edits directly)
• No path guessing (Claude Code sees your full file tree, so it knows exactly where to create app/Footer.tsx)
• No git commands (browser workflow: manually run git add, git commit, git push in Terminal; terminal workflow: say “push it” and Claude does it)
• Faster feedback loops (6 design iterations in 15 minutes vs the 3-hour homepage build — same quality, 12x faster iteration)

The biggest lesson? The same AI that built the entire site in the browser can work 7x faster when it runs in your terminal with direct file access. The design thinking is identical. The iteration speed is not. And the copyright dot is finally, perfectly, symmetrically aligned with the scroll-up arrow.