diff --git a/data.json b/data.json index e760391..499c474 100644 --- a/data.json +++ b/data.json @@ -18,16 +18,15 @@ { "title": "AI-first Design System Guidance Tooling", "description": [ - "Researched and prototyped an AI-first UI Toolkit guidance system leveraging Model Context Protocol (MCP), covering over 260 components and guideline documents in collaboration with 3 frontrunner UX designers.", + "Researched and prototyped an AI-first UI Toolkit guidance system leveraging Model Context Protocol (MCP). The tool covered over 260 component guideline documents, code samples and development best practices. It was authored in collaboration with 3 frontrunner UX designers, scaling their expertise across multiple teams.", "Created an automated code review bot leveraging this knowledge corpus, successfully trialed across 4 platform and app delivery teams to validate UI changes early in development." ], "date": "2025 – 2026" }, { - "title": "Telemetry & Observability Stack Architecture", + "title": "Telemetry Stack Architecture", "description": [ - "Shaped product telemetry architecture spanning frontend UI, backend integration, and AI interaction streams.", - "Championed migration from legacy telemetry solutions to OpenTelemetry. Integrated Oracle APM for enterprise-grade performance monitoring.", + "Shaped product telemetry architecture spanning frontend UI, backend integration, and AI interaction streams. Championed migration from legacy telemetry solutions to OpenTelemetry. Integrated Oracle APM for enterprise-grade performance monitoring.", "Designed action-root hybrid sampling strategy to achieve a 92% telemetry volume reduction while preserving critical user-behavior signals.", "Delivered in-app trace visualizer, driving up telemetry adoption among teams." ], diff --git a/style.css b/style.css index d92e05a..86e1464 100644 --- a/style.css +++ b/style.css @@ -9,39 +9,65 @@ @keyframes pulse-trace { - 0%, 100% { opacity: 0.3; } - 50% { opacity: 1; } + + 0%, + 100% { + opacity: 0.3; + } + + 50% { + opacity: 1; + } } @keyframes scan-line { - 0% { transform: translateX(-150%) skewX(-45deg); opacity: 0; } - 10% { opacity: 0.5; } - 20% { transform: translateX(150%) skewX(-45deg); opacity: 0; } - 100% { transform: translateX(150%) skewX(-45deg); opacity: 0; } + 0% { + transform: translateX(-150%) skewX(-45deg); + opacity: 0; + } + + 10% { + opacity: 0.5; + } + + 20% { + transform: translateX(150%) skewX(-45deg); + opacity: 0; + } + + 100% { + transform: translateX(150%) skewX(-45deg); + opacity: 0; + } } @keyframes grow-reveal { - from { - opacity: 0; - max-height: 0; + from { + opacity: 0; + max-height: 0; transform: scale(0.95); } - to { + + to { opacity: 1; - max-height: 1000px; /* Reduced to match content better and speed up animation */ + max-height: 1000px; + /* Reduced to match content better and speed up animation */ transform: scale(1); } } -@keyframes shrink-fade-away { /* New animation for shrinking */ +@keyframes shrink-fade-away { + + /* New animation for shrinking */ from { opacity: 1; max-height: 1000px; transform: scale(1); } + to { opacity: 0; max-height: 0; @@ -51,20 +77,30 @@ @keyframes avatar-color-shift { + /* Cyan phase */ - 0%, 100% { filter: grayscale(100%) sepia(100%) hue-rotate(230deg) saturate(1.4) brightness(1.0); } + 0%, + 100% { + filter: grayscale(100%) sepia(100%) hue-rotate(230deg) saturate(1.4) brightness(1.0); + } + /* Light Blue phase */ - 45% { filter: grayscale(100%) sepia(100%) hue-rotate(160deg) saturate(1.1) brightness(1.0); } + 45% { + filter: grayscale(100%) sepia(100%) hue-rotate(160deg) saturate(1.1) brightness(1.0); + } } -* { box-sizing: border-box; } +* { + box-sizing: border-box; +} body { margin: 0; font-family: var(--mono-font); background-color: var(--bg-color); - background-image: radial-gradient(rgba(0, 243, 255, 0.15) 1px, transparent 1px); /* Grid background */ + background-image: radial-gradient(rgba(0, 243, 255, 0.15) 1px, transparent 1px); + /* Grid background */ background-size: 24px 24px; color: var(--text-color); display: flex; @@ -90,17 +126,15 @@ body { padding: 24px; border: 0.2rem solid transparent; overflow: hidden; - filter: drop-shadow(0 0 10px rgba(0, 243, 255, 0.3)) - drop-shadow(0 0 30px rgba(0, 243, 255, 0.15)); + filter: drop-shadow(0 0 10px rgba(0, 243, 255, 0.3)) drop-shadow(0 0 30px rgba(0, 243, 255, 0.15)); position: relative; transition: all 0.3s ease; - backface-visibility: hidden; /* Fixes potential text blur on rotated cards */ - clip-path: polygon( - 0 15px, 15px 0, - 100% 0, - 100% calc(100% - 15px), calc(100% - 15px) 100%, - 0 100% - ); + backface-visibility: hidden; + /* Fixes potential text blur on rotated cards */ + clip-path: polygon(0 15px, 15px 0, + 100% 0, + 100% calc(100% - 15px), calc(100% - 15px) 100%, + 0 100%); } @@ -108,14 +142,13 @@ body { @media (min-width: 769px) { .card { background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box, - linear-gradient(135deg, rgba(0, 243, 255, 0.4), rgba(255, 0, 255, 0.4)) border-box; + linear-gradient(135deg, rgba(0, 243, 255, 0.4), rgba(255, 0, 255, 0.4)) border-box; } .card:hover { - filter: drop-shadow(0 0 15px rgba(0, 243, 255, 0.5)) - drop-shadow(0 0 50px rgba(0, 243, 255, 0.3)); + filter: drop-shadow(0 0 15px rgba(0, 243, 255, 0.5)) drop-shadow(0 0 50px rgba(0, 243, 255, 0.3)); background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box, - linear-gradient(135deg, rgba(0, 243, 255, 0.8), rgba(255, 0, 255, 0.8)) border-box; + linear-gradient(135deg, rgba(0, 243, 255, 0.8), rgba(255, 0, 255, 0.8)) border-box; } /* Desktop Grid Spans */ @@ -128,16 +161,56 @@ body { border-radius: 4px !important; margin-right: 16px !important; } - .hero { grid-column: span 3; transform: none; } - .interests-showcase { grid-column: span 3; transform: none; } - .hiring-toggle { grid-column: span 3; transform: none; } - .selected-work { grid-column: span 3; transform: none; } - body:not(.cv-mode) .personal { grid-column: span 3; transform: none; } - .cv-mode .personal { grid-column: span 1; transform: none; } - .first-experience { grid-column: span 3; transform: none; } - .experience { grid-column: span 3; transform: none; } - .skills { grid-column: span 3; transform: none; } - .education { grid-column: span 2; transform: none; } + + .hero { + grid-column: span 3; + transform: none; + } + + .interests-showcase { + grid-column: span 3; + transform: none; + } + + .hiring-toggle { + grid-column: span 3; + transform: none; + } + + .selected-work { + grid-column: span 3; + transform: none; + } + + body:not(.cv-mode) .personal { + grid-column: span 3; + transform: none; + } + + .cv-mode .personal { + grid-column: span 1; + transform: none; + } + + .first-experience { + grid-column: span 3; + transform: none; + } + + .experience { + grid-column: span 3; + transform: none; + } + + .skills { + grid-column: span 3; + transform: none; + } + + .education { + grid-column: span 2; + transform: none; + } /* Shuffle Logic */ .avatar { @@ -149,14 +222,38 @@ body { border-radius: 4px !important; margin-right: 16px !important; } - .hero { transform: none; } - .selected-work { transform: translate(2px, -2px); } - .personal { transform: translate(1px, -1px); } - .hiring-toggle { transform: translate(-2px, 3px); } - .first-experience { transform: translate(3px, -2px); } - .experience { transform: translate(3px, -2px); } - .skills { transform: translate(-3px, 4px); } - .education { transform: translate(2px, 3px); } + + .hero { + transform: none; + } + + .selected-work { + transform: translate(2px, -2px); + } + + .personal { + transform: translate(1px, -1px); + } + + .hiring-toggle { + transform: translate(-2px, 3px); + } + + .first-experience { + transform: translate(3px, -2px); + } + + .experience { + transform: translate(3px, -2px); + } + + .skills { + transform: translate(-3px, 4px); + } + + .education { + transform: translate(2px, 3px); + } } @@ -164,13 +261,18 @@ body { .card { border-color: rgba(0, 243, 255, 0.3); } + .card:hover { border-color: rgba(0, 243, 255, 0.6); } } -.profile { display: flex; align-items: center; gap: 32px; } +.profile { + display: flex; + align-items: center; + gap: 32px; +} .hero { display: flex; @@ -266,9 +368,23 @@ body { white-space: nowrap; } +.selected-work { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 20px 28px; + align-items: start; +} + +.selected-work h2 { + grid-column: 1 / -1; +} + +.selected-work .philosophy { + grid-column: 1 / -1; +} + .highlight-descriptions { - column-count: 2; - column-gap: 24px; + column-count: 1; } .highlight-description { @@ -325,8 +441,8 @@ body { } .card blockquote.philosophy { - margin: 1.5em 0 0 0; - padding: 1rem 1.25rem; + margin: 0.25em 0 0 0; + padding: 0.5rem 1.25rem; border-left: 3px solid var(--accent-color); background: rgba(0, 243, 255, 0.03); font-style: italic; @@ -427,9 +543,17 @@ body { } /* Varying shades for tag cloud */ -.personal-tag:nth-child(3n+1) { opacity: 0.6; } -.personal-tag:nth-child(3n+2) { opacity: 0.8; } -.personal-tag:nth-child(3n) { opacity: 1.0; } +.personal-tag:nth-child(3n+1) { + opacity: 0.6; +} + +.personal-tag:nth-child(3n+2) { + opacity: 0.8; +} + +.personal-tag:nth-child(3n) { + opacity: 1.0; +} .hidden { display: none !important; @@ -462,12 +586,10 @@ body { border: 1px solid rgba(0, 243, 255, 0.15); padding: 20px; margin-top: 15px; - clip-path: polygon( - 0 10px, 10px 0, - 100% 0, - 100% calc(100% - 10px), calc(100% - 10px) 100%, - 0 100% - ); + clip-path: polygon(0 10px, 10px 0, + 100% 0, + 100% calc(100% - 10px), calc(100% - 10px) 100%, + 0 100%); transition: all 0.3s ease; } @@ -485,9 +607,12 @@ body { } -.cv-item:last-child { margin-bottom: 0; } +.cv-item:last-child { + margin-bottom: 0; +} -.cv-item-header, .cv-header { +.cv-item-header, +.cv-header { display: flex; justify-content: space-between; align-items: baseline; @@ -602,18 +727,22 @@ address.mono-addr span { .link-grid { - list-style: none; padding: 0; display: grid; gap: 10px; + list-style: none; + padding: 0; + display: grid; + gap: 10px; } -.link-grid a { +.link-grid a { font-size: 0.75rem; display: block; padding: 8px; border-left: 3px solid var(--text-color); color: var(--link-color); - background: rgba(0, 243, 255, 0.15); /* Increased alpha for better visibility */ + background: rgba(0, 243, 255, 0.15); + /* Increased alpha for better visibility */ text-align: center; transition: all 0.2s ease; border: 1px solid rgba(0, 243, 255, 0.3); @@ -640,8 +769,10 @@ address.mono-addr span { .links::after { content: ""; position: absolute; - top: 10px; right: 10px; - width: 10px; height: 10px; + top: 10px; + right: 10px; + width: 10px; + height: 10px; background: var(--link-color); box-shadow: 0 0 15px 2px var(--link-color); border-radius: 50%; @@ -677,12 +808,19 @@ address.mono-addr span { } -.switch input { opacity: 0; width: 0; height: 0; } +.switch input { + opacity: 0; + width: 0; + height: 0; +} .slider { position: absolute; cursor: pointer; - top: 0; left: 0; right: 0; bottom: 0; + top: 0; + left: 0; + right: 0; + bottom: 0; background-color: rgba(255, 0, 255, 0.2); transition: .4s; border: 1px solid var(--accent-color); @@ -692,17 +830,23 @@ address.mono-addr span { .slider:before { position: absolute; content: ""; - height: 12px; width: 12px; - left: 4px; bottom: 3px; + height: 12px; + width: 12px; + left: 4px; + bottom: 3px; background-color: var(--accent-color); transition: .4s; box-shadow: 0 0 10px var(--accent-color); } -input:checked + .slider { background-color: rgba(0, 243, 255, 0.2); border-color: var(--text-color); } -input:checked + .slider:before { - transform: translateX(20px); +input:checked+.slider { + background-color: rgba(0, 243, 255, 0.2); + border-color: var(--text-color); +} + +input:checked+.slider:before { + transform: translateX(20px); background-color: var(--text-color); box-shadow: 0 0 10px var(--text-color); } @@ -710,7 +854,8 @@ input:checked + .slider:before { .avatar { width: 120px; - height: 160px; /* Explicit height for aspect ratio 3:4 */ + height: 160px; + /* Explicit height for aspect ratio 3:4 */ object-fit: cover; border: 1px solid var(--text-color); animation: avatar-color-shift 20s infinite linear; @@ -722,18 +867,18 @@ body.cv-mode .avatar { } -h1 { - margin: 0; - font-size: clamp(1.5rem, 5vw, 2.2rem); +h1 { + margin: 0; + font-size: clamp(1.5rem, 5vw, 2.2rem); color: #fff; text-shadow: 1px 1px var(--accent-color), -1px -1px var(--text-color), 0 0 15px rgba(255, 255, 255, 0.3); letter-spacing: 1px; } -h2 { - font-size: 0.75rem; - text-transform: uppercase; +h2 { + font-size: 0.75rem; + text-transform: uppercase; color: var(--accent-color); text-shadow: 0 0 8px var(--accent-color); margin-bottom: 16px; @@ -742,14 +887,28 @@ h2 { } -a { color: var(--link-color); text-decoration: none; } +a { + color: var(--link-color); + text-decoration: none; +} @media (max-width: 768px) { - .bento-grid { grid-template-columns: 1fr; } - .profile, .about, .interests, .links, .contact, - .first-experience, .experience, .skills, .education { - grid-column: span 1; + .bento-grid { + grid-template-columns: 1fr; } + + .profile, + .about, + .interests, + .links, + .contact, + .first-experience, + .experience, + .skills, + .education { + grid-column: span 1; + } + .avatar { display: block !important; max-width: 80px !important; @@ -759,22 +918,48 @@ a { color: var(--link-color); text-decoration: none; } border-radius: 4px !important; margin-right: 16px !important; } - .profile { flex-direction: column; text-align: center; } - .hero { flex-direction: column; text-align: center; } - .hero-identity { flex-direction: column; text-align: center; } - .hero-contacts, .hero-nav { justify-content: center; } - .pill { white-space: normal; gap: 4px 6px; padding: 5px 10px; } - .pill-url { display: inline; } + + .profile { + flex-direction: column; + text-align: center; + } + + .hero { + flex-direction: column; + text-align: center; + } + + .hero-identity { + flex-direction: column; + text-align: center; + } + + .hero-contacts, + .hero-nav { + justify-content: center; + } + + .pill { + white-space: normal; + gap: 4px 6px; + padding: 5px 10px; + } + + .pill-url { + display: inline; + } } /* Tamed Cyberpunk Overrides for CV Mode */ body.cv-mode { --bg-color: #0d0e12; - --text-color: #cbd5e1; /* slaty blue-gray */ + --text-color: #cbd5e1; + /* slaty blue-gray */ --accent-color: #00d2ff; - --secondary-accent: #f472b6; /* modern pink/magenta */ + --secondary-accent: #f472b6; + /* modern pink/magenta */ --card-bg: #15171e; - background-image: + background-image: linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px) !important; background-size: 60px 60px !important; @@ -808,35 +993,37 @@ body.cv-mode { background: var(--card-bg) !important; } -.cv-mode h1, .cv-mode h2, .cv-mode h3 { +.cv-mode h1, +.cv-mode h2, +.cv-mode h3 { font-family: inherit; text-transform: uppercase; letter-spacing: normal; text-shadow: none !important; } -.cv-mode h1 { - color: #fff; - text-transform: none; - font-weight: 800; - letter-spacing: -0.02em; +.cv-mode h1 { + color: #fff; + text-transform: none; + font-weight: 800; + letter-spacing: -0.02em; } -.cv-mode h2 { - color: var(--accent-color); - font-size: 0.7rem; +.cv-mode h2 { + color: var(--accent-color); + font-size: 0.7rem; font-family: var(--mono-font); letter-spacing: 0.15em; - border-bottom: 1px solid rgba(255, 255, 255, 0.05); + border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding-bottom: 12px; margin-bottom: 24px; } -.cv-mode h3 { - color: #f8fafc; - text-transform: none; - font-weight: 600; - font-size: 1.05rem; +.cv-mode h3 { + color: #f8fafc; + text-transform: none; + font-weight: 600; + font-size: 1.05rem; } .cv-mode .tag { @@ -852,10 +1039,10 @@ body.cv-mode { border-radius: 4px; } -.cv-mode .cv-date { - color: var(--secondary-accent); +.cv-mode .cv-date { + color: var(--secondary-accent); font-family: var(--mono-font); - font-weight: 600; + font-weight: 600; font-size: 0.75rem; background: rgba(244, 114, 182, 0.05); padding: 2px 8px; @@ -879,20 +1066,35 @@ body.cv-mode { /* Print mode */ /* Condensed Print Mode - White Background */ @media print { - .print-button { display: none !important; } - - /* Ensure hidden elements stay hidden in print */ - .hidden { display: none !important; } - .cv-mode .hidden { display: none !important; } - /* Hide CV content unless CV mode is active */ - .cv-container, .cv-section { + .print-button { display: none !important; } - .cv-mode .cv-container, .cv-mode .cv-section { + + /* Ensure hidden elements stay hidden in print */ + .hidden { + display: none !important; + } + + .cv-mode .hidden { + display: none !important; + } + + /* Hide CV content unless CV mode is active */ + .cv-container, + .cv-section { + display: none !important; + } + + .cv-mode .cv-container, + .cv-mode .cv-section { display: block !important; } + /* Hide navigation card in print */ - .card.links { display: none !important; } + .card.links { + display: none !important; + } + * { box-sizing: border-box; background: transparent !important; @@ -901,7 +1103,7 @@ body.cv-mode { transition: none !important; color: #000 !important; } - + body { background: #fff !important; color: #000 !important; @@ -912,7 +1114,7 @@ body.cv-mode { overflow: visible !important; display: block !important; } - + .bento-grid { display: block !important; max-width: 100% !important; @@ -920,7 +1122,7 @@ body.cv-mode { padding: 0 !important; margin: 0 !important; } - + .card { background: #fff !important; border: 1px solid #ccc !important; @@ -931,11 +1133,17 @@ body.cv-mode { overflow: visible !important; filter: none !important; } - + /* Hide interactive elements */ - .cv-toggle-container, .hiring-toggle, .switch, - .link-grid, .links::after, .profile::before, - .hiring-cta, .hiring-btn, .cv-section::after { + .cv-toggle-container, + .hiring-toggle, + .switch, + .link-grid, + .links::after, + .profile::before, + .hiring-cta, + .hiring-btn, + .cv-section::after { display: none !important; } @@ -946,6 +1154,7 @@ body.cv-mode { gap: 8px; width: 100% !important; } + .contact .link-grid a { flex: 1 1 0 !important; min-width: 80px; @@ -958,6 +1167,7 @@ body.cv-mode { flex-wrap: wrap; gap: 4px; } + address.mono-addr span { display: inline-block !important; margin-right: 8px; @@ -968,14 +1178,17 @@ body.cv-mode { /* Span more columns in the grid for a wider layout */ grid-column: span 3 !important; } + /* Removed duplicate flex layout for .contact .link-grid */ /* Pill links in print – show label + URL clearly */ - .hero-contacts, .hero-nav { + .hero-contacts, + .hero-nav { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; } + .pill { display: inline-flex !important; align-items: center !important; @@ -988,9 +1201,11 @@ body.cv-mode { text-decoration: none !important; font-size: 0.75rem !important; } + .pill .pill-icon { display: none !important; } + .pill .pill-url { display: inline !important; opacity: 1 !important; @@ -998,22 +1213,28 @@ body.cv-mode { font-size: 0.7rem !important; margin-left: 4px !important; } + .pill-cv-only-print { display: inline-flex !important; } - + /* CV Container – hidden unless CV mode */ - + /* Reset animations */ - .reveal, .fade-out, .tag, img { + .reveal, + .fade-out, + .tag, + img { animation: none !important; transition: none !important; filter: grayscale(100%) !important; opacity: 1 !important; } - + /* Show content */ - .experience, .skills, .education { + .experience, + .skills, + .education { display: block !important; opacity: 1 !important; max-height: none !important; @@ -1021,7 +1242,7 @@ body.cv-mode { pointer-events: auto !important; margin: 4px 0 !important; } - + /* Profile layout */ .avatar { display: block !important; @@ -1033,6 +1254,7 @@ body.cv-mode { filter: none !important; margin-right: 16px !important; } + .profile { display: flex !important; align-items: center !important; @@ -1040,48 +1262,59 @@ body.cv-mode { padding: 8px !important; flex-wrap: wrap !important; } - + /* Hero layout – keep photo left, name right (like desktop) */ .hero { display: flex !important; flex-direction: column !important; gap: 12px !important; } + .hero-identity { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 16px !important; } - - + + /* Selected Work highlights – give titles and items room */ + .selected-work { + display: block !important; + } + .highlight-item { margin: 12px 0 !important; padding: 8px 0 !important; border-bottom: 1px solid #eee !important; border-left: none !important; } + .highlight-item:last-child { border-bottom: none !important; } + .highlight-item h3 { font-size: 13px !important; margin: 0 0 4px 0 !important; } + .highlight-subtitle { font-size: 0.85em !important; margin: 0 0 6px 0 !important; font-style: italic !important; } + .highlight-descriptions { column-count: 1 !important; } + .highlight-description { font-size: 0.9em !important; margin: 0 !important; line-height: 1.5 !important; } + /* Links grid */ .link-grid a { color: #000 !important; @@ -1092,7 +1325,7 @@ body.cv-mode { margin: 2px !important; font-size: 0.85em !important; } - + /* Typography */ h1 { font-size: 18px !important; @@ -1101,7 +1334,7 @@ body.cv-mode { border-bottom: 1px solid #000 !important; color: #000 !important; } - + h2 { font-size: 11px !important; text-transform: uppercase !important; @@ -1111,19 +1344,22 @@ body.cv-mode { border-bottom: 1px solid #eee !important; font-weight: bold !important; } - - h3, h4, h5, h6 { + + h3, + h4, + h5, + h6 { font-size: 10px !important; margin: 4px 0 !important; color: #000 !important; font-weight: bold !important; } - + a { color: #000 !important; text-decoration: underline !important; } - + /* Remove neon effects */ .tag { opacity: 1 !important; @@ -1132,16 +1368,31 @@ body.cv-mode { padding: 2px 6px !important; font-size: 0.8em !important; } - + /* Condensed spacing */ - .card h1 { margin: 0 0 4px 0 !important; } - .card h2 { margin: 4px 0 8px 0 !important; } - .card p { margin: 4px 0 !important; font-size: 0.9em !important; } - .card li { margin: 2px 0 !important; font-size: 0.9em !important; } - + .card h1 { + margin: 0 0 4px 0 !important; + } + + .card h2 { + margin: 4px 0 8px 0 !important; + } + + .card p { + margin: 4px 0 !important; + font-size: 0.9em !important; + } + + .card li { + margin: 2px 0 !important; + font-size: 0.9em !important; + } + /* Remove gradients and shadows */ - .profile .links { display: none !important; } - + .profile .links { + display: none !important; + } + /* Ensure images don't take too much space */ img { max-width: 60px !important; @@ -1149,18 +1400,25 @@ body.cv-mode { object-fit: contain !important; filter: grayscale(100%) !important; } - + /* Better column layout for print */ @page { margin: 1cm; } - + /* Reduce page breaks */ - .card { page-break-inside: avoid !important; } + .card { + page-break-inside: avoid !important; + } /* Ensure hidden elements stay hidden in print */ - .hidden { display: none !important; } - .cv-mode .hidden { display: none !important; } + .hidden { + display: none !important; + } + + .cv-mode .hidden { + display: none !important; + } /* Render interests as horizontal pills in print */ .personal-tags { @@ -1168,6 +1426,7 @@ body.cv-mode { flex-wrap: wrap !important; gap: 4px !important; } + .personal-tag { display: inline-flex !important; align-items: center !important; @@ -1208,11 +1467,16 @@ body.cv-mode { margin-bottom: 24px; } -.interests-nav h2 { margin-top: 0; font-size: 0.75rem; margin-bottom: 16px; } -.interests-nav ul { - list-style: none; - padding: 0; - margin: 0; +.interests-nav h2 { + margin-top: 0; + font-size: 0.75rem; + margin-bottom: 16px; +} + +.interests-nav ul { + list-style: none; + padding: 0; + margin: 0; display: flex; flex-wrap: wrap; gap: 10px; @@ -1229,7 +1493,10 @@ body.cv-mode { color: var(--text-color); } -.interests-nav li:hover { background: rgba(0, 243, 255, 0.15); border-color: rgba(0, 243, 255, 0.4); } +.interests-nav li:hover { + background: rgba(0, 243, 255, 0.15); + border-color: rgba(0, 243, 255, 0.4); +} .interests-nav li.active { background: var(--accent-color); @@ -1249,19 +1516,24 @@ body.cv-mode { background: #000; } -.interest-slide { - display: none; - width: 100%; - height: 100%; - flex-direction: column; - align-items: center; +.interest-slide { + display: none; + width: 100%; + height: 100%; + flex-direction: column; + align-items: center; justify-content: center; position: absolute; inset: 0; padding: 30px; - color: #fff; /* Changed to white for dark backgrounds */ + color: #fff; + /* Changed to white for dark backgrounds */ +} + +.interest-slide.active { + display: flex; + animation: interestFadeIn 0.4s ease-out; } -.interest-slide.active { display: flex; animation: interestFadeIn 0.4s ease-out; } .interest-slide img { position: absolute; @@ -1272,19 +1544,29 @@ body.cv-mode { z-index: 1; } -.interest-slide .caption { - position: relative; - z-index: 2; - font-size: 1.0rem; - line-height: 2.0; +.interest-slide .caption { + position: relative; + z-index: 2; + font-size: 1.0rem; + line-height: 2.0; color: inherit; font-weight: bold; - text-shadow: 0 1px 2px rgba(255,255,255,0.5); + text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5); } -.interest-slide img + .caption { +.interest-slide img+.caption { color: #fff; text-shadow: 0 0 10px #000, 0 0 20px #000; } -@keyframes interestFadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } +@keyframes interestFadeIn { + from { + opacity: 0; + transform: translateY(5px); + } + + to { + opacity: 1; + transform: translateY(0); + } +} \ No newline at end of file