What is inside
Cipres Agency is a focused, high-contrast site for digital studios that sell through their work. All interface copy is centralized and type-checked, project entries generate their own detail pages, and every animation respects reduced-motion preferences.
No UI framework at all
Every component is an Astro file. The only client JavaScript is GSAP and the scripts that drive it, so there is no hydration to pay for.
A dark system with no loose colours
Nine colour tokens in the theme block, and not one arbitrary colour value in the source. Changing the brand red is one line.
Project case studies with a table of contents
Each project is a Markdown file with category, year, timeline and tags. The headings in the body build the index on the page.
Reveals you add with an attribute
Add data-anim to the markup and one shared library wires the animation. No per-component GSAP boilerplate to maintain.
One image pipeline
Every image is a local asset processed by sharp at build time, through a single component. Remote URLs are rejected before they ship.
A hardened contact form
Zod validation, honeypot, and rate limiting both per IP and globally through Upstash, so one visitor cannot drain your email quota.
Accessible interactions, not scripted ones
Real links instead of buttons that navigate, a focus trap in the menu, inert when it is hidden, and every animation honours reduced motion.
Copy that lives in one file
Every string, including alt text and aria-labels, is a typed key. An unknown one fails the build rather than rendering blank.
Typed content collections. You write a file, and the listing, the detail page, the feed and the sitemap pick it up on the next build.
src/content/projects/*.mdCase studies with category, finished year, timeline and tags. The h2 headings of the body become the page's table of contents.src/content/legals/*.mdTitle and description. The filename is the route, so terms.md is served at /terms.src/config/*.data.tsNavigation, social links, services, team, testimonials, FAQ, process steps and expertise cards.---
title: 'New Project'
description: 'What it was and what it achieved'
category: 'Branding'
image: '../../assets/images/projects/new-project.webp'
yearFinished: 2026
timeline: '6 weeks'
tags: ['Branding', 'Web Design']
link: 'https://client.com'
---The copy
src/config/labels.tsEvery user-facing string and all the SEO text, typed. Alt text and aria-labels count as copy here, because both get read out loud.
The typefaces
astro.config.mjsThree Google families self-hosted at build time — display, interface and body — each declared with the weights it actually uses.
The palette
src/styles/global.cssNine tokens cover background, raised sections, the brand red, text and form controls. Adding a colour means adding a token.
Both have a free tier, and the contact form needs them: the ZIP ships an .env.template with the variables to fill in.
A README written for this template, not copied between them, inside the ZIP. It covers:
Try any demo before you decide
The demos are the real templates, deployed. No signup, no email in the way.