Files

lerko96 ea63347cd6 migrate CRA to Next.js 16 + React 19 + TypeScript + Tailwind v4

- replace CRA scaffold with Next.js static export config
- add app router pages: home, homelab, archive
- add components: Nav, Footer, Hero, Skills, ProjectCard, ThemeScript
- add ThemeContext for dark mode with FOUC prevention
- add data layer: projects.ts, services.ts
- update .gitignore for Next.js (ignore .next/, out/, next-env.d.ts)
- add docs: handoff plan, homelab decisions, style reference

2026-04-10 18:46:19 -04:00

2.4 KiB

Raw Blame History

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Project Overview

Project: [PERSONAL PORTFOLIO] Stack: [Next.js 16 + React 19 + TypeScript + Tailwind v4] Deployed to: [github pages]

Branch Strategy

This repo uses two branches:

master — production build output (HTML, JS, CSS bundles); what GitHub Pages serves
dev — Next.js source code; all development happens here

Always work on the dev branch. Never manually edit files on master.

Commands

npm run dev      # Dev server at localhost:3000
npm run build    # Production build into out/ (static export)
npm run deploy   # Build + push out/ to master branch (deploys to GitHub Pages)

Architecture

Next.js 16 static-export portfolio site with React 19 and TypeScript.

src/app/layout.tsx — Root layout; Montserrat + Source Code Pro via next/font, Font Awesome CDN, ThemeProvider
src/app/page.tsx — Home page (Hero, Skills, ProjectCards)
src/app/homelab/page.tsx — Homelab page: at-a-glance, VLAN table, services grid, ADRs, GitHub CTA
src/app/archive/page.tsx — Archive grid with older projects
src/components/ — Nav, Footer, Hero, and other UI components
src/context/ThemeContext.tsx — Dark mode provider + useTheme hook, localStorage key lerko96-dark-mode
src/components/ThemeScript.tsx — Blocking script injected in <head> to prevent FOUC
src/data/projects.ts — All projects typed, featured + archive split
src/data/services.ts — Homelab services with categories
src/app/globals.css — Full design system: colors, fonts, breakpoints, keyframes (Tailwind v4 CSS-first config)
public/CNAME — Custom domain (www.lerko96.com); copied into out/ on deploy

Tailwind v4 note

Tailwind v4 is CSS-first — there is no tailwind.config.ts. All custom tokens live in globals.css under @theme {}. Dark mode variant is defined as @variant dark (&:where(.dark, .dark *)).

Coding Standards

Always

remove any advertisement of "ai", "claude", "anthropic" from commit messages

Deployment

npm run deploy runs predeploy (build) then gh-pages -b master -d out, which force-pushes the out/ directory contents to the master branch. GitHub Pages serves from master.

postbuild writes out/.nojekyll to prevent GitHub Pages from ignoring _next/ asset directories.

2.4 KiB Raw Blame History