ML/AI engineer portfolio website, built by Mistral Large 4

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mira Kovač — Senior Machine Learning Engineer</title>
<style>
  :root {
    --green: #33ff66;
    --green-dim: #1a9944;
    --bg: #050805;
    --panel: #0a0f0a;
    --line: #14291a;
    --text: #c8f5d4;
    --muted: #6f9c7d;
    --space: 4rem;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  html { scroll-behavior: smooth; }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: "JetBrains Mono", "SF Mono", "Fira Code", "Cascadia Code", Menlo, Consolas, monospace;
    font-size: 15px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
  }

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

  .wrap {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 1.5rem;
  }

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

  header {
    padding: calc(var(--space) * 1.5) 0 var(--space);
    border-bottom: 1px solid var(--line);
  }

  .prompt-line {
    color: var(--green);
    font-size: 13px;
    letter-spacing: 0.08em;
    margin-bottom: 1.25rem;
  }

  .prompt-line .cursor {
    display: inline-block;
    width: 0.6em;
    height: 1em;
    background: var(--green);
    vertical-align: text-bottom;
    margin-left: 2px;
    animation: blink 1.1s steps(1) infinite;
  }

  @keyframes blink { 50% { opacity: 0; } }

  h1 {
    color: var(--green);
    font-size: clamp(1.9rem, 6vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
  }

  .role {
    color: var(--muted);
    font-size: 0.95rem;
    margin-top: 0.75rem;
  }

  .role .sep { color: var(--green-dim); padding: 0 0.4em; }

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

  section { padding: var(--space) 0; border-bottom: 1px solid var(--line); }

  section:last-of-type { border-bottom: none; }

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

  h2::before { content: "$ "; color: var(--green-dim); }

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

  .timeline { list-style: none; }

  .timeline li {
    position: relative;
    padding: 0 0 2.5rem 2.25rem;
    border-left: 1px solid var(--line);
    margin-left: 0.45rem;
  }

  .timeline li:last-child { padding-bottom: 0; }

  .timeline li::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 0.55em;
    width: 9px;
    height: 9px;
    background: var(--bg);
    border: 1px solid var(--green);
  }

  .timeline .year {
    color: var(--green);
    font-size: 0.78rem;
    letter-spacing: 0.15em;
    margin-bottom: 0.35rem;
  }

  .timeline h3 {
    color: var(--text);
    font-size: 1.02rem;
    font-weight: 700;
  }

  .timeline .company {
    color: var(--muted);
    font-size: 0.85rem;
    margin-bottom: 0.9rem;
  }

  .timeline ul { list-style: none; }

  .timeline ul li {
    border: none;
    margin: 0;
    padding: 0 0 0.55rem 1.1rem;
    position: relative;
    font-size: 0.9rem;
    color: var(--text);
  }

  .timeline ul li::before {
    content: ">";
    position: absolute;
    left: 0;
    color: var(--green-dim);
  }

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

  .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
  }

  .chip {
    border: 1px solid var(--green-dim);
    color: var(--green);
    padding: 0.35rem 0.85rem;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }

  .chip:hover { background: var(--green); color: var(--bg); }

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

  .item { margin-bottom: 1.75rem; }
  .item:last-child { margin-bottom: 0; }

  .item .name { color: var(--green); font-weight: 700; font-size: 0.95rem; }

  .item .desc { color: var(--muted); font-size: 0.88rem; margin-top: 0.2rem; }

  .item a {
    color: var(--green);
    text-decoration: none;
    border-bottom: 1px solid var(--green-dim);
  }

  .item a:hover { background: var(--green); color: var(--bg); border-bottom-color: var(--green); }

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

  .contact {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 2rem;
    font-size: 0.88rem;
  }

  .contact a {
    color: var(--green);
    text-decoration: none;
    border-bottom: 1px solid var(--green-dim);
  }

  .contact a:hover { background: var(--green); color: var(--bg); }

  .contact .label { color: var(--muted); }

  /* ---------- footer ---------- */

  footer {
    padding: 2.5rem 0 3rem;
    color: var(--muted);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
  }

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

  @media (max-width: 560px) {
    :root { --space: 2.75rem; }
    body { font-size: 14px; }
    .timeline li { padding-left: 1.75rem; }
    .contact { flex-direction: column; gap: 0.6rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    .prompt-line .cursor { animation: none; }
    html { scroll-behavior: auto; }
  }
</style>
</head>
<body>

<div class="wrap">

  <header>
    <p class="prompt-line">mira@berlin:~$ whoami<span class="cursor"></span></p>
    <h1>Mira Kovač</h1>
    <p class="role">Senior Machine Learning Engineer<span class="sep">·</span>Berlin, Germany<span class="sep">·</span>9 years in production ML</p>
  </header>

  <section id="experience">
    <h2>Experience</h2>
    <ol class="timeline">
      <li>
        <p class="year">2022 — Present</p>
        <h3>Senior Machine Learning Engineer</h3>
        <p class="company">N26 — Berlin</p>
        <ul>
          <li>Lead the real-time fraud detection platform scoring 4M+ transactions/day; cut false positives 38% by moving from gradient-boosted trees to a calibrated ensemble with online feature updates.</li>
          <li>Built the feature store on streaming infrastructure (Flink + Feast) that reduced model training-to-serving latency from hours to minutes for 12 product teams.</li>
          <li>Mentor a team of 5 ML engineers; introduced offline/online evaluation parity gates that caught two regressions before release last year.</li>
        </ul>
      </li>
      <li>
        <p class="year">2019 — 2022</p>
        <h3>Machine Learning Engineer</h3>
        <p class="company">Zalando — Berlin</p>
        <ul>
          <li>Designed the visual search pipeline (CLIP-style embeddings + approximate nearest neighbor) that now powers image-based product discovery across 50M SKUs.</li>
          <li>Owned the demand forecasting service for 12 markets; reduced stock-outs 22% with a hierarchical probabilistic model retrained nightly.</li>
          <li>Shipped an A/B testing framework with CUPED variance reduction, adopted by 30+ teams and still the default experimentation tool.</li>
        </ul>
      </li>
      <li>
        <p class="year">2017 — 2019</p>
        <h3>Machine Learning Engineer</h3>
        <p class="company">SoundCloud — Berlin</p>
        <ul>
          <li>Built the first version of the audio fingerprinting and recommendation ranking models, lifting 7-day retention for new listeners by 9%.</li>
          <li>Migrated batch training jobs to Kubernetes, cutting training costs 45% and enabling daily model refreshes instead of weekly.</li>
        </ul>
      </li>
    </ol>
  </section>

  <section id="skills">
    <h2>Skills</h2>
    <div class="chips">
      <span class="chip">PyTorch</span>
      <span class="chip">Python</span>
      <span class="chip">Kubernetes</span>
      <span class="chip">Apache Flink</span>
      <span class="chip">Feature Stores</span>
      <span class="chip">Computer Vision</span>
      <span class="chip">NLP / LLMs</span>
      <span class="chip">MLOps</span>
    </div>
  </section>

  <section id="projects">
    <h2>Side Projects</h2>
    <div class="item">
      <p class="name">regr — tiny regression testing for ML models</p>
      <p class="desc">A pytest-style CLI that snapshots model outputs on golden datasets and diffs them across commits. 1.2k GitHub stars.</p>
    </div>
    <div class="item">
      <p class="name">berlin-cycling — predicting bike lane congestion</p>
      <p class="desc">Open-data project forecasting hourly cyclist volumes from weather and traffic sensors; live map at berlin-cycling.dev.</p>
    </div>
    <div class="item">
      <p class="name">flashcards-ml — spaced repetition for ML concepts</p>
      <p class="desc">A spaced-repetition deck generator that turns any arXiv paper into 20–30 self-test cards using an LLM pipeline.</p>
    </div>
  </section>

  <section id="publication">
    <h2>Publication</h2>
    <div class="item">
      <p class="name">"Calibrated Ensembles for Real-Time Fraud Scoring"</p>
      <p class="desc">Kovač, M., et al. — KDD 2024, Applied Data Science track. <a href="#">Paper</a> · <a href="#">Slides</a></p>
    </div>
  </section>

  <section id="contact">
    <h2>Contact</h2>
    <div class="contact">
      <a href="mailto:mira.kovac@example.com">mira.kovac@example.com</a>
      <a href="#">github.com/mirakovac</a>
      <a href="#">linkedin.com/in/mirakovac</a>
      <span class="label">Berlin · CET · open to interesting problems</span>
    </div>
  </section>

  <footer>
    <p>mira@berlin:~$ exit — thanks for scrolling</p>
  </footer>

</div>

</body>
</html>