Redesign: dark terminal → light editorial portfolio#6
Merged
Conversation
Replace the dark terminal/iridescent theme with the warm off-white editorial system from the Claude Design handoff: - Fonts: drop Inter/Space Grotesk/JetBrains Mono; add Newsreader (serif headings), IBM Plex Sans (body/UI), IBM Plex Mono (code only) - Remove three/@react-three/* and lenis dependencies - tailwind.config.ts: light palette tokens, serif/sans/mono families, soft shadow tokens - globals.css: rewrite to light tokens, editorial prose, scroll reveal, reusable button/card/tag/nav classes; strip cursor/grain/iridescent - layout.tsx: drop custom Cursor and Lenis SmoothScrollProvider, add Footer - content.ts: extend Frontmatter with optional category/role + getYear() - Add shared UI primitives (Reveal, ProjectCard, Tag, Kicker, Button) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Nav: sticky blurred header, serif "Altan Esmer | Software Engineer" wordmark, Work/Writing/About links with active amber underline (usePathname), and a blue "Get in touch" CTA → /contact - Footer: name + blurb + open-to-work pill, Pages + Elsewhere link columns, and a quiet colophon line Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Hero: availability badge, serif headline, two CTAs, and a quiet profile card (no terminal, no 3D icosahedron) - Featured projects grid driven by frontmatter `featured` - Short About blurb + "More about me" link - Skills as four clean grouped columns (no 3D constellation) - "Have a project in mind?" contact CTA card Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- "Work" index: amber kicker, serif H1, intro, and a clean auto-fit grid of bordered project cards - Client-side category filter chips (All/Web/Mobile/Desktop/Tools) driven by frontmatter `category`; active chip in primary blue Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Case study: 760px article with back link, amber category · year · role meta, serif title, blurb, tags, preview placeholder, MDX body, and prev/next navigation (shared ArticleNav) - Add category/role/featured to the five project MDX frontmatters Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Blog index: 780px list with date · read time · amber tag, serif titles, and one-line descriptions - Blog post: 720px article matching the case-study reading layout, with shared prev/next ArticleNav Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Fuller bio, portrait placeholder, and a calm text-based education/experience timeline (blue dots, amber years) — replaces the old neon-rail treatment Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- New /contact route: clean form (name/email/optional budget/message) with live validation + success state, plus an aside with direct email and an open-to-work card. No terminal styling or fake CLI. - Remove the old /hire page (replaced by /contact) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Delete unused 3D scenes, custom cursor, Lenis smooth-scroll, old bento ProjectCard/MdxProjectCard, ProjectNavigation, MotionSection, RevealOnScroll, and the old contact section - Delete projects-static.ts + projects.generated.json (fed the old bento grid; content is now sourced from MDX) - Reveal: swap framer-motion for a tiny IntersectionObserver that toggles .reveal/.reveal.in (fixes the opacity-stuck bug and drops framer-motion); respects prefers-reduced-motion with a fallback - Drop framer-motion + lucide-react; add remark-frontmatter - next.config: add remark-frontmatter so YAML no longer renders into article bodies; drop stale transpilePackages: ['three'] Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Implements the Claude Design handoff (
Altan Esmer Portfolio.dc.html), a full reversal of the site's aesthetic: out goes the dark navy "terminal-hacker" theme — monospace everywhere, iridescent gradients, two WebGL 3D scenes, custom cursor, film-grain, neon glows, and fake-CLI copy. In comes a simple, clean, professional editorial design where content and typography do the work.The site stays Next.js 14 App Router + Tailwind + static export to GitHub Pages. The MDX content pipeline is unchanged and remains the source of truth.
Design system
#faf8f4, ink#1c1a17#2563eb(links, primary buttons)#d97706, used only as punctuation (kickers, active-nav underline, availability, timeline years, post tags)prefers-reduced-motionWhat changed
tailwind.config.ts+globals.cssto the light token system; swapped fonts; dropped<Cursor>and Lenis<SmoothScrollProvider>from the layout; added shared UI primitives (Reveal,Button,ProjectCard,Tag,Kicker,ArticleNav)./hire).three/@react-three/*,lenis,framer-motion,lucide-react, and the old@fontsourcefamilies; deleted the 3D scenes, cursor, smooth-scroll, old bento cards, andprojects-static.remark-frontmatterso YAML frontmatter no longer renders into article bodies; added optionalcategory/rolefrontmatter for the five projects.Verification
npm run build— static export succeeds, all 14 pages prerendered; First Load JS down to ~104 kB (three.js + framer-motion removed)npm run lint— clean ·npx tsc --noEmit— clean (CI parity)🤖 Generated with Claude Code