Loading
Loading
00 /Self case study · 2026
A technical walkthrough of the website you are reading. Stack, architecture, motion budget, accessibility, SEO, and the honesty constraints we engineered around.
The brief
Most new studios launch a portfolio site and then hide behind it. We wanted the opposite: a site that worked as the first portfolio piece itself — every technical decision visible, every choice defensible, every craft commitment public.
The brief we set ourselves: a multilingual, accessible, sub-1s mobile site, built on the same stack we recommend to clients, with the kind of editorial design language we would never get to ship for someone else first.
Stack
Next.js 15 with the App Router for streaming, edge rendering, and per-page metadata. TypeScript end-to-end so the data layer is type-checked at compile time. Tailwind for the design system, with a custom token layer for the lime-on-ink palette. Framer Motion for the entrance choreography (no scroll-linked transforms — they killed LCP on mobile).
lucide-react for the icon set so the bundle stays under 200KB. No CMS dependency at launch — content lives in typed `.ts` files in `src/data/`, which keeps deploys atomic and removes a runtime database call from every page.
Multilingual
English, Hebrew, and Arabic — natively. The locale lives in `localStorage` and is set via a `LocaleProvider`, so visitors land in their last-used language without a URL change or a redirect. `lang` and `dir` are updated on the `<html>` element on every locale change.
Every UI string is keyed in `src/lib/i18n/dictionary.ts` as `Record<Locale, string>` — missing translations fall back to English. Long-form content (case studies, FAQs, insights) ships an `applyLocale()` deep-merge helper so localised overrides patch the source data rather than duplicate it.
Hebrew and Arabic glyph rendering required extra padding around `tracking-tightest` headlines so right-edge characters in italic Latin and start-edge characters in RTL scripts do not clip. Small detail, large quality difference.
Performance
Vercel-grade hosting, edge rendering for static pages, image optimisation via `next/image` where it matters most. The hero ambient backdrop is a low-opacity raster with a hard gradient overlay — costs ~12KB compressed. The grid background is a single CSS gradient.
Motion is staged carefully: entrance animations on first paint only, scroll-linked transforms removed after profiling showed they cost 250ms LCP on a throttled 4G mobile profile. Custom cursor is opt-in and skipped on touch devices.
Accessibility
Contrast ratios audited per component — `text-bone/55` minimum on `bg-ink-800` (4.5:1+). Focus states visible on every interactive element. Keyboard focus trap implemented on the mobile menu and the contact form success state.
Reduced-motion respected — every Framer entrance halves its duration when the system preference is set. Custom cursor disabled. Marquee animations pause.
Semantic structure: one `<h1>` per page, breadcrumbs as schema.org `BreadcrumbList`, FAQ blocks emit `FAQPage` JSON-LD, the process page emits `HowTo`. Search engines and screen readers see the same document.
SEO
`buildMetadata()` runs on every page — canonical URL, OpenGraph, Twitter card, robots policy, hreflang for the three locales. OG images are generated per-route via Next.js OG image generation.
JSON-LD scaffolding: `Organization` + `ProfessionalService` on the root layout, `BreadcrumbList` on nested routes, `Service` on each services page, `Article` on insights posts, `FAQPage` on FAQ blocks, `HowTo` on the process page.
Sitemap and robots.txt generated from a typed page registry — no orphaned URLs, no missing routes. RSS feed for the insights section.
Code of Work
Mahdius opened in 2026 with no published clients yet. Building a site that does not lie about that was harder than it sounds. Every "social proof" component (`TrustedBy`, `Testimonials`, `WorkPreview`) is wired to render only when its data is real — empty arrays mean the section is removed, not faked.
The Code of Work page at `/policies/code-of-work` documents our written commitments — IP transfer, milestone payments, cancel-anytime — and is linked from the global footer. It exists because trust is built by what you commit to publicly, not what you promise privately.
What we would do differently
Ship the self-case-study earlier. We launched the rest of the site first and only labelled the self-case as a portfolio piece in the second pass. Lesson: a new studio with no clients should publish its own build as its first case study on day one.
Start with a tighter motion budget. We over-engineered the hero on the first pass — scroll-linked transforms, parallax orbs, particle field — then stripped most of it back when Lighthouse Mobile failed at 2.5s LCP. Restraint first, ornament second.
Build the founding-clients page before the marketing site. The "we are new and taking founding clients" framing converts; we should have led with it instead of treating it as a supporting panel.
Source
The full source of mahdius.com is on GitHub.
Read the architecture, fork the patterns, file an issue if you spot something. Open-source is how we say what we will not put in a sales pitch.
github.com/mahdius-studioContact · Start a conversation
Founding-client pricing this quarter. Three slots remaining.
Fixed-scope proposal · You keep all IP · Milestone payments · NDA on request