{
 "slug": "midblock",
 "name": "Midblock",
 "title": "Midblock, a free architecture website template",
 "kind": "Website for an architecture office, with projects, method, team and an enquiry form",
 "summary": "A one-page site for a small architecture office that builds on narrow city plots, with its buildings, method, a register of plots, team and an enquiry form. Flat pastel blocks and street photos that start as streaks of smeared colour and come into focus as you scroll; the projects pass sideways like a walk along a street.",
 "fits": [
  "architecture or design office",
  "architect's portfolio",
  "urban planning or housing studio",
  "construction or development company",
  "any studio showing projects one by one plus a team"
 ],
 "categories": [
  "Architecture and building"
 ],
 "tags": [
  "architecture",
  "architect",
  "portfolio",
  "studio",
  "projects",
  "real estate",
  "pastel",
  "flat",
  "photography",
  "gsap",
  "scrolltrigger",
  "lenis",
  "single-file"
 ],
 "language": "en",
 "size_kb": 93,
 "photos": 14,
 "fonts": [
  "Mozilla Headline",
  "Mozilla Text"
 ],
 "libraries": [
  "https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js",
  "https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js",
  "https://cdn.jsdelivr.net/npm/lenis@1.3.27/dist/lenis.min.js"
 ],
 "browsers": "Chrome and Edge 108+, Safari 15.4+, Firefox 101+ (it uses cascade layers, small/dynamic viewport units).",
 "sections": [
  {
   "key": "navigation",
   "id": "navigation",
   "heading": "",
   "about": "top bar: wordmark, four section links, Bring us a plot button; phone menu overlay"
  },
  {
   "key": "opening",
   "id": "opening",
   "heading": "We build in the gaps a city leaves.",
   "about": "first screen: headline on stepped blocks between slabs of a street photo, then a manifesto and three short facts"
  },
  {
   "key": "buildings",
   "id": "buildings",
   "heading": "Five buildings, none wider than a bus",
   "about": "projects walked sideways: five buildings at their relative plot widths, each with a plate"
  },
  {
   "key": "scan",
   "id": "scan",
   "heading": "We read a street for a whole day",
   "about": "method in four steps beside a photo crossed by a red scan line"
  },
  {
   "key": "register",
   "id": "register",
   "heading": "The gap register",
   "about": "table of entries with status badges (demo: a public list of plots)"
  },
  {
   "key": "colours",
   "id": "colours",
   "heading": "Borrowed colours",
   "about": "six full-width colour bands, each with a name, a sentence and where it is used"
  },
  {
   "key": "neighbours",
   "id": "neighbours",
   "heading": "What the neighbours said",
   "about": "three testimonials on blocks at stepped heights, with one photo"
  },
  {
   "key": "floors",
   "id": "floors",
   "heading": "9 Ropewalk, floor by floor",
   "about": "one project floor by floor: a building photo cut into seven slices beside a list of seven levels"
  },
  {
   "key": "studio",
   "id": "studio",
   "heading": "Five people, one long table",
   "about": "team: five portraits at stepped heights with names and roles"
  },
  {
   "key": "faq",
   "id": "faq",
   "heading": "Questions we hear on site",
   "about": "questions and answers (native <details>)"
  },
  {
   "key": "contact",
   "id": "contact",
   "heading": "Bring us a plot",
   "about": "enquiry form between two street-photo slabs, then address, phone, email and hours"
  },
  {
   "key": "footer",
   "id": "footer",
   "heading": "Pages",
   "about": "colour bands, width-filling MIDBLOCK wordmark, links, address, copyright and the Design: 8B credit"
  }
 ],
 "placeholders": [
  "og-image",
  "favicon",
  "form",
  "phone",
  "email"
 ],
 "lighthouse": null,
 "license": {
  "code": "MIT",
  "photos": "Unsplash License",
  "fonts": "SIL Open Font License 1.1"
 },
 "get": {
  "degit": "npx degit 8bsite/architecture-website-template my-site",
  "curl": [
   "curl -LO https://raw.githubusercontent.com/8bsite/architecture-website-template/main/index.html",
   "curl -LO https://raw.githubusercontent.com/8bsite/architecture-website-template/main/AGENTS.md",
   "curl -LO https://raw.githubusercontent.com/8bsite/architecture-website-template/main/LICENSE",
   "curl -LO https://raw.githubusercontent.com/8bsite/architecture-website-template/main/CREDITS.md"
  ],
  "agent_prompt": "Read AGENTS.md, then edit index.html. Use this template as the base for a site for <your architecture office or studio: what you design, where, your projects with photos, your team, how to get in touch>. Keep the layout, the motion and the single-file format; replace the brand name, copy, photos, project data, the register table, team, address, links and contacts, and recolour it through the CSS variables if needed."
 },
 "links": {
  "page": "https://8b.com/templates/midblock/",
  "md": "https://8b.com/templates/midblock.md",
  "json": "https://8b.com/templates/midblock.json",
  "demo": "https://8bsite.github.io/architecture-website-template/",
  "repo": "https://github.com/8bsite/architecture-website-template",
  "zip": "https://github.com/8bsite/architecture-website-template/archive/refs/heads/main.zip",
  "use": "https://github.com/new?template_name=architecture-website-template&template_owner=8bsite",
  "agents": "https://github.com/8bsite/architecture-website-template/blob/main/AGENTS.md",
  "credits": "https://github.com/8bsite/architecture-website-template/blob/main/CREDITS.md",
  "raw": {
   "index": "https://raw.githubusercontent.com/8bsite/architecture-website-template/main/index.html",
   "agents": "https://raw.githubusercontent.com/8bsite/architecture-website-template/main/AGENTS.md",
   "license": "https://raw.githubusercontent.com/8bsite/architecture-website-template/main/LICENSE",
   "credits": "https://raw.githubusercontent.com/8bsite/architecture-website-template/main/CREDITS.md"
  },
  "preview": "https://8b.com/templates/midblock/desktop.webp",
  "phone": "https://8b.com/templates/midblock/phone.webp",
  "clip": "https://8b.com/templates/midblock/scroll.mp4",
  "og": "https://8b.com/templates/midblock/og.jpg"
 },
 "github": {
  "repo": "8bsite/architecture-website-template",
  "template_repository": true,
  "topics": [
   "html-template",
   "landing-page",
   "website-template",
   "free-template",
   "architecture-website",
   "architecture-template",
   "architect-portfolio",
   "html5",
   "css",
   "gsap",
   "scrolltrigger",
   "scroll-animation",
   "lenis",
   "single-file",
   "no-build",
   "static-site",
   "mit-license",
   "vibe-coding",
   "claude-code",
   "ai-agents"
  ]
 },
 "made_by": {
  "name": "8B",
  "url": "https://8b.com/"
 }
}