ML/AI engineer portfolio website, built by Flint

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mira Kovač — ML Engineer</title>
  <style>
    :root {
      --bg: #020604;
      --panel: #050a07;
      --green: #00ff41;
      --green-soft: #baffd9;
      --green-dim: rgba(0, 255, 65, 0.55);
      --green-faint: rgba(0, 255, 65, 0.12);
      --line: rgba(0, 255, 65, 0.16);
      --line-strong: rgba(0, 255, 65, 0.45);
      --text: #c2f8d8;
      --muted: #5f8f70;
      --font: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
      --max: 44rem;
      --pad: clamp(1.25rem, 5vw, 3rem);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font-family: var(--font);
      font-size: 0.875rem;
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
    }

    .page {
      max-width: var(--max);
      margin: 0 auto;
      padding: var(--pad);
    }

    .hero {
      padding: clamp(3rem, 10vw, 6rem) 0 clamp(2.5rem, 6vw, 4rem);
      border-bottom: 1px solid var(--line);
    }

    .eyebrow {
      margin: 0 0 1rem;
      color: var(--green);
      font-size: 0.75rem;
      letter-spacing: 0.25em;
    }

    h1 {
      margin: 0;
      font-size: clamp(2rem, 7vw, 3rem);
      line-height: 1.1;
      color: var(--green);
      letter-spacing: 0.02em;
    }

    .role {
      margin: 0.75rem 0 0;
      color: var(--green-soft);
      font-size: 0.95rem;
    }

    .summary {
      max-width: 38rem;
      margin: 1.5rem 0 0;
    }

    .contact-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem 1.25rem;
      margin-top: 2rem;
      padding-top: 1.5rem;
      border-top: 1px solid var(--line);
      font-size: 0.8rem;
    }

    .contact-row a {
      color: var(--green);
      text-decoration: none;
      border-bottom: 1px dotted var(--line-strong);
    }

    .section {
      padding-top: clamp(3rem, 8vw, 4.5rem);
    }

    .section h2 {
      margin: 0 0 2rem;
      color: var(--green);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.25em;
    }

    .timeline {
      position: relative;
      padding-left: 2rem;
      border-left: 1px solid var(--line-strong);
    }

    .entry {
      position: relative;
      padding-bottom: 2.5rem;
    }

    .entry:last-child {
      padding-bottom: 0;
    }

    .entry::before {
      content: "";
      position: absolute;
      left: -2rem;
      top: 0.35rem;
      width: 0.5rem;
      height: 0.5rem;
      background: var(--green);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 0 5px var(--green-faint);
    }

    .year {
      margin: 0 0 0.25rem;
      color: var(--green);
      font-size: 0.75rem;
      letter-spacing: 0.2em;
    }

    .entry h3 {
      margin: 0;
      font-size: 1.05rem;
      color: var(--green-soft);
    }

    .entry-head {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 0.25rem 1rem;
    }

    .meta {
      margin: 0;
      color: var(--muted);
      font-size: 0.75rem;
    }

    .title {
      margin: 0.25rem 0 0.75rem;
      color: var(--muted);
      font-size: 0.8rem;
    }

    .entry ul {
      margin: 0;
      padding-left: 1.25rem;
    }

    .entry li {
      margin-bottom: 0.4rem;
    }

    .chips {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .chips li {
      padding: 0.35rem 0.7rem;
      border: 1px solid var(--line-strong);
      color: var(--green-soft);
      font-size: 0.75rem;
      background: var(--green-faint);
    }

    .projects {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .projects li {
      padding: 1rem 0;
      border-bottom: 1px solid var(--line);
    }

    .projects li:last-child {
      border-bottom: 0;
    }

    .projects .name {
      margin: 0;
      color: var(--green);
      font-weight: 700;
    }

    .projects .desc {
      margin: 0.25rem 0 0;
    }

    .publication {
      margin: 0;
      padding: 1.25rem;
      border: 1px solid var(--line);
      background: var(--panel);
    }

    .publication h3 {
      margin: 0 0 0.5rem;
      color: var(--green-soft);
      font-size: 0.9rem;
    }

    .publication p {
      margin: 0;
      font-size: 0.8rem;
    }

    @media (max-width: 480px) {
      body {
        font-size: 0.825rem;
      }
      .timeline {
        padding-left: 1.5rem;
      }
      .entry::before {
        left: -1.5rem;
      }
    }
  </style>
</head>
<body>
  <main class="page">
    <section class="hero">
      <p class="eyebrow">// mira kovač</p>
      <h1>Mira Kovač</h1>
      <p class="role">Senior Machine Learning Engineer — Berlin</p>
      <p class="summary">ML engineer focused on retrieval, ranking, and evaluation systems for large models and high-stakes predictions. Berlin-based, EU time zones.</p>
      <div class="contact-row">
        <span>Email <a href="mailto:hello@mirakovac.dev">hello@mirakovac.dev</a></span>
        <span>GitHub <a href="#">github.com/mirakovac</a></span>
        <span>LinkedIn <a href="#">linkedin.com/in/mirakovac</a></span>
        <span>Location Berlin, DE</span>
      </div>
    </section>

    <section class="section" id="experience">
      <h2>// experience</h2>
      <div class="timeline">
        <article class="entry">
          <p class="year">2017</p>
          <div class="entry-body">
            <div class="entry-head">
              <h3>DeepMind</h3>
              <p class="meta">London / Remote</p>
            </div>
            <p class="title">Machine Learning Engineer — 2017 → 2019</p>
            <ul>
              <li>Built neural policy-search pipeline for partially observable control tasks, reducing sample complexity versus prior baselines.</li>
              <li>Designed offline reinforcement-learning curation workflow with reward-noise filters, stabilizing long-horizon training.</li>
            </ul>
          </div>
        </article>

        <article class="entry">
          <p class="year">2019</p>
          <div class="entry-body">
            <div class="entry-head">
              <h3>Spotify</h3>
              <p class="meta">Berlin</p>
            </div>
            <p class="title">Machine Learning Engineer — 2019 → 2022</p>
            <ul>
              <li>Led two-stage podcast retrieval and re-ranking model, improving candidate diversity and click-through.</li>
              <li>Shipped offline-online evaluation split for ranking candidates, preventing rollout of metric regressions.</li>
            </ul>
          </div>
        </article>

        <article class="entry">
          <p class="year">2022</p>
          <div class="entry-body">
            <div class="entry-head">
              <h3>Bloomberg</h3>
              <p class="meta">Berlin</p>
            </div>
            <p class="title">Senior Machine Learning Engineer — 2022 → Present</p>
            <ul>
              <li>Architected tabular foundation-model fine-tuning pipeline for entity risk signals, improving forecast calibration.</li>
              <li>Deployed fraud-signal classifier with review queue, cutting false positives while preserving auditability.</li>
              <li>Mentored four engineers and ran ML lifecycle reproducibility guild.</li>
            </ul>
          </div>
        </article>
      </div>
    </section>

    <section class="section" id="skills">
      <h2>// skills</h2>
      <ul class="chips">
        <li>Python</li>
        <li>PyTorch</li>
        <li>JAX</li>
        <li>scikit-learn</li>
        <li>SQL</li>
        <li>Airflow</li>
        <li>Docker</li>
        <li>LLM Evals</li>
      </ul>
    </section>

    <section class="section" id="projects">
      <h2>// side projects</h2>
      <ul class="projects">
        <li>
          <p class="name">KernelSynth</p>
          <p class="desc">Open-source synthetic kernel regression dataset generator.</p>
        </li>
        <li>
          <p class="name">SignalStack</p>
          <p class="desc">Real-time anomaly dashboard for streaming time series.</p>
        </li>
        <li>
          <p class="name">PromptLedger</p>
          <p class="desc">Evaluation harness for LLM agents and tool use.</p>
        </li>
      </ul>
    </section>

    <section class="section" id="publication">
      <h2>// publication</h2>
      <article class="publication">
        <h3>Kovač, M., Ruiz, A., &amp; Okafor, T. — “Sparse Reward Shaping via Curriculum Generation”</h3>
        <p>NeurIPS 2023 Workshop on Reinforcement Learning. Spotlight.</p>
      </article>
    </section>
  </main>
</body>
</html>