Xavier – Astro 7 Theme for Designers, Developers and Creative Freelancers

A grey, black and white portfolio framed by dashed rules, with rolling labels on every link and not one byte of framework JavaScript. Xavier is a complete personal portfolio theme built on Astro 7. Every page pre-renders to static HTML, so it loads instantly and deploys anywhere — and it ships zero framework JavaScript, just one small vanilla script. Live demo: https://xavier-astro.netlify.app

What's Inside

• 16 page templates — 30 static pages per build: home, about, services, service detail, case studies, project, blog, blog article, pricing, contact, style guide, licenses, instructions, changelog, 401 password protected and 404

• Three services as Markdown — tags, the line under the title, an icon, the headline that opens the page, three statistics, three pictures, what is included and what is delivered, and a "why it matters" body; each is a numbered card on the home page and the services page and a page of its own

• Seven projects as Markdown — every word on the page is a labelled field: the role and the year, the client, the industry and the services, the headline, the challenge and the solution, four headline results, a banner, a thumbnail and a two-picture gallery, and the three related projects shown under it; add one and it gets its own URL, and joins the grids where layout.json names it

• Seven blog articles as Markdown — an author with a portrait, a category, a date, a card picture and a banner, the three related posts shown under it, and a body in two parts written in a four-block grammar of headings, paragraphs, labelled bullet lists and full-width pictures; the blog page features one and prints the rest

• Motion that earns its keep — a loader that spells the name out letter by letter, five page-load sequences, 699 scroll reveals and 97 staggered group items, three scroll-linked timelines, 48 slot-machine counters, skill bars that fill to their percentage, a magnetic arrow and a portrait that tilts toward the pointer, 26 turning badges, a client-logo marquee, rolling hovers on 104 buttons and 420 text links, an FAQ accordion, a testimonial slider with Webflow's own algorithm transcribed, a sliding mobile menu and a smoothed wheel scroll — all in one 13 KB vanilla script, all respecting prefers-reduced-motion

• Edit content, not code — every service, project and article is one Markdown file with zod-validated frontmatter; what the pages feature is one JSON file

• Design-token system — 173 custom properties hold the whole grey scale, type scale and spacing steps, and /style-guide previews the type scale, the paragraph sizes, the palette and the buttons on one page

• Self-hosted fonts — Anton, DM Sans, Doto and Hanken Grotesk as woff2, no CDN requests

• TypeScript throughout, zod-validated content schema

Tech Stack

Astro 7 · Markdown content collections · TypeScript · the template's own CSS — no utility framework, no build-time CSS pipeline

Requirements

Node 22.12 or newer. npm ships with it. Nothing else to install.

Support

contact@kaziehsan.com