Aran Shayan

Colophon

How this site is built

This portfolio is a small product of its own: a fast public site, an admin panel with a writing CMS and an inbox, and the security and tooling around them. Built and maintained by me, end to end.

Lighthouse accessibility, desktop and mobile
100Lighthouse accessibility, desktop and mobile
Lighthouse performance on desktop
100Lighthouse performance on desktop
component libraries: every piece of the interface is built by hand
0component libraries: every piece of the interface is built by hand
factors to sign in to the admin: password and a time based code
2factors to sign in to the admin: password and a time based code

Architecture

one Next.js apprequestsessionon saveVisitorsany device, light or darkAdminpassword and 2FAPrerendered pagesstatic shell, cachedServeractions and streamingCache tagsexpire, then warm upDatabaseSQLite at the edge, DrizzleEmailown domain, ResendTelegraminstant alerts
Pages are prerendered and served from the edge; the server renders only what changes, reads and writes the database, and sends notifications. The admin is the same app behind a two-factor sign in.

Rendering

  • Partial prerendering: every public page is a static shell served from the edge, with only the changing parts streamed in.
  • Data is cached by tag. Saving in the admin expires exactly the pages that changed and visits them once, so the next visitor gets the new version.
  • Real 404 pages for unknown projects and services, styled error pages with a retry and a reference that matches the server log.

Motion

  • The particle cloud is three.js with custom shaders: up to 16,000 points morphing between ten shapes as you scroll.
  • On phones it loads only after the first touch or a moment after load, so it never delays the page. It sleeps when hidden and rebuilds itself if the graphics context is lost.
  • Jumps to a section are one eased scroll, and the cloud blends straight to the destination. Reduced motion settings are respected everywhere.

Admin and CMS

  • An inbox for enquiries with filters, bulk actions, notes, keyboard shortcuts and replies sent from the panel.
  • A writing CMS with a Markdown editor, drafts, live preview, search snippet preview and per article share images.
  • A site health page that checks titles, descriptions, links and share images, plus first party analytics of what visitors do.

Security

  • Encrypted session cookies, a scrypt password hash and two-factor sign in with time based codes; the secret is sealed with AES-256-GCM and recovery codes are stored hashed.
  • Every Server Action checks the session again; sign in and the contact form are rate limited, and the form has a silent spam trap.
  • Strict headers: a content security policy, HSTS, cross origin isolation of the window and no framing.

Notifications

  • Each enquiry is emailed from the site’s own domain and sent to Telegram; the two are independent, so one failing never blocks the other.
  • Replies written in the admin go out from the domain address and keep the original message quoted.

Quality and discoverability

  • Strict TypeScript and a lint gate before every deploy; end to end tests in Playwright for navigation, the admin, the CMS and sign in.
  • Structured data, a sitemap, an RSS feed and share images generated for every page and article.
  • Light and dark themes with no flash on load, keyboard shortcuts across the site, and layouts checked from 320 px to ultra wide.

Stack

framework

Next.js 16 · React 19 · TypeScript

styling and motion

Tailwind CSS 4 · three.js · Lenis

data

Turso (libSQL) · Drizzle ORM · Zod

services

Vercel · Resend · Telegram Bot API

tooling

ESLint · Prettier · Playwright · Lighthouse