🧩 Project Overview
Architecture portfolios have a specific problem: the work is large-format drawings and plan sets, not web images. This build handles that directly — PDF drawing sets render in-page rather than forcing a download, so a prospective client can look through a project the way it was actually produced.
The site is a single-page premium layout built on the Next.js App Router, designed around large visual work with the credibility signals a professional practice needs.
✨ Core Features
In-page PDF viewing — drawing sets and plan documents open inside the site via
react-pdf, no download required.One-page premium layout — hero, about, project grid, and contact in a single scroll.
Secure contact pipeline — server-side CAPTCHA validation and delivery through Resend, with the API key never exposed to the browser.
Full field validation — every field validated plus email format checking before send.
Content-editable structure — projects live in a typed array with category, title, description, button, and tags, documented for handoff.
Documented handoff — the README marks exactly which files carry profile, contact, footer, and placeholder content so the client can maintain it.
🖥️ Page Sections
Hero — full-bleed architectural render.
About — practice background and profile.
Projects — card grid, each supporting real images, plan previews, PDF cover thumbnails, or direct document links.
Contact — validated form with server-side CAPTCHA and Resend delivery.
🔧 Technical Notes
Next.js App Router, TypeScript, Tailwind CSS, react-pdf, Resend. The contact flow is split across components/Contact.tsx, app/api/contact/route.ts, lib/resend.ts, and lib/validateCaptcha.ts.
Category | Technology |
|---|---|
Framework | Next.js (App Router) |
Language | TypeScript |
Styling | Tailwind CSS |
Document viewing | react-pdf |
Email delivery | Resend |