Skip to content

Commit 38c3008

Browse files
mldangeloclaude
mldangelo
and
claude
committed
refactor: retheme and reskin — editorial, monochromatic design
Complete design overhaul from decorative complexity to editorial minimalism. Typography: Raleway + Source Sans → Inter. em → rem sizing. Color: Blue accent → monochromatic (near-black light, near-white dark). Hero: Inline 56px avatar + name + tagline. Left-aligned. No buttons. Nav: Full name as logo. Quiet gray links. Footer: Copyright + subtle social icons. Cards: Flat dividers, no borders/shadows/radius on job/course entries. Resume: Left-aligned, uppercase section labels, plain sticky nav. Writing: Tighter list, opacity hover, no border pill on RSS. Dark mode: Pure token swaps, 3 component overrides total. Removed: grain texture, radial gradients, glassmorphism, hero chips, credential badges, hover lifts, card shadows, gradient overlays, 6 skill category colors, 16 unused tokens, 70 lines dead animations, forms.css placeholder. 305 tests pass. All 15 routes build. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 2cde665 commit 38c3008

35 files changed

+588
-1306
lines changed

‎app/layout.tsx‎

Lines changed: 4 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { Metadata } from 'next';
2-
import { Raleway, Source_Sans_3 } from 'next/font/google';
2+
import { Inter } from 'next/font/google';
33
import Script from 'next/script';
44

55
import GoogleAnalytics from '@/components/Template/GoogleAnalytics';
@@ -8,19 +8,9 @@ import ScrollToTop from '@/components/Template/ScrollToTop';
88
import { AUTHOR_NAME, SITE_URL, TWITTER_HANDLE } from '@/lib/utils';
99
import './tailwind.css';
1010

11-
const sourceSans = Source_Sans_3({
12-
weight: ['400', '700'],
11+
const inter = Inter({
1312
subsets: ['latin'],
14-
variable: '--font-source-sans',
15-
display: 'swap',
16-
preload: true,
17-
adjustFontFallback: true,
18-
});
19-
20-
const raleway = Raleway({
21-
weight: ['400', '800'],
22-
subsets: ['latin'],
23-
variable: '--font-raleway',
13+
variable: '--font-inter',
2414
display: 'swap',
2515
preload: true,
2616
adjustFontFallback: true,
@@ -91,11 +81,7 @@ export default function RootLayout({
9181
children: React.ReactNode;
9282
}) {
9383
return (
94-
<html
95-
lang="en"
96-
className={`${sourceSans.variable} ${raleway.variable}`}
97-
suppressHydrationWarning
98-
>
84+
<html lang="en" className={inter.variable} suppressHydrationWarning>
9985
<head>
10086
{/* CSP-safe theme initialization - prevents flash on load */}
10187
<Script id="theme-init" strategy="beforeInteractive">

‎app/not-found.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,13 @@ export default function NotFound() {
1717
The page you&apos;re looking for doesn&apos;t exist or has been moved.
1818
</p>
1919
<div className="not-found-actions">
20-
<Link href="/" className="not-found-button">
20+
<Link href="/" className="button button-primary not-found-button">
2121
Go Home
2222
</Link>
23-
<Link href="/contact" className="not-found-link">
23+
<Link
24+
href="/contact"
25+
className="button button-secondary not-found-link"
26+
>
2427
Contact Me
2528
</Link>
2629
</div>

‎app/projects/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export default function ProjectsPage() {
1717
const otherProjects = data.filter((p) => !p.featured);
1818

1919
return (
20-
<PageWrapper>
20+
<PageWrapper mainClassName="page-main--wide">
2121
<section className="projects-page">
2222
<header className="projects-header">
2323
<h1 className="page-title">Archive</h1>

‎app/resume/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export const metadata: Metadata = createPageMetadata({
2222

2323
export default function ResumePage() {
2424
return (
25-
<PageWrapper>
25+
<PageWrapper mainClassName="page-main--wide">
2626
<section className="resume-page">
2727
<header className="resume-header">
2828
<h1 className="resume-title">Resume</h1>

‎app/styles/base/links.css‎

Lines changed: 13 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,30 @@
11
/* ========================================
22
LINK STYLES
3-
Animated underlines and hover states
43
======================================== */
54

65
@layer base {
7-
/* Modern link styling with animated underline */
86
a {
97
color: var(--color-fg);
108
text-decoration: none;
11-
background-image: linear-gradient(var(--color-accent), var(--color-accent));
12-
background-size: 0% 1.5px;
13-
background-repeat: no-repeat;
14-
background-position: left bottom;
15-
transition:
16-
color var(--duration-fast) var(--ease-out),
17-
background-size var(--duration-normal) var(--ease-out);
9+
transition: color var(--duration-fast) var(--ease-out);
1810
}
1911

2012
a:hover {
21-
color: var(--color-accent);
22-
background-size: 100% 1.5px;
13+
color: var(--color-fg-bold);
2314
}
2415

25-
/* Keep simple underline for inline content links
26-
Exclude .hero-highlight which uses text-decoration instead
27-
Reset the animated underline to avoid double underline */
28-
p a:not(.hero-highlight),
29-
li a:not(.hero-highlight) {
30-
background-image: linear-gradient(
31-
transparent calc(100% - 1.5px),
32-
var(--color-accent-underline) 1.5px
33-
);
34-
background-size: 100% 100%;
35-
background-position: left bottom;
36-
transition:
37-
color var(--duration-fast) var(--ease-out),
38-
background-image var(--duration-fast) var(--ease-out);
16+
/* Inline content links — subtle underline */
17+
p a,
18+
li a {
19+
text-decoration: underline;
20+
text-decoration-color: var(--color-accent-underline);
21+
text-underline-offset: 2px;
22+
text-decoration-thickness: 1px;
3923
}
4024

41-
p a:not(.hero-highlight):hover,
42-
li a:not(.hero-highlight):hover {
43-
color: var(--color-accent-hover);
44-
background-image: linear-gradient(transparent calc(100% - 1.5px), var(--color-accent) 1.5px);
25+
p a:hover,
26+
li a:hover {
27+
color: var(--color-fg-bold);
28+
text-decoration-color: var(--color-fg-bold);
4529
}
4630
}

‎app/styles/base/reset.css‎

Lines changed: 3 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,6 @@
1818
transition-duration: 0.01ms !important;
1919
scroll-behavior: auto !important;
2020
}
21-
22-
/* Hide heavy fixed overlays that cause repaints */
23-
body::before,
24-
body::after {
25-
display: none;
26-
}
2721
}
2822

2923
/* Focus-visible styles for keyboard navigation */
@@ -48,58 +42,17 @@
4842
}
4943

5044
body {
51-
background-color: var(--color-bg-alt);
45+
background-color: var(--color-bg);
5246
color: var(--color-fg);
5347
font-family: var(--font-sans);
54-
font-size: 17px;
48+
font-size: 16px;
5549
font-weight: var(--font-weight-normal);
56-
line-height: var(--leading-normal);
50+
line-height: 1.65;
5751
padding-top: var(--header-height);
5852
-webkit-font-smoothing: antialiased;
5953
-moz-osx-font-smoothing: grayscale;
6054
}
6155

62-
/* Subtle grain texture for depth - GPU-accelerated layer */
63-
body::before {
64-
content: '';
65-
position: fixed;
66-
inset: 0;
67-
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
68-
opacity: 0.018;
69-
pointer-events: none;
70-
z-index: -1;
71-
transform: translateZ(0);
72-
contain: strict;
73-
}
74-
75-
/* Subtle radial gradient for depth - GPU-accelerated layer */
76-
body::after {
77-
content: '';
78-
position: fixed;
79-
inset: 0;
80-
background: radial-gradient(
81-
ellipse 80% 50% at 50% 0%,
82-
var(--color-accent-muted) 0%,
83-
transparent 60%
84-
);
85-
pointer-events: none;
86-
z-index: -1;
87-
transform: translateZ(0);
88-
contain: strict;
89-
}
90-
91-
@media (min-width: 980px) {
92-
body::before {
93-
opacity: 0.025;
94-
}
95-
}
96-
97-
@media (max-width: 1680px) {
98-
body {
99-
font-size: 16px;
100-
}
101-
}
102-
10356
@media (max-width: 736px) {
10457
body {
10558
font-size: 15px;

‎app/styles/components/buttons.css‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -4,67 +4,67 @@
44
======================================== */
55

66
@layer components {
7-
/* Button - Modern solid style with hover lift */
7+
.btn,
88
.button {
99
appearance: none;
1010
background: var(--color-accent);
11+
background-image: none !important;
1112
border: 0;
12-
border-radius: var(--radius-sm);
13-
box-shadow:
14-
var(--shadow-md),
15-
inset 0 1px 0 var(--color-overlay-light);
13+
border-radius: 6px;
14+
box-shadow: none;
1615
color: var(--color-white);
1716
cursor: pointer;
1817
display: inline-flex;
1918
align-items: center;
2019
justify-content: center;
2120
gap: 0.5em;
22-
font-family: var(--font-heading);
23-
font-size: var(--text-base);
24-
font-weight: var(--font-weight-bold);
25-
height: 3.25rem;
26-
letter-spacing: var(--tracking-normal);
27-
padding: 0 2em;
21+
font-family: var(--font-sans);
22+
font-size: var(--text-sm);
23+
font-weight: var(--font-weight-medium);
24+
height: 2.5rem;
25+
letter-spacing: 0;
26+
padding: 0 1.5em;
2827
text-align: center;
2928
text-decoration: none !important;
30-
transition:
31-
transform var(--duration-fast) var(--ease-out),
32-
box-shadow var(--duration-fast) var(--ease-out),
33-
background-color var(--duration-fast) var(--ease-out);
29+
transition: background-color var(--duration-fast) var(--ease-out);
3430
}
3531

32+
.btn:hover,
3633
.button:hover {
3734
background: color-mix(in srgb, var(--color-accent) 85%, black);
38-
box-shadow: var(--shadow-lg);
39-
transform: translateY(var(--lift-sm));
4035
color: var(--color-white);
4136
}
4237

38+
.btn:active,
4339
.button:active {
44-
transform: translateY(0);
45-
box-shadow: var(--shadow-sm);
40+
background: color-mix(in srgb, var(--color-accent) 75%, black);
4641
}
4742

43+
.btn:focus-visible,
4844
.button:focus-visible {
49-
box-shadow:
50-
var(--shadow-md),
51-
0 0 0 3px var(--color-accent-light);
52-
outline: none;
45+
outline: 2px solid var(--color-accent);
46+
outline-offset: 2px;
47+
}
48+
49+
/* Primary button */
50+
.btn-primary,
51+
.button-primary {
52+
/* Inherits from .button */
5353
}
5454

5555
/* Secondary/ghost button variant */
56+
.btn-secondary,
5657
.button-secondary {
5758
background: transparent;
58-
box-shadow: inset 0 0 0 1.5px var(--color-border-alt);
59-
color: var(--color-fg-light);
60-
font-weight: var(--font-weight-medium);
59+
box-shadow: inset 0 0 0 1px var(--color-border-alt);
60+
color: var(--color-fg);
6161
}
6262

63+
.btn-secondary:hover,
6364
.button-secondary:hover {
64-
background: var(--color-accent-light);
65-
box-shadow: inset 0 0 0 1.5px var(--color-accent);
66-
color: var(--color-accent);
67-
transform: translateY(var(--lift-sm));
65+
background: var(--color-surface-hover);
66+
box-shadow: inset 0 0 0 1px var(--color-border-alt);
67+
color: var(--color-fg-bold);
6868
}
6969

7070
/* Actions list */

0 commit comments

Comments
 (0)