Aperture — Photography Portfolio

<nav class="ap-nav" data-rv><span class="ap-logo">Atlas<span>Lens</span></span><div class="ap-links d-none d-md-flex"><a href="#gallery">Gallery</a><a href="#about">About</a><a href="#book">Book</a></div></nav>
<header class="ap-hero"><div class="ap-hero-bg"></div><div class="ap-hero-in"><span data-rv class="ap-eye">Visual storytelling</span><h1 data-rv>Frames that<br>hold a feeling.</h1><p data-rv>Portfolio template by <strong>ConvertAtlas</strong> — light, type and composition, captured.</p><a href="#gallery" class="ap-btn" data-rv>View gallery</a></div></header>
<section id="gallery" class="ap-gallery">
  <div class="ap-masonry" id="apMason">
    <figure class="ap-shot" data-g="#e85d4a,#f3a14a" data-rv><div style="height:280px;background:linear-gradient(135deg,#e85d4a,#f3a14a)"></div><figcaption>Golden hour · Riga</figcaption></figure>
    <figure class="ap-shot" data-g="#2c3e50,#4ca1af" data-rv><div style="height:200px;background:linear-gradient(135deg,#2c3e50,#4ca1af)"></div><figcaption>Coastline · study</figcaption></figure>
    <figure class="ap-shot" data-g="#654ea3,#eaafc8" data-rv><div style="height:340px;background:linear-gradient(135deg,#654ea3,#eaafc8)"></div><figcaption>Dusk portrait</figcaption></figure>
    <figure class="ap-shot" data-g="#0f2027,#2c5364" data-rv><div style="height:230px;background:linear-gradient(135deg,#0f2027,#2c5364)"></div><figcaption>Architecture</figcaption></figure>
    <figure class="ap-shot" data-g="#ff7e5f,#feb47b" data-rv><div style="height:300px;background:linear-gradient(135deg,#ff7e5f,#feb47b)"></div><figcaption>Warmth series</figcaption></figure>
    <figure class="ap-shot" data-g="#1d976c,#93f9b9" data-rv><div style="height:210px;background:linear-gradient(135deg,#1d976c,#93f9b9)"></div><figcaption>Field notes</figcaption></figure>
  </div>
</section>
<section id="about" class="ap-about" data-rv><h2>About the lens</h2><p>This is a free photography portfolio template from <strong>ConvertAtlas</strong> — one of 18 ready-to-use designs alongside 60+ tools and 435+ UI snippets at convertatlas.org. Swap the gradients for your own images and ship.</p></section>
<section id="book" class="ap-book" data-rv><h2>Let's create</h2><a href="mailto:hello@convertatlas.org" class="ap-btn">hello@convertatlas.org</a></section>
<footer class="ap-foot">AtlasLens © 2026 · Built with <a href="https://convertatlas.org">ConvertAtlas</a></footer>
<div class="ap-lb" id="apLb"><span class="ap-lb-close">&times;</span><div class="ap-lb-img" id="apLbImg"></div></div>

*{box-sizing:border-box}body{margin:0;background:#111013;color:#f2ede6;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;overflow-x:hidden}
a{text-decoration:none}
.ap-nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:18px 30px;mix-blend-mode:difference}
.ap-logo{font-weight:800;letter-spacing:-.02em;color:#fff}.ap-logo span{color:#e85d4a}
.ap-links{gap:26px}.ap-links a{color:#fff;font-size:.88rem}
.ap-hero{position:relative;height:100vh;display:flex;align-items:center;padding:0 34px;overflow:hidden}
.ap-hero-bg{position:absolute;inset:0;background:linear-gradient(135deg,#e85d4a,#2c3e50);opacity:.85}
.ap-hero-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 30%,transparent,rgba(17,16,19,.6))}
.ap-hero-in{position:relative;max-width:680px}
.ap-eye{text-transform:uppercase;letter-spacing:.22em;font-size:.78rem;color:#ffd9c2}
.ap-hero h1{font-size:clamp(2.6rem,8vw,5.4rem);font-weight:800;line-height:1.02;letter-spacing:-.03em;margin:14px 0 16px;color:#fff}
.ap-hero p{font-size:1.1rem;color:#f2e3da;max-width:440px;margin:0 0 26px}
.ap-btn{display:inline-block;background:#fff;color:#111013;font-weight:700;padding:13px 28px;border-radius:999px;transition:.18s}
.ap-btn:hover{background:#e85d4a;color:#fff;transform:translateY(-2px)}
.ap-gallery{padding:70px 24px}
.ap-masonry{column-count:3;column-gap:18px;max-width:1100px;margin:0 auto}
@media(max-width:900px){.ap-masonry{column-count:2}}
@media(max-width:560px){.ap-masonry{column-count:1}.ap-links{display:none}}
.ap-shot{break-inside:avoid;margin:0 0 18px;cursor:pointer;border-radius:14px;overflow:hidden;position:relative}
.ap-shot div{transition:transform .4s}.ap-shot:hover div{transform:scale(1.05)}
.ap-shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:12px 16px;background:linear-gradient(transparent,rgba(0,0,0,.7));font-size:.85rem;font-weight:500}
.ap-about{max-width:680px;margin:0 auto;padding:70px 24px;text-align:center}
.ap-about h2{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;letter-spacing:-.02em;margin:0 0 14px}
.ap-about p{color:#bdb4ab;line-height:1.8;font-size:1.05rem}
.ap-book{text-align:center;padding:80px 24px}
.ap-book h2{font-size:clamp(2rem,5vw,3rem);font-weight:800;margin:0 0 22px}
.ap-foot{text-align:center;padding:28px;color:#857c73;font-size:.84rem;border-top:1px solid #221f24}.ap-foot a{color:#e85d4a}
.ap-lb{position:fixed;inset:0;background:rgba(8,7,9,.94);z-index:9999;display:none;align-items:center;justify-content:center;padding:30px}
.ap-lb.open{display:flex}
.ap-lb-img{width:min(80vw,700px);height:min(70vh,520px);border-radius:14px}
.ap-lb-close{position:absolute;top:20px;right:30px;font-size:2.4rem;color:#fff;cursor:pointer;line-height:1}
[data-rv]{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}[data-rv].in{opacity:1;transform:none}

document.querySelectorAll('.ap-shot').forEach(function(s){s.addEventListener('click',function(){var g=s.dataset.g.split(',');var lb=document.getElementById('apLb');document.getElementById('apLbImg').style.background='linear-gradient(135deg,'+g[0]+','+g[1]+')';lb.classList.add('open')})});
var lb=document.getElementById('apLb');
lb.addEventListener('click',function(e){if(e.target===lb||e.target.classList.contains('ap-lb-close'))lb.classList.remove('open')});
document.addEventListener('keydown',function(e){if(e.key==='Escape')lb.classList.remove('open')});
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-rv]').forEach(function(el,i){el.style.transitionDelay=(i%3*70)+'ms';io.observe(el)});