Showcase

ML/AI engineer portfolio website, built by MiniMax M3.1 Flash

Hostedvia OpenCodeOpenRouter
Running live in your browserNew tab
Speed
221tok/s
First token included
Written
85.2Ktokens
Time to build
6m 25s
MiniMax M3.1 Flash's builds and scores
Show the code the model wrote
HTML17,856 characters
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mira Kovač — Senior Machine Learning Engineer</title>
<meta name="description" content="Résumé of Mira Kovač, Senior Machine Learning Engineer in Berlin. Production machine learning: ranking, retrieval, forecasting and risk scoring.">
<meta name="color-scheme" content="dark">
<style>
  /* ---------------------------------- tokens --------------------------------- */
  :root {
    --bg:        #080a09;
    --line:      #1b241f;
    --line-2:    #27332c;
    --text:      #e8f0e9;
    --muted:     #98a99f;
    --dim:       #74847b;
    --green:     #00e676;
    --green-dim: rgba(0, 230, 118, .62);

    /* spacing rhythm: every gap on the page comes from this scale */
    --s1:  4px;  --s2:  8px;  --s3: 12px;  --s4: 16px;
    --s5: 24px;  --s6: 32px;  --s7: 48px;  --s8: 64px;  --s9: 88px;

    --mono: ui-monospace, SFMono-Regular, "SF Mono", SFMono, Menlo, Consolas,
            "DejaVu Sans Mono", "Liberation Mono", monospace;
  }

  /* ----------------------------------- reset --------------------------------- */
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--mono);
    font-size: 14px;
    line-height: 1.7;
    font-variant-ligatures: none;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, p, ul, ol, figure { margin: 0; }
  ul, ol { padding: 0; list-style: none; }
  a { color: inherit; }
  ::selection { background: var(--green); color: var(--bg); }

  a:focus-visible { outline: 1px solid var(--green); outline-offset: 3px; }

  /* ---------------------------------- layout --------------------------------- */
  .page {
    max-width: 880px;
    margin: 0 auto;
    padding: var(--s8) var(--s5) var(--s9);
  }
  main { margin-top: var(--s8); }
  main > section + section { margin-top: var(--s8); }

  /* --------------------------------- masthead -------------------------------- */
  .prompt {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s4);
    color: var(--dim);
    font-size: 12px;
    letter-spacing: .04em;
  }
  .prompt .arrow { color: var(--green); margin-right: var(--s2); }
  .prompt-tail { color: var(--dim); white-space: nowrap; }

  h1 {
    margin-top: var(--s5);
    font-size: clamp(30px, 7.2vw, 46px);
    line-height: 1.05;
    font-weight: 500;
    letter-spacing: .01em;
    text-transform: uppercase;
  }
  .headline {
    margin-top: var(--s3);
    color: var(--green);
    font-size: 15px;
    letter-spacing: .02em;
  }
  .cursor {
    display: inline-block;
    width: .52em;
    height: 1.05em;
    margin-left: 3px;
    background: var(--green);
    vertical-align: -.18em;
    animation: blink 1.15s steps(1, end) infinite;
  }
  @keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

  .lede {
    margin-top: var(--s4);
    max-width: 58ch;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.75;
  }

  /* contact row */
  .contact {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s4) var(--s7);
    margin-top: var(--s6);
    padding-top: var(--s5);
    border-top: 1px solid var(--line);
  }
  .contact .k {
    display: block;
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dim);
  }
  .contact .v { font-size: 13px; color: var(--text); }
  .contact a {
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px solid var(--line-2);
    transition: color .15s ease, border-color .15s ease;
  }
  .contact a:hover { color: var(--green); border-color: var(--green-dim); }

  /* ------------------------------- section head ------------------------------ */
  .sec-head {
    display: flex;
    align-items: center;
    gap: var(--s4);
    margin-bottom: var(--s5);
  }
  .sec-head .hash { color: var(--green); font-size: 13px; }
  .sec-head h2 {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--text);
    white-space: nowrap;
  }
  .sec-head .rule { flex: 1; height: 1px; background: var(--line); }

  /* -------------------------------- experience ------------------------------- */
  .role { display: grid; grid-template-columns: 64px 32px minmax(0, 1fr); }
  .role + .role { margin-top: var(--s7); }

  .role-year {
    padding-top: 1px;
    text-align: right;
    font-size: 13px;
    letter-spacing: .04em;
    color: var(--green);
    line-height: 1.5;
  }
  .role-year .to {
    display: block;
    font-size: 11px;
    color: var(--dim);
    letter-spacing: .02em;
  }

  .rail { position: relative; }
  .rail::before {                       /* the spine */
    content: "";
    position: absolute;
    left: 50%;
    top: 11px;
    bottom: calc(-1 * var(--s7));
    width: 1px;
    background: var(--line-2);
    transform: translateX(-50%);
  }
  .role:last-child .rail::before { bottom: auto; height: 11px; }
  .node {                               /* the marker */
    position: absolute;
    top: 6px;
    left: 50%;
    width: 9px;
    height: 9px;
    margin-left: -4.5px;
    background: var(--green);
  }

  .role-title {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .01em;
    color: var(--text);
    line-height: 1.4;
  }
  .role-meta {
    margin-top: var(--s1);
    font-size: 12.5px;
    color: var(--dim);
  }
  .role-meta .org { color: var(--muted); }
  .dot { color: var(--green-dim); padding: 0 var(--s2); }

  .bullets { margin-top: var(--s4); }
  .bullets li {
    position: relative;
    padding-left: var(--s5);
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--muted);
  }
  .bullets li + li { margin-top: var(--s3); }
  .bullets li::before {
    content: "▸";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--green);
    font-size: 11px;
  }
  .bullets b { color: var(--text); font-weight: 500; }

  /* ---------------------------------- skills --------------------------------- */
  .chips { display: flex; flex-direction: column; gap: var(--s3); }
  .chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s3) var(--s4);
  }
  .chip {
    border: 1px solid var(--line);
    padding: 7px 12px;
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.4;
    transition: color .15s ease, border-color .15s ease;
  }
  .chip .tick {
    color: var(--green);
    opacity: .5;
    margin-right: 7px;
  }
  .chip:hover { color: var(--green); border-color: var(--green-dim); }

  /* ------------------------------- publications ------------------------------ */
  .pub { border-left: 1px solid var(--line-2); padding-left: var(--s5); }
  .pub-title { color: var(--text); font-size: 13.5px; }
  .pub-meta { margin-top: var(--s2); font-size: 12.5px; color: var(--dim); }
  .pub-meta em { color: var(--muted); font-style: italic; }
  .pub-links { margin-top: var(--s3); font-size: 12px; }
  .pub-links a {
    color: var(--green);
    text-decoration: none;
    border-bottom: 1px solid var(--green-dim);
  }
  .pub-links a:hover { border-bottom-color: var(--green); }

  /* --------------------------------- projects -------------------------------- */
  .projects {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s4);
  }
  .project {
    border: 1px solid var(--line);
    padding: var(--s4);
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    transition: border-color .15s ease;
  }
  .project:hover { border-color: var(--line-2); }
  .project-name { color: var(--green); font-size: 13px; letter-spacing: .02em; }
  .project-desc { font-size: 12.5px; line-height: 1.7; color: var(--muted); }
  .project-meta { margin-top: auto; padding-top: var(--s3); font-size: 11px; color: var(--dim); }
  .project-meta a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line-2); }
  .project-meta a:hover { color: var(--green); border-bottom-color: var(--green-dim); }

  /* ---------------------------------- footer --------------------------------- */
  footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s2) var(--s4);
    margin-top: var(--s8);
    padding-top: var(--s5);
    border-top: 1px solid var(--line);
    color: var(--dim);
    font-size: 11.5px;
    letter-spacing: .03em;
  }

  /* -------------------------------- responsive ------------------------------- */
  @media (max-width: 820px) {
    .projects { grid-template-columns: 1fr; }
  }
  @media (max-width: 560px) {
    .page { padding: var(--s6) var(--s4) var(--s8); }
    main { margin-top: var(--s7); }
    main > section + section { margin-top: var(--s7); }
    .role { grid-template-columns: 48px 20px minmax(0, 1fr); }
    .role + .role { margin-top: var(--s6); }
    .rail::before { bottom: calc(-1 * var(--s6)); }
    .role-year { font-size: 12px; }
    .role-year .to { font-size: 10px; }
    .bullets li { padding-left: var(--s4); }
    .contact { gap: var(--s4) var(--s5); }
    .chips { flex-direction: row; flex-wrap: wrap; gap: var(--s3); }
    .chip-row { display: contents; }
  }
  @media (max-width: 380px) {
    .contact { flex-direction: column; gap: var(--s3); }
  }
  @media (prefers-reduced-motion: reduce) {
    .cursor { animation: none; }
    * { transition: none !important; }
  }
</style>
</head>
<body>
<div class="page">

  <header class="masthead">
    <p class="prompt">
      <span><span class="arrow" aria-hidden="true">›</span>resume.md</span>
      <span class="prompt-tail">updated 2026.09</span>
    </p>

    <h1>Mira Kovač</h1>
    <p class="headline">Senior Machine Learning Engineer<span class="cursor" aria-hidden="true"></span></p>
    <p class="lede">Production machine learning for marketplaces, delivery logistics and fintech — ranking, retrieval, forecasting and risk. Berlin based, working across EU markets.</p>

    <ul class="contact">
      <li>
        <span class="k">Email</span>
        <a class="v" href="mailto:mira@kovac.dev">mira@kovac.dev</a>
      </li>
      <li>
        <span class="k">GitHub</span>
        <a class="v" href="https://github.com/mira-kovac-ml" rel="noopener">mira-kovac-ml</a>
      </li>
      <li>
        <span class="k">LinkedIn</span>
        <a class="v" href="https://www.linkedin.com/in/mira-kovac-ml" rel="noopener">in/mira-kovac-ml</a>
      </li>
      <li>
        <span class="k">Location</span>
        <span class="v">Berlin, Germany</span>
      </li>
    </ul>
  </header>

  <main>

    <section aria-labelledby="exp-heading">
      <div class="sec-head">
        <span class="hash" aria-hidden="true">##</span>
        <h2 id="exp-heading">Experience</h2>
        <span class="rule" aria-hidden="true"></span>
      </div>

      <ol class="timeline">
        <li class="role">
          <div class="role-year">2022<span class="to">– now</span></div>
          <div class="rail" aria-hidden="true"><span class="node"></span></div>
          <div class="role-body">
            <h3 class="role-title">Senior Machine Learning Engineer</h3>
            <p class="role-meta">
              <span class="org">Zalando SE</span><span class="dot">·</span>Berlin<span class="dot">·</span>Search &amp; Discovery
            </p>
            <ul class="bullets">
              <li>Shipped a two-stage retrieval and ranking stack for browse and search — <b>ANN two-tower candidates reranked by LightGBM</b> — delivering <b>+7.4% CTR</b> at 9k RPS with p99 inference of 38 ms.</li>
              <li>Designed the shared feature store and training orchestrator now used by <b>14 teams</b>; nightly retraining moved from a 6-hour manual pipeline to a 22-minute scheduled DAG with end-to-end lineage.</li>
              <li>Replaced offline-AUC release gates with <b>counterfactual policy evaluation</b> and online guardrails; 30+ model releases since, with no rollback traced to an offline/online metric mismatch.</li>
            </ul>
          </div>
        </li>

        <li class="role">
          <div class="role-year">2020<span class="to">– 2022</span></div>
          <div class="rail" aria-hidden="true"><span class="node"></span></div>
          <div class="role-body">
            <h3 class="role-title">Machine Learning Engineer</h3>
            <p class="role-meta">
              <span class="org">Delivery Hero SE</span><span class="dot">·</span>Berlin<span class="dot">·</span>Forecasting &amp; Data Platform
            </p>
            <ul class="bullets">
              <li>Built demand forecasting for <b>40+ markets</b> (gradient-boosted trees with temporal fusion transformers), cutting stockout-driven lost orders <b>11% year over year</b>.</li>
              <li>Owned entity resolution across menu, courier and payment data with graph-based blocking; <b>match precision 0.74 → 0.93</b>, recall 0.81 → 0.88.</li>
              <li>Introduced drift and label-lag monitoring with paging to the owning team; silent model regressions dropped from ~3 per month to under 1 in two quarters.</li>
            </ul>
          </div>
        </li>

        <li class="role">
          <div class="role-year">2017<span class="to">– 2020</span></div>
          <div class="rail" aria-hidden="true"><span class="node"></span></div>
          <div class="role-body">
            <h3 class="role-title">Machine Learning Engineer</h3>
            <p class="role-meta">
              <span class="org">N26 GmbH</span><span class="dot">·</span>Berlin<span class="dot">·</span>Risk &amp; Onboarding
            </p>
            <ul class="bullets">
              <li>Built card-transaction risk scoring on gradient-boosted trees with graph-derived device features; <b>fraud losses down 18%</b> at a flat false-positive rate.</li>
              <li>Shipped document OCR and underwriting models for onboarding, cutting manual review turnaround from <b>3 days to under 4 hours</b>.</li>
              <li>Introduced the first reproducible training pipeline (DVC + CI with artifact versioning) covering 30+ models — every release auditable and revertible.</li>
            </ul>
          </div>
        </li>
      </ol>
    </section>

    <section aria-labelledby="skills-heading">
      <div class="sec-head">
        <span class="hash" aria-hidden="true">##</span>
        <h2 id="skills-heading">Skills</h2>
        <span class="rule" aria-hidden="true"></span>
      </div>
      <ul class="chips">
        <li class="chip-row">
          <span class="chip"><span class="tick" aria-hidden="true">#</span>Python</span>
          <span class="chip"><span class="tick" aria-hidden="true">#</span>PyTorch</span>
          <span class="chip"><span class="tick" aria-hidden="true">#</span>TensorFlow</span>
          <span class="chip"><span class="tick" aria-hidden="true">#</span>scikit-learn</span>
        </li>
        <li class="chip-row">
          <span class="chip"><span class="tick" aria-hidden="true">#</span>Spark</span>
          <span class="chip"><span class="tick" aria-hidden="true">#</span>Ray</span>
          <span class="chip"><span class="tick" aria-hidden="true">#</span>LLM evaluation</span>
          <span class="chip"><span class="tick" aria-hidden="true">#</span>MLOps</span>
        </li>
      </ul>
    </section>

    <section aria-labelledby="pub-heading">
      <div class="sec-head">
        <span class="hash" aria-hidden="true">##</span>
        <h2 id="pub-heading">Publication</h2>
        <span class="rule" aria-hidden="true"></span>
      </div>
      <article class="pub">
        <p class="pub-title">Counterfactual Policy Evaluation for Learned Rankers in E-commerce</p>
        <p class="pub-meta">
          M. Kovač &amp; A. Lindqvist · <em>Proceedings of the 16th ACM Conference on Recommender Systems (RecSys '20)</em>, 71–80
        </p>
        <p class="pub-links">
          <a href="https://dl.acm.org/action/doSearch?AllField=Counterfactual+Policy+Evaluation+for+Learned+Rankers+in+E-commerce" rel="noopener">ACM DL</a>
          <span class="dot">·</span>
          <a href="https://scholar.google.com/scholar?q=%22Counterfactual+Policy+Evaluation+for+Learned+Rankers%22" rel="noopener">Scholar</a>
        </p>
      </article>
    </section>

    <section aria-labelledby="proj-heading">
      <div class="sec-head">
        <span class="hash" aria-hidden="true">##</span>
        <h2 id="proj-heading">Side Projects</h2>
        <span class="rule" aria-hidden="true"></span>
      </div>
      <ul class="projects">
        <li class="project">
          <p class="project-name">sparse-dtw</p>
          <p class="project-desc">Dynamic time warping for irregular sensor streams, written in Cython with a NumPy core.</p>
          <p class="project-meta"><a href="https://github.com/mira-kovac-ml/sparse-dtw" rel="noopener">github</a> · 1.8k stars</p>
        </li>
        <li class="project">
          <p class="project-name">tiny-eval</p>
          <p class="project-desc">A 2 kB dependency-free harness for reproducible offline model evaluation.</p>
          <p class="project-meta"><a href="https://github.com/mira-kovac-ml/tiny-eval" rel="noopener">github</a> · 2 production stacks</p>
        </li>
        <li class="project">
          <p class="project-name">Berlin Applied ML</p>
          <p class="project-desc">Monthly meetup for applied ML practitioners — talks, papers and hiring intros.</p>
          <p class="project-meta"><a href="https://berlin-applied-ml.example.com" rel="noopener">site</a> · 600 members · 40 talks</p>
        </li>
      </ul>
    </section>

  </main>

  <footer>
    <span>© 2026 Mira Kovač</span>
    <span>Berlin · 52.5200° N, 13.4050° E</span>
  </footer>

</div>
</body>
</html>

Same prompt, other models

10 more
Compare side by side

One email when a new model lands on the board or in the showcase. Unsubscribe anytime.