:root { color-scheme: dark; } * { box-sizing: border-box; } body { font-family: Manrope, sans-serif; } a { text-decoration: none; } .noise { position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); } .cursor-glow { position: fixed; width: 420px; height: 420px; left: var(--x, 50%); top: var(--y, 50%); transform: translate(-50%, -50%); z-index: -1; pointer-events:none; background: radial-gradient(circle, rgba(34,211,153,.085), transparent 65%); } .orb { position:absolute; border-radius:9999px; filter: blur(10px); pointer-events:none; } .orb-one { width: 34rem; height:34rem; right: -12rem; top: 5rem; background: radial-gradient(circle, rgba(38, 190, 176, .18), transparent 66%); } .orb-two { width:25rem; height:25rem; left:-12rem; bottom:-7rem; background:radial-gradient(circle, rgba(72, 125, 220, .15), transparent 68%); } .orb-three { width:33rem; height:24rem; right:-8rem; top:-7rem; background:radial-gradient(circle, rgba(67, 171, 240, .17), transparent 70%); } .gradient-text { background:linear-gradient(100deg,#8af4c5,#83dafa 65%,#c5a9ff); -webkit-background-clip:text; background-clip:text; color:transparent; } .photo-frame { aspect-ratio: .83; overflow:hidden; border-radius: 2rem; border:1px solid rgba(255,255,255,.16); background:#11213a; transform:rotate(2.5deg); box-shadow: 20px 25px 60px rgba(0,0,0,.4); } .photo-frame img { width:100%; height:100%; object-fit:cover; object-position: 52% center; filter:saturate(.84) contrast(1.04); } .photo-wash { position:absolute; inset:0; background:linear-gradient(145deg,rgba(117,240,192,.12),transparent 35%,rgba(9,21,37,.2)); mix-blend-mode:screen; } .section-wrap { background:linear-gradient(110deg,#07111f 0%,#09182a 100%); } .section-label { display:flex; gap:.75rem; align-items:center; font: 500 11px 'DM Mono',monospace; letter-spacing:.15em; text-transform:uppercase; color:#7ef2c1; } .section-label span:first-child { color:#63738a; } .mini-card { border:1px solid rgba(255,255,255,.1); border-radius:1rem; padding:1.25rem; background:rgba(255,255,255,.025); transition:.25s ease; } .mini-card:hover { border-color:rgba(126,242,193,.5); transform:translateY(-4px); } .mini-card span { font: 11px 'DM Mono',monospace; color:#7ef2c1; } .mini-card h3 { margin-top:1.25rem; font-family:'Space Grotesk'; font-size:1.1rem; font-weight:600; color:#fff; } .mini-card p { margin-top:.45rem; font-size:.8rem; line-height:1.4rem; color:#94a3b8; } .skill-row { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid rgba(255,255,255,.1); padding:1.35rem 0; transition:.25s ease; } .skill-row:hover { padding-left:.7rem; border-color:#7ef2c1; } .skill-row b { font:600 clamp(1.25rem,3vw,1.8rem) 'Space Grotesk'; color:#e8eef8; } .skill-row span { font:11px 'DM Mono',monospace; color:#7ef2c1; } .credential-card { min-height:220px; display:flex; flex-direction:column; justify-content:space-between; border:1px solid rgba(255,255,255,.1); border-radius:1rem; padding:1.7rem; background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.015)); transition:.3s ease; } .credential-card:hover { transform:translateY(-5px); border-color:rgba(126,242,193,.6); background:rgba(126,242,193,.055); } .credential-card h3 { margin-top:1rem; font:600 1.65rem 'Space Grotesk'; color:#fff; } .credential-card p:not(.font-mono) { margin-top:.65rem; font-size:.9rem; line-height:1.6; color:#94a3b8; } .arrow { align-self:flex-end; display:grid; place-items:center; width:2.5rem; height:2.5rem; border:1px solid rgba(255,255,255,.15); border-radius:50%; transition:.25s; } .credential-card:hover .arrow { background:#7ef2c1; border-color:#7ef2c1; color:#07111f; transform:rotate(45deg); } .reveal { opacity:0; animation:up .75s cubic-bezier(.2,.8,.2,1) forwards; } .delay-1{animation-delay:.1s}.delay-2{animation-delay:.2s}.delay-3{animation-delay:.3s}.delay-4{animation-delay:.4s} @keyframes up { from{ opacity:0; transform:translateY(18px)} to {opacity:1;transform:none} } @media (prefers-reduced-motion:reduce) { *,*:before,*:after { animation-duration:.01ms!important; scroll-behavior:auto!important; transition-duration:.01ms!important; } } @media (max-width:640px) { .photo-frame { transform:rotate(0); } }