Aria Studio — Architecture Portfolio
An editorial architecture and interior-design studio portfolio with an oversized serif hero, a marquee discipline strip, a numbered project index with 3D tilt cards, an about section with stats, a bordered services grid, a process, an awards list, testimonials and a 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"><nav class="ar-nav" data-rv>
<a class="ar-brand" href="#top">ARIA<span>·</span>STUDIO</a>
<div class="ar-links"><a href="#projects">Projects</a><a href="#about">Studio</a><a href="#services">Services</a><a href="#awards">Awards</a><a href="#contact">Contact</a></div>
<a class="ar-nav-cta" href="#contact">Start a project</a>
</nav>
<header id="top" class="ar-hero">
<div class="ar-hero-line" data-rv>Architecture & Interior Design · Est. 2009</div>
<h1 data-rv>We shape<br><span>space, light</span><br>& quiet.</h1>
<div class="ar-hero-foot">
<p data-rv>Aria Studio is an award-winning architecture practice designing homes, cultural spaces and workplaces across Europe — where every line has a reason to exist.</p>
<a class="ar-hero-scroll" href="#projects" data-rv>↓ View projects</a>
</div>
</header>
<section class="ar-marquee" data-rv><div class="ar-mq"><span>RESIDENTIAL — CULTURAL — WORKPLACE — INTERIOR — URBAN — RESIDENTIAL — CULTURAL — WORKPLACE — INTERIOR — URBAN — </span><span>RESIDENTIAL — CULTURAL — WORKPLACE — INTERIOR — URBAN — RESIDENTIAL — CULTURAL — WORKPLACE — INTERIOR — URBAN — </span></div></section>
<section id="projects" class="ar-sec">
<div class="ar-head" data-rv><span class="ar-kick">Selected projects</span><h2>An index of work</h2></div>
<div class="ar-projects">
<a class="ar-proj" data-rv data-tilt href="#"><div class="ar-proj-art" style="background:linear-gradient(135deg,#d6cfc4,#a89d8c)"></div><div class="ar-proj-info"><span class="ar-num">01</span><div><h3>Vālodze House</h3><p>A timber-and-glass family home folded into a Latvian pine forest.</p></div><span class="ar-yr">2025 · Residential</span></div></a>
<a class="ar-proj" data-rv data-tilt href="#"><div class="ar-proj-art" style="background:linear-gradient(135deg,#c9bfae,#8f8473)"></div><div class="ar-proj-info"><span class="ar-num">02</span><div><h3>Riga Concert Hall</h3><p>An acoustically tuned cultural landmark on the riverfront.</p></div><span class="ar-yr">2024 · Cultural</span></div></a>
<a class="ar-proj" data-rv data-tilt href="#"><div class="ar-proj-art" style="background:linear-gradient(135deg,#cdc6ba,#9b9080)"></div><div class="ar-proj-info"><span class="ar-num">03</span><div><h3>Nordwind HQ</h3><p>A daylight-driven workplace for 400 people built around an atrium.</p></div><span class="ar-yr">2023 · Workplace</span></div></a>
<a class="ar-proj" data-rv data-tilt href="#"><div class="ar-proj-art" style="background:linear-gradient(135deg,#d2cabd,#a59a88)"></div><div class="ar-proj-info"><span class="ar-num">04</span><div><h3>Mara Apartments</h3><p>Forty-eight homes with shared gardens and a soft brick facade.</p></div><span class="ar-yr">2022 · Residential</span></div></a>
</div>
</section>
<section id="about" class="ar-about">
<div class="ar-about-grid">
<div class="ar-about-img" data-rv></div>
<div class="ar-about-text" data-rv>
<span class="ar-kick">The studio</span>
<h2>Design with restraint.</h2>
<p>Founded in 2009 by architect Ilze Bērziņa, Aria Studio is a team of twelve architects and interior designers who believe the best buildings disappear into the lives they hold.</p>
<p>We work slowly and deliberately, from the first sketch to the last detail, and we've been trusted with over 90 projects across nine countries.</p>
<div class="ar-about-stats">
<div data-count="90"><b>0</b><span>Projects delivered</span></div>
<div data-count="17"><b>0</b><span>Years in practice</span></div>
<div data-count="12"><b>0</b><span>Awards won</span></div>
</div>
</div>
</div>
</section>
<section id="services" class="ar-sec ar-sec-dark">
<div class="ar-head" data-rv><span class="ar-kick ar-kick-l">What we do</span><h2 class="ar-h2-l">Services</h2></div>
<div class="ar-svc">
<div class="ar-svc-item" data-rv><span class="ar-svc-n">01</span><h3>Architecture</h3><p>Full architectural design from concept and planning permission through to construction documents and site supervision.</p></div>
<div class="ar-svc-item" data-rv><span class="ar-svc-n">02</span><h3>Interior design</h3><p>Cohesive interiors — materials, lighting, joinery and furniture — designed as one with the building.</p></div>
<div class="ar-svc-item" data-rv><span class="ar-svc-n">03</span><h3>Urban & masterplanning</h3><p>Larger-scale thinking for neighbourhoods, campuses and public space that ages gracefully.</p></div>
<div class="ar-svc-item" data-rv><span class="ar-svc-n">04</span><h3>Consultation</h3><p>Feasibility studies, design reviews and expert advice for developers and private clients.</p></div>
</div>
</section>
<section id="process" class="ar-sec">
<div class="ar-head" data-rv><span class="ar-kick">How we work</span><h2>From sketch to keys</h2></div>
<div class="ar-process">
<div class="ar-pstep" data-rv><b>01</b><h3>Listen</h3><p>We start with your life, site and budget — not a style.</p></div>
<div class="ar-pstep" data-rv><b>02</b><h3>Sketch</h3><p>Hand drawings and models explore the idea before anything is fixed.</p></div>
<div class="ar-pstep" data-rv><b>03</b><h3>Refine</h3><p>We resolve every detail, material and junction with care.</p></div>
<div class="ar-pstep" data-rv><b>04</b><h3>Build</h3><p>We stay on site to protect the design through construction.</p></div>
</div>
</section>
<section id="awards" class="ar-sec ar-sec-soft">
<div class="ar-head" data-rv><span class="ar-kick">Recognition</span><h2>Awards & press</h2></div>
<div class="ar-awards">
<div class="ar-award" data-rv><b>2025</b><div><h4>Baltic Architecture Prize</h4><span>Vālodze House — Winner, Residential</span></div></div>
<div class="ar-award" data-rv><b>2024</b><div><h4>Mies van der Rohe Award</h4><span>Riga Concert Hall — Nominee</span></div></div>
<div class="ar-award" data-rv><b>2023</b><div><h4>Dezeen Awards</h4><span>Nordwind HQ — Workplace of the Year, shortlist</span></div></div>
<div class="ar-award" data-rv><b>2022</b><div><h4>AD Magazine</h4><span>Featured studio — "Quiet Modernism"</span></div></div>
</div>
</section>
<section id="testimonials" class="ar-sec">
<div class="ar-head" data-rv><span class="ar-kick">Client words</span><h2>What clients say</h2></div>
<div class="ar-tests">
<figure class="ar-test" data-rv><blockquote>"Aria gave us a home that feels inevitable — as if it had always been there. The light through the year is extraordinary."</blockquote><figcaption><span class="ar-av" style="background:#a89d8c">KV</span><div><b>Kārlis & Vita</b><em>Vālodze House owners</em></div></figcaption></figure>
<figure class="ar-test" data-rv><blockquote>"They balanced acoustics, budget and beauty without a single compromise we regret. A genuine pleasure to work with."</blockquote><figcaption><span class="ar-av" style="background:#8f8473">RC</span><div><b>Rita Caune</b><em>Director, Riga Concert Hall</em></div></figcaption></figure>
<figure class="ar-test" data-rv><blockquote>"Our people simply work better in this building. Aria understood culture as much as construction."</blockquote><figcaption><span class="ar-av" style="background:#9b9080">EL</span><div><b>Erik Lund</b><em>CEO, Nordwind</em></div></figcaption></figure>
</div>
</section>
<section id="contact" class="ar-contact" data-rv>
<div class="ar-contact-inner">
<div class="ar-contact-text"><span class="ar-kick ar-kick-l">Contact</span><h2>Let's build something lasting.</h2><p>Tell us about your site and ambitions — we'd love to hear from you.</p>
<ul class="ar-clist"><li><span>✉</span> studio@aria-architecture.com</li><li><span>⌖</span> Riga · Working across Europe</li><li><span>☎</span> +371 6700 0000</li></ul>
</div>
<form class="ar-form" onsubmit="return false">
<div class="ar-row"><input type="text" placeholder="Name"><input type="email" placeholder="Email"></div>
<input type="text" placeholder="Project location & type">
<textarea rows="3" placeholder="A few words about your project..."></textarea>
<button class="ar-btn ar-btn-block">Send enquiry</button>
</form>
</div>
</section>
<footer class="ar-foot">
<div class="ar-foot-inner"><a class="ar-brand" href="#top">ARIA<span>·</span>STUDIO</a><div class="ar-social"><a href="#">Instagram</a><a href="#">ArchDaily</a><a href="#">LinkedIn</a></div></div>
<div class="ar-foot-bottom"><span>© 2026 Aria Studio · Architecture & Interior Design</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:#f3f0ea;color:#1d1b17;font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;overflow-x:hidden;line-height:1.6}
a{text-decoration:none;color:inherit}
.ar-serif{font-family:Georgia,'Times New Roman',serif}
.ar-btn{display:inline-block;padding:14px 28px;border-radius:0;font-weight:600;font-size:.9rem;letter-spacing:.04em;cursor:pointer;border:0;background:#1d1b17;color:#f3f0ea;transition:.18s}
.ar-btn:hover{background:#8f8473}
.ar-btn-block{width:100%}
.ar-kick{font-size:.74rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#9b8c72}
.ar-kick-l{color:#c2b393}
.ar-brand{font-weight:700;letter-spacing:.22em;font-size:1rem}.ar-brand span{color:#9b8c72;margin:0 3px}
.ar-nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:18px 38px;background:rgba(243,240,234,.86);backdrop-filter:blur(12px);border-bottom:1px solid #e2dcd0}
.ar-links{display:flex;gap:30px}.ar-links a{color:#5d574b;font-size:.86rem;letter-spacing:.04em}.ar-links a:hover{color:#9b8c72}
.ar-nav-cta{border:1px solid #1d1b17;padding:9px 20px;font-size:.82rem;font-weight:600;transition:.18s}.ar-nav-cta:hover{background:#1d1b17;color:#f3f0ea}
.ar-hero{max-width:1200px;margin:0 auto;padding:160px 38px 70px}
.ar-hero-line{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:#9b8c72;margin-bottom:30px}
.ar-hero h1{font-family:Georgia,serif;font-size:clamp(3rem,11vw,8rem);font-weight:400;line-height:.96;letter-spacing:-.02em;margin:0 0 40px}
.ar-hero h1 span{font-style:italic;color:#9b8c72}
.ar-hero-foot{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end;border-top:1px solid #d8d1c4;padding-top:26px}
.ar-hero-foot p{color:#5d574b;font-size:1.05rem;max-width:480px;margin:0}
.ar-hero-scroll{font-size:.86rem;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;border-bottom:1px solid #1d1b17;padding-bottom:3px}
.ar-marquee{overflow:hidden;border-top:1px solid #d8d1c4;border-bottom:1px solid #d8d1c4;padding:16px 0;margin-top:40px}
.ar-mq{display:flex;white-space:nowrap;animation:arRoll 28s linear infinite;font-family:Georgia,serif;font-size:1.2rem;color:#9b8c72;letter-spacing:.05em}
@keyframes arRoll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ar-sec{max-width:1200px;margin:0 auto;padding:80px 38px}
.ar-sec-dark{background:#1d1b17;max-width:none}
.ar-sec-dark>.ar-head,.ar-sec-dark>div{max-width:1200px;margin-left:auto;margin-right:auto;padding-left:38px;padding-right:38px}
.ar-sec-soft{background:#ebe7df;max-width:none}
.ar-sec-soft>.ar-head,.ar-sec-soft>div{max-width:1200px;margin-left:auto;margin-right:auto;padding-left:38px;padding-right:38px}
.ar-head{margin-bottom:46px}
.ar-head h2{font-family:Georgia,serif;font-size:clamp(2rem,5vw,3.4rem);font-weight:400;letter-spacing:-.02em;margin:10px 0 0}
.ar-h2-l{color:#f3f0ea}
.ar-projects{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ar-proj{display:block;transition:transform .25s ease;transform-style:preserve-3d}
.ar-proj-art{height:340px;margin-bottom:18px;position:relative;overflow:hidden}
.ar-proj-art::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 20%,rgba(255,255,255,.3),transparent 55%)}
.ar-proj-info{display:flex;align-items:flex-start;gap:18px}
.ar-num{font-family:Georgia,serif;font-size:1.1rem;color:#9b8c72;padding-top:3px}
.ar-proj-info h3{font-family:Georgia,serif;font-size:1.5rem;font-weight:400;margin:0 0 4px}
.ar-proj-info p{color:#5d574b;font-size:.92rem;margin:0}
.ar-yr{margin-left:auto;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:#9b8c72;white-space:nowrap;padding-top:5px}
.ar-about{max-width:1200px;margin:0 auto;padding:60px 38px}
.ar-about-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:54px;align-items:center}
.ar-about-img{height:480px;background:linear-gradient(150deg,#c9bfae,#8f8473);position:relative}
.ar-about-img::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.35),transparent 50%)}
.ar-about-text h2{font-family:Georgia,serif;font-size:clamp(2rem,4vw,3rem);font-weight:400;margin:10px 0 16px}
.ar-about-text p{color:#5d574b;margin:0 0 16px}
.ar-about-stats{display:flex;gap:44px;margin-top:28px}
.ar-about-stats b{font-family:Georgia,serif;font-size:2.6rem;color:#9b8c72;display:block}
.ar-about-stats span{font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:#8a8275}
.ar-svc{display:grid;grid-template-columns:1fr 1fr;gap:0}
.ar-svc-item{padding:32px;border-top:1px solid #3a352c;border-left:1px solid #3a352c;transition:.22s}
.ar-svc-item:nth-child(odd){border-left:0}
.ar-svc-item:hover{background:#252219}
.ar-svc-n{font-family:Georgia,serif;color:#c2b393;font-size:1rem}
.ar-svc-item h3{font-family:Georgia,serif;font-size:1.6rem;font-weight:400;color:#f3f0ea;margin:8px 0 10px}
.ar-svc-item p{color:#b3aa98;font-size:.94rem;margin:0;max-width:440px}
.ar-process{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.ar-pstep{padding:28px 24px 28px 0;border-top:2px solid #1d1b17}
.ar-pstep b{font-family:Georgia,serif;font-size:1.4rem;color:#9b8c72}
.ar-pstep h3{font-family:Georgia,serif;font-size:1.3rem;font-weight:400;margin:12px 0 8px}
.ar-pstep p{color:#5d574b;font-size:.9rem;margin:0}
.ar-awards{display:grid;grid-template-columns:1fr 1fr;gap:0}
.ar-award{display:flex;gap:20px;padding:24px 0;border-bottom:1px solid #d8d1c4;align-items:baseline}
.ar-award:nth-child(odd){padding-right:30px}
.ar-award b{font-family:Georgia,serif;font-size:1.3rem;color:#9b8c72;min-width:60px}
.ar-award h4{margin:0 0 3px;font-size:1.1rem;font-weight:600}
.ar-award span{color:#5d574b;font-size:.88rem}
.ar-tests{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ar-test{margin:0;border-top:2px solid #1d1b17;padding-top:22px}
.ar-test blockquote{font-family:Georgia,serif;font-size:1.08rem;line-height:1.65;margin:0 0 22px;color:#2c281f}
.ar-test figcaption{display:flex;align-items:center;gap:12px}
.ar-av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:.84rem}
.ar-test figcaption b{display:block;font-size:.92rem}.ar-test figcaption em{font-style:normal;color:#8a8275;font-size:.82rem}
.ar-contact{max-width:1200px;margin:60px auto;padding:0 38px}
.ar-contact-inner{display:grid;grid-template-columns:1fr 1fr;gap:48px;background:#1d1b17;color:#f3f0ea;padding:56px}
.ar-contact-text h2{font-family:Georgia,serif;font-size:clamp(1.9rem,4vw,2.8rem);font-weight:400;margin:10px 0 14px}
.ar-contact-text p{color:#b3aa98;margin:0 0 24px}
.ar-clist{list-style:none;padding:0;margin:0}
.ar-clist li{display:flex;align-items:center;gap:12px;padding:8px 0;color:#d8d1c4}
.ar-clist span{color:#c2b393;width:20px;text-align:center}
.ar-row{display:flex;gap:12px}
.ar-form input,.ar-form textarea{width:100%;background:transparent;border:1px solid #3a352c;border-radius:0;padding:13px 15px;color:#f3f0ea;font-family:inherit;font-size:.92rem;outline:none;margin-bottom:12px}
.ar-form input:focus,.ar-form textarea:focus{border-color:#c2b393}
.ar-form input::placeholder,.ar-form textarea::placeholder{color:#7d7567}
.ar-contact .ar-btn{background:#c2b393;color:#1d1b17}.ar-contact .ar-btn:hover{background:#f3f0ea}
.ar-foot{max-width:1200px;margin:0 auto;padding:40px 38px}
.ar-foot-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding-bottom:20px;border-bottom:1px solid #d8d1c4}
.ar-social{display:flex;gap:24px}.ar-social a{color:#5d574b;font-size:.84rem;letter-spacing:.04em}.ar-social a:hover{color:#9b8c72}
.ar-foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:18px;color:#8a8275;font-size:.84rem}
.ar-foot-bottom a{color:#9b8c72;font-weight:600}
@media(max-width:860px){.ar-projects,.ar-about-grid,.ar-svc,.ar-awards,.ar-contact-inner{grid-template-columns:1fr}.ar-process{grid-template-columns:1fr 1fr}.ar-tests{grid-template-columns:1fr}.ar-svc-item{border-left:0}.ar-hero-foot{grid-template-columns:1fr}}
@media(max-width:600px){.ar-links{display:none}.ar-process{grid-template-columns:1fr}.ar-about-stats{gap:24px}.ar-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)});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)*-7;var ry=((e.clientX-r.left)/r.width-.5)*7;c.style.transform='perspective(900px) rotateX('+rx+'deg) rotateY('+ry+'deg) translateY(-4px)'});c.addEventListener('mouseleave',function(){c.style.transform='perspective(900px) rotateX(0) rotateY(0)'})});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 Aria Studio — Architecture 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:
- Oversized editorial serif hero
- Marquee discipline strip
- Numbered project index with 3D tilt
- Bordered services grid
- Awards & press list
- Studio stats, testimonials & contact
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 architecture-studio-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.