A rebuild of Quentin Fears' website that keeps the visual style of the current site (dark, editorial, image-forward, premium) while repositioning the content from "celebrity & personal stylist" to fashion creative leader, visual strategist, speaker, and host, per the repositioning brief.
The home page as it renders today. Photography and video are placed through a simple image-slot system (see ASSETS.md); any slot still without a file falls back to a labeled placeholder, so the layout stays intact at every stage of asset collection.
See PROPOSAL.md for the proposal (what stays, what changes, and why) and ASSETS.md for the image/media manifest.
The site is built with Astro and its content is edited through a Keystatic admin (both free and open source). The design is unchanged — Astro renders the same markup and reuses the same CSS/JS.
content/*.yaml The editable content (words + image paths), one file per page
keystatic.config.ts Content schema + the /keystatic admin UI
src/pages/*.astro Home, Work, Ideas, Speak, About, Contact (render the content)
src/layouts/BaseLayout.astro Shared <head>: SEO, Open Graph, JSON-LD, favicons
src/components/*.astro Header, Footer, Cta
public/assets/css/style.css Design system (self-contained, no external fonts)
public/assets/js/*.js Mobile nav, scroll reveal, gallery lightbox, footer year
public/assets/img/ Photos (see ASSETS.md); everything in public/ ships verbatim
dist/ Build output (git-ignored): the static site that deploys
See docs/astro-keystatic-migration.md for the architecture and rationale.
npm install # once
npm run dev # then open http://localhost:4321/keystaticThe admin has a form for every page: headlines, proof points, case studies,
testimonials, talk topics, galleries, the timeline, contact inquiry types, and the
per-page SEO text. Saving writes the content/*.yaml files; commit and push to
publish. You can also edit those YAML files directly.
Hosted admin (edit from a browser, no dev server): deploy the admin to a free
Netlify project (npm run build:admin) so a non-technical editor signs in with
GitHub and edits in forms — Save commits to the repo and the public site redeploys.
Setup is in docs/hosted-admin.md.
- Style continuity: near-black canvas, warm off-white ink, high-contrast fashion serif for display (Didone/Bodoni register via a resilient system stack), clean grotesque sans for UI, all-caps letter-spaced labels, and a restrained fuchsia accent.
- Self-contained: no external fonts, scripts, or CDNs — works offline and inside a strict CSP. Fonts degrade gracefully (Didot → Bodoni → Playfair → Georgia).
- Responsive & accessible: mobile nav, skip link, reduced-motion support, keyboard- friendly forms, semantic landmarks.
- Image slots: each
<img>reveals a labeled placeholder until the real file is added, so the site looks designed at every stage of asset collection.
npm run dev # http://localhost:4321 (site) and /keystatic (admin)
# or preview the production build:
npm run build && npm run previewTwo dependency-free checks keep pages, links, galleries, and SEO in sync. They run
against the build output (dist/):
npm run build # produces dist/
npm run validate # runs both checks on dist/
# or individually:
python3 tools/validate_site.py dist
python3 tools/seo_check.py distvalidate_site.py verifies internal links and anchors resolve, gallery keys match
their JSON, and no template boilerplate slipped in. seo_check.py verifies the SEO
invariants (title/description, canonical, Open Graph, JSON-LD, sitemap membership,
gate ↔ indexing coupling). Both default to dist/ when it exists. CI builds and runs
both on every push and pull request (see .github/workflows/ci.yml).
npm run build emits a static site to dist/ — deployable to any static host
(GitHub Pages, Netlify, Vercel, Cloudflare Pages). The Keystatic admin is a local
editing tool and is not part of the deployed site.
This repo is wired for GitHub Pages: .github/workflows/deploy.yml
builds and publishes dist/ on every push to main. The public site is
https://quentinfears.com; GitHub Pages publishes it at https://qafears.github.io/website/.
- Add real images to
assets/img/(seeASSETS.md), especially the leader-mode hero portrait. - Embed the two-minute speaking reel on the Speak page.
- Replace testimonial quotes with verbatim wording from the existing site.
- Have Quentin's manager/comms review the Walmart bio language.
- Set the contact form endpoint and update the contact email.
- Set the real domain in the
og:/ canonical / sitemap tags (https://quentinfears.com). If the site launches on a different domain, find-and-replacequentinfears.comacross the HTML,robots.txt, andsitemap.xml. - Flip indexing on at launch. The password gate has been removed and every page
ships
robots: index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1. - Submit
sitemap.xmlin Google Search Console and Bing Webmaster Tools after launch. - Optional: replace the generated
assets/img/og-cover.jpgshare card and the JSON-LDPerson.imagewith a real photo of Quentin once the leader-mode portrait exists.
Technical SEO is built in and self-contained (no external calls):
- Per page: unique
<title>+ meta description, canonical URL, Open Graph + Twitter Card tags, and arobotsdirective (index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1). - Structured data: JSON-LD on every page — a shared
Personentity (#person) plusWebSite,ProfilePage(about),ContactPage(contact),CollectionPage(work), andBreadcrumbListon subpages. - Social share card:
assets/img/og-cover.jpg(1200×630), generated from the brand palette. - Icons:
favicon.svg(scalable),favicon.ico,apple-touch-icon.png, and PWA icons viasite.webmanifest. - Crawl:
robots.txtpoints atsitemap.xml, which lists all six pages.
Everything is keyed to https://quentinfears.com; change that string if the domain differs.