Nova — Creative Freelancer Portfolio

<nav class="cf-nav" data-rv>
  <a class="cf-brand" href="#top">✺ Nova Reyes</a>
  <div class="cf-links"><a href="#services">Services</a><a href="#work">Work</a><a href="#pricing">Pricing</a><a href="#faq">FAQ</a></div>
  <a class="cf-nav-cta" href="#contact">Start a project</a>
</nav>

<header id="top" class="cf-hero">
  <div class="cf-blob cf-blob1"></div><div class="cf-blob cf-blob2"></div>
  <div class="cf-hero-inner">
    <span class="cf-tag" data-rv>✦ Creative freelancer · brand &amp; web</span>
    <h1 data-rv>I make brands<br><span>impossible</span> to ignore.</h1>
    <p data-rv>Hey, I'm Nova — a multidisciplinary designer crafting bold identities, websites and content for founders who refuse to be forgettable.</p>
    <div class="cf-hero-btns" data-rv><a class="cf-btn cf-btn-fill" href="#work">See the work</a><a class="cf-btn cf-btn-out" href="#contact">Let's talk</a></div>
    <div class="cf-hero-strip" data-rv><span>200+ projects</span><span>•</span><span>9 countries</span><span>•</span><span>5★ rated</span></div>
  </div>
</header>

<section id="services" class="cf-sec">
  <div class="cf-head" data-rv><span class="cf-kick">What I do</span><h2>Services</h2></div>
  <div class="cf-svc-grid">
    <div class="cf-svc" data-rv><span class="cf-svc-num">01</span><h3>Brand identity</h3><p>Logos, color systems, typography and brand guidelines that make you unmistakable.</p><div class="cf-svc-tags"><span>Logo</span><span>Guidelines</span><span>Voice</span></div></div>
    <div class="cf-svc" data-rv><span class="cf-svc-num">02</span><h3>Web design</h3><p>Conversion-focused landing pages and sites that look stunning and load fast.</p><div class="cf-svc-tags"><span>Landing</span><span>Webflow</span><span>UX</span></div></div>
    <div class="cf-svc" data-rv><span class="cf-svc-num">03</span><h3>Content &amp; social</h3><p>Scroll-stopping social kits, motion graphics and campaign visuals.</p><div class="cf-svc-tags"><span>Social</span><span>Motion</span><span>Ads</span></div></div>
  </div>
</section>

<section id="work" class="cf-sec cf-sec-dark">
  <div class="cf-head" data-rv><span class="cf-kick cf-kick-light">Portfolio</span><h2 class="cf-h2-light">Recent work</h2></div>
  <div class="cf-gallery">
    <a class="cf-g cf-g-tall" data-rv href="#" style="background:linear-gradient(135deg,#f43f5e,#fb923c)"><span class="cf-g-label">Aurora Coffee · Branding</span></a>
    <a class="cf-g" data-rv href="#" style="background:linear-gradient(135deg,#8b5cf6,#6366f1)"><span class="cf-g-label">Lumen App · UI</span></a>
    <a class="cf-g" data-rv href="#" style="background:linear-gradient(135deg,#06b6d4,#22d3ee)"><span class="cf-g-label">Drift Festival · Campaign</span></a>
    <a class="cf-g cf-g-wide" data-rv href="#" style="background:linear-gradient(135deg,#10b981,#84cc16)"><span class="cf-g-label">Verde Skincare · Packaging</span></a>
    <a class="cf-g" data-rv href="#" style="background:linear-gradient(135deg,#f59e0b,#ef4444)"><span class="cf-g-label">Pulse Gym · Web</span></a>
  </div>
</section>

<section id="process" class="cf-sec">
  <div class="cf-head" data-rv><span class="cf-kick">How it works</span><h2>The collaboration</h2></div>
  <div class="cf-process">
    <div class="cf-pstep" data-rv><b>1</b><h3>Discovery call</h3><p>We talk goals, audience and vibe. No jargon, just clarity.</p></div>
    <div class="cf-pstep" data-rv><b>2</b><h3>Concepts</h3><p>I present bold directions — you pick the one that feels right.</p></div>
    <div class="cf-pstep" data-rv><b>3</b><h3>Refine</h3><p>We polish together over focused revision rounds.</p></div>
    <div class="cf-pstep" data-rv><b>4</b><h3>Launch</h3><p>Final files, handoff and a celebration. You're ready to shine.</p></div>
  </div>
</section>

<section id="pricing" class="cf-sec cf-sec-soft">
  <div class="cf-head" data-rv><span class="cf-kick">Packages</span><h2>Simple pricing</h2></div>
  <div class="cf-prices">
    <div class="cf-price" data-rv><h3>Starter</h3><div class="cf-amt">€900</div><p class="cf-price-sub">Perfect for new founders</p><ul><li>Logo &amp; basic identity</li><li>Color &amp; type system</li><li>2 revision rounds</li><li>1-week delivery</li></ul><a class="cf-btn cf-btn-out cf-btn-block" href="#contact">Choose Starter</a></div>
    <div class="cf-price cf-price-pop" data-rv><span class="cf-pop-tag">Most popular</span><h3>Brand + Web</h3><div class="cf-amt">€2,400</div><p class="cf-price-sub">Full identity &amp; website</p><ul><li>Everything in Starter</li><li>Landing page design</li><li>Social media kit</li><li>4 revision rounds</li><li>Priority delivery</li></ul><a class="cf-btn cf-btn-fill cf-btn-block" href="#contact">Choose Brand + Web</a></div>
    <div class="cf-price" data-rv><h3>Retainer</h3><div class="cf-amt">€1,500<small>/mo</small></div><p class="cf-price-sub">Ongoing creative partner</p><ul><li>Monthly design hours</li><li>Social &amp; campaigns</li><li>Unlimited small tasks</li><li>Slack access</li></ul><a class="cf-btn cf-btn-out cf-btn-block" href="#contact">Choose Retainer</a></div>
  </div>
</section>

<section id="testimonials" class="cf-sec">
  <div class="cf-head" data-rv><span class="cf-kick">Happy clients</span><h2>Words of praise</h2></div>
  <div class="cf-tests">
    <figure class="cf-test" data-rv><div class="cf-stars">★★★★★</div><blockquote>"Nova gave our coffee brand a personality people line up for. Sales doubled in three months."</blockquote><figcaption><span class="cf-av" style="background:#f43f5e">MA</span><div><b>Mia Anderson</b><em>Founder, Aurora Coffee</em></div></figcaption></figure>
    <figure class="cf-test" data-rv><div class="cf-stars">★★★★★</div><blockquote>"Fast, fearless and ridiculously talented. The new site converts twice as well as the old one."</blockquote><figcaption><span class="cf-av" style="background:#8b5cf6">JK</span><div><b>Jonas Klein</b><em>CEO, Lumen App</em></div></figcaption></figure>
    <figure class="cf-test" data-rv><div class="cf-stars">★★★★★</div><blockquote>"Working with Nova feels like having a creative co-founder. Endlessly inspiring."</blockquote><figcaption><span class="cf-av" style="background:#06b6d4">SP</span><div><b>Sara Popa</b><em>Marketing, Drift</em></div></figcaption></figure>
  </div>
</section>

<section id="faq" class="cf-sec cf-sec-soft">
  <div class="cf-head" data-rv><span class="cf-kick">Questions</span><h2>FAQ</h2></div>
  <div class="cf-faq" data-rv>
    <details class="cf-q" open><summary>How long does a project take?</summary><p>Most brand projects take 1–3 weeks; full brand + web around 4–6 weeks. I'll give you an exact timeline after our discovery call.</p></details>
    <details class="cf-q"><summary>Do you work with clients abroad?</summary><p>Always — I work remotely with clients across 9 countries. Time zones have never been a problem.</p></details>
    <details class="cf-q"><summary>What do you need from me to start?</summary><p>A short brief, any existing brand assets, and examples of work you love. We refine everything together on the call.</p></details>
    <details class="cf-q"><summary>Can I pay in installments?</summary><p>Yes. Larger projects are split 50% to start and 50% on delivery, with retainers billed monthly.</p></details>
  </div>
</section>

<section id="contact" class="cf-contact" data-rv>
  <div class="cf-contact-inner">
    <h2>Ready to stand out?</h2>
    <p>Tell me about your project — I'll get back to you within a day.</p>
    <form class="cf-form" onsubmit="return false">
      <div class="cf-row"><input type="text" placeholder="Your name"><input type="email" placeholder="Email"></div>
      <textarea rows="3" placeholder="What are you building?"></textarea>
      <button class="cf-btn cf-btn-fill cf-btn-block">Send the brief →</button>
    </form>
  </div>
</section>

<footer class="cf-foot">
  <div class="cf-foot-inner"><a class="cf-brand" href="#top">✺ Nova Reyes</a><div class="cf-social"><a href="#">Instagram</a><a href="#">Behance</a><a href="#">Dribbble</a><a href="#">TikTok</a></div></div>
  <div class="cf-foot-bottom"><span>© 2026 Nova Reyes · Creative freelancer</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:#fffdf7;color:#1a1625;font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;overflow-x:hidden;line-height:1.6}
a{text-decoration:none;color:inherit}
.cf-btn{display:inline-block;padding:13px 26px;border-radius:14px;font-weight:700;font-size:.94rem;cursor:pointer;border:0;transition:transform .15s ease,box-shadow .15s ease}
.cf-btn-fill{background:#1a1625;color:#fff}.cf-btn-fill:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(26,22,37,.3)}
.cf-btn-out{border:2px solid #1a1625;color:#1a1625}.cf-btn-out:hover{background:#1a1625;color:#fff}
.cf-btn-block{width:100%;text-align:center}
.cf-kick{font-size:.8rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#f43f5e}
.cf-kick-light{color:#fb7185}
.cf-brand{font-weight:800;font-size:1.15rem}
.cf-nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:16px 34px;background:rgba(255,253,247,.82);backdrop-filter:blur(12px)}
.cf-links{display:flex;gap:26px}.cf-links a{color:#5d5670;font-size:.9rem;font-weight:500}.cf-links a:hover{color:#f43f5e}
.cf-nav-cta{background:#1a1625;color:#fff;padding:9px 20px;border-radius:12px;font-size:.88rem;font-weight:700}
.cf-hero{position:relative;padding:150px 34px 90px;text-align:center;overflow:hidden}
.cf-blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;z-index:0}
.cf-blob1{width:420px;height:420px;background:#fb923c;top:-120px;left:-80px}
.cf-blob2{width:380px;height:380px;background:#a78bfa;top:40px;right:-100px}
.cf-hero-inner{position:relative;max-width:780px;margin:0 auto;z-index:1}
.cf-tag{display:inline-block;background:#fff;border:2px solid #1a1625;border-radius:999px;padding:7px 18px;font-size:.84rem;font-weight:700;margin-bottom:24px}
.cf-hero h1{font-size:clamp(2.8rem,8vw,5.4rem);font-weight:900;letter-spacing:-.04em;line-height:.98;margin:0 0 20px}
.cf-hero h1 span{background:linear-gradient(120deg,#f43f5e,#fb923c);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic}
.cf-hero p{color:#5d5670;font-size:1.12rem;max-width:560px;margin:0 auto 28px}
.cf-hero-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cf-hero-strip{margin-top:34px;display:flex;gap:12px;justify-content:center;color:#8d8599;font-weight:700;font-size:.9rem}
.cf-sec{max-width:1120px;margin:0 auto;padding:75px 34px}
.cf-sec-dark{background:#1a1625;border-radius:36px;margin:30px auto;max-width:1180px}
.cf-sec-soft{background:#fbf3ee;border-radius:36px;margin:30px auto;max-width:1180px}
.cf-head{text-align:center;margin-bottom:44px}
.cf-head h2{font-size:clamp(2rem,5vw,3rem);font-weight:900;letter-spacing:-.03em;margin:8px 0 0}
.cf-h2-light{color:#fff}
.cf-svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cf-svc{background:#fff;border:2px solid #1a1625;border-radius:22px;padding:28px;transition:.2s}
.cf-svc:hover{transform:translate(-4px,-4px);box-shadow:8px 8px 0 #1a1625}
.cf-svc-num{font-size:.9rem;font-weight:800;color:#f43f5e}
.cf-svc h3{font-size:1.4rem;font-weight:800;margin:8px 0 8px}
.cf-svc p{color:#5d5670;font-size:.94rem;margin:0 0 14px}
.cf-svc-tags{display:flex;flex-wrap:wrap;gap:7px}
.cf-svc-tags span{background:#fbf3ee;border-radius:999px;padding:5px 13px;font-size:.78rem;font-weight:600}
.cf-gallery{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:200px;gap:16px}
.cf-g{border-radius:20px;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:18px;transition:.25s}
.cf-g::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 50%,rgba(0,0,0,.45))}
.cf-g:hover{transform:scale(.98)}
.cf-g-tall{grid-row:span 2}.cf-g-wide{grid-column:span 2}
.cf-g-label{position:relative;color:#fff;font-weight:700;font-size:.95rem;z-index:1}
.cf-process{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cf-pstep{text-align:center;padding:20px}
.cf-pstep b{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#f43f5e,#fb923c);color:#fff;display:grid;place-items:center;font-size:1.3rem;font-weight:800;margin:0 auto 14px}
.cf-pstep h3{font-size:1.15rem;margin:0 0 6px}
.cf-pstep p{color:#5d5670;font-size:.9rem;margin:0}
.cf-prices{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.cf-price{background:#fff;border:2px solid #1a1625;border-radius:24px;padding:30px;transition:.2s}
.cf-price-pop{background:#1a1625;color:#fff;position:relative;transform:scale(1.03)}
.cf-pop-tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:#f43f5e;color:#fff;font-size:.74rem;font-weight:800;padding:4px 16px;border-radius:999px}
.cf-price h3{font-size:1.2rem;margin:0 0 6px}
.cf-amt{font-size:2.4rem;font-weight:900;letter-spacing:-.02em}.cf-amt small{font-size:1rem;font-weight:600;opacity:.6}
.cf-price-sub{color:#8d8599;font-size:.88rem;margin:0 0 18px}
.cf-price-pop .cf-price-sub{color:#b3acc0}
.cf-price ul{list-style:none;padding:0;margin:0 0 22px}
.cf-price li{padding:7px 0;font-size:.9rem;border-bottom:1px solid rgba(0,0,0,.07)}
.cf-price-pop li{border-color:rgba(255,255,255,.1)}
.cf-price li::before{content:"✓ ";color:#f43f5e;font-weight:800}
.cf-tests{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cf-test{margin:0;background:#fff;border:2px solid #1a1625;border-radius:22px;padding:26px;transition:.2s}
.cf-test:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 #f43f5e}
.cf-stars{color:#fbbf24;margin-bottom:12px;letter-spacing:2px}
.cf-test blockquote{margin:0 0 18px;font-size:.96rem;line-height:1.7;color:#3a3447}
.cf-test figcaption{display:flex;align-items:center;gap:12px}
.cf-av{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:.84rem}
.cf-test figcaption b{display:block;font-size:.92rem}.cf-test figcaption em{font-style:normal;color:#5d5670;font-size:.82rem}
.cf-faq{max-width:760px;margin:0 auto}
.cf-q{background:#fff;border:2px solid #1a1625;border-radius:16px;padding:18px 22px;margin-bottom:12px}
.cf-q summary{font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;font-size:1rem}
.cf-q summary::after{content:"+";font-size:1.4rem;font-weight:800;color:#f43f5e}
.cf-q[open] summary::after{content:"−"}
.cf-q p{margin:12px 0 0;color:#5d5670;font-size:.93rem}
.cf-contact{max-width:720px;margin:40px auto;padding:0 34px}
.cf-contact-inner{background:linear-gradient(135deg,#f43f5e,#fb923c);border-radius:30px;padding:54px 40px;text-align:center;color:#fff}
.cf-contact-inner h2{font-size:clamp(1.9rem,5vw,2.8rem);font-weight:900;letter-spacing:-.03em;margin:0 0 10px}
.cf-contact-inner p{margin:0 0 26px;opacity:.92}
.cf-form{max-width:480px;margin:0 auto}
.cf-row{display:flex;gap:12px;margin-bottom:12px}
.cf-form input,.cf-form textarea{width:100%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);border-radius:12px;padding:13px 16px;color:#fff;font-family:inherit;font-size:.92rem;outline:none;margin-bottom:12px}
.cf-form input::placeholder,.cf-form textarea::placeholder{color:rgba(255,255,255,.75)}
.cf-contact .cf-btn-fill{background:#fff;color:#1a1625}
.cf-foot{max-width:1120px;margin:0 auto;padding:40px 34px}
.cf-foot-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding-bottom:20px;border-bottom:2px solid #1a1625}
.cf-social{display:flex;gap:20px}.cf-social a{color:#5d5670;font-size:.9rem;font-weight:500}.cf-social a:hover{color:#f43f5e}
.cf-foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:18px;color:#8d8599;font-size:.85rem}
.cf-foot-bottom a{color:#f43f5e;font-weight:700}
@media(max-width:860px){.cf-svc-grid,.cf-process,.cf-prices,.cf-tests{grid-template-columns:1fr}.cf-gallery{grid-template-columns:1fr 1fr}.cf-price-pop{transform:none}}
@media(max-width:600px){.cf-links{display:none}.cf-gallery{grid-template-columns:1fr}.cf-g-tall,.cf-g-wide{grid-row:auto;grid-column:auto}.cf-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)});