From 968b3812f19d06a2e01c4d7086455b051f23ad2c Mon Sep 17 00:00:00 2001 From: Arjun Vinod Date: Sun, 15 Mar 2026 16:36:25 -0700 Subject: [PATCH 1/2] feat: modernize design with Inter/JetBrains Mono fonts, flat timeline, and scroll animations MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add Google Fonts (Inter for body, JetBrains Mono for company/school names) - Replace system font stack with Inter across all pages - Add fluid typography with clamp() for responsive scaling - Simplify timeline: remove heavy card borders/shadows, use flat layout - Add subtle timeline dots (12px) with thin connecting line - Add "Current" badge with blinking green dot for active position - Inline role + date on one line with · separator - Remove section icons (briefcase/graduation cap) for cleaner look - Add scroll-reveal animations via IntersectionObserver - Add View Transitions API for smooth page navigation - Add subtle background gradients for both themes - Fix pre-existing bug: .node:first-child → .node:first-of-type for active dot - Fix Education section dark mode text color (rm-role → rm-role-line) - Remove duplicate @keyframes blink from books.html Co-Authored-By: Claude Opus 4.6 --- 404.html | 3 + books.html | 7 +- css/styles.css | 240 +++++++++++++++++++++++++------------------------ index.html | 27 +++--- js/theme.js | 13 +++ 5 files changed, 153 insertions(+), 137 deletions(-) diff --git a/404.html b/404.html index bddc1d1..d0db6f7 100644 --- a/404.html +++ b/404.html @@ -9,6 +9,9 @@ + + + diff --git a/css/styles.css b/css/styles.css index f3e9aa2..10317ab 100644 --- a/css/styles.css +++ b/css/styles.css @@ -36,31 +36,38 @@ .lane-title .icon { width: 1rem; height: 1rem; } .theme-toggle-slider .icon { width: 0.75rem; height: 0.75rem; color: var(--color-primary); transition: color 0.3s ease; } [data-theme="dark"] .theme-toggle-slider .icon { color: #fbbf24; } +/* View Transitions (progressive enhancement — no-op in unsupported browsers) */ +@view-transition { + navigation: auto; +} /* Base Layout */ body { - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.6; margin: 0; padding: 0; min-height: 100vh; - background-color: var(--bg-color); + background: linear-gradient(135deg, var(--bg-color) 0%, #f0f4f8 100%); display: flex; flex-direction: column; - transition: background-color 0.3s ease; + transition: background 0.3s ease; +} +[data-theme="dark"] body { + background: linear-gradient(135deg, var(--bg-color) 0%, #1a1a2e 100%); } main { flex: 1; display: flex; justify-content: center; align-items: center; - padding: 2rem 0; + padding: clamp(1rem, 3vw, 2rem) 0; } .container { background-color: var(--container-bg); max-width: 800px; margin: 0 auto; width: 100%; - padding: 2rem; + padding: clamp(1rem, 3vw, 2rem); transition: background-color 0.3s ease; } /* Header */ @@ -337,7 +344,7 @@ footer { margin: 0; } /* Misc */ -.intro { font-size: 1.1rem; color: var(--text-primary); max-width: 600px; margin: 2rem auto; text-align: center; } +.intro { font-size: clamp(1rem, 0.9rem + 0.5vw, 1.2rem); color: var(--text-primary); max-width: 600px; margin: 2rem auto; text-align: center; } /* Vertical two-lane roadmap (Experience | Education) */ .roadmap-section { margin: 2rem 0; text-align: left; } @@ -345,7 +352,7 @@ footer { position: relative; display: grid; grid-template-columns: 1fr; - gap: 3rem; + gap: clamp(2rem, 4vw, 3rem); align-items: start; } .rail { @@ -366,34 +373,16 @@ footer { align-items: center; gap: 0.75rem; margin: 0 0 1.5rem 0; - font-size: 1.25rem; + font-size: clamp(1.125rem, 1rem + 0.5vw, 1.35rem); font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); } -.lane-title .icon { - display: flex; - align-items: center; - justify-content: center; - width: 40px; - height: 40px; - padding: 10px; - background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); - border-radius: 10px; - color: white; - box-shadow: 0 4px 12px rgba(20, 184, 166, 0.2); - transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); -} - -.lane-title:hover .icon { - transform: translateY(-2px); - box-shadow: 0 6px 16px rgba(20, 184, 166, 0.28); -} /* Timeline Node with vertical line */ -.node { +.node { position: relative; - padding-left: 2.5rem; + padding-left: 2rem; padding-bottom: 1.5rem; } @@ -401,12 +390,12 @@ footer { .node::before { content: ''; position: absolute; - left: 7px; + left: 5px; top: 0; bottom: 0; - width: 3px; - background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent) 50%, var(--border-color) 100%); - border-radius: 2px; + width: 2px; + background: var(--border-color); + border-radius: 1px; } /* Last node - shorter line */ @@ -418,126 +407,139 @@ footer { .node .dot { position: absolute; left: 0; - top: 0.25rem; - width: 18px; - height: 18px; - background: var(--bg-color); - border: 3px solid var(--color-accent); + top: 0.35rem; + width: 12px; + height: 12px; + background: var(--border-color); + border: 2px solid var(--border-color); border-radius: 50%; z-index: 2; - box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.12), inset 0 0 0 3px rgba(20, 184, 166, 0.08); - transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); + transition: all 0.3s ease; } /* Active/current position indicator */ -.node:first-child .dot { - background: linear-gradient(135deg, var(--color-accent), var(--color-primary)); - box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.2), 0 0 24px rgba(20, 184, 166, 0.35); +.node:first-of-type .dot { + background: var(--color-accent); border-color: var(--color-accent); + box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.2); } /* Hover effect on dots */ .node:hover .dot { - transform: scale(1.15); - box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.2), 0 0 16px rgba(20, 184, 166, 0.4); + border-color: var(--color-accent); + background: var(--color-accent); } .rm-card { position: relative; - background: var(--container-bg); - border: 1px solid var(--border-color); - border-radius: 12px; - padding: 1.25rem; - box-shadow: 0 2px 8px rgba(0,0,0,0.04); - transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); - overflow: hidden; -} - -.rm-card::after { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(135deg, rgba(20, 184, 166, 0.03), rgba(15, 76, 117, 0.02)); - opacity: 0; - transition: opacity 0.35s ease; - pointer-events: none; + background: transparent; + border-radius: 8px; + padding: 0.25rem 0; + transition: all 0.25s ease; } .rm-card:hover { - border-color: var(--color-accent); - box-shadow: 0 12px 32px rgba(20, 184, 166, 0.15), 0 2px 8px rgba(0,0,0,0.06); - transform: translateX(6px) translateY(-2px); -} - -.rm-card:hover::after { - opacity: 1; -} - -.rm-card::before { - content: ''; - position: absolute; - left: 0; - top: 0; - bottom: 0; - width: 3px; - background: linear-gradient(180deg, var(--color-primary), var(--color-accent)); - border-radius: 12px 0 0 12px; - opacity: 0; - transition: opacity 0.35s ease; -} -.rm-title { - margin: 0 0 0.5rem; - font-size: 1.125rem; + background: rgba(20, 184, 166, 0.04); + padding: 0.25rem 0.75rem; + margin: 0 -0.75rem; + border-radius: 8px; +} +.rm-title { + margin: 0 0 0.25rem; + font-family: 'JetBrains Mono', monospace; + font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem); font-weight: 700; letter-spacing: -0.01em; color: var(--text-primary); + display: flex; + align-items: center; + gap: 0.5rem; + flex-wrap: wrap; } -.rm-title a { - color: var(--color-accent); +.rm-title a { + color: var(--text-primary); text-decoration: none; transition: color 0.25s ease; } -.rm-title a:hover { - color: var(--color-primary); - text-decoration: underline; +.rm-title a:hover { + color: var(--color-accent); } -.rm-meta { - display: inline-block; - color: var(--text-muted); - font-size: 0.75rem; +/* Current position badge */ +.current-badge { + display: inline-flex; + align-items: center; + gap: 0.35rem; + font-size: 0.75rem; font-weight: 600; + color: #22c55e; + background: rgba(34, 197, 94, 0.1); + padding: 0.15rem 0.6rem; + border-radius: 12px; letter-spacing: 0.02em; - margin-bottom: 0.75rem; - padding: 0.35rem 0.85rem; - background: linear-gradient(135deg, var(--bg-color), rgba(20, 184, 166, 0.05)); - border: 1px solid rgba(20, 184, 166, 0.1); - border-radius: 20px; - transition: all 0.25s ease; } - -.rm-card:hover .rm-meta { - background: linear-gradient(135deg, rgba(20, 184, 166, 0.1), rgba(20, 184, 166, 0.08)); - border-color: var(--color-accent); - color: var(--color-accent); +.current-badge::before { + content: ''; + width: 6px; + height: 6px; + background: #22c55e; + border-radius: 50%; + animation: blink 1.5s ease-in-out infinite; } - -.rm-desc { +@keyframes blink { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.3; } +} +/* Role + date on one line */ +.rm-role-line { + font-weight: 500; + color: var(--text-primary); + font-size: 0.9375rem; + margin-bottom: 0.35rem; +} +.rm-meta { + color: var(--text-muted); + font-size: 0.875rem; + font-weight: 400; +} +.rm-meta::before { + content: '·'; + margin: 0 0.4rem; +} +.rm-desc { margin: 0; color: var(--text-secondary); - line-height: 1.8; - font-size: 0.9375rem; + line-height: 1.7; + font-size: 0.9rem; font-weight: 400; } -.rm-body { margin-top: 0.75rem; } -.rm-role { font-weight: 500; color: var(--text-primary); margin-bottom: 0.25rem; } +.rm-body { margin-top: 0.5rem; } .rm-stint { margin-bottom: 0.75rem; } /* Slightly tighter spacing on small screens */ +/* Hero gradient text */ +.intro-name { + background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + font-weight: 700; +} +.intro-role { + display: block; + font-size: clamp(0.85rem, 0.8rem + 0.3vw, 1rem); + color: var(--color-accent); + font-weight: 600; + letter-spacing: 0.02em; + margin-top: 0.5rem; +} +/* Scroll-reveal animations */ +.node, .book-item { + opacity: 0; + transform: translateY(24px); + transition: opacity 0.6s ease, transform 0.6s ease; +} +.node.visible, .book-item.visible { + opacity: 1; + transform: translateY(0); +} @media (max-width: 720px) { - .roadmap { gap: 2rem; } - .node { padding-left: 2rem; } - .lane-title { font-size: 1.125rem; } - .lane-title .icon { width: 36px; height: 36px; padding: 9px; } - .rm-card { padding: 1rem; } + .node { padding-left: 1.5rem; } } diff --git a/index.html b/index.html index 27c0724..47861f2 100644 --- a/index.html +++ b/index.html @@ -21,6 +21,9 @@ + + + @@ -107,7 +60,22 @@
-

Hi, I'm Arjun — a Firmware Engineer in Silicon Valley building high-performance embedded systems for data center connectivity.

+
+

Arjun Vinod

+

Firmware Engineer

+

Building high-performance embedded systems for data center connectivity in Silicon Valley.

+
+ + + + + + + + + +
+