ML/AI engineer portfolio website, built by Underdog Saluki 27B

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mira Kovač — Senior 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:wght@400;500;600&display=swap" rel="stylesheet">
<style>
  :root {
    --bg: #0a0a0a;
    --fg: #d4d4d4;
    --bright: #f2f2f2;
    --muted: #8a8a8a;
    --line: #2a2a2a;
    --green: #33ff55;
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 40px;
    --space-5: 64px;
    --max: 720px;
  }

  html { color-scheme: dark; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }
  ::selection { background: rgba(51, 255, 85, 0.25); color: var(--bright); }

  .container {
    max-width: var(--max);
    margin: 0 auto;
    padding: var(--space-5) var(--space-3);
  }

  a {
    color: var(--green);
    text-decoration: none;
  }
  a:hover { text-decoration: underline; }
  a:focus-visible { outline: 1px solid var(--green); outline-offset: 3px; }

  /* header */
  .prompt {
    color: var(--muted);
    font-size: 13px;
    margin: 0 0 var(--space-2);
  }
  h1 {
    color: var(--bright);
    font-weight: 600;
    font-size: 34px;
    letter-spacing: -0.5px;
    margin: 0 0 var(--space-1);
  }
  .subtitle {
    color: var(--muted);
    font-size: 15px;
    margin: 0;
  }
  .cursor {
    color: var(--green);
    animation: blink 1s step-end infinite;
  }
  @keyframes blink { 50% { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) {
    .cursor { animation: none; }
  }

  /* sections */
  section { margin-top: var(--space-5); }
  h2 {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--bright);
    margin: 0 0 var(--space-3);
  }
  h2::before {
    content: "// ";
    color: var(--muted);
  }

  /* experience timeline */
  .timeline {
    list-style: none;
    margin: 0;
    padding: 0 0 0 var(--space-3);
    border-left: 1px solid var(--line);
    margin-left: var(--space-1);
  }
  .timeline > li {
    position: relative;
    margin-bottom: var(--space-4);
  }
  .timeline > li:last-child { margin-bottom: 0; }
  .timeline > li::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--space-3) - 5px);
    top: 7px;
    width: 9px;
    height: 9px;
    background: var(--green);
  }
  .year {
    color: var(--green);
    font-size: 13px;
    letter-spacing: 0.08em;
    margin: 0 0 var(--space-1);
  }
  h3 {
    color: var(--bright);
    font-weight: 600;
    font-size: 17px;
    margin: 0;
  }
  .role {
    color: var(--muted);
    font-size: 14px;
    margin: 0 0 var(--space-2);
  }
  .bullets {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .bullets li {
    position: relative;
    padding-left: var(--space-2);
    margin-top: var(--space-1);
  }
  .bullets li::before {
    content: ">";
    position: absolute;
    left: 0;
    color: var(--muted);
  }

  /* skills */
  .chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
  }
  .chips li {
    border: 1px solid var(--green);
    padding: 6px 12px;
    font-size: 14px;
    color: var(--fg);
  }

  /* projects */
  .projects {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .projects li {
    margin-top: var(--space-2);
  }
  .projects li:first-child { margin-top: 0; }
  .projects .name {
    color: var(--bright);
    font-weight: 600;
  }
  .projects .desc {
    color: var(--muted);
  }

  /* publication */
  .pub { margin: 0; }
  .pub .authors { color: var(--bright); font-weight: 600; }
  .pub .title { color: var(--fg); }
  .pub .venue { color: var(--muted); font-size: 14px; }

  /* contact */
  .contact { margin: 0; font-size: 14px; }
  .contact .sep { color: var(--muted); }

  footer {
    margin-top: var(--space-5);
    color: var(--muted);
    font-size: 13px;
  }

  @media (max-width: 600px) {
    .container { padding: var(--space-4) var(--space-2); }
    body { font-size: 14px; }
    h1 { font-size: 28px; }
    section { margin-top: var(--space-4); }
    footer { margin-top: var(--space-4); }
  }
</style>
</head>
<body>
<div class="container">

  <header>
    <p class="prompt">mira@berlin:~$ whoami</p>
    <h1>Mira Kovač<span class="cursor" aria-hidden="true">█</span></h1>
    <p class="subtitle">Senior Machine Learning Engineer · Berlin</p>
  </header>

  <section aria-labelledby="exp-h">
    <h2 id="exp-h">Experience</h2>
    <ol class="timeline">
      <li>
        <p class="year">2023 — PRESENT</p>
        <h3>Helsing</h3>
        <p class="role">Senior Machine Learning Engineer · Berlin</p>
        <ul class="bullets">
          <li>Rebuilt the credit-risk scoring model from a single logistic regression to a gradient-boosted ensemble, cutting annualized loss by 1.4 pts while holding calibration within 1%.</li>
          <li>Shipped a near-real-time feature store (Kafka + Redis) feeding 40+ features into the risk pipeline, reducing decision latency from 400 ms to 60 ms.</li>
          <li>Owns the end-to-end MLOps pipeline — training, evaluation, canary deployment — for the six models in production.</li>
        </ul>
      </li>
      <li>
        <p class="year">2020 — 2023</p>
        <h3>Zalando</h3>
        <p class="role">Machine Learning Engineer · Berlin</p>
        <ul class="bullets">
          <li>Built a two-tower retrieval + fine-ranking stack for on-site search, improving click-through rate by 6% over the previous linear baseline.</li>
          <li>Deployed a near-real-time CTR prediction pipeline handling 2M requests/day with p95 latency under 50 ms.</li>
          <li>Cut inference cost by 30% via INT8 quantization and ONNX export of the ranking model.</li>
        </ul>
      </li>
      <li>
        <p class="year">2017 — 2020</p>
        <h3>Deutsche Telekom</h3>
        <p class="role">Data Scientist · Munich</p>
        <ul class="bullets">
          <li>Developed churn-prediction models for mobile subscribers, reducing churn by 3% among the top decile of the risk score.</li>
          <li>Built a classification pipeline routing 1.2M support tickets/month into 40 intent categories, with 92% of tickets reaching the right team.</li>
          <li>Wrote the team's A/B testing playbook and ran 30+ experiments on pricing and retention.</li>
        </ul>
      </li>
    </ol>
  </section>

  <section aria-labelledby="skills-h">
    <h2 id="skills-h">Skills</h2>
    <ul class="chips">
      <li>Python</li>
      <li>PyTorch</li>
      <li>TensorFlow</li>
      <li>SQL</li>
      <li>Kafka</li>
      <li>Kubernetes</li>
      <li>MLflow</li>
    </ul>
  </section>

  <section aria-labelledby="projects-h">
    <h2 id="projects-h">Side Projects</h2>
    <ul class="projects">
      <li><span class="name">gridwalk</span> <span class="desc">— a Rust RL agent for 2D-grid pathfinding, built to compare PPO against hand-rolled value iteration.</span></li>
      <li><span class="name">papertrail</span> <span class="desc">— a self-hosted arXiv + BibTeX tracker with a terminal UI: one key to search, one to cite.</span></li>
      <li><span class="name">noise-floor</span> <span class="desc">— a time-series anomaly detector for home IoT sensors, trained on 18 months of readings.</span></li>
    </ul>
  </section>

  <section aria-labelledby="pub-h">
    <h2 id="pub-h">Publication</h2>
    <p class="pub">
      <span class="authors">Kovač, M. &amp; Richter, S.</span>
      <span class="title">"When Trees Beat Networks: A Systematic Comparison of Gradient-Boosted and Neural Models for Tabular Credit-Risk Data."</span>
      <span class="venue">Journal of Machine Learning Research, 25(12), 2024.</span>
    </p>
  </section>

  <section aria-labelledby="contact-h">
    <h2 id="contact-h">Contact</h2>
    <p class="contact">
      <a href="mailto:mira.kovac@example.com">mira.kovac@example.com</a>
      <span class="sep"> · </span>
      <a href="https://github.com/mirakovac">github.com/mirakovac</a>
      <span class="sep"> · </span>
      <a href="https://linkedin.com/in/mirakovac">linkedin.com/in/mirakovac</a>
    </p>
  </section>

  <footer>exit 0</footer>

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