What is inside
Service Folio is built for an independent designer or developer who needs to show both work and thinking. Case studies and articles are validated content entries, the theme follows the visitor across pages, and the contact flow is ready for production rather than being a visual placeholder.
Light and dark, remembered
The theme is written before the first paint, persists in localStorage, follows the OS until you choose, and mirrors across tabs and back-button restores.
Work and articles, both in files
Case studies with a carousel and a hover image, and articles with topics and reading time. Markdown or MDX, validated on every build.
Centralised reveal presets
GSAP reveals defined once and reused, synchronised with Lenis smooth scrolling, and skipped entirely when the visitor asks for less motion.
A portfolio that reads from data
Experience, awards, testimonials, services and the about profile live in typed config files instead of being buried in components.
A contact form with real validation
Astro Actions and Zod on the server, honeypot, Upstash rate limiting and Resend delivery, with the messages themselves kept as copy.
Fonts tuned, not just loaded
Two families served locally with Latin subsets and explicit fallbacks, the variable one declared as a weight range so it emits one rule per style.
Images optimised at build time
Every image is a local asset handled by Astro Assets. External image URLs are deliberately not part of the workflow.
Discoverable out of the box
Canonical URLs, Open Graph, Twitter cards, sitemap, RSS and robots.txt, with only the contact route running on demand.
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/works/*.mdxCase studies with cover, optional carousel and hover images, tags, client and date. Only title, description, cover, tags and date are required.src/content/blogs/*.mdArticles with topics, date and reading time. They join the listing, the RSS feed and the sitemap.src/content/legals/*.mdTitle and description. The filename becomes the route slug.src/config/*.data.tsNavigation, social links, services, the about profile, experience, awards, testimonials and the contact form's select values.---
title: 'Project name'
description: 'Short project summary.'
coverImage: '../../assets/works/project.webp'
carouselImages:
- '../../assets/img-projects/detail.webp'
hoverImage: '../../assets/img-projects/hover.webp'
tags: ['Web Design', 'Development']
clientLink: 'https://example.com/'
date: 2026-01-01
client: 'Client name'
featured: true
---The copy
src/config/labels.tsInterface copy, SEO labels and the form's own validation messages, all in one typed file.
The typefaces
astro.config.mjsA display family and a variable mono body family, both self-hosted through Astro Fonts, with only what the first paint needs preloaded.
The two palettes
src/styles/global.cssLight and dark as custom properties on the same token names, exposed to Tailwind through a theme block and a dark variant.
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.