Skip to content

migrate to Next.js + TypeScript + React#2

Open
undeemed wants to merge 1 commit into
mainfrom
feat/nextjs-migration
Open

migrate to Next.js + TypeScript + React#2
undeemed wants to merge 1 commit into
mainfrom
feat/nextjs-migration

Conversation

@undeemed
Copy link
Copy Markdown
Member

@undeemed undeemed commented May 6, 2026

Summary

Full migration from static HTML/CSS/JS to Next.js 15 App Router + TypeScript + React 19. Same four pages, same visuals, same GSAP animations — now type-safe, statically prerendered, with proper component reuse.

What's in this PR

App Router routes (all server components, prerendered to static HTML at build time):

  • app/page.tsx/ 42nights agency landing
  • app/recon/page.tsx/recon platform page (with the perimeter SVG diagram + glass overlay)
  • app/pulse/page.tsx/pulse GTM cockpit (lime theme)
  • app/helm/page.tsx/helm portfolio cockpit (blue theme)

Shared components:

  • components/Nav.tsx — handles all four pages with the right links and brand mark per page
  • components/Footer.tsxstudio vs product variants
  • components/Marquee.tsx — flat span sequence so flex gap works
  • components/Terminal.tsx — generic; takes a lines prop array of { prompt, cmd | out, outClass? }
  • components/RadarMark.tsx — the radar SVG icon

GSAP:

  • components/GsapClient.tsx'use client'. The full main.js logic, ported to a single useEffect keyed to pathname. On route change, all ScrollTriggers are killed and re-initialized; pointermove listeners on the spotlight are removed; the marquee tween is killed.
  • gsap installed as an npm dep (was a CDN script before)

Theming:

  • body[data-theme="helm"][data-theme="helm"] in CSS so any wrapper element can act as the theme root
  • Each page wraps content in <div data-theme="agency|recon|helm"> — CSS variables cascade through descendants
  • rm-progress and a couple other accent gradients changed from hardcoded lime to --accent/--accent-glow so they auto-theme

Removed:

  • index.html, recon.html, pulse.html, helm.html, main.js, styles.css, vercel.json — all replaced by the Next.js project

Build

```
✓ Compiled successfully in 1.6s
✓ Generating static pages (7/7)
Route Size First Load JS
○ / 2.7 kB 153 kB
○ /helm 2.7 kB 153 kB
○ /pulse 2.7 kB 153 kB
○ /recon 2.7 kB 153 kB
```
All four pages prerender as static. Total shared JS 102 kB (mostly GSAP + Next/React runtime).

Test plan

  • CI / Vercel deploy preview builds clean
  • All four routes render identically to the static deploy
  • Navigation between routes uses next/link soft nav and re-runs GSAP cleanly
  • Hero title words slide-in animates on each page
  • Roadmap timeline phase dots still toggle and the progress fill animates
  • Roadmap product tabs (on /recon) swap panels
  • Terminal typewriters fire when scrolled into view
  • Theme colors are correct: denim on /, lime on /recon and /pulse, blue on /helm
  • Mobile breakpoints look right
  • reduced-motion users get static layout

🤖 Generated with Claude Code

Full migration from static HTML/CSS/JS to Next.js 15 App Router:
- 4 routes (/, /recon, /pulse, /helm) as server components, prerendered statically
- Shared Nav, Footer, Marquee, Terminal, RadarMark components
- main.js ported to GsapClient (use client) — useEffect keyed to
  pathname so animations re-init across soft navigations, and
  ScrollTriggers are torn down on route change
- styles.css → app/globals.css; body[data-theme] selectors switched
  to [data-theme] so each page wraps content in a themed div
- rm-progress gradient now uses --accent + --accent-glow vars so it
  picks up the helm-blue theme without a separate override
- Static assets moved to public/
- Old HTML/CSS/JS files removed
- vercel.json removed — Next.js framework detection handles routing
  and clean URLs natively

Build output: 153 kB first-load JS shared, ~2.7 kB per route.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant