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.