Directory Website Template
Demo brand: OPEN ROSTER · Freelance directory / talent index · 50 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this directory website template
A complete directory site: fifty built routes covering a filterable roster of twenty-four member profiles, eight discipline cohorts, a ten-entry journal, an eight-question FAQ database with its own permalinks, an about page, a working contact path, privacy and a 404.
The engineering spec sheet — bone-white stock, a single black ink, one signal red spent on capacity state and the call to action and nothing else. Every panel edge is a drawn two-pixel rule and every grid gap is ink. Archivo Black against JetBrains Mono, with Playfair italic used once a page where the sheet stops being a sheet.
The signature move is the capacity rail. A directory is decided by availability, so the next fifty-two weeks run down the right margin as ticks whose length is the fraction of the visible cohort still committed that week, with the crossing — the first week the cohort opens up — drawn in signal red. Filtering by discipline re-inks the rail, which makes the filter a capacity query rather than a list operation. The control is a member with no free capacity for the year: the rail runs solid, the profile reads CLOSED, and the enquiry button is simply not there.
The 50 pages you get
- Index
/ - The rail explained in three panels, the discipline index, the six people free soonest, latest journal entries and the FAQ preview.
- The roster
/roster/ - All twenty-four, sorted by who can start soonest. The discipline filter re-inks the margin rail and deep-links as ?d=<slug>.
- Twenty-four profiles
/roster/… - Each a full route: day rate, free hours per week, years active, base, notes, stack, languages, selected work, peers in the same discipline.
- Journal
/journal/ - A wired Markdown collection — drop a file in data/journal/ and it appears here, on the home page and in the sitemap.
- Ten worked articles
/journal/… - How to read a day rate, writing a brief a freelancer can quote, hiring for capacity, contract clauses, and six more. Written for the buyer, not for the crawler.
- FAQ database
/faq/ - Eight questions in an accordion, each with its own permalink and cross-links.
- Eight FAQ routes
/faq/… - Individually indexable, which is how a directory picks up long-tail search on its own model.
- About
/about/ - The premise, how the index works, and the discipline notes.
- Contact
/contact/ - Three routed desks plus a validating enquiry form that pre-fills from a profile CTA.
- Privacy
/privacy/ - A real route, clearly marked as template text to replace.
- 404
/404 - Designed, not default. Keeps the navigation.
What is in the build
- A fifty-two-week capacity rail fixed to the right margin on every route, re-inking live to whichever cohort is filtered
- A declared control: a member closed for the year renders a solid rail, reads CLOSED, and carries no enquiry CTA
- Per-member capacity strips under every avatar, so twenty-four cards differ by data rather than by photograph
- Availability stored as weeks-from-today rather than as dates, so the rail rolls forward with the calendar and a demo roster never goes stale
- Deep-linkable discipline filters (?d=motion) that survive a page share
- Schematic avatars rather than stock portraits — no likeness rights, no licence to renew, one treatment by construction
- Every image is AI-generated artwork included under the same licence as the code, credited in public/images/CREDITS.md
- Zero third-party requests, which is why the shipped Content-Security-Policy can be as tight as it is
- An enquiry form that validates in the browser and says plainly that nothing was sent until you wire an endpoint — it does not fake a submission
The design decision
Every template in this catalog is loud in exactly one channel and deliberately quiet in the other three. That single rule is what stops 62 different worlds reading as one design system in different paint.
- The world
- The engineering spec sheet. Bone-white stock, one black ink, one signal red spent on capacity state and the CTA and nothing else. Every panel edge is a drawn 2px rule and every grid gap is ink.
- The mechanic
- "Sorted By When They Can Start": a directory is decided by availability, so the next 52 weeks run down the right margin as ticks whose length is the fraction of the VISIBLE cohort still committed that week, with the crossing — the first week the cohort opens — drawn in signal red. Filtering by discipline re-inks the rail, so the filter is a capacity query rather than a list operation; a profile narrows it to one person, and each card carries the same reading as a strip under the avatar.
- Loud channel
- Moving set-piece
- Imagery. Schematic plate, not portrait
- Type & palette
- Archivo Black · JetBrains Mono
-
#F4F4F0#050505#E61919 - The control case
- A member with zero free capacity for the year renders the rail fully solid, reads CLOSED, and carries no enquiry CTA — the mechanic has to be able to say no.
Who it is for
Built for anyone running an index of people rather than a portfolio of one: a freelance or talent directory, an agency bench page, a co-operative or collective roster, a professional association member list, a regional creative index. It suits a directory that wants to lead with availability and published rates rather than broker the conversation. If you are selling one person rather than many, the portfolio build is the sibling; for a studio of employees, creative-agency.
Under the hood
- Astro 7 · static output, zero client framework
- Tailwind 4 · one @theme block holds the palette
- MDX content collections for the blog
- GSAP + Lenis for the scroll work, reduced-motion aware
- Self-hosted woff2 — no Google Fonts request
- Sitemap, canonicals and per-route meta wired
- Vitest + Playwright suites in the repository
- Zero third-party requests · strict CSP-ready
How to get started
- 01 Accept the repository invite and clone it.
- 02 Run
npm install, thennpm run dev. - 03 Replace the content in
src/data/with your own — that is where the brand, the copy and every list live. - 04 Swap the images in
public/images/and the palette in the@themeblock. - 05 Run
npm run buildand deploydist/anywhere static.
Questions
Is the availability data live, or do I have to keep editing dates?
Each member carries bookedWeeks — how many weeks from today they are committed for — rather than a fixed date. The rail computes from that against the current week, so it rolls forward on its own and a roster you set up in March still reads correctly in September. You update a number when someone books work, not a calendar.
Twenty-four people share three avatar images. Is that a placeholder?
It is the design. They are schematic wireframe plates, not portraits, which keeps the whole roster on one visual treatment by construction, ships no likeness rights, and reads as an anonymised index. What differentiates the cards is the capacity strip under each one, which is generated from that person's own data. Swap in real photographs if you prefer — the note in CREDITS.md explains what to grade them to.
Does the discipline filter work without JavaScript?
The roster is fully server-rendered, so every one of the twenty-four cards and all fifty routes are in the HTML and indexable with scripting off. The filter and the rail re-inking are the progressive layer on top.
How hard is it to change the number of people?
One array in data/roster-data.ts. The counts on the home page, the about page, the filter chips and the rail all derive from it, so adding a fortieth member or cutting to twelve is an edit to that file alone.
Can I use it as an agency bench page rather than a public directory?
That is arguably the stronger use. The same mechanic answers "who on our team is free in March" for a client, and the commission and application copy on the about and FAQ pages is the part you would rewrite.
What exactly do I get for free?
Access to a private GitHub repository holding the complete Astro source of this template — every route you see in the preview, the content model, the images and the tests. Updates arrive in that same repository.
How many sites can I build with one licence?
As many as you like, for yourself or for clients. The licence is per buyer, not per project. The one thing you may not do is resell or redistribute the source as a template, theme or starter kit.
Do I need to know Astro?
It helps, but the common case is editing content and colour. Content lives in typed objects under src/data, colour lives in one @theme block, and npm run dev shows the result. Deploying is a static folder — Cloudflare Pages, Netlify and Vercel all take it as-is.
Is anything loaded from a third party?
No. Fonts are self-hosted woff2, there is no analytics, no tag manager, no CDN script and no external CSS. The build ships static HTML under a strict Content-Security-Policy.
More professional services templates
HALLREN Counsel LLP
Corporate & litigation counsel
Loud
Moving set-piece
Sightline Capital
Financial advisory
Loud
Moving set-piece
WARDENBY
Estate agency / lettings
Loud
Imagery
Balsworth & Co.
Chartered accountancy practice
Loud
Display type
MARLEDGE FINANCIAL PLANNING
Financial planning & advice
Loud
Display type