Waida Studio
A designer's own website is the first piece of work a client sees, so it has to carry the taste it promises. Xavier opens with exactly that — a grey, black and white portfolio set in Anton and DM Sans, the designer's name in display type with the portrait tucked between the words, dashed rules and small decorative squares framing every section, rolling labels on every link, and a loader that spells the name out letter by letter before the home page settles. Built on the Next.js 16 App Router with React 19 and TypeScript in strict mode, it ships 16 page templates covering 30 fully static pages, with the projects, services and articles driven by MDX files you edit directly. No CMS or backend required.
Whether you are a freelance designer, a web developer, a motion designer or a small creative studio, Xavier gives you every page a portfolio needs — three service pages with what is included and delivered, seven project case studies with the challenge, the solution and four headline results each, seven full-length blog articles, a two-plan pricing page with a feature comparison, and a contact page with a labelled form. Content lives in files: add a project and it appears at its own URL and under the projects that point to it without touching a component, so you can launch in hours.
Tech Stack
Next.js 16 — App Router, every page prerendered to static HTML at build time
React 19 — server components throughout, with one small client island for the interaction layer
TypeScript — strict mode, `npm run typecheck` clean
Hand-crafted CSS — one plain stylesheet driven by CSS custom properties, no utility framework and no build-time CSS pipeline
Self-hosted webfonts — Anton, DM Sans, Doto and Hanken Grotesk as woff2, no third-party font requests at runtime
MDX content layer — gray-matter frontmatter with a Markdown parser that renders into the design's own markup
Zero animation libraries — no jQuery, no GSAP, no Lenis: the loader, the rolling labels, the scroll reveals, the scroll-linked principles and portrait, the slot-machine counters, the testimonial slider and the smooth wheel scroll are one TypeScript file
Included Pages and Templates
Core pages
Home with the "Ideas Into Visual" hero and its loader, the latest-work preview and client logo marquee, the about statement, four featured projects, the results panel with counters and a testimonial, the three services, the design-principles cards that ride through the sticky heading, the skill bars, the process, two pricing plans and a five-card testimonial slider
About with the "Xavier Beyond Pixels" hero, a statement read in letter by letter as you scroll, a banner that settles into place, the results and counters, a five-step experience timeline, the awards and the design principles
Pricing with two plans and a key-features comparison
Contact with a labelled enquiry form, the email, hours and phone
Services
Services index with the three services, the process and the FAQ, and 3 service pages: web design, web development and motion design, each with a headline, three statistics, a three-picture gallery, what is included and what is delivered
Projects
Case studies index with a featured project over a four-project grid, and 7 project pages: the role and year, the challenge and the solution, four headline results, a two-picture gallery, the client, industry, year and services, and three related projects
Blog
Blog index with a featured article over the grid, and 7 full-length articles on typography, branding, freelancing and the creative process, each with an author, a category, a date and three related posts
Utility pages
Style guide, instructions, licenses, changelog, a 401 password-protected page and a 404 page
16 page templates. 30 static pages.
Easy Content Editing
Everything you change lives in `src/content/`. Edit a file, rebuild, done.
`src/content/services/*.mdx` — the 3 services: the title, the tags, the line under the title, the icon, the headline, the three statistics, the gallery, what is included, what is delivered, and the "why it matters" paragraphs
`src/content/projects/*.mdx` — the 7 projects: the role and year, the client, industry and services, the headline, the challenge and the solution, the four results, the banner, the thumbnail, the gallery, and the three projects shown under each
`src/content/blog/*.mdx` — the 7 articles: the title, the author, the category, the date, the card and banner pictures, the body in its two parts, and the three posts shown under each
`src/content/layout.json` — which article the blog features, which project the case studies feature, and which four projects the home page and the case-studies grid show
Every card reads the item's own entry, so a retitled article is retitled on the blog index and under every related article at once — with no component to touch. Tags, statistics, results and lists print however many you give an item, and the service cards number themselves.
Article bodies are Markdown: headings, paragraphs, bulleted lists with bold labels and full-width pictures. A parser places each block inside the design's own markup, so the words stay editable and the layout stays exact. Reach past that grammar and the build stops and names the file, rather than rendering something the design has no styling for.
Theming is one file. Every colour, font, spacing step and type size is a CSS custom property in the `:root` block of `public/assets/css/styles.css`. Change a value there and it propagates across every page.
Verified Against the Original
All 30 pages were compared against the original template tag for tag, attribute for attribute and text run for text run — in the body and in the head — and every page lays out to the same height as the original at four widths. The stylesheet is the original, with one rule added so the style guide does not scroll sideways on narrow tablets, and every page was swept for horizontal overflow from 320 to 1920 pixels wide with the menu open. Every interaction was driven on both and leaves the same state behind. The header, the footer and three shared sections, and 937 copies of nine repeated primitives, are components that render the original markup exactly.
Performance and SEO
Every page prerendered as static HTML, ready for a CDN
Per-page title, description and Open Graph and Twitter card metadata
Absolute share-image URLs so link previews resolve
Self-hosted fonts with `font-display: swap` and zero third-party requests
Lazy-loaded imagery with responsive `srcset` sizes, the loader's mark eager
Semantic markup with one H1 per page, real buttons and landmarks
Keyboard-reachable menu, FAQ rows built on real buttons, a slider that announces its slide
Full `prefers-reduced-motion` support, and readable with JavaScript off
Deployment
Deploys to Vercel, Netlify, Cloudflare Pages or any static host. `npm run build` prerenders every page; there is no server, no database and no API to configure.
What You Get
The complete Next.js 16 project source
16 page templates covering 30 static pages
3 services, 7 projects and 7 articles as editable MDX
The original stylesheet and self-hosted webfonts
Full HTML documentation
Changelog and third-party license file
Requirements
Node.js 20 or newer
npm 10 or newer, or pnpm, yarn or bun