ML/AI engineer portfolio website, built by GPT-6 Luna
Hostedvia Codex CLIOpenRouter
Show the code the model wroteHide the code
<!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 based in Berlin."
/>
<meta name="theme-color" content="#090d0a" />
<title>Mira Kovač — Senior Machine Learning Engineer</title>
<style>
:root {
color-scheme: dark;
--bg: #090d0a;
--surface: #0c120e;
--text: #e6ebe5;
--muted: #97a198;
--faint: #859087;
--line: #263129;
--green: #a4e17b;
--page-width: 1088px;
--mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 32px;
}
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--mono);
font-size: 13px;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
}
a {
color: inherit;
text-decoration: none;
}
a:focus-visible {
outline: 1px solid var(--green);
outline-offset: 5px;
}
.site-header {
border-bottom: 1px solid var(--line);
}
.header-inner,
.page-shell,
.footer-inner {
width: min(var(--page-width), calc(100% - 64px));
margin-inline: auto;
}
.header-inner {
min-height: 72px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.wordmark {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 15px;
font-weight: 600;
letter-spacing: -0.06em;
}
.wordmark-mark,
.site-nav a span,
.text-link span,
.project-name span {
color: var(--green);
}
.wordmark-mark {
font-size: 20px;
}
.site-nav {
display: flex;
align-items: center;
gap: 32px;
color: var(--muted);
font-size: 11px;
}
.site-nav a,
.text-link,
.contact-links a,
.footer-inner a {
transition: color 140ms ease;
}
.site-nav a:hover,
.text-link:hover,
.contact-links a:hover,
.footer-inner a:hover {
color: var(--green);
}
.page-shell {
padding-bottom: 104px;
}
.hero {
min-height: 404px;
padding-block: 72px 64px;
display: grid;
grid-template-columns: minmax(0, 1fr) 280px;
align-items: center;
gap: 80px;
border-bottom: 1px solid var(--line);
}
.eyebrow,
.index-label,
.section-number,
.section-meta,
.timeline-year,
.role-type,
.index-corner,
.footer-inner {
font-size: 10px;
letter-spacing: 0.08em;
}
.eyebrow {
margin: 0 0 24px;
color: var(--muted);
}
.status-dot {
display: inline-block;
width: 6px;
height: 6px;
margin: 0 10px 1px 0;
border-radius: 50%;
background: var(--green);
}
.eyebrow-divider {
margin-inline: 8px;
color: var(--faint);
}
h1,
h2,
h3,
p {
margin-top: 0;
}
h1 {
margin-bottom: 12px;
font-size: clamp(42px, 6vw, 68px);
font-weight: 500;
line-height: 1.08;
letter-spacing: -0.085em;
}
.hero-role {
margin-bottom: 20px;
color: var(--green);
font-size: 13px;
}
.hero-at {
padding-inline: 3px;
color: var(--faint);
}
.hero-summary {
max-width: 600px;
margin-bottom: 20px;
color: var(--muted);
font-size: 13px;
line-height: 1.85;
}
.text-link {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--text);
font-size: 11px;
}
.profile-index {
position: relative;
min-height: 204px;
padding: 20px 20px 36px;
border: 1px solid var(--line);
background: var(--surface);
}
.index-label {
margin-bottom: 20px;
color: var(--faint);
}
.profile-index dl {
display: grid;
gap: 16px;
margin: 0;
}
.profile-index dl div {
display: grid;
gap: 2px;
}
.profile-index dt {
color: var(--faint);
font-size: 9px;
letter-spacing: 0.08em;
}
.profile-index dd {
margin: 0;
color: var(--text);
font-size: 11px;
}
.index-corner {
position: absolute;
right: 20px;
bottom: 16px;
color: var(--green);
font-size: 9px;
}
.resume-section {
padding-top: 72px;
}
.section-heading {
display: grid;
grid-template-columns: 32px auto minmax(40px, 1fr) auto;
align-items: center;
gap: 16px;
margin-bottom: 32px;
}
.section-number {
color: var(--green);
}
.section-heading h2,
.contact-intro h2 {
margin: 0;
font-size: 17px;
font-weight: 500;
letter-spacing: -0.04em;
}
.section-rule {
height: 1px;
background: var(--line);
}
.section-meta {
color: var(--faint);
font-size: 9px;
}
.timeline {
position: relative;
display: grid;
gap: 0;
margin: 0;
padding: 0;
list-style: none;
}
.timeline::before {
position: absolute;
top: 8px;
bottom: 24px;
left: 141px;
width: 1px;
background: var(--line);
content: "";
}
.timeline-entry {
position: relative;
display: grid;
grid-template-columns: 112px minmax(0, 1fr);
gap: 60px;
padding-bottom: 36px;
}
.timeline-entry:last-child {
padding-bottom: 0;
}
.timeline-entry::before {
position: absolute;
top: 6px;
left: 137px;
width: 9px;
height: 9px;
border: 1px solid var(--green);
border-radius: 50%;
background: var(--bg);
content: "";
}
.timeline-year {
padding-top: 1px;
color: var(--green);
white-space: nowrap;
}
.timeline-year span {
color: var(--faint);
}
.timeline-content {
min-width: 0;
padding-bottom: 32px;
border-bottom: 1px solid var(--line);
}
.timeline-entry:last-child .timeline-content {
padding-bottom: 0;
border-bottom: 0;
}
.role-heading {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 24px;
margin-bottom: 16px;
}
.role-heading h3 {
margin: 0 0 4px;
font-size: 14px;
font-weight: 500;
letter-spacing: -0.035em;
}
.company-line {
margin: 0;
color: var(--muted);
font-size: 11px;
}
.company-line span,
.publication-meta span {
padding-inline: 4px;
color: var(--faint);
}
.role-type {
flex: 0 0 auto;
padding: 4px 7px;
border: 1px solid var(--line);
color: var(--faint);
font-size: 8px;
}
.work-points {
display: grid;
gap: 8px;
margin: 0;
padding: 0;
color: var(--muted);
font-size: 11px;
line-height: 1.8;
list-style: none;
}
.work-points li {
position: relative;
padding-left: 18px;
}
.work-points li::before {
position: absolute;
top: 0;
left: 0;
color: var(--green);
content: "—";
}
.skill-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.skill-list li {
padding: 8px 12px;
border: 1px solid var(--line);
color: var(--muted);
font-size: 10px;
line-height: 1.5;
}
.project-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin: 0;
padding: 0;
list-style: none;
}
.project-list li {
min-height: 132px;
border: 1px solid var(--line);
background: var(--surface);
transition: border-color 140ms ease, transform 140ms ease;
}
.project-list li:hover {
transform: translateY(-2px);
border-color: var(--green);
}
.project-list a {
display: flex;
height: 100%;
flex-direction: column;
gap: 12px;
padding: 16px;
}
.project-name {
color: var(--text);
font-size: 11px;
}
.project-description {
color: var(--muted);
font-size: 10px;
line-height: 1.8;
}
.publication-entry {
padding: 20px 24px;
border: 1px solid var(--line);
background: var(--surface);
}
.publication-title {
margin-bottom: 8px;
color: var(--text);
font-size: 12px;
}
.publication-meta {
margin: 0;
color: var(--muted);
font-size: 10px;
}
.contact-section {
margin-top: 72px;
padding: 32px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 32px;
border: 1px solid var(--line);
background: var(--surface);
}
.contact-intro {
display: grid;
grid-template-columns: 32px auto;
align-items: center;
gap: 8px 16px;
}
.contact-intro p {
grid-column: 2;
margin: 0;
color: var(--muted);
font-size: 10px;
}
.contact-links {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 12px 24px;
color: var(--muted);
font-size: 10px;
}
.contact-links a span {
color: var(--green);
}
.site-footer {
border-top: 1px solid var(--line);
}
.footer-inner {
min-height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
color: var(--faint);
font-size: 9px;
}
.footer-inner a {
color: var(--muted);
}
@media (max-width: 760px) {
.hero {
grid-template-columns: minmax(0, 1fr) 240px;
gap: 32px;
}
.timeline-entry {
grid-template-columns: 100px minmax(0, 1fr);
gap: 44px;
}
.timeline::before {
left: 125px;
}
.timeline-entry::before {
left: 121px;
}
.project-list {
gap: 8px;
}
.project-list a {
padding: 12px;
}
.contact-section {
grid-template-columns: 1fr;
}
.contact-links {
justify-content: flex-start;
}
}
@media (max-width: 560px) {
body {
font-size: 12px;
}
.header-inner,
.page-shell,
.footer-inner {
width: min(var(--page-width), calc(100% - 40px));
}
.header-inner {
min-height: 64px;
align-items: flex-start;
flex-direction: column;
justify-content: center;
gap: 8px;
padding-block: 12px;
}
.site-nav {
width: 100%;
justify-content: space-between;
gap: 12px;
font-size: 10px;
}
.hero {
min-height: auto;
grid-template-columns: 1fr;
gap: 32px;
padding-block: 52px 40px;
}
.eyebrow {
margin-bottom: 20px;
font-size: 9px;
}
h1 {
font-size: clamp(40px, 12vw, 56px);
}
.hero-role {
font-size: 11px;
}
.hero-summary {
max-width: 440px;
font-size: 11px;
}
.profile-index {
min-height: auto;
padding: 16px 16px 34px;
}
.profile-index dl {
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.profile-index dl div:last-child {
grid-column: 1 / -1;
}
.resume-section {
padding-top: 56px;
}
.section-heading {
grid-template-columns: 24px auto minmax(16px, 1fr);
gap: 10px;
margin-bottom: 24px;
}
.section-heading h2 {
font-size: 15px;
}
.section-meta {
display: none;
}
.timeline::before {
top: 10px;
bottom: 22px;
left: 4px;
}
.timeline-entry {
grid-template-columns: 1fr;
gap: 8px;
padding-left: 28px;
padding-bottom: 28px;
}
.timeline-entry::before {
top: 4px;
left: 0;
}
.timeline-year {
font-size: 9px;
}
.timeline-content {
padding-bottom: 24px;
}
.role-heading {
gap: 12px;
}
.role-heading h3 {
font-size: 12px;
}
.role-type {
padding: 3px 5px;
font-size: 7px;
}
.work-points {
font-size: 10px;
}
.skill-list {
gap: 8px;
}
.skill-list li {
padding: 7px 9px;
font-size: 9px;
}
.project-list {
grid-template-columns: 1fr;
gap: 8px;
}
.project-list li {
min-height: auto;
}
.project-list a {
gap: 6px;
padding: 14px;
}
.publication-entry {
padding: 16px;
}
.publication-title {
font-size: 11px;
line-height: 1.8;
}
.publication-meta {
font-size: 9px;
}
.contact-section {
margin-top: 56px;
padding: 20px 16px;
gap: 20px;
}
.contact-links {
display: grid;
justify-content: stretch;
gap: 12px;
font-size: 9px;
}
.footer-inner {
min-height: 56px;
}
}
</style>
</head>
<body>
<header class="site-header">
<div class="header-inner">
<a class="wordmark" href="#top" aria-label="Mira Kovač, back to top">
<span class="wordmark-mark">/</span> mk
</a>
<nav class="site-nav" aria-label="Main navigation">
<a href="#experience">Experience</a>
<a href="#skills">Skills</a>
<a href="#projects">Projects</a>
<a href="#contact">Contact <span aria-hidden="true">↗</span></a>
</nav>
</div>
</header>
<main id="top" class="page-shell">
<section class="hero" aria-labelledby="name">
<div class="hero-copy">
<p class="eyebrow"><span class="status-dot" aria-hidden="true"></span> CURRICULUM VITAE <span class="eyebrow-divider">/</span> 2026</p>
<h1 id="name">Mira Kovač</h1>
<p class="hero-role">Senior Machine Learning Engineer <span class="hero-at">·</span> Berlin</p>
<p class="hero-summary">
I build reliable retrieval and ranking systems for products used at scale —
with a focus on measurable quality, fresh signals, and calm operations.
</p>
<a class="text-link hero-link" href="mailto:mira.kovac@example.com">
Get in touch <span aria-hidden="true">↗</span>
</a>
</div>
<aside class="profile-index" aria-label="Profile summary">
<p class="index-label">PROFILE / 01</p>
<dl>
<div>
<dt>BASE</dt>
<dd>Berlin, DE</dd>
</div>
<div>
<dt>FOCUS</dt>
<dd>Search · Ranking · Recs</dd>
</div>
<div>
<dt>WORKING STYLE</dt>
<dd>Research to production</dd>
</div>
</dl>
<span class="index-corner" aria-hidden="true">MK—26</span>
</aside>
</section>
<section class="resume-section experience-section" id="experience" aria-labelledby="experience-title">
<div class="section-heading">
<span class="section-number">01</span>
<h2 id="experience-title">Experience</h2>
<span class="section-rule" aria-hidden="true"></span>
<span class="section-meta">2017 — PRESENT</span>
</div>
<ol class="timeline">
<li class="timeline-entry">
<div class="timeline-year">2023 <span>—</span> NOW</div>
<div class="timeline-content">
<div class="role-heading">
<div>
<h3>Senior Machine Learning Engineer</h3>
<p class="company-line">SoundCloud <span>·</span> Berlin</p>
</div>
<span class="role-type">FULL-TIME</span>
</div>
<ul class="work-points">
<li>Led a two-tower retrieval refresh for track discovery; improved qualified plays per session by 5.4% in a controlled experiment.</li>
<li>Moved freshness features to an hourly pipeline and added segment-level drift alerts, cutting stale recommendations for new releases.</li>
</ul>
</div>
</li>
<li class="timeline-entry">
<div class="timeline-year">2020 <span>—</span> 2023</div>
<div class="timeline-content">
<div class="role-heading">
<div>
<h3>Senior Machine Learning Engineer</h3>
<p class="company-line">Delivery Hero <span>·</span> Berlin</p>
</div>
<span class="role-type">FULL-TIME</span>
</div>
<ul class="work-points">
<li>Built restaurant and dish retrieval models using query, menu, and order signals; raised NDCG@10 by 8% across German-language searches.</li>
<li>Introduced time-based offline replay and city-level holdouts, catching seasonal ranking regressions before rollout.</li>
</ul>
</div>
</li>
<li class="timeline-entry">
<div class="timeline-year">2017 <span>—</span> 2020</div>
<div class="timeline-content">
<div class="role-heading">
<div>
<h3>Machine Learning Engineer</h3>
<p class="company-line">Zalando <span>·</span> Berlin</p>
</div>
<span class="role-type">FULL-TIME</span>
</div>
<ul class="work-points">
<li>Trained learning-to-rank models for fashion search from click and purchase events, with guardrails for position bias and sparse queries.</li>
<li>Added image embeddings to candidate retrieval, improving cold-start coverage for new catalog items without increasing p95 latency.</li>
</ul>
</div>
</li>
</ol>
</section>
<section class="resume-section skills-section" id="skills" aria-labelledby="skills-title">
<div class="section-heading">
<span class="section-number">02</span>
<h2 id="skills-title">Skills</h2>
<span class="section-rule" aria-hidden="true"></span>
<span class="section-meta">CORE TOOLKIT</span>
</div>
<ul class="skill-list" aria-label="Technical skills">
<li>Python</li>
<li>PyTorch</li>
<li>Ranking & retrieval</li>
<li>Recommender systems</li>
<li>Feature engineering</li>
<li>Offline evaluation</li>
<li>SQL</li>
<li>ML observability</li>
</ul>
</section>
<section class="resume-section projects-section" id="projects" aria-labelledby="projects-title">
<div class="section-heading">
<span class="section-number">03</span>
<h2 id="projects-title">Selected projects</h2>
<span class="section-rule" aria-hidden="true"></span>
<span class="section-meta">SIDE WORK</span>
</div>
<ul class="project-list">
<li>
<a href="https://github.com/mira-kovac/sparse-scout" aria-label="sparse-scout on GitHub">
<span class="project-name">sparse-scout <span aria-hidden="true">↗</span></span>
<span class="project-description">A small benchmark for multilingual retrieval on sparse, misspelled queries.</span>
</a>
</li>
<li>
<a href="https://github.com/mira-kovac/embedding-diff" aria-label="embedding-diff on GitHub">
<span class="project-name">embedding-diff <span aria-hidden="true">↗</span></span>
<span class="project-description">A CLI that compares embedding distributions between model releases.</span>
</a>
</li>
<li>
<a href="https://github.com/mira-kovac/session-mix" aria-label="session-mix on GitHub">
<span class="project-name">session-mix <span aria-hidden="true">↗</span></span>
<span class="project-description">An open-data playlist reranker exploring short-session intent.</span>
</a>
</li>
</ul>
</section>
<section class="resume-section publication-section" aria-labelledby="publication-title">
<div class="section-heading">
<span class="section-number">04</span>
<h2 id="publication-title">Publication</h2>
<span class="section-rule" aria-hidden="true"></span>
<span class="section-meta">RECSYS ’22</span>
</div>
<article class="publication-entry">
<p class="publication-title">Calibrating retrieval confidence for low-resource catalog search</p>
<p class="publication-meta">M. Kovač, L. Neumann <span>·</span> RecSys ’22 Industry Track <span>·</span> 2022</p>
</article>
</section>
<section class="contact-section" id="contact" aria-labelledby="contact-title">
<div class="contact-intro">
<span class="section-number">05</span>
<h2 id="contact-title">Contact</h2>
<p>For thoughtful problems in search, ranking, and applied ML.</p>
</div>
<nav class="contact-links" aria-label="Contact links">
<a href="mailto:mira.kovac@example.com">mira.kovac@example.com <span aria-hidden="true">↗</span></a>
<a href="https://www.linkedin.com/in/mira-kovac-ml">LinkedIn <span aria-hidden="true">↗</span></a>
<a href="https://github.com/mira-kovac">GitHub <span aria-hidden="true">↗</span></a>
</nav>
</section>
</main>
<footer class="site-footer">
<div class="footer-inner">
<span>© 2026 MIRA KOVAČ</span>
<a href="#top">BACK TO TOP ↑</a>
</div>
</footer>
</body>
</html>Same prompt, other models
One email when a new model lands on the board or in the showcase. Unsubscribe anytime.