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..90404ae 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 */ @@ -336,8 +343,64 @@ footer { line-height: 1.7; margin: 0; } -/* Misc */ -.intro { font-size: 1.1rem; color: var(--text-primary); max-width: 600px; margin: 2rem auto; text-align: center; } +/* Hero Section */ +.hero { + text-align: center; + margin-bottom: 2rem; +} +.hero-name { + font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); + font-weight: 800; + letter-spacing: -0.03em; + margin: 0 0 0.5rem; + background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} +.hero-role { + font-family: 'JetBrains Mono', monospace; + font-size: clamp(0.8rem, 0.75rem + 0.25vw, 0.95rem); + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.15em; + color: var(--color-accent); + margin: 0 0 1.25rem; +} +.hero-desc { + font-size: clamp(1rem, 0.9rem + 0.4vw, 1.15rem); + color: var(--text-secondary); + max-width: 500px; + margin: 0 auto 1.5rem; + line-height: 1.7; +} +.hero-links { + display: flex; + justify-content: center; + gap: 0.75rem; +} +.hero-links a { + display: flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + color: var(--text-muted); + border: 1px solid var(--border-color); + border-radius: 50%; + text-decoration: none; + transition: all 0.2s ease; +} +.hero-links a:hover { + color: var(--color-accent); + border-color: var(--color-accent); + background: rgba(20, 184, 166, 0.1); + transform: translateY(-2px); +} +.hero-links .icon { + width: 1.1em; + height: 1.1em; +} /* Vertical two-lane roadmap (Experience | Education) */ .roadmap-section { margin: 2rem 0; text-align: left; } @@ -345,7 +408,7 @@ footer { position: relative; display: grid; grid-template-columns: 1fr; - gap: 3rem; + gap: clamp(2rem, 4vw, 3rem); align-items: start; } .rail { @@ -366,34 +429,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 +446,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 +463,123 @@ 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 */ +/* 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..b8fff5a 100644 --- a/index.html +++ b/index.html @@ -21,58 +21,14 @@ + + + @@ -104,20 +60,34 @@
-

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.

+
+ + + + + + + + + +
+
-

Experience

+

Experience

-

Astera Labs

+

Astera Labs Current

-
Firmware Engineer, Technical Lead
-
February 2023 – Present
+
Firmware Engineer, Technical Lead Feb 2023 – Present

Developing cutting-edge firmware solutions for high-speed connectivity and data center infrastructure.

@@ -129,13 +99,11 @@

Qualcomm Atheros

-
Senior Embedded Software Engineer
-
November 2021 – February 2023
+
Senior Embedded Software Engineer Nov 2021 – Feb 2023

Developed embedded software for enterprise WiFi platforms. Implemented advanced TX power control features for Qualcomm's WiFi chipsets.

-
Embedded Software Engineer
-
January 2020 – November 2021
+
Embedded Software Engineer Jan 2020 – Nov 2021

Contributed to WiFi physical layer firmware development and implemented automated test framework for regression testing.

@@ -147,8 +115,7 @@

GreenSight Agronomics

-
Embedded Software Engineer
-
January 2018 – December 2019
+
Embedded Software Engineer Jan 2018 – Dec 2019

Built embedded systems for autonomous agricultural drones. Developed sensor integration, flight control software for precision agriculture applications.

@@ -158,14 +125,14 @@

Syracuse University

-
Master of Science (MS), Computer Engineering
+
Master of Science (MS), Computer Engineering
@@ -175,7 +142,7 @@

KCG College of Technology, Anna University

-
Bachelor of Engineering (B.E.), Electrical, Electronics and Communications Engineering
+
Bachelor of Engineering (B.E.), Electrical, Electronics and Communications Engineering

diff --git a/js/theme.js b/js/theme.js index a8700b2..9aaaaf2 100644 --- a/js/theme.js +++ b/js/theme.js @@ -62,4 +62,17 @@ window.addEventListener('DOMContentLoaded', () => { document.querySelectorAll('.copyright-year').forEach(el => { el.textContent = new Date().getFullYear(); }); + + // Scroll-reveal animations + const revealObserver = new IntersectionObserver((entries) => { + entries.forEach((entry, i) => { + if (entry.isIntersecting) { + entry.target.style.transitionDelay = `${i * 0.1}s`; + entry.target.classList.add('visible'); + revealObserver.unobserve(entry.target); + } + }); + }, { threshold: 0.1 }); + + document.querySelectorAll('.node, .book-item').forEach(el => revealObserver.observe(el)); });