Helena Brandt — Professional Resume Portfolio
A premium executive resume portfolio with a profile-card hero, animated achievement counters, a detailed experience timeline with bullet points, competency skill bars, education and certifications, recommendations and a Download Resume action — refined serif headings on a warm neutral palette.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"><nav class="rs-nav" data-rv>
<a class="rs-brand" href="#top">Helena Brandt</a>
<div class="rs-links"><a href="#experience">Experience</a><a href="#achievements">Achievements</a><a href="#skills">Skills</a><a href="#references">References</a></div>
<a class="rs-dl" href="#" download>⬇ Download Resume</a>
</nav>
<header id="top" class="rs-hero">
<div class="rs-hero-inner">
<div class="rs-hero-left" data-rv>
<span class="rs-tag">Operations & Strategy Leader</span>
<h1>Helena Brandt</h1>
<p class="rs-sub">VP of Operations · 15+ years scaling teams and processes across SaaS and logistics.</p>
<p class="rs-lead">I build operational engines that let companies grow without breaking. From 12-person startups to 400-person scale-ups, I've owned the systems, people and numbers behind sustainable growth.</p>
<div class="rs-hero-btns"><a class="rs-btn rs-btn-fill" href="#experience">View experience</a><a class="rs-btn rs-btn-out" href="#references">Read references</a></div>
</div>
<div class="rs-hero-card" data-rv>
<div class="rs-card-av">HB</div>
<ul class="rs-quick">
<li><span>Location</span><b>Vienna, Austria</b></li>
<li><span>Email</span><b>helena@brandt.pro</b></li>
<li><span>Experience</span><b>15+ years</b></li>
<li><span>Languages</span><b>DE · EN · FR</b></li>
</ul>
</div>
</div>
</header>
<section id="achievements" class="rs-sec">
<div class="rs-head" data-rv><span class="rs-kick">Highlights</span><h2>Key achievements</h2></div>
<div class="rs-achv">
<div class="rs-achv-card" data-rv data-count="400"><b>0</b><span>Team scaled to (people)</span></div>
<div class="rs-achv-card" data-rv data-count="3"><b>0</b><span>Successful funding rounds</span></div>
<div class="rs-achv-card" data-rv data-count="42"><b>0</b><span>% cost reduction delivered</span></div>
<div class="rs-achv-card" data-rv data-count="6"><b>0</b><span>New markets launched</span></div>
</div>
</section>
<section id="experience" class="rs-sec rs-sec-alt">
<div class="rs-head" data-rv><span class="rs-kick">Career</span><h2>Professional experience</h2></div>
<div class="rs-timeline">
<div class="rs-tl" data-rv><div class="rs-tl-marker"></div><div class="rs-tl-body"><div class="rs-tl-top"><h3>VP of Operations</h3><span>2021 — Present</span></div><em>Fleetline · Vienna</em><p>Own global operations for a 400-person logistics SaaS. Rebuilt the org structure, cut operating costs 42% and led the company through Series C.</p><ul class="rs-tl-points"><li>Scaled the ops team from 18 to 90 across 6 countries</li><li>Introduced OKRs and a data layer adopted company-wide</li><li>Reduced churn 19% via a new customer-success motion</li></ul></div></div>
<div class="rs-tl" data-rv><div class="rs-tl-marker"></div><div class="rs-tl-body"><div class="rs-tl-top"><h3>Director of Operations</h3><span>2016 — 2021</span></div><em>Norra Commerce · Berlin</em><p>Built the operational backbone for a fast-growing e-commerce group. Launched 4 new markets and tripled fulfilment capacity.</p><ul class="rs-tl-points"><li>Designed the warehouse & logistics network from scratch</li><li>Negotiated carrier contracts saving €2.1M annually</li></ul></div></div>
<div class="rs-tl" data-rv><div class="rs-tl-marker"></div><div class="rs-tl-body"><div class="rs-tl-top"><h3>Operations Manager</h3><span>2011 — 2016</span></div><em>Stacklane · Munich</em><p>First ops hire at an early-stage SaaS. Set up finance, HR and support systems that carried the company to its first profitable year.</p></div></div>
</div>
</section>
<section id="skills" class="rs-sec">
<div class="rs-head" data-rv><span class="rs-kick">Expertise</span><h2>Core competencies</h2></div>
<div class="rs-skills">
<div class="rs-skill-col" data-rv>
<div class="rs-skill" data-bar><label>Operational strategy <span>Expert</span></label><div class="rs-track"><i data-w="95%"></i></div></div>
<div class="rs-skill" data-bar><label>Team leadership <span>Expert</span></label><div class="rs-track"><i data-w="93%"></i></div></div>
<div class="rs-skill" data-bar><label>Process design <span>Expert</span></label><div class="rs-track"><i data-w="90%"></i></div></div>
</div>
<div class="rs-skill-col" data-rv>
<div class="rs-skill" data-bar><label>Financial planning <span>Advanced</span></label><div class="rs-track"><i data-w="86%"></i></div></div>
<div class="rs-skill" data-bar><label>Data & analytics <span>Advanced</span></label><div class="rs-track"><i data-w="82%"></i></div></div>
<div class="rs-skill" data-bar><label>Change management <span>Expert</span></label><div class="rs-track"><i data-w="91%"></i></div></div>
</div>
</div>
<div class="rs-tags" data-rv><span>OKRs</span><span>Lean</span><span>P&L ownership</span><span>SAP</span><span>Looker</span><span>Hiring</span><span>Vendor management</span><span>M&A integration</span></div>
</section>
<section id="education" class="rs-sec rs-sec-alt">
<div class="rs-head" data-rv><span class="rs-kick">Background</span><h2>Education & certifications</h2></div>
<div class="rs-edu">
<div class="rs-edu-card" data-rv><div class="rs-edu-top"><b>MBA, Operations & Strategy</b><span>2009 — 2011</span></div><em>WU Vienna University of Economics</em></div>
<div class="rs-edu-card" data-rv><div class="rs-edu-top"><b>BSc Industrial Engineering</b><span>2005 — 2009</span></div><em>TU Munich</em></div>
<div class="rs-edu-card" data-rv><div class="rs-edu-top"><b>Lean Six Sigma — Black Belt</b><span>2018</span></div><em>ASQ Certified</em></div>
<div class="rs-edu-card" data-rv><div class="rs-edu-top"><b>Executive Leadership Program</b><span>2020</span></div><em>INSEAD</em></div>
</div>
</section>
<section id="references" class="rs-sec">
<div class="rs-head" data-rv><span class="rs-kick">References</span><h2>Recommendations</h2></div>
<div class="rs-refs">
<figure class="rs-ref" data-rv><blockquote>"Helena is the most capable operator I've worked with. She turned our chaos into a machine and our team into believers."</blockquote><figcaption><span class="rs-av" style="background:#7c3aed">MK</span><div><b>Markus König</b><em>CEO, Fleetline</em></div></figcaption></figure>
<figure class="rs-ref" data-rv><blockquote>"Strategic when it matters, hands-on when it counts. Helena delivered four market launches without a single missed deadline."</blockquote><figcaption><span class="rs-av" style="background:#0ea5e9">SB</span><div><b>Sarah Berg</b><em>Board Member, Norra</em></div></figcaption></figure>
<figure class="rs-ref" data-rv><blockquote>"I'd follow Helena to any company. She builds teams that outlast her and processes that scale effortlessly."</blockquote><figcaption><span class="rs-av" style="background:#f59e0b">DL</span><div><b>Daniel Lang</b><em>Former CFO, Stacklane</em></div></figcaption></figure>
</div>
</section>
<section id="contact" class="rs-contact" data-rv>
<div class="rs-contact-inner">
<h2>Let's talk leadership</h2>
<p>Open to VP & COO roles and advisory work. Reach out and let's connect.</p>
<form class="rs-form" onsubmit="return false">
<div class="rs-row"><input type="text" placeholder="Your name"><input type="email" placeholder="Email"></div>
<textarea rows="3" placeholder="A few words about the opportunity..."></textarea>
<div class="rs-cta-row"><button class="rs-btn rs-btn-fill">Send message</button><a class="rs-btn rs-btn-out" href="#" download>⬇ Download Resume</a></div>
</form>
</div>
</section>
<footer class="rs-foot">
<div class="rs-foot-inner"><a class="rs-brand" href="#top">Helena Brandt</a><div class="rs-social"><a href="#">LinkedIn</a><a href="#">Email</a></div></div>
<div class="rs-foot-bottom"><span>© 2026 Helena Brandt</span><span>Made with <a href="https://convertatlas.org" target="_blank" rel="noopener">convertatlas.org</a></span></div>
</footer>*{box-sizing:border-box}
body{margin:0;background:#f4f1ec;color:#1f1c2c;font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;overflow-x:hidden;line-height:1.6}
a{text-decoration:none;color:inherit}
.rs-serif{font-family:Georgia,serif}
.rs-btn{display:inline-block;padding:13px 26px;border-radius:8px;font-weight:600;font-size:.92rem;cursor:pointer;border:0;transition:transform .15s ease,box-shadow .15s ease}
.rs-btn-fill{background:#4c1d95;color:#fff}.rs-btn-fill:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(76,29,149,.3)}
.rs-btn-out{border:1.5px solid #4c1d95;color:#4c1d95}.rs-btn-out:hover{background:#4c1d95;color:#fff}
.rs-kick{font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#7c3aed}
.rs-brand{font-family:Georgia,serif;font-size:1.2rem;font-weight:700}
.rs-nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:15px 36px;background:rgba(244,241,236,.86);backdrop-filter:blur(12px);border-bottom:1px solid #e3dccf}
.rs-links{display:flex;gap:26px}.rs-links a{color:#5c5570;font-size:.9rem}.rs-links a:hover{color:#7c3aed}
.rs-dl{background:#4c1d95;color:#fff;padding:9px 18px;border-radius:8px;font-size:.86rem;font-weight:600}
.rs-hero{padding:130px 36px 70px;max-width:1140px;margin:0 auto}
.rs-hero-inner{display:grid;grid-template-columns:1.4fr .8fr;gap:44px;align-items:center}
.rs-tag{display:inline-block;background:#ede9fe;color:#7c3aed;border-radius:999px;padding:7px 16px;font-size:.84rem;font-weight:700;margin-bottom:18px}
.rs-hero h1{font-family:Georgia,serif;font-size:clamp(2.6rem,6vw,4.2rem);font-weight:700;letter-spacing:-.02em;line-height:1.04;margin:0 0 12px}
.rs-sub{font-size:1.15rem;color:#4c1d95;font-weight:600;margin:0 0 16px}
.rs-lead{color:#5c5570;font-size:1.04rem;max-width:560px;margin:0 0 26px}
.rs-hero-btns{display:flex;gap:14px;flex-wrap:wrap}
.rs-hero-card{background:#fff;border:1px solid #e3dccf;border-radius:22px;padding:30px;box-shadow:0 20px 50px rgba(31,28,44,.08)}
.rs-card-av{width:80px;height:80px;border-radius:22px;background:linear-gradient(135deg,#4c1d95,#a855f7);color:#fff;display:grid;place-items:center;font-size:1.8rem;font-weight:800;margin-bottom:20px}
.rs-quick{list-style:none;padding:0;margin:0}
.rs-quick li{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f0ece3;font-size:.9rem}
.rs-quick li:last-child{border-bottom:0}
.rs-quick span{color:#8b8398}.rs-quick b{font-weight:600}
.rs-sec{max-width:1140px;margin:0 auto;padding:70px 36px}
.rs-sec-alt{background:#fff;border-top:1px solid #e3dccf;border-bottom:1px solid #e3dccf;max-width:none}
.rs-sec-alt>.rs-head,.rs-sec-alt>div{max-width:1140px;margin-left:auto;margin-right:auto}
.rs-head{text-align:center;margin-bottom:42px}
.rs-head h2{font-family:Georgia,serif;font-size:clamp(1.9rem,4vw,2.7rem);font-weight:700;letter-spacing:-.02em;margin:8px 0 0}
.rs-achv{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.rs-achv-card{text-align:center;background:#fff;border:1px solid #e3dccf;border-radius:18px;padding:30px 20px;transition:.22s}
.rs-achv-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(31,28,44,.08)}
.rs-achv-card b{display:block;font-family:Georgia,serif;font-size:2.6rem;font-weight:700;color:#7c3aed}
.rs-achv-card span{color:#5c5570;font-size:.84rem}
.rs-timeline{max-width:820px;margin:0 auto;position:relative}
.rs-timeline::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:2px;background:linear-gradient(#7c3aed,#a855f7,transparent)}
.rs-tl{position:relative;padding-left:40px;margin-bottom:32px}
.rs-tl-marker{position:absolute;left:0;top:6px;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid #7c3aed}
.rs-tl-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px}
.rs-tl-top h3{font-family:Georgia,serif;font-size:1.3rem;margin:0}
.rs-tl-top span{color:#7c3aed;font-weight:600;font-size:.86rem}
.rs-tl-body em{color:#9333ea;font-style:normal;font-size:.92rem;font-weight:600}
.rs-tl-body>p{color:#5c5570;margin:8px 0 10px}
.rs-tl-points{margin:0;padding-left:18px;color:#5c5570;font-size:.9rem}
.rs-tl-points li{margin-bottom:4px}
.rs-skills{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-bottom:26px}
.rs-skill{margin-bottom:16px}
.rs-skill label{display:flex;justify-content:space-between;font-size:.9rem;margin-bottom:7px}
.rs-skill label span{color:#7c3aed;font-size:.8rem}
.rs-track{height:7px;background:#ece7dd;border-radius:4px;overflow:hidden}
.rs-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,#4c1d95,#a855f7);border-radius:4px;transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.rs-tags{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.rs-tags span{background:#fff;border:1px solid #e3dccf;border-radius:999px;padding:7px 15px;font-size:.85rem;font-weight:500;transition:.18s}
.rs-tags span:hover{border-color:#7c3aed;color:#7c3aed}
.rs-edu{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.rs-edu-card{background:#fff;border:1px solid #e3dccf;border-radius:14px;padding:22px;transition:.2s}
.rs-edu-card:hover{transform:translateY(-3px);border-color:#c4b5fd}
.rs-edu-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px}
.rs-edu-top b{font-size:1rem}.rs-edu-top span{color:#7c3aed;font-size:.82rem;font-weight:600}
.rs-edu-card em{color:#5c5570;font-style:normal;font-size:.88rem}
.rs-refs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rs-ref{margin:0;background:#fff;border:1px solid #e3dccf;border-radius:18px;padding:26px;transition:.22s}
.rs-ref:hover{transform:translateY(-4px);box-shadow:0 20px 50px rgba(31,28,44,.08)}
.rs-ref blockquote{font-family:Georgia,serif;font-size:1rem;line-height:1.7;margin:0 0 18px;color:#3a3450}
.rs-ref figcaption{display:flex;align-items:center;gap:12px}
.rs-av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:.84rem}
.rs-ref figcaption b{display:block;font-size:.92rem}.rs-ref figcaption em{font-style:normal;color:#5c5570;font-size:.82rem}
.rs-contact{max-width:760px;margin:50px auto;padding:0 36px}
.rs-contact-inner{background:linear-gradient(135deg,#2e1065,#4c1d95);border-radius:28px;padding:50px 40px;text-align:center;color:#fff}
.rs-contact-inner h2{font-family:Georgia,serif;font-size:clamp(1.9rem,4vw,2.6rem);font-weight:700;margin:0 0 10px}
.rs-contact-inner p{color:#c4b5fd;margin:0 0 26px}
.rs-form{max-width:480px;margin:0 auto}
.rs-row{display:flex;gap:12px}
.rs-form input,.rs-form textarea{width:100%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:12px 15px;color:#fff;font-family:inherit;font-size:.92rem;outline:none;margin-bottom:12px}
.rs-form input::placeholder,.rs-form textarea::placeholder{color:#b9a8e0}
.rs-cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.rs-contact .rs-btn-fill{background:#fff;color:#4c1d95}
.rs-contact .rs-btn-out{border-color:#c4b5fd;color:#fff}.rs-contact .rs-btn-out:hover{background:#fff;color:#4c1d95}
.rs-foot{max-width:1140px;margin:0 auto;padding:40px 36px}
.rs-foot-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding-bottom:20px;border-bottom:1px solid #e3dccf}
.rs-social{display:flex;gap:20px}.rs-social a{color:#5c5570;font-size:.9rem}.rs-social a:hover{color:#7c3aed}
.rs-foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:18px;color:#8b8398;font-size:.85rem}
.rs-foot-bottom a{color:#7c3aed;font-weight:600}
@media(max-width:860px){.rs-hero-inner{grid-template-columns:1fr}.rs-achv{grid-template-columns:1fr 1fr}.rs-skills,.rs-edu{grid-template-columns:1fr}.rs-refs{grid-template-columns:1fr}}
@media(max-width:600px){.rs-links{display:none}.rs-achv{grid-template-columns:1fr 1fr}.rs-row{flex-direction:column}}
[data-rv]{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}[data-rv].in{opacity:1;transform:none}var io=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){e.target.classList.add('in');if(e.target.hasAttribute('data-bar')){e.target.querySelectorAll('[data-w]').forEach(function(b){b.style.width=b.getAttribute('data-w')})}if(e.target.hasAttribute('data-count')){var t=+e.target.getAttribute('data-count'),el=e.target,s=null;requestAnimationFrame(function st(ts){if(!s)s=ts;var p=Math.min((ts-s)/1500,1);el.firstChild.textContent=Math.floor((1-Math.pow(1-p,3))*t).toLocaleString();if(p<1)requestAnimationFrame(st)})}io.unobserve(e.target)}})},{threshold:.18});
document.querySelectorAll('[data-rv],[data-bar],[data-count]').forEach(function(el){io.observe(el)});.html file with all CDN links included, or copy the HTML and drop it into your project.What's included in this template
The Helena Brandt — Professional Resume Portfolio is a complete portfolio & resume design with realistic demo content — ready to preview, copy or download as a single responsive HTML file. Key features:
- Profile-card hero
- Animated achievement counters
- Detailed experience timeline
- Competency skill bars
- Recommendations grid
- Download Resume + contact form
How to use it
Open the live preview above to see the full design at desktop, tablet and mobile widths. When you are happy with it, use Download to save a single professional-resume-portfolio.html file, or Copy to grab the source. All required libraries load from public CDNs, so the file works the moment you open it — just replace the demo content with your own and publish.