Tessel Studio
The site you're reading this on — our own studio platform with a full client/admin backstage, multilingual MDX portfolio, and a hero scene that switches from late-night coding to a daytime skyline.
- Year
- 2026
- Role
- In-house build, end to end
- Client
- Tessel (in-house)
- Date
- Apr 25, 2026
Why we built it
Most studios put a Webflow or Framer site up and call it done. We didn't want a brochure — we wanted a working product that proves we can ship the kind of platform we sell. The site you're reading this on is the result. It's our portfolio, our backstage, and our staging ground for every technique that later goes into client work.
If a stack choice doesn't survive being our own daily driver, it doesn't end up in a client estimate.
What's inside
The public side is a trilingual marketing site (EN / UK / SV) with a hero that runs a night-time skyline scene with a live code editor by default and switches to a daytime sky with drifting clouds when the user picks the light theme. Below it: about, featured projects, services with pricing, guarantees, payment stages, FAQ, contact, testimonials. Everything lives behind next-intl with locale-prefixed routes, locale-aware SEO, and per-locale OpenGraph images generated at request time.
The portfolio reads from MDX files in src/content/projects/ — one frontmatter-validated file per project per locale, parsed with gray-matter and rendered with next-mdx-remote. Adding a new case is one PR with three .mdx files. The case you're reading right now lives at src/content/projects/tessel.en.mdx.
The backstage is what makes the site more than a brochure. Behind authentication there are two distinct surfaces:
- Client dashboard — a logged-in client can see the projects we're building for them, upload briefs, download deliverables, chat with us in-app, and get notified when status changes.
- Admin dashboard — overview with stats, projects management with file upload to Vercel Blob, contact requests inbox, users management with role changes, audit log of every administrative action, FAQ and testimonials editors, site settings, and a chat list across all client conversations.
Authentication is better-auth with credentials and Google OAuth, plus email verification, password reset, email-change confirmation, and email-confirmed account deletion. The deletion flow issues a one-time token, sends a confirmation link, and only nukes the user when they click it — no surprise deletions.