Prism — Animated Creative Portfolio

<nav class="pr-nav" data-reveal>
  <span class="pr-logo">CA<span>*</span></span>
  <div class="pr-links d-none d-md-flex"><a href="#work">Work</a><a href="#stack">Stack</a><a href="#contact">Contact</a></div>
  <a href="#contact" class="pr-cta" data-mag>Let's talk</a>
</nav>
<header class="pr-hero">
  <div class="pr-mesh"></div>
  <div class="pr-hero-inner">
    <span class="pr-badge" data-reveal><span class="pr-dot"></span>Available · Q3 2026</span>
    <h1 data-reveal>Creative developer<br>crafting <span id="prTyped"></span></h1>
    <p data-reveal>I'm the maker behind <strong>ConvertAtlas</strong> — a free toolkit of 60+ browser tools, 435+ UI snippets and 18 templates, built solo with a database-free PHP MVC.</p>
    <div class="pr-hero-btns" data-reveal>
      <a href="#work" class="pr-cta pr-cta-lg" data-mag>View work</a>
      <a href="https://convertatlas.org" class="pr-ghost" data-mag>convertatlas.org →</a>
    </div>
  </div>
  <div class="pr-scroll" data-reveal>scroll ↓</div>
</header>
<section class="pr-stats" data-reveal>
  <div class="pr-stat"><b data-count="60">0</b><span>Browser tools</span></div>
  <div class="pr-stat"><b data-count="435">0</b><span>UI snippets</span></div>
  <div class="pr-stat"><b data-count="18">0</b><span>Templates</span></div>
  <div class="pr-stat"><b data-count="500">0</b><span>Pages of content</span></div>
</section>
<section id="work" class="pr-sec">
  <div class="pr-sec-head" data-reveal><span class="pr-kicker">// selected work</span><h2>Things I've shipped</h2></div>
  <div class="pr-grid">
    <a href="https://convertatlas.org/en" class="pr-card" data-reveal data-tilt><div class="pr-card-art" style="--g:linear-gradient(135deg,#6a11cb,#2575fc)"></div><div class="pr-card-body"><span class="pr-tag">Toolkit</span><h3>ConvertAtlas Tools</h3><p>60+ converters &amp; utilities — JSON, Base64, regex, color, hashing. All client-side.</p></div></a>
    <a href="https://convertatlas.org/en/snippets" class="pr-card" data-reveal data-tilt><div class="pr-card-art" style="--g:linear-gradient(135deg,#11998e,#38ef7d)"></div><div class="pr-card-body"><span class="pr-tag">Library</span><h3>Atlas Snippets</h3><p>435+ Bootstrap 5 &amp; vanilla components with live sandboxed previews.</p></div></a>
    <a href="https://convertatlas.org/en/templates" class="pr-card" data-reveal data-tilt><div class="pr-card-art" style="--g:linear-gradient(135deg,#f7971e,#ec407a)"></div><div class="pr-card-body"><span class="pr-tag">Templates</span><h3>Atlas Templates</h3><p>Production-ready dashboards, logins and landing pages — single-file HTML.</p></div></a>
    <a href="https://convertatlas.org/en/guides" class="pr-card" data-reveal data-tilt><div class="pr-card-art" style="--g:linear-gradient(135deg,#0c8fc4,#5dd6ff)"></div><div class="pr-card-body"><span class="pr-tag">Content</span><h3>Guides &amp; Cheatsheets</h3><p>Practical, SEO-rich developer guides with full schema.org markup.</p></div></a>
  </div>
</section>
<section id="stack" class="pr-sec pr-sec-alt">
  <div class="pr-sec-head" data-reveal><span class="pr-kicker">// the stack</span><h2>Tools of the trade</h2></div>
  <div class="pr-chips" data-reveal><span>PHP</span><span>Vanilla JS</span><span>Bootstrap 5</span><span>ApexCharts</span><span>MySQL</span><span>Schema.org</span><span>FTP / cPanel</span><span>SEO</span><span>AdSense</span></div>
</section>
<section id="contact" class="pr-contact" data-reveal>
  <h2>Have an idea worth building?</h2>
  <p>Suggest a tool or template — the best ideas make it into ConvertAtlas.</p>
  <a href="mailto:hello@convertatlas.org" class="pr-cta pr-cta-lg" data-mag>hello@convertatlas.org</a>
</section>
<footer class="pr-foot">CA* © 2026 · Built with <a href="https://convertatlas.org">ConvertAtlas</a> · Developer Tools</footer>

*{box-sizing:border-box}
body{margin:0;background:#070912;color:#e7ecf6;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;overflow-x:hidden}
a{text-decoration:none}
.pr-nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:16px 28px;backdrop-filter:blur(10px);background:rgba(7,9,18,.6);border-bottom:1px solid rgba(255,255,255,.06)}
.pr-logo{font-weight:800;font-size:1.2rem;letter-spacing:-.02em}.pr-logo span{color:#7c5cff}
.pr-links{gap:28px}.pr-links a{color:#9aa6c4;font-size:.9rem;transition:.2s}.pr-links a:hover{color:#fff}
.pr-cta{background:linear-gradient(120deg,#7c5cff,#22d3ee);color:#06121f;font-weight:700;padding:9px 18px;border-radius:999px;font-size:.88rem;display:inline-block;transition:transform .15s ease}
.pr-cta-lg{padding:14px 30px;font-size:1rem}
.pr-ghost{border:1px solid rgba(255,255,255,.2);color:#e7ecf6;padding:14px 28px;border-radius:999px;font-weight:600;transition:.2s;display:inline-block}
.pr-ghost:hover{border-color:#22d3ee;color:#22d3ee}
.pr-hero{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px 24px 60px;overflow:hidden}
.pr-mesh{position:absolute;inset:-20%;background:
 radial-gradient(40% 40% at 20% 30%,rgba(124,92,255,.45),transparent 60%),
 radial-gradient(45% 45% at 80% 20%,rgba(34,211,238,.4),transparent 60%),
 radial-gradient(50% 50% at 60% 80%,rgba(236,64,122,.35),transparent 60%);
 filter:blur(40px);animation:prMesh 16s ease-in-out infinite alternate;z-index:0}
@keyframes prMesh{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-4%,3%) scale(1.08)}100%{transform:translate(3%,-3%) scale(1.04)}}
.pr-hero-inner{position:relative;z-index:1;max-width:760px}
.pr-badge{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);border-radius:999px;padding:7px 16px;font-size:.82rem;color:#c9d3ea;margin-bottom:22px}
.pr-dot{width:8px;height:8px;border-radius:50%;background:#34d399;box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:prPulse 2s infinite}
@keyframes prPulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.6)}70%{box-shadow:0 0 0 8px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
.pr-hero h1{font-size:clamp(2.4rem,6vw,4.4rem);font-weight:800;letter-spacing:-.035em;line-height:1.04;margin:0 0 18px}
#prTyped{background:linear-gradient(120deg,#7c5cff,#22d3ee);-webkit-background-clip:text;background-clip:text;color:transparent}
.pr-hero p{color:#9aa6c4;font-size:1.08rem;line-height:1.7;max-width:560px;margin:0 auto 30px}
.pr-hero-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.pr-scroll{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-size:.78rem;color:#6b779a;letter-spacing:.1em;z-index:1;animation:prFloat 2s ease-in-out infinite}
@keyframes prFloat{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}
.pr-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:900px;margin:0 auto;padding:50px 24px}
.pr-stat{text-align:center}.pr-stat b{display:block;font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;background:linear-gradient(120deg,#7c5cff,#22d3ee);-webkit-background-clip:text;background-clip:text;color:transparent}
.pr-stat span{color:#7e8aab;font-size:.86rem}
.pr-sec{max-width:1080px;margin:0 auto;padding:70px 24px}
.pr-sec-alt{background:linear-gradient(180deg,transparent,rgba(124,92,255,.05),transparent)}
.pr-sec-head{margin-bottom:34px}
.pr-kicker{font-family:ui-monospace,monospace;color:#22d3ee;font-size:.82rem}
.pr-sec-head h2{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;letter-spacing:-.03em;margin:6px 0 0}
.pr-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:760px){.pr-grid{grid-template-columns:1fr}.pr-stats{grid-template-columns:repeat(2,1fr)}.pr-links{display:none}}
.pr-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:20px;overflow:hidden;transition:transform .25s ease,border-color .25s ease;transform-style:preserve-3d}
.pr-card:hover{border-color:rgba(124,92,255,.5)}
.pr-card-art{height:170px;background:var(--g);position:relative}
.pr-card-art::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 20%,rgba(255,255,255,.25),transparent 50%)}
.pr-card-body{padding:22px}
.pr-tag{font-family:ui-monospace,monospace;font-size:.72rem;color:#22d3ee;text-transform:uppercase;letter-spacing:.1em}
.pr-card-body h3{font-size:1.25rem;font-weight:700;margin:6px 0 8px;color:#fff}
.pr-card-body p{color:#9aa6c4;font-size:.92rem;line-height:1.6;margin:0}
.pr-chips{display:flex;flex-wrap:wrap;gap:10px}
.pr-chips span{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);border-radius:999px;padding:9px 18px;font-size:.9rem;color:#c9d3ea;transition:.2s}
.pr-chips span:hover{border-color:#22d3ee;color:#22d3ee;transform:translateY(-2px)}
.pr-contact{text-align:center;padding:90px 24px;max-width:680px;margin:0 auto}
.pr-contact h2{font-size:clamp(2rem,5vw,3.2rem);font-weight:800;letter-spacing:-.03em;margin:0 0 12px}
.pr-contact p{color:#9aa6c4;margin:0 0 28px}
.pr-foot{text-align:center;padding:30px;color:#6b779a;font-size:.85rem;border-top:1px solid rgba(255,255,255,.06)}
.pr-foot a{color:#22d3ee}
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
[data-reveal].in{opacity:1;transform:none}

/* Scroll reveal */
var io=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target)}})},{threshold:.12});
document.querySelectorAll('[data-reveal]').forEach(function(el,i){el.style.transitionDelay=(i%4*60)+'ms';io.observe(el)});
/* Count-up */
function countUp(el){var t=+el.dataset.count,s=null;function step(ts){if(!s)s=ts;var p=Math.min((ts-s)/1400,1);el.textContent=Math.floor((1-Math.pow(1-p,3))*t)+(t>=100?'+':'');if(p<1)requestAnimationFrame(step)}requestAnimationFrame(step)}
var cio=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){countUp(e.target);cio.unobserve(e.target)}})},{threshold:.6});
document.querySelectorAll('[data-count]').forEach(function(el){cio.observe(el)});
/* Magnetic buttons */
document.querySelectorAll('[data-mag]').forEach(function(b){
  b.addEventListener('mousemove',function(e){var r=b.getBoundingClientRect();b.style.transform='translate('+((e.clientX-r.left-r.width/2)*.25)+'px,'+((e.clientY-r.top-r.height/2)*.35)+'px)'});
  b.addEventListener('mouseleave',function(){b.style.transform='translate(0,0)'});
});
/* Tilt cards */
document.querySelectorAll('[data-tilt]').forEach(function(c){
  c.addEventListener('mousemove',function(e){var r=c.getBoundingClientRect();var rx=((e.clientY-r.top)/r.height-.5)*-8;var ry=((e.clientX-r.left)/r.width-.5)*8;c.style.transform='perspective(800px) rotateX('+rx+'deg) rotateY('+ry+'deg) translateY(-4px)'});
  c.addEventListener('mouseleave',function(){c.style.transform='perspective(800px) rotateX(0) rotateY(0)'});
});
/* Typed headline */
var words=['developer tools.','UI snippets.','clean templates.','better workflows.'],ti=0,ci=0,del=false,tEl=document.getElementById('prTyped');
function type(){var w=words[ti];tEl.textContent=w.slice(0,ci);if(!del&&ci<w.length){ci++;setTimeout(type,75)}else if(del&&ci>0){ci--;setTimeout(type,40)}else{if(!del){del=true;setTimeout(type,1400)}else{del=false;ti=(ti+1)%words.length;setTimeout(type,200)}}}
if(tEl)type();