ML/AI engineer portfolio website, built by Ling 3.1 Flash

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Mira Kovač — Senior Machine Learning Engineer, Berlin. Ranking, forecasting and fraud models in production.">
  <title>Mira Kovač — ML Engineer</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">
  <style>
    :root {
      --bg: #050705;
      --green: #00ff41;
      --dim: rgba(0, 255, 65, 0.72);
      --faint: rgba(0, 255, 65, 0.40);
      --font: "JetBrains Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo,
              Consolas, "Liberation Mono", monospace;
      --space: clamp(2.75rem, 9vh, 4.5rem);
    }

    * { box-sizing: border-box; }

    html { -webkit-text-size-adjust: 100%; }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--green);
      font-family: var(--font);
      font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
      line-height: 1.7;
      min-height: 100svh;
      display: flex;
    }

    ::selection { background: var(--green); color: #000; }

    a {
      color: var(--green);
      text-decoration: underline;
      text-decoration-color: var(--faint);
      text-underline-offset: 0.25em;
    }
    a:hover { background: var(--green); color: #000; text-decoration: none; }
    a:focus-visible,
    a:focus-visible:hover { outline: 1px solid var(--green); outline-offset: 3px; }

    .page {
      width: 100%;
      max-width: 44rem;
      margin: auto;
      padding: clamp(1.5rem, 6vw, 3.5rem);
    }

    /* ---------- header ---------- */

    .prompt {
      margin: 0 0 2.5rem;
      font-size: 0.75rem;
      color: var(--dim);
      overflow-wrap: anywhere;
    }

    h1 {
      margin: 0;
      font-size: clamp(1.9rem, 7vw, 2.9rem);
      font-weight: 700;
      letter-spacing: 0.01em;
      line-height: 1.2;
    }

    .cursor {
      display: inline-block;
      width: 0.55em;
      height: 0.95em;
      margin-left: 0.18em;
      transform: translateY(0.1em);
      background: var(--green);
      animation: blink 1.2s steps(2, start) infinite;
    }
    @keyframes blink { to { visibility: hidden; } }

    .role {
      margin: 0.9rem 0 0;
      font-size: 1rem;
      font-weight: 500;
    }
    .meta {
      margin: 0.25rem 0 0;
      font-size: 0.8rem;
      color: var(--dim);
    }
    .summary {
      margin: 1.75rem 0 0;
      max-width: 38rem;
      color: var(--dim);
    }

    /* ---------- sections ---------- */

    section, .contact { margin-top: var(--space); }

    h2 {
      margin: 0 0 1.5rem;
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--green);
    }

    /* ---------- experience timeline ---------- */

    .timeline {
      list-style: none;
      margin: 0;
      padding: 0;
      position: relative;
    }
    .timeline::before {
      content: "";
      position: absolute;
      left: 5px;
      top: 0.55em;
      bottom: 0.55em;
      width: 1px;
      background: var(--faint);
    }
    .timeline li {
      position: relative;
      padding-left: 2.25rem;
      margin-bottom: 2.25rem;
    }
    .timeline li:last-child { margin-bottom: 0; }
    .timeline li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.45em;
      width: 11px;
      height: 11px;
      border: 1px solid var(--green);
      background: var(--bg);
    }
    .when { font-weight: 700; }
    .when .to-now { color: var(--dim); font-weight: 400; }
    h3 {
      margin: 0.15rem 0 0.7rem;
      font-size: 1rem;
      font-weight: 700;
    }
    .at {
      font-weight: 400;
      color: var(--dim);
    }
    .job ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .job li {
      margin-bottom: 0.45rem;
      padding-left: 1.15rem;
      position: relative;
      color: var(--dim);
    }
    .job li::before {
      content: "›";
      position: absolute;
      left: 0;
      color: var(--green);
    }
    .job li:last-child { margin-bottom: 0; }
    .job strong { color: var(--green); font-weight: 500; }

    /* ---------- skill chips ---------- */

    .chips {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      gap: 0.6rem;
      margin: 0;
      padding: 0;
    }
    .chips li {
      border: 1px solid var(--faint);
      padding: 0.28rem 0.85rem;
      font-size: 0.78rem;
      letter-spacing: 0.03em;
      user-select: none;
    }
    .chips li:hover { background: var(--green); color: #000; }

    /* ---------- projects & publication ---------- */

    .list {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .list li {
      margin-bottom: 0.8rem;
      padding-left: 1.15rem;
      position: relative;
    }
    .list li:last-child { margin-bottom: 0; }
    .list li::before {
      content: "›";
      position: absolute;
      left: 0;
      color: var(--green);
    }
    .list .name { font-weight: 700; }
    .list .dash { color: var(--faint); margin: 0 0.55rem; }
    .list .desc { color: var(--dim); }

    .pub {
      margin: 0;
      padding-left: 1.15rem;
      position: relative;
      color: var(--dim);
    }
    .pub::before {
      content: "›";
      position: absolute;
      left: 0;
      color: var(--green);
    }
    .pub .title { color: var(--green); font-style: italic; }

    /* ---------- contact ---------- */

    .contact {
      border-top: 1px solid var(--faint);
      padding-top: var(--space);
    }
    .contact .row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.25rem 1.25rem;
      align-items: baseline;
    }
    .contact .sep { color: var(--faint); }
    .colophon {
      margin: 2rem 0 0;
      font-size: 0.72rem;
      color: var(--dim);
    }

    /* ---------- responsive ---------- */

    @media (min-width: 40rem) {
      .timeline li {
        display: grid;
        grid-template-columns: 8.5rem 1fr;
        column-gap: 1.75rem;
      }
      .when { white-space: nowrap; }
    }

    @media (prefers-reduced-motion: reduce) {
      .cursor { animation: none; }
    }
  </style>
</head>
<body>
  <main class="page">

    <header>
      <p class="prompt">mira@berlin:~$ cat ./cv.txt</p>
      <h1>Mira Kovač<span class="cursor" aria-hidden="true"></span></h1>
      <p class="role">Senior Machine Learning Engineer</p>
      <p class="meta">Berlin, Germany</p>
      <p class="summary">
        Nine years shipping ranking, forecasting and fraud models — from research
        notebook to production serving. Mostly Python and PyTorch, occasionally an
        XGBoost ensemble that just refuses to be beaten.
      </p>
    </header>

    <section id="experience">
      <h2>## experience</h2>
      <ol class="timeline">
        <li>
          <div class="when">2023 — <span class="to-now">present</span></div>
          <div class="job">
            <h3>Senior ML Engineer <span class="at">@ HelloFresh</span></h3>
            <ul>
              <li>Lead demand forecasting across 12 EU markets; gradient-boosted quantile models cut food waste <strong>18%</strong> while holding fill rate flat.</li>
              <li>Own the LLM recipe-recommendation pilot: retrieval over 40k recipes, <strong>+9%</strong> add-to-cart in a 4-week A/B test.</li>
              <li>Mentor four engineers; introduced model cards and an eval harness now used by six teams.</li>
            </ul>
          </div>
        </li>
        <li>
          <div class="when">2019 — 2023</div>
          <div class="job">
            <h3>Senior ML Engineer <span class="at">@ N26</span></h3>
            <ul>
              <li>Shipped real-time card-fraud scoring: XGBoost ensemble at <strong>&lt;50&nbsp;ms p99</strong>, fraud losses down <strong>31%</strong> in year one.</li>
              <li>Built the risk feature store on Feast; halved training-serving skew incidents across six models.</li>
              <li>Designed drift monitoring (KS/PSI alerts) that cut silent-degradation MTTR from days to hours.</li>
            </ul>
          </div>
        </li>
        <li>
          <div class="when">2017 — 2019</div>
          <div class="job">
            <h3>Machine Learning Engineer <span class="at">@ Zalando</span></h3>
            <ul>
              <li>Trained a two-tower product-embedding model for fashion search; recall@10 up <strong>14%</strong> over 8M SKUs.</li>
              <li>Built Spark feature pipelines for seller-onboarding checks, processing ~2M events nightly.</li>
            </ul>
          </div>
        </li>
      </ol>
    </section>

    <section id="skills">
      <h2>## skills</h2>
      <ul class="chips">
        <li>Python</li>
        <li>PyTorch</li>
        <li>XGBoost</li>
        <li>Apache Spark</li>
        <li>Kubernetes</li>
        <li>Feast</li>
        <li>SQL</li>
        <li>ONNX Runtime</li>
      </ul>
    </section>

    <section id="projects">
      <h2>## side projects</h2>
      <ul class="list">
        <li><span class="name">seq2seq.wasm</span><span class="dash">—</span><span class="desc">a transformer trained in the browser, 40&nbsp;KB weights, zero dependencies.</span></li>
        <li><span class="name">driftctl</span><span class="dash">—</span><span class="desc">CLI that turns a CSV into terminal sparklines and PSI drift reports.</span></li>
        <li><span class="name">repro-curl</span><span class="dash">—</span><span class="desc">one-curl reproducible ML environments; 2.1k stars.</span></li>
      </ul>
    </section>

    <section id="publication">
      <h2>## publication</h2>
      <p class="pub">
        Kovač, M. &amp; Lindqvist, S. (2022). <span class="title">Calibrated pairwise
        losses for cold-start product search.</span> In Proc. RecSys ’22, ACM.
      </p>
    </section>

    <footer class="contact" id="contact">
      <h2>## contact</h2>
      <div class="row">
        <a href="mailto:mira@kovac.dev">mira@kovac.dev</a>
        <span class="sep" aria-hidden="true">·</span>
        <a href="https://github.com/mirakovac" rel="noopener">github.com/mirakovac</a>
        <span class="sep" aria-hidden="true">·</span>
        <a href="https://linkedin.com/in/mirakovac" rel="noopener">linkedin.com/in/mirakovac</a>
      </div>
      <p class="colophon">© 2026 Mira Kovač · Berlin</p>
    </footer>

  </main>
</body>
</html>