Portfolio & Resume · Advanced

Dana Kovács — Marketing Specialist Portfolio

A results-driven portfolio for digital marketing specialists: a metric-card hero, animated impact stats, campaign case studies with before/after numbers, a client-logo strip, a tool stack, certifications, testimonials and a strategy-call contact form.

Uses Bootstrap 5. Bootstrap 5 plus the CDN tag below. The downloaded file already includes everything.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">

Full preview Download

<nav class="mk-nav" data-rv>
  <a class="mk-brand" href="#top">Dana<span>Kovács</span></a>
  <div class="mk-links"><a href="#results">Results</a><a href="#cases">Case studies</a><a href="#tools">Stack</a><a href="#certs">Certifications</a><a href="#contact">Contact</a></div>
  <a class="mk-nav-cta" href="#contact">Work with me</a>
</nav>

<header id="top" class="mk-hero">
  <div class="mk-hero-inner">
    <div class="mk-hero-text">
      <span class="mk-badge" data-rv>📈 Digital Marketing Specialist</span>
      <h1 data-rv>I turn ad spend into <span>predictable revenue.</span></h1>
      <p data-rv>Hi, I'm Dana — a performance marketer who's managed €12M+ in ad budget and scaled 40+ brands with data-driven campaigns across paid, SEO and lifecycle.</p>
      <div class="mk-hero-btns" data-rv><a class="mk-btn mk-btn-fill" href="#cases">See case studies</a><a class="mk-btn mk-btn-ghost" href="#contact">Book a strategy call</a></div>
    </div>
    <div class="mk-hero-cards" data-rv>
      <div class="mk-hc"><span>ROAS</span><b>5.8×</b></div>
      <div class="mk-hc"><span>Avg. CAC ↓</span><b>−34%</b></div>
      <div class="mk-hc"><span>Managed spend</span><b>€12M+</b></div>
      <div class="mk-hc"><span>Brands scaled</span><b>40+</b></div>
    </div>
  </div>
</header>

<section id="results" class="mk-sec">
  <div class="mk-head" data-rv><span class="mk-kick">Impact</span><h2>Results that compound</h2></div>
  <div class="mk-results">
    <div class="mk-result" data-rv data-count="280"><b>0</b><span>% avg. revenue growth</span></div>
    <div class="mk-result" data-rv data-count="12"><b>0</b><span>M € budget managed</span></div>
    <div class="mk-result" data-rv data-count="40"><b>0</b><span>brands scaled</span></div>
    <div class="mk-result" data-rv data-count="58"><b>0</b><span>campaigns launched</span></div>
  </div>
</section>

<section id="cases" class="mk-sec mk-sec-alt">
  <div class="mk-head" data-rv><span class="mk-kick">Case studies</span><h2>Campaigns that worked</h2></div>
  <div class="mk-cases">
    <article class="mk-case" data-rv>
      <div class="mk-case-top"><span class="mk-case-cat">E-commerce · Paid social</span><span class="mk-case-up">▲ +312% ROAS</span></div>
      <h3>Scaling Verde Skincare from €20k to €180k/mo</h3>
      <p>Rebuilt the Meta &amp; TikTok funnel with creative testing and a lifecycle email flow. 9× return in 6 months.</p>
      <div class="mk-case-metrics"><div><b>9.1×</b><span>ROAS</span></div><div><b>−41%</b><span>CAC</span></div><div><b>€180k</b><span>Monthly rev</span></div></div>
    </article>
    <article class="mk-case" data-rv>
      <div class="mk-case-top"><span class="mk-case-cat">SaaS · SEO + content</span><span class="mk-case-up">▲ +540% traffic</span></div>
      <h3>Organic growth engine for Stacklane</h3>
      <p>Built a programmatic SEO + content system that grew organic signups 5× in a year, lowering blended CAC by a third.</p>
      <div class="mk-case-metrics"><div><b>540%</b><span>Traffic</span></div><div><b>5×</b><span>Signups</span></div><div><b>−33%</b><span>CAC</span></div></div>
    </article>
    <article class="mk-case" data-rv>
      <div class="mk-case-top"><span class="mk-case-cat">App · Lifecycle</span><span class="mk-case-up">▲ +27% retention</span></div>
      <h3>Re-engagement for Orbit habit app</h3>
      <p>Designed a push + email lifecycle program that lifted 30-day retention by 27% and doubled trial-to-paid.</p>
      <div class="mk-case-metrics"><div><b>+27%</b><span>Retention</span></div><div><b>2×</b><span>Trial→paid</span></div><div><b>+19%</b><span>LTV</span></div></div>
    </article>
  </div>
</section>

<section id="logos" class="mk-sec">
  <div class="mk-head" data-rv><span class="mk-kick">Trusted by</span><h2>Brands I've grown</h2></div>
  <div class="mk-logos" data-rv>
    <span>◆ Verde</span><span>● Stacklane</span><span>▲ Orbit</span><span>★ Lumen</span><span>✦ Norra</span><span>◇ Fleetline</span>
  </div>
</section>

<section id="tools" class="mk-sec mk-sec-alt">
  <div class="mk-head" data-rv><span class="mk-kick">Stack</span><h2>Marketing toolbox</h2></div>
  <div class="mk-tools">
    <div class="mk-tool-cat" data-rv><h3>Paid &amp; analytics</h3><div class="mk-tags"><span>Meta Ads</span><span>Google Ads</span><span>TikTok Ads</span><span>GA4</span><span>Looker</span></div></div>
    <div class="mk-tool-cat" data-rv><h3>SEO &amp; content</h3><div class="mk-tags"><span>Ahrefs</span><span>Semrush</span><span>Search Console</span><span>Surfer</span></div></div>
    <div class="mk-tool-cat" data-rv><h3>Lifecycle &amp; CRO</h3><div class="mk-tags"><span>Klaviyo</span><span>HubSpot</span><span>Customer.io</span><span>VWO</span></div></div>
  </div>
</section>

<section id="certs" class="mk-sec">
  <div class="mk-head" data-rv><span class="mk-kick">Credentials</span><h2>Certifications</h2></div>
  <div class="mk-certs">
    <div class="mk-cert" data-rv><div class="mk-cert-ico">G</div><div><b>Google Ads — Search &amp; Display</b><span>Google · 2025</span></div></div>
    <div class="mk-cert" data-rv><div class="mk-cert-ico">M</div><div><b>Meta Certified Media Buyer</b><span>Meta · 2024</span></div></div>
    <div class="mk-cert" data-rv><div class="mk-cert-ico">H</div><div><b>Inbound Marketing</b><span>HubSpot · 2024</span></div></div>
    <div class="mk-cert" data-rv><div class="mk-cert-ico">A</div><div><b>Advanced SEO</b><span>Ahrefs Academy · 2023</span></div></div>
  </div>
</section>

<section id="testimonials" class="mk-sec mk-sec-alt">
  <div class="mk-head" data-rv><span class="mk-kick">Praise</span><h2>What clients say</h2></div>
  <div class="mk-tests">
    <figure class="mk-test" data-rv><blockquote>"Dana didn't just run ads — she rebuilt our entire growth model. We 9×'d revenue and finally understand our numbers."</blockquote><figcaption><span class="mk-av" style="background:#16a34a">MA</span><div><b>Mia Anderson</b><em>Founder, Verde</em></div></figcaption></figure>
    <figure class="mk-test" data-rv><blockquote>"The SEO engine she built still drives most of our signups. Best marketing hire we ever made."</blockquote><figcaption><span class="mk-av" style="background:#0ea5e9">AL</span><div><b>Anja Lind</b><em>CPO, Stacklane</em></div></figcaption></figure>
    <figure class="mk-test" data-rv><blockquote>"Clear reporting, sharp strategy, zero fluff. Our retention numbers have never looked better."</blockquote><figcaption><span class="mk-av" style="background:#f59e0b">TM</span><div><b>Tom Meyer</b><em>Growth, Orbit</em></div></figcaption></figure>
  </div>
</section>

<section id="contact" class="mk-contact" data-rv>
  <div class="mk-contact-inner">
    <div class="mk-contact-text"><h2>Let's grow your numbers</h2><p>Book a free 30-minute strategy call. We'll find your biggest growth lever before you commit to anything.</p>
      <ul class="mk-contact-list"><li><span>✉</span> dana@kovacs.marketing</li><li><span>⌖</span> Budapest · Remote</li><li><span>⏱</span> Replies within 24h</li></ul>
    </div>
    <form class="mk-form" onsubmit="return false">
      <input type="text" placeholder="Name"><input type="email" placeholder="Work email"><input type="text" placeholder="Monthly ad budget"><textarea rows="3" placeholder="What are you trying to grow?"></textarea>
      <button class="mk-btn mk-btn-fill mk-btn-block">Book strategy call</button>
    </form>
  </div>
</section>

<footer class="mk-foot">
  <div class="mk-foot-inner"><a class="mk-brand" href="#top">Dana<span>Kovács</span></a><div class="mk-social"><a href="#">LinkedIn</a><a href="#">X</a><a href="#">Newsletter</a></div></div>
  <div class="mk-foot-bottom"><span>© 2026 Dana Kovács · Digital Marketing</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:#f7f9fc;color:#0f1b2d;font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;overflow-x:hidden;line-height:1.6}
a{text-decoration:none;color:inherit}
.mk-btn{display:inline-block;padding:13px 26px;border-radius:10px;font-weight:700;font-size:.93rem;cursor:pointer;border:0;transition:transform .15s ease,box-shadow .15s ease}
.mk-btn-fill{background:#0f1b2d;color:#fff}.mk-btn-fill:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(15,27,45,.25)}
.mk-btn-ghost{border:1.5px solid #0f1b2d;color:#0f1b2d}.mk-btn-ghost:hover{background:#0f1b2d;color:#fff}
.mk-btn-block{width:100%}
.mk-kick{font-size:.8rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#16a34a}
.mk-brand{font-weight:800;font-size:1.1rem}.mk-brand span{color:#16a34a}
.mk-nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:15px 34px;background:rgba(247,249,252,.85);backdrop-filter:blur(12px);border-bottom:1px solid #e4ebf3}
.mk-links{display:flex;gap:26px}.mk-links a{color:#52617a;font-size:.9rem;font-weight:500}.mk-links a:hover{color:#16a34a}
.mk-nav-cta{background:#16a34a;color:#fff;padding:9px 20px;border-radius:9px;font-size:.88rem;font-weight:700}
.mk-hero{padding:130px 34px 70px;max-width:1180px;margin:0 auto}
.mk-hero-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:46px;align-items:center}
.mk-badge{display:inline-block;background:#e7f7ee;color:#16a34a;border-radius:999px;padding:7px 16px;font-size:.84rem;font-weight:700;margin-bottom:22px}
.mk-hero h1{font-size:clamp(2.4rem,5.5vw,3.9rem);font-weight:800;letter-spacing:-.03em;line-height:1.06;margin:0 0 18px}
.mk-hero h1 span{color:#16a34a}
.mk-hero-text p{color:#52617a;font-size:1.08rem;max-width:520px;margin:0 0 26px}
.mk-hero-btns{display:flex;gap:14px;flex-wrap:wrap}
.mk-hero-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mk-hc{background:#fff;border:1px solid #e4ebf3;border-radius:16px;padding:22px;box-shadow:0 8px 24px rgba(15,27,45,.05)}
.mk-hc span{color:#52617a;font-size:.82rem}.mk-hc b{display:block;font-size:2rem;font-weight:800;color:#0f1b2d;margin-top:4px}
.mk-hc:nth-child(1) b,.mk-hc:nth-child(3) b{color:#16a34a}
.mk-sec{max-width:1180px;margin:0 auto;padding:70px 34px}
.mk-sec-alt{background:#fff;border-top:1px solid #e4ebf3;border-bottom:1px solid #e4ebf3;max-width:none}
.mk-sec-alt>.mk-head,.mk-sec-alt>div{max-width:1180px;margin-left:auto;margin-right:auto}
.mk-head{text-align:center;margin-bottom:42px}
.mk-head h2{font-size:clamp(1.9rem,4vw,2.7rem);font-weight:800;letter-spacing:-.03em;margin:8px 0 0}
.mk-results{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.mk-result{text-align:center;background:#0f1b2d;color:#fff;border-radius:16px;padding:30px 20px}
.mk-result b{display:block;font-size:2.6rem;font-weight:800;color:#4ade80}
.mk-result span{color:#9fb0c8;font-size:.84rem}
.mk-cases{display:grid;gap:18px}
.mk-case{background:#fff;border:1px solid #e4ebf3;border-radius:18px;padding:28px;transition:.22s}
.mk-case:hover{transform:translateY(-4px);box-shadow:0 20px 50px rgba(15,27,45,.08);border-color:#bbf7d0}
.mk-case-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.mk-case-cat{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#52617a}
.mk-case-up{background:#e7f7ee;color:#16a34a;font-weight:800;font-size:.82rem;padding:4px 12px;border-radius:999px}
.mk-case h3{font-size:1.4rem;font-weight:800;letter-spacing:-.02em;margin:0 0 8px}
.mk-case>p{color:#52617a;margin:0 0 18px}
.mk-case-metrics{display:flex;gap:34px;flex-wrap:wrap}
.mk-case-metrics b{display:block;font-size:1.5rem;font-weight:800;color:#0f1b2d}
.mk-case-metrics span{color:#52617a;font-size:.8rem}
.mk-logos{display:flex;flex-wrap:wrap;gap:36px;justify-content:center;align-items:center}
.mk-logos span{font-size:1.3rem;font-weight:800;color:#9fb0c8;transition:.2s}
.mk-logos span:hover{color:#16a34a}
.mk-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mk-tool-cat{background:#fff;border:1px solid #e4ebf3;border-radius:16px;padding:24px}
.mk-tool-cat h3{font-size:1.1rem;margin:0 0 14px}
.mk-tags{display:flex;flex-wrap:wrap;gap:8px}
.mk-tags span{background:#f1f6fb;border:1px solid #e4ebf3;border-radius:8px;padding:6px 13px;font-size:.84rem;font-weight:500;transition:.18s}
.mk-tags span:hover{border-color:#16a34a;color:#16a34a}
.mk-certs{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.mk-cert{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid #e4ebf3;border-radius:14px;padding:20px;transition:.2s}
.mk-cert:hover{transform:translateY(-3px);border-color:#bbf7d0}
.mk-cert-ico{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,#16a34a,#4ade80);color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.3rem}
.mk-cert b{display:block;font-size:.98rem}.mk-cert span{color:#52617a;font-size:.82rem}
.mk-tests{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mk-test{margin:0;background:#fff;border:1px solid #e4ebf3;border-radius:18px;padding:26px;transition:.22s}
.mk-test:hover{transform:translateY(-4px);box-shadow:0 20px 50px rgba(15,27,45,.08)}
.mk-test blockquote{margin:0 0 18px;font-size:.96rem;line-height:1.7;color:#2a374a}
.mk-test figcaption{display:flex;align-items:center;gap:12px}
.mk-av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:.84rem}
.mk-test figcaption b{display:block;font-size:.92rem}.mk-test figcaption em{font-style:normal;color:#52617a;font-size:.82rem}
.mk-contact{max-width:1000px;margin:50px auto;padding:0 34px}
.mk-contact-inner{display:grid;grid-template-columns:1fr 1fr;gap:40px;background:#0f1b2d;color:#fff;border-radius:26px;padding:48px}
.mk-contact-text h2{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;letter-spacing:-.03em;margin:0 0 12px}
.mk-contact-text p{color:#9fb0c8;margin:0 0 22px}
.mk-contact-list{list-style:none;padding:0;margin:0}
.mk-contact-list li{display:flex;align-items:center;gap:12px;padding:8px 0;color:#dbe4ef}
.mk-contact-list span{color:#4ade80;width:20px;text-align:center}
.mk-form input,.mk-form textarea{width:100%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:12px 14px;color:#fff;font-family:inherit;font-size:.92rem;outline:none;margin-bottom:12px}
.mk-form input::placeholder,.mk-form textarea::placeholder{color:#8295ad}
.mk-form input:focus,.mk-form textarea:focus{border-color:#4ade80}
.mk-contact .mk-btn-fill{background:#16a34a}
.mk-foot{max-width:1180px;margin:0 auto;padding:40px 34px}
.mk-foot-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding-bottom:20px;border-bottom:1px solid #e4ebf3}
.mk-social{display:flex;gap:20px}.mk-social a{color:#52617a;font-size:.9rem}.mk-social a:hover{color:#16a34a}
.mk-foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:18px;color:#8295ad;font-size:.85rem}
.mk-foot-bottom a{color:#16a34a;font-weight:600}
@media(max-width:860px){.mk-hero-inner,.mk-contact-inner{grid-template-columns:1fr}.mk-results{grid-template-columns:1fr 1fr}.mk-tools,.mk-tests{grid-template-columns:1fr}.mk-certs{grid-template-columns:1fr}}
@media(max-width:600px){.mk-links{display:none}.mk-results{grid-template-columns:1fr 1fr}.mk-hero-cards{grid-template-columns:1fr 1fr}}
[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)});

Free to use — no attribution required. This is a complete, responsive Bootstrap 5 page. It uses Bootstrap 5 via CDN (linked above). Download a ready-to-open .html file with all CDN links included, or copy the HTML and drop it into your project.

What's included in this template

The Dana Kovács — Marketing Specialist 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:

Metric-card hero
Animated impact statistics
Campaign case studies with KPIs
Client logo strip
Certifications & tool stack
Strategy-call 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 marketing-specialist-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.