/* ============================================================================= style.css — Mehul Amin Portfolio Shared stylesheet loaded by ALL pages (index.html + pages/*.html) TABLE OF CONTENTS ───────────────────────────────────────────────────────────────────────────── §1a CSS Custom Properties — Dark Mode (default :root) §1b CSS Custom Properties — Light Mode override §2 Global Reset & Base Typography §3 Background Layers (aurora canvas, neural canvas, grid overlay, scan line) §4 Navigation (top nav, logo, links, theme buttons, mobile menu) §5 Page System (visibility, main wrapper) §6 Layout Utilities (wrap, section headers) §7 Hero Section (container, grid, text, CTA, quick-facts, photo, badges) §8 Buttons (.btn-p primary, .btn-o outline) §9 Experience Page — Timeline §10 Skills Page — Cards & Pills §11 Portfolio Page — Impact Cards §12 Contact Page — Layout & Form §13 Awards & Certs §14 Cert Cards (earned certifications with links) §15 Footer §16 Scroll Reveal Animation §17 Glitch Effect §18 Hex Decorations §19 Toast Notification §20 Shared Keyframe Animations §21 Responsive Breakpoints (≤860px, ≤520px) ───────────────────────────────────────────────────────────────────────────── ============================================================================= */ /* ═════════════════════════════════════════════════════════════════════════════ §1a DESIGN TOKENS — DARK MODE (default) Applied to :root — dark is the base experience. All colours, glows, and font refs use these vars throughout the stylesheet. setTheme() in main.js switches themes by setting html[data-theme]. ═════════════════════════════════════════════════════════════════════════════ */ :root { /* ── Background layers ─────────────────────────── */ --bg: #020610; /* body / page background — deep space navy */ --bg2: #050c1c; /* slightly lighter background variant */ --surface: #080f22; /* card and form field backgrounds */ --surface2: #0c1530; /* elevated card surfaces */ /* ── Border colours (cyan, low opacity) ────────── */ --border: rgba(0,200,255,0.12); /* default subtle outline */ --border2: rgba(0,200,255,0.25); /* hover / active stronger outline */ /* ── Brand palette ─────────────────────────────── */ --cyan: #00c8ff; /* primary accent — links, active states */ --cyan2: #00f5e0; /* secondary accent — glitch, pulse dots */ --gold: #f0a500; /* dates, subtitles, secondary highlights */ /* ── Text hierarchy ────────────────────────────── */ --text: #e2eaf5; /* primary body text */ --muted: #7a9ab8; /* secondary / description text */ --dim: #3d5a78; /* placeholder text, inactive elements */ /* ── Glow / bloom ──────────────────────────────── */ --glow: rgba(0,200,255,0.15); /* soft ambient glow (backgrounds, badges) */ --glow-str: rgba(0,200,255,0.32); /* stronger glow used on button hover */ /* ── Component surfaces ────────────────────────── */ --card-bg: rgba(5,10,22,0.92); /* semi-transparent card backgrounds */ --nav-bg: rgba(4,8,15,0.92); /* top nav bar background */ --grid-line: rgba(0,200,255,0.04); /* CSS grid overlay line colour */ /* ── Typography — loaded via Google Fonts in each HTML ─── */ --serif: 'Rajdhani', sans-serif; /* display / headings — futuristic geometric */ --sans: 'Space Grotesk', sans-serif; /* body text — modern and readable */ } /* ═════════════════════════════════════════════════════════════════════════════ §1b DESIGN TOKENS — LIGHT MODE OVERRIDE Applied when . Triggered by setTheme('light') in main.js — stored in localStorage 'ma-theme'. Only colour / glow tokens need overriding; layout vars inherit from :root. ═════════════════════════════════════════════════════════════════════════════ */ [data-theme="light"] { --bg: #e8eef8; --bg2: #dce6f5; --surface: #f5f8ff; --surface2: #eef2fc; --border: rgba(0,110,170,0.15); --border2: rgba(0,110,170,0.28); --cyan: #0066bb; /* darker blue for readability on white */ --cyan2: #008877; --gold: #bb6600; --text: #0a1929; --muted: #4a6480; --dim: #8aacc0; --glow: rgba(0,110,170,0.10); --glow-str: rgba(0,110,170,0.20); --card-bg: rgba(248,252,255,0.95); --nav-bg: rgba(238,242,249,0.94); --grid-line: rgba(0,110,170,0.05); /* --serif and --sans intentionally not overridden — same fonts in both themes */ } /* ═════════════════════════════════════════════════════════════════════════════ §2 GLOBAL RESET & BASE TYPOGRAPHY Normalise browser defaults. Smooth theme transitions applied to body. overflow-x:hidden prevents horizontal scroll from canvas overflow. ═════════════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; /* padding and border included in element size */ margin: 0; padding: 0; } html { scroll-behavior: smooth; } /* smooth scrolling for any anchor links */ body { background: var(--bg); color: var(--text); font-family: var(--sans); font-weight: 300; line-height: 1.7; overflow-x: hidden; /* clip canvas overflow — no horizontal scroll */ transition: background .35s, color .35s; /* smooth crossfade when theme changes */ } /* ═════════════════════════════════════════════════════════════════════════════ §3 BACKGROUND LAYERS Four stacked layers render the sci-fi environment behind all page content. z-index stack (lowest → highest): 0 aurora-canvas — JS: base fill, stars, nebula orbs, data streams 1 neural-canvas — JS: 48 drifting nodes with connection edges 2 body::before — CSS: dual-scale grid overlay with radial fade mask 3 .scan-line — CSS: animated horizontal sweep line 5+ main content ═════════════════════════════════════════════════════════════════════════════ */ /* §3a — AURORA CANVAS (z-index 0) Bottom-most layer. JS draws: solid bg fill → starfield (dark mode) → 5 animated nebula orbs → occasional data-stream shooting stars. will-change promotes to own GPU compositor layer → eliminates flicker when neural-canvas repaints on top of it. */ #aurora-canvas { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; /* never intercepts mouse / touch */ z-index:0; will-change: contents; /* own GPU layer — prevents inter-canvas flicker */ } /* §3b — NEURAL CANVAS (z-index 1) Middle background layer. JS draws: 48 drifting nodes connected by proximity-based edges. Opacity 0.45 keeps it subtle beneath content. No shadowBlur used in JS — two-circle technique avoids flicker. */ #neural-canvas { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:1; opacity:.45; will-change: contents; /* own GPU layer — stops re-compositing aurora beneath */ } /* §3c — CSS GRID OVERLAY (z-index 2, body::before) Dual-scale sci-fi grid pseudo-element: Major grid → 112px × 112px lines (1px) Minor grid → 28px × 28px lines (0.5px) Radial mask gradient fades the grid at screen edges. */ body::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:2; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), /* major horizontal */ linear-gradient(90deg, var(--grid-line) 1px, transparent 1px), /* major vertical */ linear-gradient(var(--grid-line) .5px, transparent .5px), /* minor horizontal */ linear-gradient(90deg, var(--grid-line) .5px, transparent .5px); /* minor vertical */ background-size: 112px 112px, 112px 112px, 28px 28px, 28px 28px; /* fade grid toward edges — full visibility centre, invisible corners */ mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, black 40%, transparent 100%); } /* §3d — SCAN LINE (z-index 3) Single 2px cyan gradient bar that sweeps top → bottom on a 9s loop. Pure CSS animation — no JavaScript needed. */ .scan-line { position:fixed; left:0; right:0; height:2px; background:linear-gradient(to right, transparent, var(--cyan), transparent); opacity:0; z-index:3; pointer-events:none; animation:scan 9s ease-in-out infinite; } @keyframes scan { 0% { top:0; opacity:0 } 5% { opacity:.2 } /* fade in near top */ 95% { opacity:.08 } /* nearly faded out near bottom */ 100% { top:100%; opacity:0 } /* reset — jumps back to top */ } /* ═════════════════════════════════════════════════════════════════════════════ §4 NAVIGATION Fixed top bar shared across all 5 pages (z-index 1000). Height: 62px — matched by main { padding-top:62px } to prevent overlap. ═════════════════════════════════════════════════════════════════════════════ */ /* §4a — TOP NAV BAR Frosted-glass effect via backdrop-filter blur over the bg canvases. */ nav { position:fixed; top:0; left:0; right:0; z-index:1000; display:flex; align-items:center; justify-content:space-between; padding:0 2.5rem; height:62px; background:var(--nav-bg); backdrop-filter:blur(18px); /* blurs the aurora/neural canvases visible behind nav */ border-bottom:1px solid var(--border); transition:background .35s; /* smooth during theme toggle */ } /* §4b — LOGO & PULSING DOT Logo links home (index.html = About page). .nav-dot pulses with box-shadow via @keyframes pdot. */ .nav-logo { font-family:var(--serif); font-size:.82rem; letter-spacing:.16em; color:var(--cyan); text-decoration:none; display:flex; align-items:center; gap:.6rem; } .nav-dot { width:7px; height:7px; background:var(--cyan); border-radius:50%; box-shadow:0 0 8px var(--cyan); animation:pdot 2s infinite; /* glow pulse — see §20 keyframes */ } @keyframes pdot { 0%,100% { box-shadow:0 0 6px var(--cyan) } 50% { box-shadow:0 0 16px var(--cyan), 0 0 28px var(--cyan) } } /* §4c — PAGE LINKS data-p attribute on each lets highlightActiveNav() (main.js) set class="active" on the link matching the current page filename. Animated underline expands from left on hover / active state. */ .nav-links { display:flex; gap:2rem; list-style:none; align-items:center; } .nav-links a { font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); text-decoration:none; transition:color .2s; position:relative; } /* underline bar — scales from 0 → full width on hover/active */ .nav-links a::after { content:''; position:absolute; bottom:-4px; left:0; right:0; height:1px; background:var(--cyan); transform:scaleX(0); transform-origin:left; transition:transform .25s; } .nav-links a:hover, .nav-links a.active { color:var(--cyan); } .nav-links a:hover::after, .nav-links a.active::after { transform:scaleX(1); } /* §4d — THEME TOGGLE BUTTONS (🌙 Dark | ⚙️ Auto | ☀️ Light) Clicking calls setTheme(t) in main.js which: - stores preference in localStorage key 'ma-theme' - writes html[data-theme] attribute to switch CSS tokens - adds class .on to the active button (highlights it cyan) */ .theme-controls { display:flex; gap:.4rem; align-items:center; } .theme-btn { width:28px; height:28px; border:1px solid var(--border2); background:var(--surface); border-radius:4px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:.78rem; transition:all .2s; color:var(--muted); } .theme-btn:hover, .theme-btn.on { border-color:var(--cyan); color:var(--cyan); background:var(--glow); } /* §4e — MOBILE HAMBURGER BUTTON Hidden on desktop (display:none). Shown at ≤860px breakpoint. Calls toggleMob() — switches icon between ☰ and ✕. */ .mob-btn { display:none; /* hidden on desktop */ background:none; border:1px solid var(--border2); border-radius:3px; padding:.35rem .55rem; cursor:pointer; color:var(--text); font-size:1rem; margin-left:.6rem; } @media(max-width:860px) { .nav-links { display:none; } /* hide desktop links */ .mob-btn { display:flex; align-items:center; } /* show hamburger */ } /* §4f — MOBILE FULLSCREEN MENU Full-viewport overlay activated by toggleMob() in main.js. display:none by default; class .open switches to display:flex. Positioned below the 62px nav bar (inset: 62px 0 0). */ .mobile-menu { display:none; /* hidden by default */ position:fixed; inset:62px 0 0; /* covers full viewport minus nav */ background:var(--nav-bg); backdrop-filter:blur(20px); z-index:999; /* below nav (1000) but above all page content */ flex-direction:column; align-items:center; justify-content:center; gap:2rem; } .mobile-menu.open { display:flex; } /* toggled by toggleMob() in main.js */ .mobile-menu a { font-family:var(--serif); font-size:1.1rem; letter-spacing:.15em; color:var(--muted); text-decoration:none; transition:color .2s; } .mobile-menu a:hover { color:var(--cyan); } /* ═════════════════════════════════════════════════════════════════════════════ §5 PAGE SYSTEM ═════════════════════════════════════════════════════════════════════════════ */ /* §5a — PAGE VISIBILITY Each HTML file contains a single
wrapping its content. In this multi-file setup every page is always active at build time. fadeIn animation triggers on every page load — 0.45s slide-up effect. */ .page { display:none; } .page.active { display:block; animation:fadeIn .45s ease; } @keyframes fadeIn { from { opacity:0; transform:translateY(14px) } to { opacity:1; transform:none } } /* §5b — MAIN CONTENT WRAPPER z-index:1 renders content above both bg canvases (z-index 0/1). padding-top:62px offsets the fixed nav bar height. */ main { position:relative; z-index:1; padding-top:62px; min-height:100vh; } /* ═════════════════════════════════════════════════════════════════════════════ §6 LAYOUT UTILITIES ═════════════════════════════════════════════════════════════════════════════ */ /* §6a — CONTENT WRAPPER (.wrap) Max-width centred container used on all inner pages. z-index:5 ensures text renders above all background layers including grid. */ .wrap { max-width:1160px; margin:0 auto; padding:5.5rem 2.5rem; position:relative; z-index:5; } /* §6b — SECTION HEADERS Pattern: .sec-label (numbered category) → h2.sec-title (large heading) → .sec-sub (subtitle) .sec-label::after draws a right-extending gradient rule line. */ .sec-label { font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; color:var(--cyan); margin-bottom:.9rem; display:flex; align-items:center; gap:1rem; } .sec-label::after { content:''; flex:1; height:1px; background:linear-gradient(to right, var(--border2), transparent); /* rule fades to right */ } h2.sec-title { font-family:var(--serif); font-size:clamp(2.1rem,4.2vw,3.2rem); /* fluid type */ font-weight:700; line-height:1.12; margin-bottom:.7rem; letter-spacing:.02em; } .sec-sub { color:var(--muted); font-size:.97rem; max-width:580px; margin-bottom:3.2rem; } /* ═════════════════════════════════════════════════════════════════════════════ §7 HERO SECTION (index.html — About page only) ═════════════════════════════════════════════════════════════════════════════ */ /* §7a — HERO CONTAINER Full viewport-height minus nav (calc 100vh - 62px). overflow:hidden clips the floating hex decorations at the edges. ::after draws a thin cyan gradient horizon line at the bottom edge. */ .hero { min-height:calc(100vh - 62px); display:flex; align-items:center; padding:4rem 2.5rem; position:relative; overflow:hidden; z-index:5; } .hero::after { /* decorative horizon line at bottom of hero */ content:''; position:absolute; bottom:0; left:0; right:0; height:1px; background:linear-gradient(to right, transparent, var(--cyan), var(--cyan2), var(--cyan), transparent); opacity:.35; } .hero-inner { max-width:1160px; margin:0 auto; width:100%; } /* §7b — TWO-COLUMN HERO GRID Left: text content (flexible). Right: profile photo (fixed 360px). Collapses to 1-column on mobile (see §21 responsive). */ .hero-grid { display:grid; grid-template-columns:1fr 360px; gap:5rem; align-items:center; } /* §7c — HERO TEXT ELEMENTS All hero text starts at opacity:0 and animates in via @keyframes 'up' (see §20). Staggered animation-delay creates sequential reveal: .1s → .72s. */ .hero-eyebrow { /* small tagline above name e.g. "Engineering Leader · AI Architect" */ font-size:.68rem; letter-spacing:.28em; text-transform:uppercase; color:var(--cyan); margin-bottom:1.4rem; display:flex; align-items:center; gap:.9rem; opacity:0; animation:up .7s .1s forwards; /* delay 0.1s — first to appear */ } .hero-eyebrow::before { content:''; width:36px; height:1px; background:var(--cyan); } /* left dash */ h1.hname { /* main name — fluid size 2.8rem → 5.8rem */ font-family:var(--serif); font-weight:900; font-size:clamp(2.8rem,6.5vw,5.8rem); line-height:1.0; letter-spacing:-.01em; margin-bottom:.9rem; opacity:0; animation:up .7s .25s forwards; /* delay 0.25s */ } h1.hname .acc { color:var(--cyan); display:block; } /* "AMIN" on own line in cyan */ .hero-title { /* job title in gold — "VP of Engineering & AI Strategy" */ font-size:.88rem; font-weight:500; color:var(--gold); letter-spacing:.1em; text-transform:uppercase; margin-bottom:1.4rem; opacity:0; animation:up .7s .38s forwards; /* delay 0.38s */ } .hero-bio { /* 2–3 sentence professional summary */ font-size:1.02rem; color:var(--muted); max-width:520px; line-height:1.9; opacity:0; animation:up .7s .5s forwards; /* delay 0.5s */ } /* §7d — CTA BUTTON ROW (wraps two buttons — styles in §8 BUTTONS) */ .hero-cta { display:flex; gap:.9rem; margin-top:2.2rem; flex-wrap:wrap; opacity:0; animation:up .7s .62s forwards; } /* §7e — QUICK FACTS BAR (location, education, AI focus, email) Separated from bio by a top border. Stacks vertically on small phones (§21). */ .quick-facts { display:flex; gap:2rem; flex-wrap:wrap; margin-top:2.5rem; padding-top:2rem; border-top:1px solid var(--border); opacity:0; animation:up .7s .72s forwards; /* last element — delay 0.72s */ } .qf { display:flex; align-items:center; gap:.55rem; font-size:.82rem; color:var(--muted); } .qf strong { color:var(--text); font-weight:500; } /* §7f — PROFILE PHOTO .photo-card — outer wrapper with fade-in animation .photo-frame — styled frame, 4:5 aspect ratio portrait crop img — anchored top-centre (object-position) to keep face visible .pc — four corner accent brackets overlaid on the frame */ .photo-card { position:relative; opacity:0; animation:up .9s .3s forwards; } /* slightly slower than text */ .photo-frame { position:relative; width:100%; max-width:340px; border:1px solid var(--border2); border-radius:4px; overflow:hidden; background:var(--surface); aspect-ratio:4/5; } .photo-frame img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; } /* corner bracket decorations — positioned absolute at each corner */ .pc { position:absolute; width:18px; height:18px; border-color:var(--cyan); border-style:solid; } .pc.tl { top:-1px; left:-1px; border-width:2px 0 0 2px } /* ┌ top-left */ .pc.tr { top:-1px; right:-1px; border-width:2px 2px 0 0 } /* ┐ top-right */ .pc.bl { bottom:-1px; left:-1px; border-width:0 0 2px 2px } /* └ bottom-left */ .pc.br { bottom:-1px; right:-1px; border-width:0 2px 2px 0 } /* ┘ bottom-right */ /* §7g — STATUS BADGES .ai-badge — "Open to Senior Leadership Roles" chip above the name (pulsing dot) .photo-badge — "📡 NJ · Remote-First" tag floating over bottom of photo */ .photo-badge { position:absolute; bottom:-1rem; left:50%; transform:translateX(-50%); background:var(--surface); border:1px solid var(--border2); padding:.45rem 1.1rem; border-radius:20px; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); white-space:nowrap; } .ai-badge { display:inline-flex; align-items:center; gap:.45rem; background:var(--glow); border:1px solid var(--border2); padding:.32rem .9rem; border-radius:20px; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan); margin-bottom:1.3rem; } .ai-badge::before { content:''; width:5px; height:5px; background:var(--cyan); border-radius:50%; animation:pdot 1.5s infinite; } /* ═════════════════════════════════════════════════════════════════════════════ §8 BUTTONS (.btn base + .btn-p primary + .btn-o outline) Used in hero CTAs and contact form submit. Both variants lift 2px on hover for tactile click feedback. ═════════════════════════════════════════════════════════════════════════════ */ .btn { display:inline-flex; align-items:center; gap:.45rem; padding:.62rem 1.7rem; border-radius:2px; font-family:var(--sans); font-size:.75rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; cursor:pointer; border:none; transition:all .25s; } .btn-p { background:var(--cyan); color:var(--bg); } /* primary — solid cyan fill */ .btn-p:hover { background:var(--cyan2); box-shadow:0 0 22px var(--glow-str); transform:translateY(-2px); } .btn-o { background:transparent; border:1px solid var(--border2); color:var(--text); } /* outline */ .btn-o:hover { border-color:var(--cyan); color:var(--cyan); transform:translateY(-2px); } /* ═════════════════════════════════════════════════════════════════════════════ §9 EXPERIENCE PAGE — VERTICAL TIMELINE Left-edge gradient rule with glowing dot markers per role. Structure per entry: .tl-item — role container, left-padded to clear the timeline line .tl-dot — glowing cyan circle on the left rule .tl-head — flex row: role/company (left) | date/location (right) .tl-buls — achievement bullet list with ▸ accent markers .tl-tags — technology tag chips row ═════════════════════════════════════════════════════════════════════════════ */ .timeline { position:relative; } /* vertical left-edge line — gradient fades in at top and out at bottom */ .timeline::before { content:''; position:absolute; left:0; top:0; bottom:0; width:1px; background:linear-gradient(to bottom, transparent, var(--border2) 10%, var(--border2) 90%, transparent); } .tl-item { padding:0 0 3.2rem 2.8rem; position:relative; } /* left pad = space for dot + line */ .tl-item:last-child { padding-bottom:0; } .tl-dot { /* glowing dot marker sitting on the left rule */ position:absolute; left:-4px; top:6px; width:8px; height:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); } .tl-head { display:flex; justify-content:space-between; gap:1.5rem; margin-bottom:.9rem; flex-wrap:wrap; } .tl-role { font-family:var(--serif); font-size:1.15rem; font-weight:700; color:var(--text); margin-bottom:.25rem; letter-spacing:.03em; } .tl-co { color:var(--cyan); font-size:.85rem; font-weight:500; } .tl-meta { text-align:right; flex-shrink:0; } .tl-date { font-size:.72rem; color:var(--gold); letter-spacing:.08em; text-transform:uppercase; } .tl-loc { font-size:.72rem; color:var(--muted); margin-top:.15rem; } .tl-desc { color:var(--muted); font-size:.92rem; margin-bottom:.7rem; } .tl-buls { list-style:none; } .tl-buls li { color:var(--muted); font-size:.88rem; padding:.18rem 0 .18rem 1.3rem; position:relative; } .tl-buls li::before { content:'▸'; position:absolute; left:0; color:var(--cyan2); font-size:.72rem; top:.28rem; } /* ▸ replaces bullet */ .tl-tags { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.9rem; } .tag { font-size:.66rem; padding:.22rem .65rem; border:1px solid var(--border2); border-radius:2px; color:var(--dim); letter-spacing:.06em; text-transform:uppercase; } /* ═════════════════════════════════════════════════════════════════════════════ §10 SKILLS PAGE — CARDS & PILLS Auto-fit responsive grid of skill category cards. Pills display individual skills; .pill.hi marks key / highlighted skills. ═════════════════════════════════════════════════════════════════════════════ */ .sk-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1.4rem; } .sk-card { padding:1.8rem; border:1px solid var(--border); border-radius:4px; background:var(--card-bg); backdrop-filter:blur(8px); transition:border-color .25s, transform .25s, box-shadow .25s; } .sk-card:hover { border-color:var(--border2); transform:translateY(-4px); box-shadow:0 14px 38px var(--glow); } .sk-icon { font-size:1.7rem; margin-bottom:.85rem; } /* emoji category icon */ .sk-title { font-family:var(--serif); font-size:1.0rem; color:var(--text); margin-bottom:.35rem; letter-spacing:.05em; } .sk-desc { font-size:.82rem; color:var(--muted); margin-bottom:1.1rem; line-height:1.65; } .pills { display:flex; flex-wrap:wrap; gap:.4rem; } .pill { font-size:.7rem; padding:.26rem .75rem; border-radius:20px; border:1px solid var(--border); color:var(--muted); letter-spacing:.04em; transition:all .2s; } .pill:hover { border-color:var(--cyan); color:var(--cyan); } .pill.hi { border-color:var(--cyan); color:var(--cyan); background:var(--glow); } /* pre-highlighted key skill */ /* ═════════════════════════════════════════════════════════════════════════════ §11 PORTFOLIO PAGE — IMPACT CARDS Auto-fit grid of project / impact cards, min 310px wide. Each card: .pc-head (icon + title + category) + .pc-body (desc + tags). NOTE: .pc-head/.pc-ico here are "portfolio card" — distinct from photo corner brackets (.pc.tl etc.) in §7f which share the .pc class prefix. ═════════════════════════════════════════════════════════════════════════════ */ .port-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:1.4rem; } .port-card { border:1px solid var(--border); border-radius:4px; background:var(--card-bg); backdrop-filter:blur(8px); overflow:hidden; transition:border-color .3s, transform .3s, box-shadow .3s; } .port-card:hover { border-color:var(--cyan); transform:translateY(-5px); box-shadow:0 18px 44px var(--glow); } .pc-head { /* icon + title/category header row */ padding:1.6rem 1.8rem .9rem; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:.9rem; } .pc-ico { /* square icon container */ width:40px; height:40px; background:var(--glow); border:1px solid var(--border2); border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0; } .pc-title { font-family:var(--serif); font-size:1.0rem; color:var(--text); letter-spacing:.04em; } .pc-cat { font-size:.67rem; color:var(--gold); text-transform:uppercase; letter-spacing:.1em; margin-top:.15rem; } .pc-body { padding:1.2rem 1.8rem 1.6rem; } .pc-desc { font-size:.88rem; color:var(--muted); line-height:1.75; } .pc-tags { margin-top:.9rem; display:flex; flex-wrap:wrap; gap:.35rem; } /* .pc-tags reuses the .tag class from §9 EXPERIENCE */ /* ═════════════════════════════════════════════════════════════════════════════ §12 CONTACT PAGE — TWO-COLUMN LAYOUT & FORM Left: contact info + link cards. Right: contact form. .ct-link cards slide right 4px on hover to suggest interactivity. Form fields glow cyan on focus. Submit calls sendMsg() in main.js. ═════════════════════════════════════════════════════════════════════════════ */ .ct-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:start; } .ct-info h3 { font-family:var(--serif); font-size:1.4rem; margin-bottom:.9rem; } .ct-info p { color:var(--muted); margin-bottom:1.8rem; line-height:1.85; } .ct-links { display:flex; flex-direction:column; gap:.9rem; } .ct-link { /* individual contact method card — email, LinkedIn, website, location */ display:flex; align-items:center; gap:.9rem; padding:.9rem 1.1rem; border:1px solid var(--border); border-radius:4px; background:var(--card-bg); text-decoration:none; color:var(--text); transition:all .25s; } .ct-link:hover { border-color:var(--cyan); transform:translateX(4px); } /* slides right on hover */ .ct-link .ci { font-size:1.2rem; flex-shrink:0; } /* icon emoji */ .ct-lbl { font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } .ct-val { font-size:.88rem; color:var(--cyan); margin-top:.1rem; } /* contact form — stacked field groups */ .ct-form { display:flex; flex-direction:column; gap:1.1rem; } .fg { display:flex; flex-direction:column; gap:.42rem; } /* form group wrapper */ .fl { font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); } /* field label */ .fi, .fta { /* input (.fi) and textarea (.fta) shared base styles */ background:var(--surface); border:1px solid var(--border); border-radius:2px; padding:.7rem .95rem; color:var(--text); font-family:var(--sans); font-size:.92rem; transition:border-color .2s; outline:none; } .fi:focus, .fta:focus { border-color:var(--cyan); } /* cyan glow on focus */ .fta { min-height:130px; resize:vertical; } .fi::placeholder, .fta::placeholder { color:var(--dim); } /* ═════════════════════════════════════════════════════════════════════════════ §13 AWARDS & RECOGNITION SECTION (.ac-grid, .ac-card) Used within the Skills page. Horizontal card layout: icon left, text right. ═════════════════════════════════════════════════════════════════════════════ */ .ac-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.2rem; margin-top:2rem; } .ac-card { padding:1.4rem 1.6rem; border:1px solid var(--border); border-radius:4px; background:var(--card-bg); display:flex; gap:1rem; align-items:flex-start; transition:border-color .25s; } .ac-card:hover { border-color:var(--border2); } .ac-ico { font-size:1.4rem; flex-shrink:0; margin-top:.1rem; } .ac-title { font-size:.9rem; font-weight:500; color:var(--text); margin-bottom:.2rem; } .ac-sub { font-size:.78rem; color:var(--muted); } .ac-date { font-size:.7rem; color:var(--gold); margin-top:.2rem; letter-spacing:.06em; } /* ═════════════════════════════════════════════════════════════════════════════ §14 EARNED CERTIFICATION CARDS (.cert-grid, .cert-card, .cert-link) Full-width grid at bottom of Skills page for earned certs. .cert-card.earned — stronger border + hover glow vs default card. .cert-link pill buttons link to Coursera certificate + Credly badge. ═════════════════════════════════════════════════════════════════════════════ */ .cert-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; margin-top:1rem; } .cert-card { padding:1.1rem 1.3rem; border-radius:4px; border:1px solid var(--border); background:var(--surface); transition:border-color .25s, transform .2s; } .cert-card:hover { transform:translateY(-2px); } .cert-card.earned { border-color:var(--border2); } /* stronger default border = "active" cert */ .cert-card.earned:hover { border-color:var(--cyan); box-shadow:0 8px 24px var(--glow); } .cert-header { display:flex; align-items:flex-start; gap:.8rem; margin-bottom:.75rem; } .cert-badge { font-size:1.3rem; flex-shrink:0; line-height:1.3; } .cert-title { font-size:.88rem; font-weight:500; color:var(--text); line-height:1.3; } .cert-issuer { font-size:.74rem; color:var(--muted); margin-top:.2rem; letter-spacing:.03em; } .cert-links { display:flex; gap:.6rem; flex-wrap:wrap; padding-top:.6rem; border-top:1px solid var(--border); } .cert-link { /* pill-style link buttons for Coursera + Credly */ font-size:.72rem; padding:.28rem .75rem; border:1px solid var(--border2); border-radius:20px; color:var(--cyan); text-decoration:none; letter-spacing:.04em; transition:all .2s; display:inline-flex; align-items:center; gap:.3rem; } .cert-link:hover { background:var(--glow); border-color:var(--cyan); } /* ═════════════════════════════════════════════════════════════════════════════ §15 FOOTER Flex row shared across all pages: copyright | links | location. Wraps to centred column on mobile (see §21). ═════════════════════════════════════════════════════════════════════════════ */ footer { border-top:1px solid var(--border); padding:1.8rem 2.5rem; display:flex; justify-content:space-between; align-items:center; font-size:.76rem; color:var(--muted); position:relative; z-index:1; flex-wrap:wrap; gap:1rem; } footer a { color:var(--cyan); text-decoration:none; } /* ═════════════════════════════════════════════════════════════════════════════ §16 SCROLL REVEAL ANIMATION (.reveal, .reveal.visible) Elements marked .reveal start invisible (opacity:0, translateY 20px). The IntersectionObserver in main.js adds class .visible when the element reaches 10% viewport visibility, triggering the 0.65s transition. Applied to .tl-item entries on the Experience page. ═════════════════════════════════════════════════════════════════════════════ */ .reveal { opacity:0; transform:translateY(20px); transition:opacity .65s, transform .65s; } .reveal.visible { opacity:1; transform:none; } /* ═════════════════════════════════════════════════════════════════════════════ §17 GLITCH EFFECT (.glitch) Applied to "MEHUL" and "AMIN" s in the hero h1. Requires data-text attribute on the element matching its text content. Two pseudo-elements mirror the text in sliced horizontal bands. Keyframes g1 / g2 trigger a brief offset flicker every ~5 seconds. ═════════════════════════════════════════════════════════════════════════════ */ .glitch { position:relative; } .glitch::before, .glitch::after { content:attr(data-text); /* mirrors element's own text */ position:absolute; top:0; left:0; width:100%; height:100%; font-family:var(--serif); font-size:inherit; font-weight:inherit; } .glitch::before { /* upper slice — cyan2 colour */ color:var(--cyan2); animation:g1 5s infinite; clip-path:polygon(0 28%,100% 28%,100% 48%,0 48%); /* only the middle band shows */ } .glitch::after { /* lower slice — gold colour */ color:var(--gold); animation:g2 5s infinite; clip-path:polygon(0 62%,100% 62%,100% 78%,0 78%); /* only the lower band shows */ } @keyframes g1 { /* cyan glitch — brief offset, most time invisible */ 0%,88%,100% { transform:none; opacity:0 } 89% { transform:translate(-3px,1px); opacity:.55 } 92% { transform:translate(2px,-1px); opacity:.3 } 94% { transform:none; opacity:0 } } @keyframes g2 { /* gold glitch — slightly offset timing from g1 */ 0%,91%,100% { transform:none; opacity:0 } 92% { transform:translate(2px,2px); opacity:.45 } 95% { transform:translate(-1px,-1px);opacity:.25 } 97% { transform:none; opacity:0 } } /* ═════════════════════════════════════════════════════════════════════════════ §18 HEX DECORATIONS (.hex-deco, .hex-1 / .hex-2 / .hex-3) Three floating hexagon shapes in the hero section background. clip-path polygon creates the 6-sided shape. Staggered animation-delay values create an organic parallax drift feel. pointer-events:none — purely decorative, never interferes with clicks. ═════════════════════════════════════════════════════════════════════════════ */ .hex-deco { position:absolute; pointer-events:none; border:1px solid var(--border2); clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); /* hexagon */ opacity:.12; animation:hexFloat 12s ease-in-out infinite; } .hex-1 { width:280px; height:280px; right:-60px; top:10%; animation-delay:0s; background:var(--glow); } /* large — right edge */ .hex-2 { width:160px; height:160px; right:180px; top:5%; animation-delay:-4s; opacity:.07; } /* medium — overlapping */ .hex-3 { width:100px; height:100px; left:5%; bottom:15%;animation-delay:-8s; opacity:.09; } /* small — lower left */ @keyframes hexFloat { 0%,100% { transform:translateY(0) rotate(0deg) } 33% { transform:translateY(-18px) rotate(3deg) } 66% { transform:translateY(10px) rotate(-2deg) } } /* ═════════════════════════════════════════════════════════════════════════════ §19 TOAST NOTIFICATION (.notif) Fixed bottom-right toast shown after contact form submission. sendMsg() in main.js adds class .show → slides up into view. After 4 seconds, .show is removed → slides back down out of view. z-index:2000 — above nav bar and all other elements. ═════════════════════════════════════════════════════════════════════════════ */ .notif { position:fixed; bottom:1.8rem; right:1.8rem; background:var(--surface); border:1px solid var(--border2); border-radius:4px; padding:.9rem 1.4rem; font-size:.82rem; color:var(--cyan); z-index:2000; transform:translateY(80px); opacity:0; /* default: hidden below viewport edge */ transition:all .4s; max-width:280px; } .notif.show { transform:none; opacity:1; } /* .show added by sendMsg() in main.js */ /* ═════════════════════════════════════════════════════════════════════════════ §20 SHARED KEYFRAME ANIMATIONS @keyframes 'up' — hero text load sequence (all hero text elements use this) Other keyframes are defined inline near their owning rule above: scan (§3d) — scan line sweep pdot (§4b) — nav dot / badge dot pulse fadeIn (§5a) — page load fade-in g1, g2 (§17) — glitch effect flicker hexFloat (§18) — floating hex rotation/drift ═════════════════════════════════════════════════════════════════════════════ */ @keyframes up { from { opacity:0; transform:translateY(18px) } to { opacity:1; transform:none } } /* ═════════════════════════════════════════════════════════════════════════════ §21 RESPONSIVE BREAKPOINTS ≤ 860px (tablet / landscape phone): - Hamburger replaces desktop nav links - Hero collapses from 2-col to 1-col; photo moves above text - Timeline meta text aligns left - Contact grid collapses to 1-col - Footer stacks and centres ≤ 520px (small phone): - Hero h1 reduced to prevent overflow - Quick facts stack vertically ═════════════════════════════════════════════════════════════════════════════ */ @media(max-width:860px) { nav { padding:0 1.4rem; } .wrap { padding:4rem 1.5rem; } .hero { padding:3rem 1.5rem; } .hero-grid { grid-template-columns:1fr; gap:3rem; } .photo-card { order:-1; max-width:240px; margin:0 auto; } /* photo above text on mobile */ .tl-head { flex-direction:column; gap:.4rem; } .tl-meta { text-align:left; } /* date/loc left-aligned on mobile */ .ct-grid { grid-template-columns:1fr; gap:3rem; } footer { flex-direction:column; text-align:center; } } @media(max-width:520px) { h1.hname { font-size:2.3rem; } /* prevent name overflow on tiny screens */ .quick-facts { flex-direction:column; gap:.9rem; } }