| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width,initial-scale=1"> |
| <title>[Your Name / Your Practice Name] — Architecture Portfolio</title> |
| <meta name="description" content="Home page: who you are, what you build, and six selected projects — the first thing a hiring architect or a prospective client sees."> |
| <style>:root{--bg:#ffffff;--fg:#16181d;--accent:#1f3a5f;--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> |
| <link rel="canonical" href="https://getreadystack.com/tools/architecture-portfolio-template"></head> |
| <body> |
| <header class="nav"><div class="wrap"><a class="brand" href="index.html">[Your Name / Your Practice Name]</a><a href="index.html">Home</a><a href="work.html">Work</a><a href="project-01.html">Case study</a><a href="about.html">About</a><a href="cv.html">CV</a><a href="services.html">Services</a></div></header> |
| <main><section class="hero" id="hero"><div class="wrap"><h1>[Your Name] — architect, [City]</h1><p>[One sentence that says what kind of work you do and for whom. Example shape: 'Housing and adaptive reuse projects in [City] and [Region], from feasibility through to site.']</p><p>[A second sentence naming your current position: student, graduate seeking a placement, registered architect, or practice owner. Say the year you qualified or expect to.]</p><p><a class="btn" href="work.html">See selected work</a></p></div></section><section class="features" id="features"><div class="wrap"><h2>What you will find here</h2><div class="grid"><div class="card"><h3>Selected projects</h3><p>[Six projects, each with drawings, models and photographs. Say here how many you are showing and over what period, once you have chosen them.]</p></div><div class="card"><h3>One project in depth</h3><p>[A single case study taken from brief to detail, so a reviewer can see how you think — not only what you produced.]</p></div><div class="card"><h3>Curriculum vitae</h3><p>[Education, offices worked in, software, languages, registration status — written out on its own page and downloadable as a link you can send.]</p></div><div class="card"><h3>How to reach me</h3><p>[E-mail, phone and studio address, plus what to send if you want a fee proposal.]</p></div></div></div></section><section class="gallery" id="gallery"><div class="wrap"><h2>Selected work</h2><p>[Order these by how strongly they argue your case, not by date. A reviewer usually stops after three.]</p><div class="grid"><div class="card"><h3>[Project 01 title] — [City], [Year]</h3><p>[Programme, floor area and status in one line. Replace images/project-01.jpg with your own image.]</p></div><div class="card"><h3>[Project 02 title] — [City], [Year]</h3><p>[Programme, floor area and status in one line. Replace images/project-02.jpg with your own image.]</p></div><div class="card"><h3>[Project 03 title] — [City], [Year]</h3><p>[Programme, floor area and status in one line. Replace images/project-03.jpg with your own image.]</p></div><div class="card"><h3>[Project 04 title] — [City], [Year]</h3><p>[Programme, floor area and status in one line. Replace images/project-04.jpg with your own image.]</p></div><div class="card"><h3>[Project 05 title] — [City], [Year]</h3><p>[Programme, floor area and status in one line. Replace images/project-05.jpg with your own image.]</p></div><div class="card"><h3>[Project 06 title] — [City], [Year]</h3><p>[Competition entry, studio project or built work — say which. Replace images/project-06.jpg with your own image.]</p></div></div></div></section><section class="about" id="about"><div class="wrap"><h2>About the work</h2><p>[Two or three sentences on the thread that runs through the projects above: a material, a climate, a type of client, a way of drawing. Reviewers remember a position, not a list.]</p><p>[One sentence on what you are looking for right now — a placement, a collaboration, commissions of a certain size — so the reader knows what to do with the page.]</p><p><a class="btn" href="about.html">Read the full profile</a></p></div></section><section class="cta" id="cta"><div class="wrap"><h2>Available for [placements / commissions] from [Month Year]</h2><p>[Say plainly what you are open to and from when. A dated sentence gets answered; an open-ended one does not.]</p><p><a class="btn" href="contact.html">Get in touch</a></p></div></section></main> |
| <footer><div class="wrap">© [Year] [Your Name / Your Practice Name]. All project images and drawings are the property of their authors. Built from a self-contained HTML template — no tracking, no external requests.</div></footer> |
|
|
|
|
| <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">11 pages, 39 sections, 12 project cards and 24 image slots you own outright — no account, no monthly plan, opens offline from index.html.</p><p style="margin:0 0 1rem;color:#5b6b7c;font-size:.94rem">A rival template on this exact shelf sells at $49 right now — that is our measured comparison, and it is a recurring-free purchase: a hosted site builder keeps charging every month for as long as the site is live, while these file</p><a href="https://getreadystack.com/free?p=architecture-portfolio-template&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:"architecture-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 {"&":"&","<":"<",">":">",'"':"""}[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> |
|
|
