Xavier
Xavier is a bold, editorial personal portfolio template for designers, developers and creative freelancers. Case studies, services, a blog, pricing and contact across 30 pages, with large condensed display type, dashed rules and small rotating badges.
Designers and creative freelancers need a portfolio that sells their work before a single call is booked: a site that shows the projects, names the services, states the price and makes contact effortless, all with the polish a client expects from someone who designs for a living. Xavier is built for exactly that: a bold, editorial personal portfolio with the structure of a real studio site behind it.
Xavier is hand-coded in HTML, CSS and vanilla JavaScript. There is no framework, no build step, no jQuery and no animation library; every stylesheet, script, font and image is referenced from local folders, so the template works straight from a file open or any static host. The design tokens live in CSS custom properties, the motion is written by hand in one commented script, and every interactive control is a real button a keyboard can reach.
It suits independent designers, developers, motion designers, small creative studios and anyone who needs a confident personal site with project case studies, a services section, pricing and a blog, ready to edit in any text editor.
Designed for Creative Freelancers
The visual language is large condensed display type set against warm greys and white panels, with dashed rules, dotted year marks and small rotating badges giving every page a drafting-table rhythm. Oversized name lines, a portrait tucked into the hero headline and a running availability dot make it personal from the first screen; the dark principle cards, the frosted project overlays and the slot-machine statistics keep it feeling crafted rather than templated.
Motion is purposeful throughout: a short opening loader, staggered hero entrances, letter-by-letter rolling links and buttons, cards that ride through a sticky heading as you scroll, a banner that settles as it passes, numbers that roll into place and a testimonial slider that keeps itself moving until you reach for it. All of it respects the visitor's reduced-motion setting.
Key Features
- 30 hand-coded pages in plain HTML, CSS and vanilla JavaScript
- No framework, no build step, no jQuery, no GSAP or other library
- Self-hosted Anton, DM Sans, Doto and Hanken Grotesk webfonts
- Every interaction rebuilt by hand: loader, reveals, scrubs, counters, slider, FAQ, menu
- Real buttons, labelled links, ARIA states and a skip link on every page
- CSS custom properties for every colour, type size, spacing step and radius
- Fully responsive, with a dedicated mobile menu below 992px
- Seven project case studies, three service pages and seven blog articles
- Pricing plans, contact form and password-protected page demos
- Clean, commented source a buyer can read and extend
Included Pages
- Home
- About
- Services
- Service Details
- Projects
- Project Details
- Blog
- Blog Article
- Pricing
- Contact
- Style Guide
- Instructions
- Licenses
- Changelog
- 401 Password Protected
- 404 Not Found
Ideal For
- Freelance designers and developers
- Motion and interaction designers
- Small creative studios and solo agencies
- Brand and product designers presenting case studies
- Any professional who needs a personal portfolio with services and pricing
Performance & User Experience
With no framework and no third-party scripts, every page is a handful of local requests: one stylesheet, one script, the fonts and the images it shows. Pictures ship as AVIF and SVG with responsive sizes where the design needs them, and the home page's opening animation is CSS driven, so nothing waits on JavaScript to paint.
The menu, FAQ rows, slider arrows and forms are native controls with visible focus, the document has one heading outline per page, and the motion layer stands down entirely for visitors who prefer reduced motion. The result is a site that feels expensive and loads like a plain page.
Why Choose Xavier?
Xavier gives a creative freelancer the whole portfolio story in one coherent design, from the first impression to the pricing table, and ships it as source code anyone can own: readable HTML, a stylesheet organised in labelled sections, and a single script that explains every effect it drives. Edit the words, swap the pictures and publish.
Frequently Asked Questions
1. Can I use this template for client projects?
Yes. A template purchase is licensed to one person for an unlimited number of projects, your own and your clients' alike, with no per-site limit. What it does not allow is reselling or redistributing the template itself.
2. Do I need to know how to code to customize this template?
No for the Framer and Webflow versions: everything is editable in the visual editor, from text and images to colors, fonts and layouts. The HTML, Next.js and Astro versions are clean source code, made to be edited in your editor or with an AI coding assistant.
3. Is hosting included in the price?
No. The Framer and Webflow versions are hosted on those platforms and billed by them. The HTML, Next.js and Astro versions are source code you deploy wherever you like, for example Vercel, Netlify or your own server. The template price covers the design only.
4. How long does it take to customize this template?
Most customers ship a personalized version in 1–3 days. Simple branding and content changes take a few hours. Deeper customization with new sections typically takes a weekend. If you want you can also take our customization service.
