index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>[Your name] — Architecture, [city]</title>
<meta name="description" content="Portfolio of [Your name], [architect or architectural designer] in [city]: selected projects, services, fees and contact.">
<style>:root{--bg:#ffffff;--fg:#16181d;--accent:#2f3b3f;--muted:#5b6270}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui, -apple-system, Segoe UI, Roboto, sans-serif;line-height:1.65}.wrap{max-width:1080px;margin:0 auto;padding:0 22px}header.nav{border-bottom:1px solid rgba(0,0,0,.08);position:sticky;top:0;background:var(--bg);z-index:9}header.nav .wrap{display:flex;gap:20px;align-items:center;padding-top:16px;padding-bottom:16px;flex-wrap:wrap}header.nav a{color:var(--fg);text-decoration:none;font-size:15px}header.nav a.brand{font-weight:700;font-size:18px;margin-right:auto}section{padding:64px 0;border-bottom:1px solid rgba(0,0,0,.05)}section.hero{padding:96px 0}h1{font-size:clamp(30px,5vw,52px);line-height:1.15;margin:0 0 18px}h2{font-size:clamp(22px,3vw,32px);margin:0 0 14px}h3{font-size:18px;margin:0 0 8px}p{color:var(--muted);margin:0 0 14px;max-width:62ch}.grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.card{border:1px solid rgba(0,0,0,.1);border-radius:14px;padding:22px}.btn{display:inline-block;background:var(--accent);color:#fff;padding:13px 24px;border-radius:10px;text-decoration:none;font-weight:600}footer{padding:40px 0;color:var(--muted);font-size:14px}@media(prefers-color-scheme:dark){:root{--bg:#101216;--fg:#eef1f5;--mu:#a7b0bd}.card{border-color:rgba(255,255,255,.14)}}</style>
<script data-grow-initializer="">!(function(){window.growMe||((window.growMe=function(e){window.growMe._.push(e);}),(window.growMe._=[]));var e=document.createElement("script");(e.type="text/javascript"),(e.src="https://faves.grow.me/main.js"),(e.defer=!0),e.setAttribute("data-grow-faves-site-id","U2l0ZTphZjljMzgyMC0yMmU5LTRhYjgtYTIxNS03OTRhMGY1N2ExYzM=");var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t);})();</script>
<!--yj-canon-s101--><link rel="canonical" href="https://getreadystack.com/tools/architect-portfolio-template"></head>
<body>
<header class="nav"><div class="wrap"><a class="brand" href="index.html">[Your name] · [Practice name]</a><a href="index.html">Home</a><a href="projects.html">Projects</a><a href="project-01.html">Case study</a><a href="about.html">Profile</a><a href="services.html">Services</a><a href="fees.html">Fees</a></div></header>
<main><!-- EDIT: heading -->
<section class="hero" id="hero"><div class="wrap"><h1>[Your name] — [architect / architectural designer], [city]</h1><!-- EDIT: text -->
<p>[One sentence that says what kind of work you do and for whom: 'Houses and retrofits for private clients in [region]' beats any adjective.]</p><!-- EDIT: text -->
<p>[Second line: your position now — practice founded in [year], or currently seeking a position in [type of office].]</p><p><a class="btn" href="projects.html">Selected projects</a></p></div></section><!-- EDIT: heading -->
<section class="features" id="features"><div class="wrap"><h2>How I work</h2><!-- EDIT: text -->
<p>Four statements a client can test against the projects below. Delete any you cannot demonstrate.</p><div class="grid"><div class="card"><h3>[The kind of brief I take]</h3><p>[Scale, budget band and building type you actually want more of. Naming it filters out the enquiries that waste both sides' time.]</p></div><div class="card"><h3>[Existing fabric or new build]</h3><p>[Say which you do most and what that means for a client: surveys, condition, consents, sequencing.]</p></div><div class="card"><h3>[How drawings become buildings]</h3><p>[Your working method: models, 1:20 details, site visits per week — describe what you do, not what you value.]</p></div><div class="card"><h3>[Consents and approvals]</h3><p>[Which permissions you handle yourself and which you coordinate with consultants. Be exact — clients ask this first.]</p></div></div></div></section><!-- EDIT: heading -->
<section class="services" id="services"><div class="wrap"><h2>What I can be appointed for</h2><!-- EDIT: text -->
<p>The short version. The full stage list and what is delivered at each stage is on the services page.</p><div class="grid"><div class="card"><h3>[Feasibility and brief]</h3><p>[What a client gets and roughly how long it takes.]</p></div><div class="card"><h3>[Design and permission]</h3><p>[Concept through the application you submit on their behalf.]</p></div><div class="card"><h3>[Technical design and tender]</h3><p>[Construction drawings, specification, tender comparison.]</p></div><div class="card"><h3>[On site]</h3><p>[Site inspections, contract administration, handover — say what you do and what you do not.]</p></div></div></div></section><!-- EDIT: heading -->
<section class="gallery" id="gallery"><div class="wrap"><h2>Selected work</h2><!-- EDIT: text -->
<p>Six tiles. Put the project that best matches the work you want next in the first position, not the newest one.</p><div class="grid"><div class="card"><h3>[Project name] — [place], [year]</h3><p>[Image placeholder — the single strongest photograph or drawing. One line: building type, area, status.]</p></div><div class="card"><h3>[Project name] — [place], [year]</h3><p>[Image placeholder. One line: building type, area, status.]</p></div><div class="card"><h3>[Project name] — [place], [year]</h3><p>[Image placeholder. One line: building type, area, status.]</p></div><div class="card"><h3>[Project name] — [place], [year]</h3><p>[Image placeholder. One line: building type, area, status.]</p></div><div class="card"><h3>[Competition entry] — [place], [year]</h3><p>[Image placeholder. Say plainly that it is unbuilt and name the result if there was one.]</p></div><div class="card"><h3>[Study or research project] — [year]</h3><p>[Image placeholder. Unbuilt work belongs here, clearly labelled.]</p></div></div></div></section><!-- EDIT: heading -->
<section class="about" id="about"><div class="wrap"><h2>Short profile</h2><!-- EDIT: text -->
<p>[Three sentences: where you studied, where you have worked, and what you are doing now.]</p><!-- EDIT: text -->
<p>[Registration line: entered on the [register name] under number [number], or 'not currently registered — practising as an architectural designer'. Write only what is true; the title is protected in many countries.]</p><!-- EDIT: text -->
<p>[Languages you work in, and the regions where you take commissions.]</p></div></section><!-- EDIT: heading -->
<section class="testimonial" id="testimonial"><div class="wrap"><h2>Clients and collaborators</h2><!-- EDIT: text -->
<p>Use real quotes only, with written permission from the person named. Do not compose your own.</p><div class="grid"><div class="card"><h3>[Client name or role], [project], [year]</h3><p>[Paste the quotation as they wrote it.]</p></div><div class="card"><h3>[Engineer or contractor], [project], [year]</h3><p>[Paste the quotation as they wrote it.]</p></div><div class="card"><h3>[Former employer or collaborator], [year]</h3><p>[Paste the quotation as they wrote it.]</p></div></div></div></section><!-- EDIT: heading -->
<section class="cta" id="cta"><div class="wrap"><h2>Have a site, a building or a brief?</h2><!-- EDIT: text -->
<p>Send the address, what you want to do and roughly when. I answer with whether it suits the studio and what the first stage would cost.</p><!-- EDIT: text -->
<p>[phone] · [email]</p><p><a class="btn" href="contact.html">Get in touch</a></p></div></section></main>
<footer><div class="wrap">© [year] [Your name] · [Street and number], [postcode] [city] · [phone] · [email] · [Registration: register name and number] · [VAT / company registration number]</div></footer>


<!--yj-share-s101--><div style="margin:28px 0 8px;text-align:center"><button id="yjcp" type="button" style="font:inherit;padding:10px 18px;border:1px solid #8884;border-radius:10px;background:transparent;cursor:pointer">Copy link</button></div><script>(function(){var b=document.getElementById("yjcp");if(!b)return;var t=b.textContent;b.addEventListener("click",function(){var u=location.href.split("#")[0];function d(){b.textContent="Link copied";setTimeout(function(){b.textContent=t;},1800);}if(navigator.clipboard&&navigator.clipboard.writeText){navigator.clipboard.writeText(u).then(d,function(){prompt("",u);});}else{prompt("",u);}});})();</script>
<section data-yj-cta="paid" style="margin:3rem auto;max-width:46rem;padding:1.5rem 1.25rem;border:1px solid #d8dee9;border-radius:12px;background:#fbfcfe;font:16px/1.6 system-ui,-apple-system,Segoe UI,sans-serif"><h2 style="margin:0 0 .5rem;font-size:1.25rem">Get the complete version <span class="yj-price">$49</span></h2><p style="margin:.25rem 0 1rem;color:#41505f">This page is the working piece. The full pack has everything below.</p><p style="margin:0 0 1rem;color:#41505f">9 pages, 57 ready-written sections and a 12-field project fact sheet (role, practice, client, year, area, credits) in plain HTML you own — one payment, instead of a portfolio platform that b</p><p style="margin:0 0 1rem;color:#5b6b7c;font-size:.94rem">Measured: a competing self-hosted portfolio template sells on this shelf at $49 today, and 66% of this shelf is paid. What a web designer charges to build the same nine pages varies too widely for us to have measured it, so we quo</p><a href="https://getreadystack.com/free?p=architect-portfolio-template&amp;lang=en" rel="nofollow" style="display:inline-block;padding:.7rem 1.3rem;border-radius:8px;background:#1b64f2;color:#fff;text-decoration:none;font-weight:600">Send it to me</a></section>

<script data-yj="yj-view-beacon">(function(){try{var p=location.pathname;var k='yjv:'+p;if(sessionStorage.getItem(k))return;sessionStorage.setItem(k,'1');fetch('/api/ev',{method:'POST',keepalive:true,headers:{'Content-Type':'application/json'},body:JSON.stringify({path:p,lang:"en"})}).catch(function(){});}catch(e){}})();</script>
<section class="yj-email-gate" style="max-width:46rem;margin:2.5rem auto;padding:1.25rem;border:1px solid rgba(140,150,165,.28);border-radius:10px;font:400 15px/1.5 system-ui,sans-serif"><b style="font-size:1.05rem">Want the full version?</b><div style="opacity:.75;margin:.35rem 0 .8rem">Enter your email and we send the download link.</div><div style="display:flex;gap:8px;flex-wrap:wrap"><input id="yjge" type="email" placeholder="you@example.com" style="flex:1;min-width:210px;padding:11px 13px;border:1px solid rgba(140,150,165,.34);border-radius:8px;background:rgba(255,255,255,.04);color:inherit"><button id="yjgb" style="padding:11px 18px;border-radius:8px;border:0;cursor:pointer;font:600 15px system-ui,sans-serif">Send it to me</button></div><div id="yjgo" hidden style="margin-top:.6rem;color:#5fbf9a">Sent. Check your inbox.</div><script>(function(){var b=document.getElementById("yjgb"),e=document.getElementById("yjge");if(!b||!e)return;b.addEventListener("click",function(){var v=e.value.trim();if(!/.+@.+\..+/.test(v))return;try{localStorage.setItem("yj_em","1");}catch(_){}fetch(location.origin+"/api/subscribe",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({email:v,slug:"architect-portfolio-template",lang:"en",source:"hub_gate"})}).catch(function(){}).then(function(){document.getElementById("yjgo").hidden=false;});});})();</script></section>
<div class="yj-home-find"><div class="yj-lgbar"><a href="/" class="yj-lg on">EN</a><a href="/de/" class="yj-lg">DE</a><a href="/ja/" class="yj-lg">JA</a><a href="/es/" class="yj-lg">ES</a><a href="/pt/" class="yj-lg">PT</a></div><section class="yj-find"><h2>Find a tool</h2><input id="yjq" type="search" autocomplete="off" placeholder="Type a product name, format or task"><div id="yjr"></div></section><style>.yj-lgbar{position:absolute;top:14px;right:18px;display:flex;gap:6px;z-index:60}.yj-lg{font:600 12px/1 system-ui,sans-serif;padding:6px 9px;border-radius:4px;text-decoration:none;color:#8b96a3;border:1px solid rgba(140,150,165,.28)}.yj-lg:hover{color:#e8eaed;border-color:rgba(160,175,195,.6)}.yj-lg.on{color:#0e1116;background:#cfd6de;border-color:#cfd6de}.yj-find{max-width:760px;margin:34px auto 8px;padding:0 20px}.yj-find h2{font:600 20px/1.3 system-ui,sans-serif;margin:0 0 10px}#yjq{width:100%;box-sizing:border-box;padding:13px 15px;font:400 15.5px system-ui,sans-serif;border:1px solid rgba(140,150,165,.34);border-radius:8px;background:rgba(255,255,255,.04);color:inherit}#yjq:focus{outline:none;border-color:#7FD1C4}#yjr{margin-top:10px;display:flex;flex-direction:column;gap:6px}#yjr a{display:flex;justify-content:space-between;gap:12px;padding:11px 14px;border:1px solid rgba(140,150,165,.22);border-radius:6px;text-decoration:none;font:400 14.5px/1.4 system-ui,sans-serif;color:inherit}#yjr a:hover{border-color:#7FD1C4}#yjr .pr{font:600 13px system-ui,sans-serif;color:#5fbf9a;white-space:nowrap}</style><script>(function(){var q=document.getElementById("yjq"),r=document.getElementById("yjr"),D=null;function load(){if(D)return Promise.resolve(D);return fetch("/search-index.json").then(function(x){return x.json();}).then(function(j){D=j;return j;}).catch(function(){D=[];return D;});}function esc(t){return String(t).replace(/[&<>"]/g,function(c){return {"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;"}[c];});}function run(){var v=q.value.trim().toLowerCase();if(v.length<2){r.innerHTML="";return;}load().then(function(j){var w=v.split(/\s+/),o=[];for(var i=0;i<j.length&&o.length<12;i++){var t=j[i].t.toLowerCase();var ok=true;for(var k=0;k<w.length;k++){if(t.indexOf(w[k])<0){ok=false;break;}}if(ok)o.push(j[i]);}r.innerHTML=o.length?o.map(function(x){return "<a href=\""+esc(x.u)+"\">"+"<span>"+esc(x.t)+"</span>"+(x.p?"<span class=\"pr\">$"+x.p+"</span>":"")+"</a>";}).join(""):"";});}q.addEventListener("input",run);q.addEventListener("focus",load);})();</script></div></body>
</html>