refactor: modernize and simplify site design

[mldangelo]

Summary

Comprehensive design refresh focused on stripping decorative complexity in favor of clean, flat, content-forward surfaces. Net deletion of 730 lines across 25 files.

What changed

• Typography: Raleway + Source Sans 3 → single Inter typeface, em → rem sizing, toned-down weight scale (800 → 700 max)
• Surfaces: Removed grain texture overlay, radial gradient, glassmorphism header, hero gradient blob, card shadows/lifts
• Hero: Smaller avatar (112px), no credential chips, tighter type, no background gradient
• Footer: Reduced from 2-column layout to single row (copyright + social icons)
• Links: Replaced background-image: linear-gradient() trick with native text-decoration
• Cards: Flat borders, no hover lifts, tighter radius (8→6px), no project card overlay
• Nav elements: Resume/about section nav stripped from card treatment to plain sticky links
• Colors: 10+ accent variants → 4, skill category colors unified to single accent
• Dark mode: 200+ lines consolidated to ~75 (pure token swaps, minimal component overrides)
• Content widths: Normalized to 680px (prose) / 880px (grid)

What's preserved

• All accessibility features (aria, focus-visible, reduced-motion)
• Dark/light theme toggle and localStorage persistence
• All page routes and content
• Responsive breakpoints and mobile layout

Test plan

• npm run format — clean
• npm run lint — 0 issues
• npm run type-check — passes
• npm test — 305/305 passing
• npm run build — all 15 routes build
• Visual review: light + dark mode, desktop + mobile

🤖 Generated with Claude Code

[cloudflare-workers-and-pages]

Deploying mldangelo with    Cloudflare Pages

Latest commit:	8f24bae
Status:	✅  Deploy successful!
Preview URL:	https://c2ddc7ca.mldangelo.pages.dev
Branch Preview URL:	https://design-modernize-simplify.mldangelo.pages.dev

View logs

[Copilot]

Pull request overview

Design refresh that simplifies the site’s visual system by consolidating typography, flattening surfaces/interactions, and tightening layout widths while preserving routes and core UX (theme toggle, responsiveness, accessibility hooks).

Changes:

• Consolidate typography to Inter and normalize type scale/tokens (rem sizing, reduced weight range).
• Remove decorative effects (grain/gradients/glassmorphism/shadows/lifts) in favor of flat borders and token-driven colors.
• Simplify key templates (Hero/Footer) and widen select pages via PageWrapper to match new content-width targets.

Reviewed changes

Copilot reviewed 25 out of 25 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/data/resume/skills.ts	Unifies skill category colors to the global accent token and simplifies fallback behavior.
src/components/tests/Template/Hero.test.tsx	Updates Hero tests to reflect removal of chips/background elements.
src/components/tests/Template/Footer.test.tsx	Updates Footer tests to reflect minimal footer layout (source link + icons).
src/components/Template/Hero.tsx	Shrinks avatar and removes credential chips and decorative background.
src/components/Template/Footer.tsx	Refactors footer to a minimal single-row layout and removes nav/avatar blocks.
app/styles/tokens/typography.css	Switches font families to Inter and normalizes weights/sizes/letter spacing.
app/styles/tokens/effects.css	Tightens border-radius scale across the design system.
app/styles/tokens/colors.css	Reduces accent variants and removes dedicated skill color tokens in favor of accent tokens.
app/styles/pages/writing.css	Simplifies writing list spacing and moves link styling to native text-decoration.
app/styles/pages/resume.css	Flattens resume nav/section styling and adjusts sizing/spacing for the new look.
app/styles/pages/home.css	Removes hero gradients/chips/hover lifts and adopts simpler underline/link styling.
app/styles/pages/content.css	Flattens section nav and removes hover lift/shadow effects on CTAs.
app/styles/layout/page.css	Adjusts default and wide content widths and simplifies page title typography.
app/styles/layout/navigation.css	Simplifies nav link styling and focus/active states.
app/styles/layout/header.css	Removes glassmorphism effects and uses solid background token.
app/styles/layout/footer.css	Replaces the previous multi-column footer styling with a minimal single-row footer.
app/styles/dark-mode.css	Consolidates dark mode to token overrides plus minimal component adjustments.
app/styles/components/tags.css	Simplifies skill group/title styling and flattens tag treatments.
app/styles/components/cards.css	Removes card shadows/lifts/overlays and tightens card spacing/radius.
app/styles/components/buttons.css	Simplifies button styling (no lift/shadow) and aligns type/spacing to new tokens.
app/styles/base/reset.css	Removes grain/gradient overlays and updates global background to --color-bg.
app/styles/base/links.css	Replaces gradient underline trick with text-decoration underlines.
app/resume/page.tsx	Uses PageWrapper mainClassName="page-main--wide" for the new resume layout width.
app/projects/page.tsx	Uses PageWrapper mainClassName="page-main--wide" for the new archive layout width.
app/layout.tsx	Replaces multiple Google fonts with Inter and updates root font variable wiring.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Category.textColor is still being treated as a precomputed contrast hint, but categories now use color: var(--color-accent) which changes between light/dark themes. With textColor: 'dark' this forces .skillbar-title--dark and can produce low-contrast text on the accent background (e.g. light theme accent). Consider removing/ignoring textColor when the color is theme-driven (let CSS default color: var(--color-bg) apply), or make the contrast decision in CSS per theme instead of hardcoding it in data.

[Copilot]

CATEGORY_COLORS/FALLBACK_COLORS now repeat the exact same { color, textColor } entries multiple times. Since all categories are intentionally unified, this can be simplified (e.g., generate an array of the required length with fill, or keep a single config and apply it per category) to avoid duplicated data and reduce the chance of accidental divergence later.

[Copilot]

--font-weight-semibold and --font-weight-bold are both set to 600, which makes the tokens indistinguishable and can lead to confusing/ineffective typography usage across the site. Consider assigning distinct values (e.g. keep semibold=600 and set bold=700) or removing one token if you intentionally want a single weight.

Suggested change

	--font-weight-bold: 600;
	--font-weight-black: 700;
	--font-weight-bold: 700;
	--font-weight-black: 800;

[Copilot]

Buttons now hardcode border-radius: 6px even though radius tokens exist (and --radius-sm is also 6px after this PR). Using the token instead of a literal helps keep component styling consistent if the radius scale changes again.

Suggested change

	border-radius: 6px;
	border-radius: var(--radius-sm);