Skip to content
What I do

Six stops, one site.

From the first sketch to a live site: a look of its own, the structure, the code, the tools, speed and access, and the launch, all done by one person, so nothing gets lost between design and build.

First sketch
Stop 01 · Palette · type · themes

UI design and a design system

A look of its own, built as a small design system: a palette checked for contrast, a type scale, spacing, components and a light and a dark theme, so every new page fits without a designer.

What it holds
  • A palette checked for contrast
  • A type scale and spacing
  • Components for every state
  • A light and a dark theme
  • Made as code, not only pictures
Stop 02 · Sitemap · flows · wireframes

UX and structure

Who visits, what they came for and the shortest way there: a sitemap, the main user journeys and wireframes you can click through before anything is designed.

What it holds
  • Who visits, and what for
  • A sitemap
  • The main user journeys
  • Clickable wireframes
Stop 03 · Next.js · React · SEO

Websites

Multi-page websites in Next.js and React with clean addresses, structured data for search and AI answers, and pages that stay light.

What it holds
  • Pages for every screen size
  • Clean addresses and structured data
  • Static pages that load fast
  • A link preview for every page
Stop 04 · Dashboards · editors

Web apps and interactive tools

Dashboards, configurators, calculators and editors that run in the browser, like every tool on tools.benibix.com.

What it holds
  • Dashboards and editors
  • Calculators and configurators
  • Empty, loading and error states
  • Keyboard shortcuts
Stop 05 · WCAG · page weight

Accessible and fast

Keyboard and screen reader use, contrast to WCAG, and a weight budget per page that is checked on every build, not once before launch.

What it holds
  • Contrast to WCAG
  • Keyboard and screen reader use
  • A weight budget per page
  • Checked on every build
Stop 06 · Hosting · updates

Launch and care

Domain, hosting, search console and statistics without cookies set up, then new pages and updates as the site grows.

What it holds
  • Domain and hosting
  • Search console
  • Statistics without cookies
  • Updates as the site grows
your-site.comLive
Tools and technologies

What it is built with.

The languages, frameworks, databases, cloud, design tools, servers, checks and platforms I work with, from websites and apps to the films.

  • Languages

    • TypeScript
    • JavaScript
    • Python
    • C#
    • SQL
    • HTML
    • CSS
    • Bash

  • Front end

    • Next.js
    • React
    • Tailwind CSS 4
    • Modern CSS
    • SVG
    • esbuild
    • Static export

  • Back end and APIs

    • Node.js APIs
    • Python APIs
    • .NET
    • REST
    • GraphQL

  • Databases

    • PostgreSQL
    • SQL Server
    • Azure SQL
    • MySQL
    • MariaDB
    • MongoDB
    • Cosmos DB
    • Redis

  • Cloud and data

    • Azure
    • Azure Data Factory
    • Databricks
    • Apache Spark
    • Docker

  • Design system

    • Figma
    • Design tokens
    • One shared component kit
    • Light and dark themes
    • Container queries
    • Scroll-driven motion
    • Reduced-motion fallbacks

  • Servers and hosting

    • Linux
    • nginx
    • Brotli
    • Let's Encrypt
    • systemd

  • Monitoring

    • Prometheus
    • Grafana
    • Alertmanager
    • Blackbox exporter
    • Node exporter
    • Statistics without cookies

  • Quality and tests

    • Vitest
    • ESLint
    • Playwright
    • axe-core
    • Lighthouse
    • Page weight budgets
    • Link checks

  • Search and AI answers

    • Structured data (JSON-LD)
    • Open Graph
    • Sitemaps
    • llms.txt
    • IndexNow
    • Bing Webmaster Tools

  • Pictures and video

    • FFmpeg
    • Whisper subtitles
    • sharp
    • WebP
    • Code-made music
    • Light and dark cuts

  • Platforms

    • GitHub
    • YouTube
    • LinkedIn
    • Claude Code
    • Codex
    • Power BI
Questions

About the work.

Do you design and build, or only one of them?

Both, from the first sketch to the live site, so nothing gets lost between a design file and the code: the design system is written as code, and what is approved is what goes live.

Which technology do you use?

Mostly Next.js and React with TypeScript, built as static pages where possible, because they are fast, safe and cheap to host. The full list is under Tools and technologies on this page.

Do you build the back end too?

Yes, when an app needs one: APIs in Node.js, Python or .NET, REST or GraphQL, and databases such as PostgreSQL, SQL Server, MySQL, MongoDB or Cosmos DB, on Linux servers or Azure.

How do you make a site accessible?

Contrast checked to WCAG AA in light and dark, every control usable by keyboard and named for screen readers, and motion only for visitors whose settings allow it.

How do you keep pages fast?

Static pages where possible, fonts and pictures from the site's own server, no outside scripts on load, and a weight budget for every page that is checked on every build.

Do you build for search and AI answers?

Yes. Every page gets a clear title and description, structured data, a link preview and a place in the sitemap, and the site gets an llms.txt, so search engines and AI assistants can read what it is about.

Get in touch

Questions about the work?

A question about a style, feedback on this site, or an idea to share: I read every message and answer it myself.

Write to me