Fieldwork. Free architecture HTML & Astro template

About Fieldwork

Fieldwork is a six-page architecture and interiors template. Its white background, regular sans-serif typography, cobalt accents, unequal image columns and captioned project studies put the work first. The project index contains four illustrative studies, while Window House has a separate case-study page with an original schematic plan and design notes.

Best suited to: Small architecture and interiors practices that need a project portfolio, a useful case study and a direct enquiry route.

Desktop and mobile screenshots

Captured from version 1.0.0 on 29 October 2026. Open a screenshot to inspect the full page.

Choose your download

Both ZIPs contain the same 6-page design. Neither requires an account, subscription, or license key.

What’s in the design

• Home shows two differently sized project images with clear captions, a concise introduction, an original plan illustration and two further interior studies.
• The index contains four studies: one residential, one commercial and two interiors. Type filters update the visible set and announce the result count.
• Window House is the one complete separate case study, with its brief, design notes, scope/status facts and an original schematic SVG floor plan. The other three studies have notes within the project index.
• The image viewer uses a native modal dialog with Previous/Next buttons, arrow keys, Escape dismissal and focus restoration. It follows the currently filtered set.
• Studio describes an illustrative working process and areas of work. Contact validates the brief and prepares an email draft; no message-delivery backend is included.
• All fonts and responsive images are local. Content, navigation and full image links remain usable without JavaScript.

Verified page layouts

These 6 pages are included in both archives. Each link opens the live preview.

• Home ↗index.html
• Project index ↗projects.html
• Window House case study ↗project.html
• Studio ↗studio.html
• Contact ↗contact.html
• 404 ↗404.html

How the enquiry form works

The form validates required name, email and message fields, then prepares an encoded email-draft link. Nothing is sent or stored by the website. A visitor opens the draft in a configured email app, reviews it and sends it themselves. Without JavaScript a direct email link remains available.

The default recipient, [email protected], is reserved .example data and cannot receive mail. Replace it before launch. No appointment, quote or commission is confirmed. Direct delivery requires a separately configured and tested backend.

Set up the Astro edition

Extract the source ZIP and run these commands from its folder:

npm ci
npm run dev
npm run check
npm run build

The build produces a dist/ folder for static hosting. The source includes its shared template kit under vendor/template-kit, so it builds independently of our development workspace. Astro 7.4.4 and the Astro checker 0.9.12 are pinned; TypeScript 6.0.3 is the latest supported by that checker’s declared peer range.

Before you launch

• Choose HTML for direct file editing or Astro for shared layouts and source-driven content.
• Replace the fictional identity, contact address, project text and sample work with accurate information and properly licensed imagery.
• Edit src/site.ts for the four project studies and categories.
• Update src/images.json, responsive image variants, alt text and asset credits when replacing pictures. Preserve correct photographer attribution for any retained sample work.
• Replace the reserved .example recipient in src/site.ts, or every mailto link and form data-recipient in HTML. The form only prepares an email draft.
• Set PUBLIC_SITE_URL to your actual domain or folder URL, with a trailing slash, when building Astro. This generates canonical/social URLs, robots.txt and a five-page sitemap. Leave PUBLIC_PREVIEW unset for production.
• Upload the complete HTML folder or Astro dist/ contents. Configure the host to return 404.html with HTTP 404 status for unknown URLs.

A static portfolio with no CMS, cloud account, checkout, appointment system or message-delivery backend. Filtering and the viewer use progressive enhancement. The default enquiry workflow requires an email app. There is one standalone project detail page; three other studies have inline notes in the index.

License and assets

The original template code is released under the included MIT license. It permits personal and commercial use; retain the license notice when redistributing the code. Visible footer attribution is optional.

Images are by Spacejoy and Lance Anderson under the Unsplash License. The images are illustrative assets, not work completed by the fictional practice. The original plan drawing is MIT licensed; it does not document the photographed room and is not construction documentation. Public Sans uses the SIL Open Font License. Unsplash License. Full asset credits.

Release verification

Both release archives were extracted and inspected. The standalone source passed a clean npm ci, Astro check and production build outside our workspace. Its six HTML pages match the HTML edition byte for byte. All pages were checked at a 320px viewport with no horizontal document overflow. Local Lighthouse checks scored 98–100 for performance and 100 for automated accessibility on tested pages/devices; these are lab results, not a full accessibility certification.

Version 1.0.0, reviewed 29 October 2026. Live preview. Plain HTML checksum. Standalone Astro source checksum. Fieldwork is a fictional practice. Study names, briefs, dates and service descriptions are illustrative. The diagram is not to scale or for construction.