// ───────────────────────────────────────────────────────────────────────── // Variant E — Refined (lead option) // Strong "who I am" hero emphasising current roles. // Project cards with screenshot placeholders + click-to-open detail modal. // Inherits Terminal's content density but in a clean, modern shell. // ───────────────────────────────────────────────────────────────────────── const RF = { bg: "#f5f3ed", panel: "#ffffff", panelSoft: "#fafaf6", ink: "#15151a", ink2: "#3a3a40", muted: "#7a7a82", rule: "#e6e3da", ruleSoft: "#efece4", accent: "#2b56d4", // confident blue — not too cobalt, not too cliche accentSoft: "#e1e8fa", accentText: "#1f3fa6", sans: "'Geist', 'Inter Tight', system-ui, -apple-system, sans-serif", mono: "'Geist Mono', 'JetBrains Mono', ui-monospace, monospace", }; const rfStyle = document.createElement("style"); rfStyle.id = "refined-styles"; rfStyle.textContent = ` .rf-root *{box-sizing:border-box} .rf-root{background:${RF.bg};color:${RF.ink};font-family:${RF.sans};font-size:15px;line-height:1.55;letter-spacing:-0.005em;width:100%;height:100%;overflow:hidden;position:relative} .rf-root a{color:inherit;text-decoration:none} .rf-root .mono{font-family:${RF.mono};font-size:11px;letter-spacing:0.04em;text-transform:uppercase;color:${RF.muted};font-weight:500} .rf-root .dim{color:${RF.muted}} .rf-root .acc{color:${RF.accent}} .rf-root .display{font-family:${RF.sans};font-weight:600;letter-spacing:-0.035em;line-height:0.98} .rf-root .title{font-family:${RF.sans};font-weight:600;letter-spacing:-0.025em;line-height:1.1} .rf-card{background:${RF.panel};border:1px solid ${RF.rule};border-radius:18px;transition:border-color .2s, transform .2s, box-shadow .2s} .rf-card.hov:hover{border-color:#cfcabc;transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(0,0,0,.16)} .rf-pill{display:inline-flex;align-items:center;padding:4px 10px;border:1px solid ${RF.rule};border-radius:999px;font-size:12px;color:${RF.ink2};background:${RF.panel};font-weight:500} .rf-pill.acc{border-color:${RF.accent};color:${RF.accent};background:${RF.accentSoft}} .rf-tag{display:inline-flex;align-items:center;padding:3px 9px;border-radius:6px;font-size:10.5px;font-family:${RF.mono};letter-spacing:.04em;text-transform:uppercase;background:${RF.panelSoft};color:${RF.ink2};border:1px solid ${RF.rule};font-weight:500} .rf-root .rf-cv{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;background:${RF.ink};color:${RF.bg};border-radius:999px;font-size:14.5px;font-weight:500;transition:background .15s, transform .15s} .rf-root .rf-cv:hover{background:${RF.accent};color:${RF.bg};transform:translateY(-1px)} /* Centered max-width container so content doesn't sprawl on wide monitors */ .rf-pad{max-width:1240px;margin-left:auto;margin-right:auto;width:100%} .rf-link{position:relative} .rf-link::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;opacity:.3;transition:opacity .15s, background .15s} .rf-link:hover{color:${RF.accent}} .rf-link:hover::after{opacity:1;background:${RF.accent}} .rf-nav-link{padding:6px 4px;font-size:15.5px;color:${RF.ink2};font-weight:500;transition:color .15s} .rf-nav-link:hover{color:${RF.accent}} .rf-status{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 8px;background:${RF.panel};border:1px solid ${RF.rule};border-radius:999px;font-size:12px;font-weight:500;color:${RF.ink2}} .rf-status .dot{width:7px;height:7px;border-radius:50%;background:${RF.accent};box-shadow:0 0 0 4px ${RF.accentSoft};animation:rfpulse 2.6s ease-in-out infinite} @keyframes rfpulse{0%,100%{box-shadow:0 0 0 3px ${RF.accentSoft}}50%{box-shadow:0 0 0 6px ${RF.accentSoft}}} /* hero contact / social row */ .rf-social{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 12px;border:1px solid ${RF.rule};border-radius:999px;font-size:13px;font-weight:500;color:${RF.ink2};background:${RF.panel};transition:border-color .15s, color .15s, transform .15s} .rf-social:hover{border-color:${RF.accent};color:${RF.accent};transform:translateY(-1px)} .rf-social svg{flex:none} .rf-cv-short{display:none} .rf-photo{background:${RF.accentSoft};border-radius:18px; background-image:repeating-linear-gradient(135deg,transparent 0 16px,rgba(43,86,212,.12) 16px 17px); display:flex;align-items:flex-end;padding:18px;color:${RF.accentText};font-family:${RF.mono};font-size:10.5px;text-transform:uppercase;letter-spacing:.1em} /* image-slot inside our cards — strip its border, fit the parent */ .rf-root image-slot{display:block;width:100%;height:100%;--is-radius:0;--is-border:none} .rf-portrait-slot{aspect-ratio:4/5;border-radius:18px;overflow:hidden;border:1px solid ${RF.rule};background:${RF.accentSoft}} .rf-portrait-slot image-slot{--is-radius:0} /* PROJECT CARDS */ .rf-proj{display:flex;flex-direction:column;cursor:pointer;overflow:hidden} .rf-proj .thumb{aspect-ratio:16/9;background:${RF.panelSoft};border-bottom:1px solid ${RF.rule};position:relative;overflow:hidden; background-image:linear-gradient(135deg,${RF.accentSoft} 0%, ${RF.panelSoft} 100%); display:flex;align-items:center;justify-content:center;color:${RF.accent};font-family:${RF.mono};font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:500} .rf-proj .thumb::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%, rgba(255,255,255,.5) 0%, transparent 50%);pointer-events:none} .rf-proj .thumb svg{position:relative;z-index:1} .rf-proj .body{padding:18px 20px;display:flex;flex-direction:column;gap:8px;flex:1} .rf-proj .arrow{display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:999px;background:${RF.panelSoft};color:${RF.ink};transition:transform .2s, background .2s, color .2s;font-size:13px;border:1px solid ${RF.rule}} .rf-proj:hover .arrow{background:${RF.accent};color:#fff;transform:translate(3px,-3px);border-color:${RF.accent}} /* ── RESPONSIVE GRID CLASSES ── */ .rf-hero-grid{display:grid;grid-template-columns:1.8fr 1fr;gap:56px;align-items:start} .rf-roles-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:16px} .rf-work-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px} .rf-toolkit-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:64px} .rf-contact-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:56px;align-items:end} .rf-about-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:start} /* Heading with a hairline rule under it — referenced from Arda's About */ .rf-headrule{border:0;height:1px;background:${RF.rule};margin:18px 0 28px} /* De-carded list styles — experience & toolkit read as clean text, not boxes */ .rf-exprow{padding:22px 0;border-top:1px solid ${RF.rule}} .rf-exprow:first-child{border-top:0;padding-top:4px} .rf-exprow-head{display:flex;justify-content:space-between;gap:16px;align-items:baseline;flex-wrap:wrap} .rf-exptag{font-size:11px;font-weight:600;letter-spacing:.02em;padding:2px 9px;border-radius:999px;border:1px solid ${RF.rule};color:${RF.muted};background:${RF.panelSoft};white-space:nowrap} .rf-exptag.now{color:${RF.accent};border-color:${RF.accent};background:${RF.accentSoft}} .rf-divider{border:0;height:1px;background:${RF.rule};margin:26px 0} /* Honours — one emphasized tinted panel (the only non-project box) */ .rf-honours{background:${RF.accentSoft};border:1px solid #cdd8f5;border-radius:16px;padding:24px 26px} .rf-honours .rf-aw{display:flex;gap:12px;padding:9px 0;border-top:1px solid rgba(31,63,166,.13);align-items:baseline} .rf-honours .rf-aw:first-of-type{border-top:0;padding-top:2px} /* Tablet */ @media (max-width: 980px){ .rf-work-grid{grid-template-columns:repeat(2,1fr)} .rf-work-grid > article{grid-column:span 1 !important} } /* Phone */ @media (max-width: 680px){ .rf-pad{padding-left:20px !important;padding-right:20px !important} .rf-hero-grid{grid-template-columns:1fr;gap:28px} .rf-hero-media{order:-1;align-items:center !important;width:100%} .rf-hero-media .rf-portrait-slot{width:190px !important} .rf-roles-grid{grid-template-columns:1fr} .rf-work-grid{grid-template-columns:1fr} .rf-work-grid > article{grid-column:1 / -1 !important} .rf-toolkit-grid{grid-template-columns:1fr} .rf-about-grid{grid-template-columns:1fr;gap:28px} .rf-contact-grid{grid-template-columns:1fr;gap:28px;align-items:start} .rf-brand-name{display:none} nav .rf-pad{padding-left:16px !important;padding-right:16px !important} .rf-nav-links{gap:11px !important} .rf-nav-link{font-size:12.5px !important;padding:6px 1px !important} .rf-cv .rf-cv-long{display:none} .rf-cv .rf-cv-short{display:inline} .rf-cv{padding:9px 13px !important} .rf-h1{font-size:46px !important} .rf-statement{font-size:17px !important} .rf-sec-h2{font-size:32px !important} .rf-contact-h2{font-size:44px !important} .rf-sec-hint{display:none} /* "Click any card" hint */ .rf-modal{padding:16px !important} .rf-feat-title{font-size:24px !important} } /* MODAL */ .rf-modal{position:fixed;inset:0;background:rgba(15,15,18,.45);backdrop-filter:blur(4px);z-index:50;display:flex;align-items:flex-start;justify-content:center;padding:48px 24px;overflow:auto;opacity:0;pointer-events:none;transition:opacity .2s} .rf-modal.open{opacity:1;pointer-events:auto} .rf-modal .sheet{background:${RF.bg};border:1px solid ${RF.rule};border-radius:20px;max-width:880px;width:100%;max-height:calc(100vh - 96px);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.4);transform:translateY(10px);transition:transform .25s ease} .rf-modal.open .sheet{transform:translateY(0)} .rf-sheet-scroll{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch} .rf-modal .x{position:absolute;top:14px;right:14px;z-index:10;width:38px;height:38px;border-radius:50%;background:${RF.panel};border:1px solid ${RF.rule};display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:20px;line-height:1;color:${RF.ink2};padding:0;box-shadow:0 4px 12px -4px rgba(0,0,0,.25);transition:background .15s, color .15s, transform .15s} .rf-modal .x:hover{background:${RF.accent};color:#fff;border-color:${RF.accent};transform:scale(1.05)} `; if (!document.getElementById("refined-styles")) document.head.appendChild(rfStyle); // Small inline SVG placeholder for project thumbnails — abstract glyph based // on project type. User can swap in a real screenshot later. function ProjGlyph({ kind }) { if (kind.includes("Full-stack") || kind.includes("Desktop")) { return ; } if (kind.includes("GEO") || kind.includes("Engagement")) { return ; } if (kind.includes("Research")) { return ; } return ; } // Symbolic tiles for projects without a real screenshot yet — abstract, on-brand // glyphs (not attempts to reproduce any third party's actual logo/brand mark). function ProjIconTile({ kind, caption }) { const isSwitchboard = kind === "switchboard"; return (
{isSwitchboard ? ( ) : ( )} {caption}
); } function RefinedPortfolio() { const P = window.PORTFOLIO; const [openProject, setOpenProject] = React.useState(null); // Combined: featured first, then the rest const allProjectsRaw = [ { ...P.featured, year: P.featured.period, kind: P.featured.subtitle, summary: P.featured.headline, details: P.featured.bullets, isFeatured: true }, ...P.projects, ]; // Custom row layout: 2 / 2 / 3 — Tiny Switchboard + Biostat lead, then the rest. const ORDER = ["tiny-switchboard", "biostat", "bilsen", "eirdx", "suggestly", "splitmate", "sars"]; const allProjects = ORDER .map((id) => allProjectsRaw.find((p) => p.id === id)) .filter(Boolean); const ROW_SPAN = [3, 3, 3, 3, 2, 2, 2]; // out of a 6-col grid → 2,2,3 cards per row React.useEffect(() => { const onKey = (e) => e.key === "Escape" && setOpenProject(null); window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, []); return (
{/* NAV */} {/* WHO — strong identity section. The whole top of the site IS the answer to "who is Esra". */}
Open to collaboration

Hi, I'm Esra Nur.

{/* Identity + about merged into one flowing intro */}

Undergraduate researcher at Çiçek Lab and a Computer Science student at Bilkent University, on full scholarship.

I work where AI research meets real software: training models on one side, and building the systems around them on the other. My work so far has spanned privacy-preserving genomics, LLM routing, and full-stack research tools.

Before Bilkent, I graduated from Ankara Science High School, Turkey's first and most selective science high school.

I'm open to collaborations and feedback on my work.

{/* Quick contact — fast path so recruiters don't scroll to the footer */}
Email GitHub LinkedIn
Esra Nur Tat
{/* Experience — current & incoming roles, as a clean list (not cards) */}
01

Experience

{P.experience.map((e, i) => (

{e.role}

{e.orgUrl ? ( {e.org} ↗ ) : ( {e.org} )}
{e.period}

{e.note}

))}
{/* WORK */}
02

Selected work

Click any card for details
{/* Featured (first card spans wider) */}
{allProjects.map((p, i) => { return (
setOpenProject(p)} >
{p.screenshot ? ( {p.name} ) : p.icon ? ( ) : ( )}
{p.isFeatured && ★ Featured} {p.year}
↗
{p.kind}

{p.name}

{p.summary}

{(p.stack || []).slice(0, 3).map((s) => {s})}
); })}
{/* TOOLKIT + Honours */}
03

Toolkit & honours

Stack
{Object.entries(P.skills).map(([cat, items]) => (
{cat}
{items.map((s) => {s})}
))}
★ Honours
{P.awards.map((a, i) => (
{a.year} {a.text}
))}
Languages
Turkish
native
English
fluent
{/* CONTACT */} {/* DETAIL MODAL */}
setOpenProject(null)}> {openProject && (
e.stopPropagation()} style={{ position: "relative" }}>
{openProject.screenshot ? ( {openProject.name} ) : openProject.icon ? ( ) : ( )}
{openProject.isFeatured && ★ Featured} {openProject.kind} {openProject.year}

{openProject.name}

{openProject.summary}

{openProject.details && ( <>
What I built
    {openProject.details.map((d, i) => (
  • 0{i + 1} {d}
    • ))}
)}
Stack
{(openProject.stack || []).map((s) => {s})}
{openProject.link && ( View on GitHub ↗ )}
)}
{window.ChatTwin ? : null}
); } window.RefinedPortfolio = RefinedPortfolio;