ML/AI engineer portfolio website, built by Spark X2.6 4B
Q8via DaBenchllama.cpp
113tok/s
First token included
33.2Ktokens
4m 54s
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.0" />
<title>Mira Kovač — Senior Machine Learning Engineer · Berlin</title>
<style>
:root {
--bg: #0a0e12;
--text: #d7dee6;
--muted: #7e8b96;
--border: #22303b;
--border-soft: #19222b;
--green: #3ddc97;
--font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
background: var(--bg);
color: var(--text);
font-family: var(--font-mono);
font-size: 16px;
line-height: 1.6;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
width: 100%;
max-width: 1040px;
margin: 0 auto;
padding: 0 24px;
}
/* Terminal status bar */
.topbar {
position: sticky;
top: 0;
z-index: 20;
background: var(--bg);
border-bottom: 1px solid var(--border);
padding: 12px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.topbar-mark {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--green);
flex: none;
}
.topbar-text {
font-size: 0.8rem;
color: var(--muted);
letter-spacing: 0.14em;
text-transform: uppercase;
}
/* Hero */
.hero {
padding: 56px 0 40px;
max-width: 720px;
}
.hero-name {
font-size: clamp(2.4rem, 6vw, 3.6rem);
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1.05;
color: var(--text);
}
.hero-sub {
font-size: 1rem;
color: var(--muted);
margin-top: 14px;
letter-spacing: 0.02em;
}
.hero-rule {
width: 56px;
height: 2px;
background: var(--green);
margin-top: 16px;
}
.hero-status {
font-size: 0.85rem;
color: var(--muted);
margin-top: 18px;
letter-spacing: 0.12em;
text-transform: uppercase;
}
/* Sections */
.section {
padding: 56px 0;
}
.section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin-bottom: 30px;
flex-wrap: wrap;
}
.section-head h2 {
font-size: clamp(1rem, 2.6vw, 1.4rem);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text);
border-left: 3px solid var(--green);
padding-left: 12px;
}
.section-note {
font-size: 0.82rem;
color: var(--muted);
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* Experience timeline */
.timeline {
max-width: 760px;
position: relative;
}
.timeline::before {
content: "";
position: absolute;
left: 20px;
top: 0;
bottom: 0;
width: 2px;
background: var(--border-soft);
}
.timeline-item {
position: relative;
padding-left: 60px;
padding-bottom: 36px;
}
.timeline-item:last-child {
padding-bottom: 4px;
}
.timeline-dot {
position: absolute;
left: 14px;
top: 0;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--green);
}
.timeline-year {
display: flex;
align-items: center;
gap: 10px;
padding-left: 26px;
font-size: 0.95rem;
color: var(--green);
letter-spacing: 0.12em;
text-transform: uppercase;
}
.timeline-role {
font-size: 1.2rem;
font-weight: 600;
letter-spacing: 0.01em;
margin-top: 4px;
color: var(--text);
}
.timeline-company {
font-size: 0.9rem;
color: var(--muted);
margin-top: 2px;
letter-spacing: 0.02em;
}
.timeline-bullets {
list-style: none;
margin-top: 12px;
display: flex;
flex-direction: column;
gap: 6px;
}
.timeline-bullets li {
position: relative;
padding-left: 14px;
font-size: 0.92rem;
color: var(--muted);
line-height: 1.65;
}
.timeline-bullets li::before {
content: "";
position: absolute;
left: 0;
top: 0.85em;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--green);
}
/* Skills chips */
.skills {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.chip {
display: inline-flex;
align-items: center;
padding: 0.55rem 1rem;
border: 1px solid var(--border);
border-radius: 8px;
font-size: 0.9rem;
letter-spacing: 0.02em;
color: var(--text);
background: transparent;
transition: border-color 0.15s ease, background 0.15s ease;
}
.chip:hover {
border-color: var(--green);
background: rgba(61, 220, 151, 0.08);
}
/* Side projects */
.projects {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.project {
border-top: 1px solid var(--border);
padding-top: 18px;
display: flex;
flex-direction: column;
gap: 8px;
}
.project:first-child {
border-top: none;
padding-top: 0;
}
.project-index {
font-size: 0.8rem;
color: var(--green);
letter-spacing: 0.1em;
}
.project h3 {
font-size: 1.05rem;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--text);
line-height: 1.4;
}
.project p {
font-size: 0.88rem;
color: var(--muted);
line-height: 1.6;
}
/* Publication */
.publication {
border: 1px solid var(--border);
padding: 20px;
display: grid;
grid-template-columns: auto 1fr;
gap: 18px;
align-items: start;
}
.pub-year {
font-size: 0.85rem;
color: var(--green);
letter-spacing: 0.12em;
text-transform: uppercase;
padding-top: 4px;
}
.publication h3 {
font-size: 1.15rem;
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1.4;
color: var(--text);
}
.publication p {
font-size: 0.9rem;
color: var(--muted);
line-height: 1.6;
}
/* Contact */
.contact {
display: flex;
flex-direction: column;
gap: 14px;
}
.contact-row {
display: flex;
gap: 16px;
align-items: baseline;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
}
.contact-row:last-child {
border-bottom: none;
padding-bottom: 0;
}
.contact-label {
font-size: 0.78rem;
color: var(--muted);
letter-spacing: 0.12em;
text-transform: uppercase;
min-width: 110px;
}
.contact-value {
font-size: 0.98rem;
color: var(--text);
}
/* Footer */
.footer {
border-top: 1px solid var(--border);
padding: 24px;
margin-top: 8px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
font-size: 0.82rem;
color: var(--muted);
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* Responsive */
@media (max-width: 640px) {
.container { padding: 0 16px; }
.topbar { padding: 10px 16px; }
.topbar-text { font-size: 0.72rem; letter-spacing: 0.1em; }
.hero { padding: 40px 0 24px; max-width: none; }
.hero-name { font-size: clamp(2rem, 8vw, 2.8rem); }
.section { padding: 40px 0; }
.section-head { margin-bottom: 22px; }
.timeline { max-width: none; }
.timeline-item { padding-left: 52px; padding-bottom: 28px; }
.timeline::before { left: 16px; }
.timeline-dot { left: 10px; }
.timeline-year { padding-left: 20px; }
.projects { grid-template-columns: 1fr; gap: 16px; }
.publication { grid-template-columns: 1fr; gap: 12px; padding: 16px; }
.footer { flex-direction: column; gap: 8px; }
}
</style>
</head>
<body>
<header class="topbar">
<span class="topbar-mark" aria-hidden="true"></span>
<span class="topbar-text">Senior Machine Learning Engineer · Berlin · 2017–Present</span>
</header>
<div class="container">
<section class="hero">
<h1 class="hero-name">Mira Kovač</h1>
<p class="hero-sub">Senior Machine Learning Engineer · Berlin, Germany</p>
<div class="hero-rule" aria-hidden="true"></div>
<div class="hero-status">[ CV · 2026 · 6 YEARS IN MACHINE LEARNING ]</div>
</section>
<section class="section" id="experience">
<header class="section-head">
<h2>Experience</h2>
<span class="section-note">3 positions · 2017 – 2026 · Berlin</span>
</header>
<div class="timeline">
<article class="timeline-item">
<div class="timeline-year">
<span class="timeline-dot" aria-hidden="true"></span>
2024 — Present
</div>
<h3 class="timeline-role">Senior Machine Learning Engineer</h3>
<p class="timeline-company">Nimbus Systems · Berlin, Germany</p>
<ul class="timeline-bullets">
<li>Built a two-stage re-ranking pipeline for product recommendations, serving 2M+ monthly active users while reducing session churn by 18%.</li>
<li>Led the model-serving migration to GPU-backed inference, increasing throughput 3x with accuracy within 0.5% of the legacy baseline.</li>
<li>Owned the end-to-end MLOps stack from training orchestration to canary deployment, supporting 120+ model variants with 99.9% training uptime.</li>
</ul>
</article>
<article class="timeline-item">
<div class="timeline-year">
<span class="timeline-dot" aria-hidden="true"></span>
2020 — 2024
</div>
<h3 class="timeline-role">Machine Learning Engineer</h3>
<p class="timeline-company">Helix AI · Berlin, Germany</p>
<ul class="timeline-bullets">
<li>Designed time-series forecasting models for supply-chain logistics, cutting predicted-demand errors by 22% compared to legacy models across 18 warehouses.</li>
<li>Built a feature-store service powering 15+ internal data pipelines, cutting feature engineering time by 40% for ML teams across the company.</li>
<li>Co-led the migration of the legacy model-serving platform to a GPU inference stack, reducing cold-start latency by 60%.</li>
</ul>
</article>
<article class="timeline-item">
<div class="timeline-year">
<span class="timeline-dot" aria-hidden="true"></span>
2017 — 2020
</div>
<h3 class="timeline-role">Data Scientist / Machine Learning Engineer</h3>
<p class="timeline-company">Brightwave Analytics · Berlin, Germany</p>
<ul class="timeline-bullets">
<li>Developed click-through prediction models that improved campaign ROI by 25% across three ad platforms at scale.</li>
<li>Built and maintained ETL pipelines for a 200GB daily telemetry dataset, plus evaluation suites for 8+ model families.</li>
<li>Collaborated with product teams to ship the first production ML feature in the user onboarding flow.</li>
</ul>
</article>
</div>
</section>
<section class="section" id="skills">
<header class="section-head">
<h2>Skills</h2>
<span class="section-note">7 skills · machine learning focus</span>
</header>
<div class="skills">
<span class="chip">Machine Learning</span>
<span class="chip">MLOps</span>
<span class="chip">PyTorch</span>
<span class="chip">Computer Vision</span>
<span class="chip">NLP & Foundation Models</span>
<span class="chip">Time-Series Forecasting</span>
<span class="chip">Experiment Tracking</span>
</div>
</section>
<section class="section" id="projects">
<header class="section-head">
<h2>Side Projects</h2>
<span class="section-note">3 projects · open-source & internal tools</span>
</header>
<div class="projects">
<article class="project">
<div class="project-index">01</div>
<h3>Edge LLM Inference Runner</h3>
<p>Lightweight GPU inference wrapper for local model serving, cutting cold-start latency by 60% in edge deployments.</p>
</article>
<article class="project">
<div class="project-index">02</div>
<h3>Tabular Predict Dashboard</h3>
<p>A self-serve feature-preview and model-comparison dashboard for internal ML teams, adopted by 60+ engineers across 4 teams.</p>
</article>
<article class="project">
<div class="project-index">03</div>
<h3>Time-Series Simulator</h3>
<p>A synthetic data generator for training forecasting models without access to proprietary historical datasets.</p>
</article>
</div>
</section>
<section class="section" id="publication">
<header class="section-head">
<h2>Publication</h2>
<span class="section-note">1 publication · 2023</span>
</header>
<div class="publication">
<span class="pub-year">2023</span>
<div>
<h3>Efficient Serving for Multi-Model ML Pipelines</h3>
<p>ML Systems Workshop · Berlin — co-authored on scalability practices for multi-model serving at scale.</p>
</div>
</div>
</section>
<section class="section" id="contact">
<header class="section-head">
<h2>Contact</h2>
</header>
<div class="contact">
<div class="contact-row">
<span class="contact-label">Email</span>
<span class="contact-value">mira.kovač@nimbus.io</span>
</div>
<div class="contact-row">
<span class="contact-label">Location</span>
<span class="contact-value">Berlin, Germany</span>
</div>
<div class="contact-row">
<span class="contact-label">Available</span>
<span class="contact-value">For new roles — senior ML engineering & MLOps positions</span>
</div>
</div>
</section>
</div>
<footer class="footer">
<span>Mira Kovač · Senior ML Engineer</span>
<span>Berlin · 2017–Present</span>
</footer>
</body>
</html>Watch the test
Spark X2.6 4B Local Test | Beats Qwen3.5 4B? | Agentic Work, Coding & RAG Test | 16GB Local AI Setup
Watch on YouTubeSame prompt, other models
One email when a new model lands on the board or in the showcase. Unsubscribe anytime.