From 6fdd33d981e996f4a2f245072e7dd84b8bb272ec Mon Sep 17 00:00:00 2001 From: A Charlwood Date: Mon, 9 Feb 2026 10:44:36 +0000 Subject: [PATCH] Task 4: Build final design skeleton with floating pill nav and typography - Add floating pill nav bar (fixed, centered, 600px max-width, pill-shaped) - Add nav links for all 6 sections: About, Skills, Experience, Education, Projects, Contact - Add active state with teal dot indicator via ::after pseudo-element - Add IntersectionObserver for active section tracking (threshold 0.3, rootMargin -20%/0/-60%/0) - Add smooth scroll on nav link click (offset -70px for nav clearance) - Add main container with max-width 1000px and section padding - Add .section-heading utility class for consistent section titles - Add responsive breakpoints: 768px (scrollable nav, 20px padding) and 480px (compact nav, 16px padding) - Initialize nav tracking after ECG phase reveal completes Co-Authored-By: Claude Opus 4.6 --- 4-vitals-monitor.html | 214 +++++++++++++++++++++++++++++++++++++++++- 1 file changed, 213 insertions(+), 1 deletion(-) diff --git a/4-vitals-monitor.html b/4-vitals-monitor.html index 6f27642..97ec4f6 100644 --- a/4-vitals-monitor.html +++ b/4-vitals-monitor.html @@ -162,6 +162,126 @@ opacity: 1; transition: opacity 600ms ease; } + + /* ========================================= + FLOATING PILL NAV + ========================================= */ + + .pill-nav { + position: fixed; + top: 16px; + left: 50%; + transform: translateX(-50%); + z-index: 100; + max-width: 600px; + width: auto; + background: var(--card-bg); + border-radius: 999px; + padding: 8px 24px; + box-shadow: var(--shadow-md); + display: flex; + align-items: center; + gap: 4px; + border: 1px solid var(--border); + } + + .pill-nav a { + position: relative; + font-family: var(--font-secondary); + font-size: 13px; + font-weight: 500; + color: var(--muted); + text-decoration: none; + padding: 6px 14px; + border-radius: 999px; + transition: color 0.3s ease, background 0.3s ease; + } + + .pill-nav a:hover { + color: var(--teal); + background: var(--teal-light); + } + + .pill-nav a.active { + color: var(--teal); + font-weight: 600; + } + + .pill-nav a.active::after { + content: ''; + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + width: 4px; + height: 4px; + border-radius: 50%; + background: var(--teal); + } + + /* ========================================= + MAIN CONTAINER & SECTIONS + ========================================= */ + + .cv-main { + max-width: 1000px; + margin: 0 auto; + padding: 0 32px; + } + + .cv-main section { + padding: 80px 0; + } + + .section-heading { + font-family: var(--font-primary); + font-size: 24px; + font-weight: 700; + color: var(--heading); + margin-bottom: 32px; + } + + /* ========================================= + RESPONSIVE: 768px + ========================================= */ + + @media (max-width: 768px) { + .pill-nav { + max-width: 100%; + width: calc(100% - 32px); + overflow-x: auto; + padding: 6px 12px; + -webkit-overflow-scrolling: touch; + scrollbar-width: none; + } + + .pill-nav::-webkit-scrollbar { + display: none; + } + + .cv-main { + padding: 0 20px; + } + } + + /* ========================================= + RESPONSIVE: 480px + ========================================= */ + + @media (max-width: 480px) { + .pill-nav a { + font-size: 11px; + padding: 4px 8px; + } + + .cv-main { + padding: 0 16px; + } + + .cv-main section { + padding: 48px 0; + } + } @@ -176,7 +296,50 @@
- + + + + + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+