:root { --ink:#20252c; --muted:#68707b; --paper:#fbfbf9; --line:#e6e6e1; --blue:#dbe6fb; --coral:#f4d9d4; --gold:#f4dfac; --lilac:#e4dff3; --mint:#dcefe5; --slate:#dbe0e5; --accent:#116329; }
#home + #projects, #projects, #resume, #about, #contact { display:none; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans",Arial,sans-serif; } a { color:inherit; text-decoration:none; } .site-header { width:min(1340px,calc(100% - 64px)); margin:0 auto; height:116px; display:flex; align-items:center; justify-content:space-between; gap:30px; border-bottom:1px solid transparent; } .brand { font-weight:700; font-size:20px; letter-spacing:-.06em; } .brand span { color:var(--accent); } nav { --indicator-x:0px; --indicator-scale:1; position:relative; display:flex; gap:42px; margin-right:auto; margin-left:0; } .nav-link { font-size:18px; position:relative; padding:8px 0; z-index:1; } .nav-indicator { position:absolute; width:8px; height:8px; border-radius:50%; left:0; bottom:-10px; background:var(--accent); transform:translateX(var(--indicator-x)) scale(var(--indicator-scale)); transition:transform .32s cubic-bezier(.22,1,.36,1), opacity .18s ease; pointer-events:none; } nav.is-moving .nav-indicator { --indicator-scale:1.2; } .social-links { display:flex; gap:14px; font-family:"DM Mono",monospace; } .social-links a { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; font-size:0; } .social-links a::after { font-size:17px; line-height:1; } .social-links a:nth-child(3)::after { content:"in"; font-family:"DM Sans",sans-serif; font-size:20px; font-weight:700; } .social-links .email-link::after,.social-links .github-link::after,.social-links .beli-link::after { content:none; } .social-links img { width:23px; height:23px; object-fit:contain; display:block; } .social-links .email-link img { width:21px; height:21px; } .social-links .github-link img { width:21px; height:21px; } .social-links .beli-link img { width:32px; height:32px; } .social-links a:hover, .nav-link:hover { color:var(--accent); }
.page-section, .contact-section { width:min(1200px,calc(100% - 64px)); margin:0 auto; padding:112px 0; } .hero { min-height:630px; display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:80px; padding-top:60px; } .eyebrow { font-family:"DM Mono",monospace; font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 22px; } h1,h2,h3,h4,p { margin-top:0; } h1 { max-width:700px; font-size:clamp(48px,6.2vw,84px); line-height:.98; letter-spacing:-.065em; margin-bottom:28px; } .lede { font-size:22px; line-height:1.48; max-width:620px; color:#4a5059; margin-bottom:34px; } .button-row { display:flex; flex-wrap:wrap; gap:12px; } .button { display:inline-flex; align-items:center; gap:24px; padding:13px 18px; border-radius:8px; font-size:14px; font-weight:600; transition:transform .18s ease,background .18s ease; } .button:hover { transform:translateY(-2px); } .button-primary { background:var(--ink); color:white; } .button-primary:hover { background:var(--accent); } .button-quiet { background:#e9ebeb; } .hero-panel { min-height:390px; overflow:hidden; padding:32px; background:#dfe8e4; position:relative; display:flex; flex-direction:column; justify-content:flex-end; isolation:isolate; } .hero-panel p { position:relative; z-index:1; font-size:clamp(42px,5vw,70px); line-height:.82; letter-spacing:-.08em; font-weight:700; margin:0 0 20px; } .hero-panel span { position:relative; z-index:1; font-family:"DM Mono",monospace; font-size:12px; letter-spacing:.1em; } .photo-panel { min-height:430px; padding:0; background:#dfe8e4; } .photo-panel img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:42% 42%; } .photo-panel::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.45) 100%); z-index:0; } .photo-caption { position:relative; z-index:1; padding:0 32px 24px; color:white; text-shadow:0 1px 18px rgba(0,0,0,.28); transform:translateY(10px); } .photo-caption p { font-size:clamp(34px,4vw,56px); line-height:.86; letter-spacing:-.07em; margin:0; } .photo-caption span { font-size:11px; } .orb { position:absolute; border-radius:50%; filter:blur(2px); } .orb-one { width:330px; height:330px; background:#8ac5a5; top:-80px; right:-80px; } .orb-two { width:200px; height:200px; background:#f3c37d; bottom:-60px; left:-50px; }
.section-heading { max-width:760px; margin-bottom:58px; } h2 { font-size:clamp(42px,5vw,64px); letter-spacing:-.06em; line-height:1; margin-bottom:22px; } .section-heading > p:last-child { font-size:21px; line-height:1.45; color:#555b64; } .project-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:28px; } .project-card { min-height:320px; padding:32px; display:flex; flex-direction:column; align-items:flex-start; scroll-margin-top:36px; transition:transform .18s ease, filter .18s ease; } a.project-card:hover { transform:translateY(-3px); filter:saturate(1.04); } a.project-card:focus-visible { outline:2px solid var(--accent); outline-offset:4px; } .card-blue{background:var(--blue)} .card-coral{background:var(--coral)} .card-gold{background:var(--gold)} .card-lilac{background:var(--lilac)} .card-mint{background:var(--mint)} .card-slate{background:var(--slate)} .card-index { font-family:"DM Mono",monospace; color:#535963; font-size:12px; margin-bottom:auto; } .special-tag { margin-top:14px; display:inline-flex; align-items:center; border-radius:999px; padding:5px 9px; background:rgba(17,99,41,.14); color:var(--accent); font-family:"DM Mono",monospace; font-size:11px; font-weight:500; } .project-card h3 { font-size:30px; letter-spacing:-.045em; margin:42px 0 8px; } .special-tag + h3 { margin-top:22px; } .project-card p { font-size:17px; line-height:1.42; max-width:500px; } .tags { margin-top:auto; display:flex; flex-wrap:wrap; gap:7px; } .tags span { font-family:"DM Mono",monospace; font-size:11px; padding:5px 7px; background:rgba(255,255,255,.55); border-radius:4px; }
.resume-section { border-top:1px solid var(--line); } .resume-layout { display:grid; grid-template-columns:220px 1fr; gap:80px; } .resume-nav { display:flex; flex-direction:column; gap:16px; font-family:"DM Mono",monospace; font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); } .resume-nav a:hover { color:var(--accent); } .resume-block { padding-bottom:52px; margin-bottom:52px; border-bottom:1px solid var(--line); } .resume-block:last-child { border-bottom:0; } .resume-block > h3 { font-family:"DM Mono",monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:28px; color:var(--muted); } h4 { font-size:20px; letter-spacing:-.03em; margin-bottom:10px; } h4 span { display:flex; align-items:center; flex-wrap:wrap; gap:7px; color:var(--muted); font-size:14px; font-weight:400; letter-spacing:0; margin-top:5px; } .company-logo { width:17px; height:17px; object-fit:contain; flex:0 0 auto; } .company-logo-symbol { width:16px; height:16px; } .company-logo-wide { width:24px; height:17px; } .resume-block p { font-size:17px; line-height:1.52; margin-bottom:12px; } .resume-meta { font-family:"DM Mono",monospace; font-size:12px; line-height:1.6; letter-spacing:.02em; color:var(--muted); margin-bottom:26px; } .muted { color:var(--muted); } .role { margin-bottom:29px; } .role:last-child { margin-bottom:0; } .detail-list { margin:0; padding-left:20px; display:grid; gap:8px; font-size:16px; line-height:1.48; color:#3f4650; } .coursework { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 24px; margin-top:18px; } .coursework p { margin:0; font-size:16px; line-height:1.45; color:#4a5059; } .coursework strong { display:block; color:var(--ink); font-size:13px; margin-bottom:3px; } .skill-list { display:grid; gap:18px; } .skill-list strong { display:block; font-size:14px; margin-bottom:5px; } .language-grid,.activity-list { display:grid; gap:16px; } .language-grid p,.activity-list p { margin-bottom:0; } .award-list { margin:0; padding-left:20px; display:grid; gap:14px; font-size:17px; line-height:1.4; } .about-section { display:grid; grid-template-columns:1fr 1.25fr; gap:70px; border-top:1px solid var(--line); } .about-copy { font-size:24px; line-height:1.42; letter-spacing:-.025em; } .about-copy p { margin-bottom:28px; } .contact-section { padding-top:110px; padding-bottom:110px; border-top:1px solid var(--line); } .contact-section h2 { max-width:700px; } footer { width:min(1340px,calc(100% - 64px)); margin:0 auto; padding:32px 0; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; color:var(--muted); font-family:"DM Mono",monospace; font-size:11px; } .made-by { display:inline-flex; align-items:center; gap:6px; color:var(--ink); font-family:"DM Sans",Arial,sans-serif; font-size:12px; font-weight:600; letter-spacing:0; } .made-by .heart { color:#dd6b61; font-size:13px; line-height:1; } .signature { font-family:"Bradley Hand","Comic Sans MS","Segoe Print",cursive; font-size:14px; font-weight:700; letter-spacing:.01em; }
.about-page { border-top:1px solid var(--line); } .about-page .section-heading { margin-bottom:76px; } .about-page h2 { font-size:54px; } .about-layout { display:grid; grid-template-columns:300px minmax(0,1fr); gap:58px 76px; } .about-label { font-family:"DM Mono",monospace; font-size:13.5px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; margin:3px 0 0; color:var(--ink); } .about-copy { font-size:16.8px; line-height:1.62; letter-spacing:-.003em; max-width:790px; } .about-copy p { margin-bottom:20px; } .about-copy strong { font-weight:700; } .about-copy a:not(.project-pill) { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; } .about-copy a:not(.project-pill):hover { color:var(--accent); } .about-list { margin:0; padding-left:20px; display:grid; gap:18px; } .about-list li { padding-left:2px; } .project-pill { display:inline-block; padding:1px 7px 2px; border-radius:7px; font-weight:700; line-height:1.08; text-decoration:none; white-space:nowrap; transition:transform .16s ease,filter .16s ease; } .project-pill:hover { transform:translateY(-1px); filter:saturate(1.1); } .pill-blue { background:#18314f; color:white; } .pill-mint { background:#b9ddc8; color:#1f3b2c; } .pill-gold { background:#e8c16c; color:#2e2d2a; } .pill-slate { background:#d6dbe9; color:#2d3440; } .pill-coral { background:#a75145; color:white; } .pill-lilac { background:#e4dff3; color:#2f2a3d; } .pill-green { background:#dcefe5; color:#174127; }
@media (max-width:800px) { .site-header { height:auto; padding:25px 0; flex-wrap:wrap; gap:18px; } nav { order:3; width:100%; margin:0; justify-content:space-between; gap:10px; } .nav-link { font-size:16px; } .social-links { margin-left:auto; gap:12px; } .page-section,.contact-section { width:min(100% - 40px,1200px); padding:72px 0; } .hero { grid-template-columns:1fr; gap:40px; min-height:auto; padding-top:55px; } .hero-panel { min-height:290px; } .project-grid { grid-template-columns:1fr; gap:16px; } .project-card { min-height:270px; } .resume-layout,.about-section,.about-layout,.coursework { grid-template-columns:1fr; gap:32px; } .resume-nav { flex-direction:row; flex-wrap:wrap; } footer { width:calc(100% - 40px); flex-direction:column; } }
@media (max-width:800px) { .about-page { padding-top:64px; } .about-page .section-heading { margin-bottom:42px; } .about-page h2 { font-size:clamp(38px,13vw,48px); letter-spacing:-.055em; margin-bottom:16px; } .about-layout { gap:18px; } .about-label { margin-top:28px; padding-top:22px; border-top:1px solid var(--line); font-size:12px; letter-spacing:.12em; line-height:1.35; } .about-layout .about-label:first-of-type { margin-top:0; padding-top:0; border-top:0; } .about-copy { max-width:none; font-size:15.8px; line-height:1.68; letter-spacing:0; } .about-copy p { margin-bottom:18px; } .about-list { gap:16px; padding-left:18px; } .about-list li { padding-left:0; } .project-pill { white-space:normal; line-height:1.15; padding:2px 6px; } }