/* ============================================================ Mitchell Clement — Portfolio Design system distilled from the CV ============================================================ */ /* Full Massilia family (Blaze Type) — real cuts, no synthesis */ @font-face { font-family:"Massilia"; src:url("fonts/Massilia-ExtraLight.otf") format("opentype"); font-weight:200; font-style:normal; font-display:swap; } @font-face { font-family:"Massilia"; src:url("fonts/Massilia-Light.otf") format("opentype"); font-weight:300; font-style:normal; font-display:swap; } @font-face { font-family:"Massilia"; src:url("fonts/Massilia-Regular.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:"Massilia"; src:url("fonts/Massilia-Medium.otf") format("opentype"); font-weight:500 600; font-style:normal; font-display:swap; } @font-face { font-family:"Massilia"; src:url("fonts/Massilia-Bold.otf") format("opentype"); font-weight:700; font-style:normal; font-display:swap; } @font-face { font-family:"Massilia"; src:url("fonts/Massilia-ExtraBold.otf") format("opentype"); font-weight:800; font-style:normal; font-display:swap; } @font-face { font-family:"Massilia"; src:url("fonts/Massilia-Black.otf") format("opentype"); font-weight:900; font-style:normal; font-display:swap; } @font-face { font-family:"Massilia"; src:url("fonts/Massilia-RegularOblique.otf") format("opentype"); font-weight:400; font-style:italic; font-display:swap; } @font-face { font-family:"Massilia"; src:url("fonts/Massilia-MediumOblique.otf") format("opentype"); font-weight:500 600; font-style:italic; font-display:swap; } @font-face { font-family:"Massilia"; src:url("fonts/Massilia-BoldOblique.otf") format("opentype"); font-weight:700; font-style:italic; font-display:swap; } :root { /* Palette ------------------------------------------------ */ --coral: #ff4266; --coral-deep: #e7305a; --coral-soft: #ff7a93; --paper: #f4f1ea; --paper-2: #efebe2; --ink: rgba(0,0,0,.65); --ink-soft: rgba(0,0,0,.65); --body: #6a6862; --muted: #b3aea4; --line: #ddd8cd; --white: #fbfaf7; /* Type --------------------------------------------------- */ --font: "Massilia", "Helvetica Neue", Helvetica, Arial, sans-serif; --hand: "Caveat", cursive; /* Frame -------------------------------------------------- */ --frame-w: 11px; --frame-inset: 0px; --frame-radius: 30px; --nav-h: 62px; --ease: cubic-bezier(.22, .61, .36, 1); --maxw: 1240px; --pad-x: clamp(28px, 6vw, 70px); /* tweakable feel */ --display-weight: 800; --spin-dur: 26s; --blush-strength: 1; --reveal-y: 34px; --hover-lift: 1; } /* Motion personality (set via Tweaks → data-motion on ) */ html[data-motion="calm"] { --spin-dur: 48s; --reveal-y: 16px; --blush-strength: .45; --hover-lift: .5; } html[data-motion="lively"] { --spin-dur: 26s; --reveal-y: 34px; --blush-strength: 1; --hover-lift: 1; } html[data-motion="playful"] { --spin-dur: 12s; --reveal-y: 60px; --blush-strength: 1.6; --hover-lift: 1.8; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font); font-synthesis: none; background: var(--coral); /* shows through the frame corners so they read as solid coral */ color: var(--ink); line-height: 1.5; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.no-scroll { overflow: hidden; height: 100vh; } ::selection { background: var(--coral); color: #fff; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } /* Paper grain + cream window ---------------------------------- */ .atmosphere { position: fixed; top: var(--nav-h); left: var(--frame-w); right: var(--frame-w); bottom: var(--frame-w); z-index: 0; pointer-events: none; overflow: hidden; background: var(--paper); /* the cream “page” tucked under the coral nav bar */ border-radius: var(--frame-radius); } .atmosphere::before { /* grain */ content: ""; position: absolute; inset: -50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); opacity: .35; mix-blend-mode: multiply; } /* scattered blush field — lives in the scrolling page so the gradients recur at random points all the way down instead of sitting fixed */ .blushfield { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .blush { position: absolute; border-radius: 50%; filter: blur(72px); } .blush.k1 { width: 44vw; height: 44vw; top: 3vh; right: -9vw; background: radial-gradient(circle at 50% 50%, var(--coral-soft), transparent 70%); opacity: .8; } .blush.k2 { width: 32vw; height: 32vw; top: 78vh; left: -11vw; background: radial-gradient(circle at 50% 50%, var(--coral), transparent 66%); opacity: .32; } .blush.k3 { width: 40vw; height: 40vw; top: 158vh; right: -13vw; background: radial-gradient(circle at 50% 50%, var(--coral-soft), transparent 70%); opacity: .65; } .blush.k4 { width: 36vw; height: 36vw; top: 248vh; left: -13vw; background: radial-gradient(circle at 50% 50%, var(--coral-soft), transparent 68%); opacity: .68; } .blush.k5 { width: 29vw; height: 29vw; top: 338vh; right: -7vw; background: radial-gradient(circle at 50% 50%, var(--coral), transparent 64%); opacity: .3; } .blush.k6 { width: 42vw; height: 42vw; top: 426vh; left: -15vw; background: radial-gradient(circle at 50% 50%, var(--coral-soft), transparent 71%); opacity: .65; } .blush.k7 { width: 32vw; height: 32vw; top: 516vh; right: -10vw; background: radial-gradient(circle at 50% 50%, var(--coral-soft), transparent 68%); opacity: .62; } .blush.k8 { width: 26vw; height: 26vw; top: 38vh; left: 30vw; background: radial-gradient(circle at 50% 50%, var(--coral), transparent 62%); opacity: .22; } .blush.k9 { width: 30vw; height: 30vw; top: 202vh; left: 34vw; background: radial-gradient(circle at 50% 50%, var(--coral), transparent 64%); opacity: .24; } .blush.k10 { width: 34vw; height: 34vw; top: 292vh; right: -6vw; background: radial-gradient(circle at 50% 50%, var(--coral-soft), transparent 68%); opacity: .55; } .blush.k11 { width: 28vw; height: 28vw; top: 382vh; left: 32vw; background: radial-gradient(circle at 50% 50%, var(--coral), transparent 63%); opacity: .22; } .blush.k12 { width: 36vw; height: 36vw; top: 590vh; left: -12vw; background: radial-gradient(circle at 50% 50%, var(--coral-soft), transparent 69%); opacity: .6; } /* ============================================================ FRAME (the coral rounded border from the CV) ============================================================ */ .frame { position: fixed; inset: var(--frame-inset); z-index: 90; border: var(--frame-w) solid var(--coral); border-radius: var(--frame-radius); pointer-events: none; opacity: 1; /* always visible — never hidden by JS timing */ } .frame.draw { animation: frameIn .8s var(--ease) both; } @keyframes frameIn { from { transform: scale(1.008); } to { transform: none; } } /* ============================================================ LOADER ============================================================ */ .loader { position: fixed; inset: 0; z-index: 200; background: var(--coral); display: grid; place-items: center; transition: transform 1s var(--ease), opacity .6s ease; } .loader.done { transform: translateY(-100%); opacity: 0; pointer-events: none; } .loader__inner { text-align: center; color: #fff; position: relative; } .loader__seal { width: 200px; height: 200px; margin: 0 auto 26px; position: relative; animation: spin 9s linear infinite; } .loader__seal svg { width: 100%; height: 100%; } .loader__seal text { fill: #fff; } .loader__mark { position: absolute; inset: 0; display: grid; place-items: center; font-size: 64px; font-weight: 800; animation: spin-rev 9s linear infinite; } .loader__name { font-size: clamp(28px, 5vw, 46px); font-weight: 800; letter-spacing: -.01em; overflow: hidden; } .loader__name span { display: inline-block; transform: translateY(110%); animation: rise .7s var(--ease) forwards; } .loader__name span:nth-child(2){ animation-delay:.08s; } .loader__bar { width: 200px; height: 3px; background: rgba(255,255,255,.35); border-radius: 3px; margin: 22px auto 0; overflow: hidden; } .loader__bar i { display:block; height:100%; width:0; background:#fff; animation: load 1.7s var(--ease) forwards; } @keyframes rise { to { transform: translateY(0); } } @keyframes load { to { width:100%; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes spin-rev { to { transform: rotate(-360deg); } } /* ============================================================ NAV ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 95; display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); padding: 0 clamp(40px, 5.5vw, 78px); } /* permanent full-width coral nav bar with a straight bottom edge that the rounded cream page tucks under */ .nav__bg { position: absolute; left: 0; right: 0; top: 0; height: var(--nav-h); z-index: -1; background: var(--coral); } /* nav content is always white on the coral bar */ .nav__logo, .nav__logo b, .nav__links a, .nav__cta, .nav__burger span { transition: color .3s ease, background .3s ease, transform .25s var(--ease); } .nav__logo, .nav__logo b { color: #fff; } .nav__logo .dot { background: #fff; } .nav__links a { color: #fff; } .nav__links a::after { background: #fff; } .nav__cta { background: transparent; color: #fff !important; box-shadow: inset 0 0 0 1.5px #fff; } .nav__cta:hover { background: #fff; color: var(--coral-deep) !important; } .nav__burger span { background: #fff; } .nav__logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; letter-spacing: -.02em; } .nav__logo b { color: #fff; } .nav__logo .dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; } .nav__links { display: flex; align-items: center; gap: clamp(4px, 1vw, 14px); } .nav__links a { font-size: 15.5px; font-weight: 500; color: #fff; padding: 9px 18px; border-radius: 100px; background: transparent; transition: background .25s var(--ease), color .25s var(--ease); } /* white pill hover/active — same shape as the “Let’s talk” button */ .nav__links a:hover, .nav__links a.active { background: #fff; color: var(--coral); } .nav__cta { background: transparent; color: #fff !important; box-shadow: inset 0 0 0 1.5px #fff; padding: 9px 18px; border-radius: 100px; font-weight: 700; font-size: 15.5px; margin-left: clamp(6px, 1vw, 14px); transition: transform .25s var(--ease), background .25s, color .25s; } .nav__cta:hover { transform: translateY(-2px); background: rgba(255,255,255,.85); } .nav__burger { display: none; width: 30px; height: 22px; position: relative; background: none; border: 0; cursor: pointer; } .nav__burger span { position: absolute; left: 0; width: 100%; height: 2.5px; background: #fff; border-radius: 2px; transition: .3s var(--ease); } .nav__burger span:nth-child(1){ top: 0; } .nav__burger span:nth-child(2){ top: 9.5px; } .nav__burger span:nth-child(3){ top: 19px; } .nav.open .nav__burger span:nth-child(1){ top: 9.5px; transform: rotate(45deg); } .nav.open .nav__burger span:nth-child(2){ opacity: 0; } .nav.open .nav__burger span:nth-child(3){ top: 9.5px; transform: rotate(-45deg); } /* ============================================================ LAYOUT PRIMITIVES ============================================================ */ .page { position: relative; z-index: 1; } .page > section, .page > footer { position: relative; z-index: 1; } .blushfield { z-index: 0; } .section { max-width: var(--maxw); margin: 0 auto; padding: clamp(70px, 11vh, 140px) var(--pad-x, clamp(28px, 6vw, 70px)); } .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--coral); margin-bottom: 20px; } .eyebrow::before { content:""; width: 26px; height: 2px; background: var(--coral); } .h-sec { font-size: clamp(40px, 7vw, 86px); font-weight: var(--display-weight); line-height: .96; letter-spacing: -.02em; color: var(--ink); } .h-sec .accent { color: var(--coral); } /* reveal */ .reveal { opacity: 0; transform: translateY(var(--reveal-y)); transition: opacity .8s var(--ease), transform .8s var(--ease); } .reveal.in { opacity: 1; transform: none; } .reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; } /* ============================================================ HERO ============================================================ */ .hero { max-width: var(--maxw); margin: 0 auto; min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(30px, 5vw, 70px); padding: 130px clamp(28px, 6vw, 70px) 80px; } .hero__avail { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; letter-spacing: .03em; color: var(--ink); background: rgba(255,255,255,.6); border: 1px solid var(--line); padding: 7px 14px 7px 12px; border-radius: 100px; margin-bottom: 18px; } .hero__avail .pulse { width: 9px; height: 9px; border-radius: 50%; background: #1f9d57; position: relative; } .hero__avail .pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #1f9d57; animation: availPulse 1.9s ease-out infinite; } @keyframes availPulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(3.4); opacity: 0; } } .hero__role { font-family: var(--hand); color: var(--coral); font-size: clamp(28px, 3vw, 40px); line-height: 1; margin-bottom: 6px; transform: rotate(-3deg); transform-origin: left; } .hero__name { font-size: clamp(64px, 13vw, 168px); font-weight: var(--display-weight); line-height: .82; letter-spacing: -.035em; margin: 6px 0 26px; } .hero__name .l1 { display: block; color: var(--ink); } .hero__name .l2 { display: block; color: var(--coral); font-weight: 400; } .hero__lead { font-size: clamp(16px, 1.25vw, 19px); color: var(--body); max-width: 46ch; margin-bottom: 34px; } .hero__cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 100px; font-weight: 600; font-size: 16px; transition: transform .25s var(--ease), background .25s, color .25s, box-shadow .25s; } .btn--solid { background: var(--coral); color: #fff; box-shadow: 0 10px 26px -12px var(--coral); } .btn--solid:hover { transform: translateY(-3px); background: var(--coral-deep); box-shadow: 0 16px 30px -12px var(--coral); } .btn--ghost { border: 2px solid var(--ink); color: var(--ink); } .btn--ghost:hover { transform: translateY(-3px); background: var(--ink); color: #fff; } .btn .arrow { transition: transform .25s var(--ease); } .btn:hover .arrow { transform: translate(4px,-4px); } /* photo + rotating ring — layered for a 3D depth illusion: full photo (back) ‹ rotating text ring ‹ same photo clipped to the upper body (front). Because both photo layers are identical pixels, the clip edge is invisible; the ring simply reads as passing behind the head/torso and in front of the legs. */ .hero__visual { position: relative; display: grid; place-items: center; min-height: 70vh; } .hero__stage { position: relative; width: min(92%, 460px); aspect-ratio: 896 / 1195; /* matches the photo */ margin: 0 auto; } .hero__glow { position: absolute; z-index: 0; left: 50%; top: 46%; width: 104%; aspect-ratio: 1; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle at 50% 45%, var(--white) 0 38%, var(--paper-2) 62%, transparent 72%); box-shadow: inset 0 0 0 1px var(--line); } .ring { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; aspect-ratio: 1; } .ring svg { width: 100%; height: 100%; overflow: visible; transform-origin: 50% 50%; animation: spin var(--spin-dur) linear infinite; } .ring text { fill: var(--coral); font-weight: 600; font-size: var(--ring-fs); text-transform: none; letter-spacing: .01em; } /* figure layers — centred in the square ring; back sits behind the ring, front (head→hips) sits in front so the text passes BEHIND the head and IN FRONT of the lower legs */ .stage__figure { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 102%; aspect-ratio: 439 / 936; } .stage__figure--back { z-index: 1; } .stage__figure--front { z-index: 3; clip-path: inset(0 0 48% 0); } .hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .stage__figure--back .hero__photo { filter: drop-shadow(0 26px 44px rgba(0,0,0,.18)); } .scrollcue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); } .scrollcue i { width: 1px; height: 40px; background: var(--muted); position: relative; overflow: hidden; } .scrollcue i::after { content:""; position:absolute; top:-50%; left:0; width:100%; height:50%; background: var(--coral); animation: cue 1.8s var(--ease) infinite; } @keyframes cue { to { top: 100%; } } /* ============================================================ ABOUT ============================================================ */ .about { position: relative; display: block; padding-top: clamp(4px, 1vh, 16px); } @media (min-width: 981px) { .about { --about-gutter: 400px; } } .about__lead { position: relative; z-index: 1; max-width: 1000px; padding-left: var(--about-gutter, 0); } .about__body { position: relative; z-index: 1; margin-top: clamp(34px, 5vw, 60px); padding-left: var(--about-gutter, 0); display: flex; flex-direction: column; gap: 18px; align-items: start; } .about__body p { max-width: 62ch; } .about__body .facts { width: 100%; } .about__big { font-size: clamp(28px, 3.4vw, 46px); font-weight: 700; line-height: 1.15; letter-spacing: -.015em; color: var(--ink); } .about__big em { color: var(--coral); font-style: normal; } .about__body p { color: var(--body); font-size: 17px; margin-bottom: 0; } /* --- the three real arms reaching in from the left, under the border --- all three are exported at the SAME scale, so forearm thickness matches; widths below are proportional to that shared scale and they're spread across the full height of the About section. */ .about__arms { position: absolute; z-index: 0; pointer-events: none; left: calc(50% - 50vw); top: 0; height: 100%; width: min(520px, 47vw); --arm-base: 100%; } .arm { position: absolute; left: 0; transform-origin: left center; /* 1) slide in from under the left border (--ap) 2) as you scroll on (--aw 0->1): push further RIGHT and fan apart vertically (--fan: -1 top, 0 middle, +1 bottom) so they start close together and spread out toward the right. */ transform: translateX(calc(-118% + clamp(0%, calc(var(--ap, 0) * 236%), 118%) + var(--aw, 0) * var(--push, 0px))) translateY(calc(var(--aw, 0) * var(--fan, 0) * 6%)) rotate(calc(sin(var(--aw, 0) * 1turn) * 4deg * var(--dir, 1))); } .arm--pen { top: 13%; width: calc(var(--arm-base) * 1.12); left: -14%; --fan: -1; --push: 35px; } /* stylus — nudged left so the cut sleeve corner hides under the border */ .arm--mug { top: 33%; width: calc(var(--arm-base) * 1.10); left: -15%; --fan: 0; --push: 60px; } /* mug — nudged left so it starts at the border */ .arm--mouse { top: 53%; width: calc(var(--arm-base) * 1.00); left: -16%; --fan: 1; --push: 35px; } /* mouse — nudged left so the cut sleeve corner hides under the border */ .arm__inner { animation: armFloat 4.8s ease-in-out var(--delay, 0s) infinite; transform-origin: left center; } .arm img { width: 100%; height: auto; display: block; filter: drop-shadow(0 16px 22px rgba(0,0,0,.20)); } @keyframes armFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(1.4deg); } } @media (max-width: 980px) { .about__arms { display: none; } } @media (prefers-reduced-motion: reduce) { .arm__inner { animation: none; } } .facts { margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 30px; } .fact { border-top: 2px solid var(--line); padding-top: 12px; } .fact dt { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--coral); font-weight: 600; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; } .fact__ico { width: 18px; height: 18px; flex: 0 0 auto; color: var(--coral); display: grid; place-items: center; } .fact__ico svg { width: 18px; height: 18px; } .fact dd { font-size: 18px; font-weight: 500; color: var(--ink); } /* ============================================================ EXPERIENCE ============================================================ */ .exp { position: relative; } .exp__list { margin-top: 50px; border-top: 1px solid var(--line); } .job { display: grid; grid-template-columns: 120px 1fr auto; gap: clamp(20px,4vw,56px); padding: 38px 0; border-bottom: 1px solid var(--line); align-items: start; transition: background .3s var(--ease); position: relative; } .job::before { content:""; position:absolute; left:-30px; right:-30px; top:0; bottom:0; background: var(--white); border-radius: 18px; opacity:0; transform: scale(.98); transition: opacity .3s var(--ease), transform .3s var(--ease); z-index:-1; box-shadow: 0 24px 50px -30px rgba(0,0,0,.4); } .job:hover::before { opacity: 1; transform: scale(1); } .job__seal { width: 96px; height: 96px; position: relative; } .job__seal svg { width: 100%; height: 100%; animation: spin 18s linear infinite; } .job__seal text { fill: var(--coral); font-weight: 700; font-size: 17px; letter-spacing: .04em; } .job__seal .core { position:absolute; inset:0; display:grid; place-items:center; color: var(--coral); } .job__seal .core svg { width: 26px; height: 26px; animation: none; } .job__role { font-size: clamp(22px, 2.3vw, 30px); font-weight: 700; color: var(--ink); letter-spacing: -.01em; line-height: 1.05; } .job__co { color: var(--coral); font-weight: 600; font-size: 16px; margin: 6px 0 14px; } .job__desc { color: var(--body); font-size: 15.5px; max-width: 60ch; } .job__yr { font-size: 15px; color: var(--muted); font-weight: 500; letter-spacing: .06em; white-space: nowrap; text-align: right; } .job__tag { display:inline-block; margin-top: 14px; font-size: 12.5px; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 100px; padding: 5px 13px; } /* ============================================================ EDUCATION ============================================================ */ .edu__grid { margin-top: 48px; display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; } .edu__card { background: var(--paper); padding: clamp(26px,3vw,40px); transition: background .3s var(--ease); position: relative; } .edu__card:hover { background: var(--white); } .edu__ico { width: 50px; height: 50px; border-radius: 50%; border: 1.7px solid var(--coral); color: var(--coral); display: grid; place-items: center; margin-bottom: 24px; transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); } .edu__ico svg { width: 26px; height: 26px; } .edu__card:hover .edu__ico { background: var(--coral); color: #fff; transform: rotate(-6deg); } .edu__yr { font-size: 13px; letter-spacing: .18em; color: var(--muted); font-weight: 600; margin-bottom: 18px; } .edu__deg { font-size: clamp(21px,2vw,26px); font-weight: 700; color: var(--ink); line-height: 1.05; } .edu__type { font-style: normal; color: var(--coral); font-weight: 500; font-size: 16px; margin-top: 3px; } .edu__school { margin-top: 16px; color: var(--ink-soft); font-weight: 600; font-size: 16px; } .edu__place { color: var(--body); font-size: 15px; } /* ============================================================ COMPETENCES ============================================================ */ .comp__grid { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,70px); } .skill { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--line); } .skill__label { display: flex; align-items: center; gap: 11px; min-width: 0; } .skill__ico { width: 22px; height: 22px; flex: 0 0 auto; color: var(--coral); display: grid; place-items: center; } .skill__ico svg { width: 22px; height: 22px; } .skill__name { font-weight: 600; font-size: 17px; color: var(--ink); } .dots { display: flex; gap: 8px; } .dots i { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--coral); background: transparent; transform: scale(0); transition: transform .45s var(--ease), background-color .5s var(--ease); } .dots.go i.on { background: var(--coral); } .dots.go i { transform: scale(1); } .dots.go i:nth-child(2){ transition-delay: .06s; } .dots.go i:nth-child(3){ transition-delay: .12s; } .dots.go i:nth-child(4){ transition-delay: .18s; } .dots.go i:nth-child(5){ transition-delay: .24s; } .comp__lang { grid-column: 1 / -1; margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,70px); border-top: 2px solid var(--ink); padding-top: 8px; } /* ============================================================ WORK ============================================================ */ .work__head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px; } .work__note { color: var(--body); font-size: 16px; max-width: 46ch; margin-top: 18px; } .work__grid { margin-top: 50px; display: grid; grid-template-columns: repeat(2,1fr); gap: clamp(20px,2.4vw,30px); } .work__card { border-radius: 20px; overflow: hidden; background: var(--white); border: 1px solid var(--line); transition: transform .35s var(--ease), box-shadow .35s var(--ease); cursor: pointer; } .work__card:hover { transform: translateY(calc(-6px * var(--hover-lift))); box-shadow: 0 30px 50px -28px rgba(0,0,0,.4); } .ph { aspect-ratio: 4/3; position: relative; overflow: hidden; background: repeating-linear-gradient(135deg, var(--paper-2) 0 12px, var(--paper) 12px 24px); display: grid; place-items: center; } .ph::after { content: attr(data-label); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border: 1px dashed var(--muted); padding: 6px 12px; border-radius: 6px; background: rgba(244,241,234,.7); } .work__card:nth-child(3n+1) .ph { background: repeating-linear-gradient(135deg, #ffe1e7 0 12px, var(--paper) 12px 24px); } .work__meta { padding: 22px 24px 26px; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; } .work__title { font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1.1; } .work__cat { color: var(--coral); font-weight: 600; font-size: 14px; margin-top: 4px; } .work__num { font-family: ui-monospace, monospace; color: var(--muted); font-size: 13px; } /* ---- case rows: monitor mockup + context, alternating sides ---- */ .work__grid { margin-top: 50px; display: flex; flex-direction: column; gap: clamp(80px,10vw,150px); } .workcase { display: grid; grid-template-columns: 1.85fr 1fr; gap: clamp(30px,4vw,60px); align-items: center; } .workcase:nth-child(even) { grid-template-columns: 1fr 1.85fr; } .workcase:nth-child(even) .workcase__screen { order: 2; } .workcase:nth-child(even) .workcase__meta { order: 1; } .macbook { position: relative; width: 100%; aspect-ratio: 1.775; filter: drop-shadow(0 40px 60px rgba(0,0,0,.28)); } .macbook__frame { display: block; width: 100%; height: 100%; object-fit: fill; } .macbook__screen { position: absolute; inset: 0; background: #0c0c0e; -webkit-mask-image: url(assets/screen-mask.png); mask-image: url(assets/screen-mask.png); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .monitor__video { position: absolute; left: 11.69%; top: 11.74%; width: 76.6%; height: 76.48%; object-fit: cover; object-position: left center; transition: opacity .12s linear; } .monitor__ph { position: absolute; left: 11.69%; top: 11.74%; width: 76.6%; height: 76.48%; background: repeating-linear-gradient(135deg, #2a2a30 0 12px, #1c1c20 12px 24px); } .monitor__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255,255,255,.92); color: var(--coral); display: grid; place-items: center; transition: transform .25s var(--ease), background .25s; } .monitor__play:hover { transform: translate(-50%,-50%) scale(1.08); background: #fff; } .workcase__meta { display: flex; flex-direction: column; gap: 12px; } .workcase__meta .work__num { order: -1; } .workcase__meta .work__title { font-size: clamp(22px,2.2vw,28px); } .work__desc { color: var(--body); font-size: 15.5px; max-width: 46ch; } .work__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .work__tags span { font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--coral); background: rgba(255,66,102,.08); border: 1px solid rgba(255,66,102,.22); border-radius: 100px; padding: 6px 12px; } @media (max-width: 900px) { .workcase, .workcase:nth-child(even) { grid-template-columns: 1fr; } .workcase:nth-child(even) .workcase__screen, .workcase:nth-child(even) .workcase__meta { order: initial; } } @media (min-width: 901px) { .workcase:nth-child(odd) .workcase__screen { margin-left: calc(-1 * (max(0px, (100vw - var(--maxw)) / 2) + var(--pad-x) - var(--frame-w))); } .workcase:nth-child(odd) .macbook { transform: translateX(-11.4%) scale(1.12); transform-origin: left center; } .workcase:nth-child(even) .workcase__screen { margin-right: calc(-1 * (max(0px, (100vw - var(--maxw)) / 2) + var(--pad-x) - var(--frame-w))); } .workcase:nth-child(even) .macbook { transform: translateX(11.4%) scale(1.12); transform-origin: right center; } } /* ============================================================ CONTACT ============================================================ */ .contact { position: relative; } .contact__grid { margin-top: 50px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,6vw,80px); align-items: start; } .contact__lead { font-size: clamp(22px,2.4vw,30px); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; max-width: 16ch; } .contact__lead .accent { color: var(--coral); } .contact__channels { margin-top: 34px; display: grid; gap: 4px; } .channel { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); transition: padding-left .3s var(--ease); } .channel:hover { padding-left: 8px; } .channel:last-child { border-bottom: 1px solid var(--line); } .channel__ico { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; border: 1.5px solid var(--coral); color: var(--coral); display: grid; place-items: center; } .channel__ico svg { width: 18px; height: 18px; } .channel__k { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .channel__v { font-size: 18px; font-weight: 600; color: var(--ink); } .contact__qr { margin-top: 34px; display: flex; align-items: center; gap: 18px; } .contact__qr .qrbox { width: 96px; height: 96px; padding: 12px; border-radius: 16px; border: 2px solid var(--coral); background: var(--white); } .contact__qr .qrbox img { width: 100%; height: 100%; } .contact__qr .hand { font-family: var(--hand); color: var(--coral); font-size: 26px; line-height: 1.05; transform: rotate(-4deg); } /* form */ .form { background: var(--white); border: 1px solid var(--line); border-radius: 24px; padding: clamp(26px,3vw,40px); box-shadow: 0 30px 60px -40px rgba(0,0,0,.35); } .field { margin-bottom: 18px; } .field label { display: block; font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--ink-soft); margin-bottom: 7px; } .field input, .field textarea { width: 100%; font-family: var(--font); font-size: 16px; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: 12px; padding: 13px 15px; transition: border-color .25s, background .25s; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--coral); background: var(--white); } .field textarea { resize: vertical; min-height: 110px; } .field.err input, .field.err textarea { border-color: var(--coral-deep); } .field .msg { font-size: 12.5px; color: var(--coral-deep); margin-top: 6px; display: none; } .field.err .msg { display: block; } .form button { width: 100%; justify-content: center; cursor: pointer; border: 0; } .form__ok { text-align: center; padding: 20px 0; display: none; } .form__ok.show { display: block; } .form__ok .tick { width: 56px; height: 56px; border-radius: 50%; background: var(--coral); color: #fff; display: grid; place-items: center; margin: 0 auto 16px; } .form__ok h4 { font-size: 24px; font-weight: 700; } .form__ok p { color: var(--body); margin-top: 6px; } /* ============================================================ FOOTER ============================================================ */ .footer { border-top: 1px solid var(--line); } .footer__in { max-width: var(--maxw); margin: 0 auto; padding: 40px clamp(28px,6vw,70px); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; } .footer__name { font-size: 26px; font-weight: 800; letter-spacing: -.02em; } .footer__name b { color: var(--coral); } .footer small { color: var(--muted); font-size: 13.5px; } .footer__top { font-size: 14px; color: var(--ink-soft); display: inline-flex; gap: 8px; align-items: center; } .footer__top:hover { color: var(--coral); } /* ============================================================ HERO / INTRO — scroll-driven loader → homepage morph ============================================================ */ :root { --ip: 0; } /* intro progress 0..1 — set by JS on scroll */ .intro { position: relative; height: 240vh; /* scroll room for the morph + a resting beat */ --stage-x: 20vw; /* how far the photo slides right at ip=1 */ --stage-y: 0vh; --stage-s0: 1.06; /* scale at ip=0 — big, centered loader */ --stage-s1: .95; /* scale at ip=1 — large docked homepage hero */ --ring-fs: 20px; /* ring text size in SVG user units — scales with the ring */ } .intro__sticky { position: sticky; top: 0; height: 100vh; width: 100%; overflow: hidden; } /* the coral "laadscherm" — recedes as you scroll, revealing the cream page */ .intro__coral { position: absolute; inset: 0; z-index: 4; background: var(--coral); opacity: calc(1 - var(--ip) * 1.55); } /* left-hand copy — slides + fades in late in the morph */ .intro__copy { position: absolute; z-index: 6; top: 50%; left: max(clamp(26px, 7vw, 70px), calc(50vw - 600px)); width: min(420px, 44vw); transform: translateY(-50%) translateX(calc((1 - var(--ip)) * -38px)); opacity: calc((var(--ip) - .5) / .4); } .intro__copy .hero__name { font-size: clamp(46px, 6.6vw, 104px); margin: 4px 0 24px; } .intro__copy .hero__lead { max-width: 42ch; } /* photo + ring stage — center (loader) → right (hero), scaling down */ .stage { position: absolute; z-index: 5; top: 50%; left: 50%; width: min(94vw, 508px); aspect-ratio: 1; transform: translate(-50%, -50%) translate(calc(var(--ip) * var(--stage-x)), calc(var(--ip) * var(--stage-y))) scale(calc(var(--stage-s0) - var(--ip) * (var(--stage-s0) - var(--stage-s1)))); will-change: transform; animation: stageIn 1.15s var(--ease) .15s both; /* soft uniform fade-in of the whole group */ } .stage__glow { position: absolute; z-index: 0; inset: 0; border-radius: 50%; display: none; /* white disc removed per request */ opacity: var(--ip); } /* ring ink: white on the coral loader → coral on the homepage */ .intro .ring text { fill: color-mix(in srgb, var(--coral) calc(var(--ip) * 100%), #ffffff); } /* scroll hint, only while the coral loader is up */ .intro__hint { position: absolute; z-index: 6; left: 50%; bottom: 30px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; color: #fff; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; opacity: calc(1 - var(--ip) * 3.2); pointer-events: none; } .intro__hint i { width: 1px; height: 38px; background: rgba(255,255,255,.55); position: relative; overflow: hidden; } .intro__hint i::after { content:""; position:absolute; top:-50%; left:0; width:100%; height:50%; background:#fff; animation: cue 1.8s var(--ease) infinite; } /* entrance: the whole stage softly fades in (as one group, so both halves of the figure fade uniformly) while the photo rises and the ring scales in */ .intro .hero__photo { animation: flyUp 1.3s var(--ease) .15s both; } .intro .ring { animation: ringIn 1.1s var(--ease) .4s both; } @keyframes stageIn { from { opacity: 0; } to { opacity: 1; } } @keyframes flyUp { from { transform: translateY(64%); } to { transform: translateY(0); } } @keyframes ringIn { from { transform: translate(-50%,-50%) scale(.7); } to { transform: translate(-50%,-50%) scale(1); } } /* nav hides over the coral loader, fades in with the morph */ .nav { opacity: clamp(0, calc(var(--ip) * 2.6), 1); } @media (max-width: 880px) { .intro { height: 220vh; --stage-x: 0vw; --stage-y: -22vh; --stage-s0: 1.0; --stage-s1: .72; } .intro .stage { width: min(96vw, 460px); } .intro__copy { top: auto; bottom: 2%; left: 0; right: 0; width: auto; padding: 0 clamp(24px, 6vw, 40px); text-align: left; transform: translateY(calc((1 - var(--ip)) * 22px)); } .intro__copy .hero__cta { justify-content: flex-start; flex-direction: row; flex-wrap: wrap; } .intro__copy .hero__cta .btn { flex: 0 0 auto; } .intro__copy .hero__name { font-size: clamp(52px, 15vw, 96px); line-height: .92; margin: 8px 0 20px; } .intro__copy .hero__lead { max-width: 40ch; } } @media (prefers-reduced-motion: reduce) { .intro .stage, .intro .hero__photo, .intro .ring { animation: none; opacity: 1; } } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 980px) { :root { --frame-w: 8px; --frame-inset: 0px; --frame-radius: 22px; } .hero { grid-template-columns: 1fr; text-align: left; padding-top: 120px; min-height: auto; } .hero__visual { order: -1; min-height: 50vh; margin-bottom: 10px; } .about, .contact__grid { grid-template-columns: 1fr; } .nav__links { display: none; } .nav__burger { display: block; } .nav.open .nav__links { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; position: absolute; top: 100%; left: 0; right: 0; padding: 26px clamp(24px,4vw,50px) 34px; background: var(--coral); border-bottom: 1px solid rgba(255,255,255,.25); } .nav.open .nav__links a { font-size: 22px; } .job { grid-template-columns: 76px 1fr; gap: 16px; align-items: start; } .job__seal { order: 0; width: 76px; height: 76px; } .job__main { grid-column: 2; } .job__yr { grid-column: 2; text-align: left; } .edu__grid, .work__grid { grid-template-columns: 1fr; } .comp__grid, .comp__lang { grid-template-columns: 1fr; } .facts { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .intro__copy .hero__cta { flex-direction: row; align-items: center; } .intro__copy .hero__cta .btn { justify-content: center; } .hero__cta { flex-direction: column; align-items: stretch; } .btn { justify-content: center; } .facts { grid-template-columns: 1fr; } .scrollcue { display: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .ring svg, .job__seal svg, .loader__seal, .loader__mark { animation: none !important; } } .macbook { --ctl-op: 0; } .macbook:hover, .macbook:focus-within { --ctl-op: 1; } .vidctl { position: absolute; left: 50%; bottom: 16%; transform: translateX(-50%) translateY(6px); display: flex; gap: 10px; opacity: var(--ctl-op); pointer-events: var(--ctl-pe, none); transition: opacity .22s var(--ease), transform .22s var(--ease); z-index: 3; } .macbook:hover .vidctl, .macbook:focus-within .vidctl { transform: translateX(-50%) translateY(0); --ctl-pe: auto; } .vidctl__btn { width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; background: rgba(255,255,255,.94); color: var(--coral-deep); box-shadow: 0 6px 18px rgba(0,0,0,.28); transition: transform .2s var(--ease), background .2s; } .vidctl__btn:hover { transform: scale(1.08); background: #fff; } .vidctl__btn .ic-pause { display: none; } .macbook.is-playing .vidctl__btn .ic-play { display: none; } .macbook.is-playing .vidctl__btn .ic-pause { display: block; }