How This Site Was Built

A technical walkthrough of the architecture, tooling, and decisions behind quartalis.co.uk.

The Stack

SvelteKit 5

Runes for reactivity, adapter-static for full SSG prerendering. View Transitions API for page navigation with circular reveal from click position.

Tailwind CSS v4

CSS-first configuration via @theme. Custom design system with 6-level surface hierarchy, teal/purple accent tokens, and glass-card components.

GSAP + ScrollTrigger

Hardware-accelerated scroll animations. Parallax backgrounds, counter reveals, staggered grid entrances. Memory-safe with automatic cleanup on navigation.

mdsvex + Shiki

31 blog posts in markdown with 14 language syntax highlighting via Shiki github-dark theme. Frontmatter metadata, tag filtering, reading time.

Interactive Features

Command Palette (Cmd+K) Fuzzy search across all pages, blog posts, and store products. AI fallback when no local results. Keyboard-driven navigation.
Terminal Mode (backtick) Full terminal emulator with 15+ commands. Command history, arrow key navigation, hidden easter eggs. Try typing "neofetch" or "fortune".
AI Chat Widget Connected to a self-hosted LLM via API. Streaming responses, quick questions, lead qualification. Runs on our own GPU.
Smart 404 Extracts keywords from the attempted URL, matches against known pages and products, shows suggestions. Falls back to Cmd+K hint.
Pricing Calculator Interactive sliders for project type, complexity, users, integrations. Real-time cost estimate with ROI calculation.
Newsletter Signup Brevo SMTP integration. Email validation, rate limiting, success state. Placed in footer and blog posts.

Art Generation Pipeline

All showcase art is generated using ComfyUI with SDXL on an RTX 5070 Ti 16GB. A Python batch script (generate_art_v3.py) queues unique prompts for every product, blog post, and page — approximately 100 images total. Each prompt is hand-crafted to match the product's concept. Post-processing converts to WebP for performance.

The art is never described as "AI-generated" on the public site. It's concept art produced by Quartalis.

SEO Architecture

JSON-LD Product schema
JSON-LD Article schema
JSON-LD LocalBusiness
BreadcrumbList on all routes
hreflang en-GB + x-default
Twitter Card + OG tags
Per-page OG images
Dynamic XML sitemap
70+ prerendered pages

Performance

~6s
Build Time
<30KB
JS Budget
Self-hosted
Fonts
Static HTML
Output

Deployment

build: npm run build → static HTML/CSS/JS

image: nginx:alpine Docker container

host: HP DL380 Gen9 (port 8084)

proxy: Cloudflare Tunnel → zero exposed ports

dns: Cloudflare zone with DKIM + DMARC + BIMI

analytics: Self-hosted Umami (no cookies)