Alexis Technologies — Website

The main website for Alexis Technologies. It will eventually showcase the company's services, projects and contact information.

Right now it is a single-page placeholder: an animated wordmark that assembles itself out of shards, with a "coming soon" line beneath it.

Production: https://alexis.dev

Tech stack

Framework	Astro 7, static output — no adapter, no SSR
Language	TypeScript 6
Graphics	three.js with a hand-written GLSL vertex shader
Lint / format	oxlint + oxfmt — not ESLint or Prettier
Typography	Archivo via Fontsource
SEO	@astrojs/sitemap
Telemetry	Vercel Analytics + Speed Insights
Hosting	Vercel (static)

Prerequisites

• Node ≥ 22.12 — the repo pins 24 in .nvmrc
• pnpm 10.34.5 — pinned via the packageManager field, so Corepack picks it up automatically

corepack enable

Getting started

pnpm install

pnpm dev

The dev server runs at http://localhost:4321.

Scripts

Script	What it does
pnpm dev	Start the Astro dev server
pnpm build	Build the static site into dist/
pnpm preview	Serve the built output locally
pnpm check	Type-check .astro and .ts files (astro check)
pnpm lint	Lint with oxlint
pnpm lint:fix	Lint and apply fixable rules
pnpm format	Format with oxfmt
pnpm format:check	Verify formatting without writing — what CI runs
pnpm fonts:typeface	Regenerate the subsetted 3D font. One-off — the output is committed

CI runs check, lint, format:check and build on every push to main and every pull request.

Project structure

.github/workflows/  CI
public/             Served as-is
  logo.svg            Full brand lock-up (source of truth, not used on the page)
  favicon.svg         The dotted X mark, cut from logo.svg — favicon and corner mark
scripts/
  fonts/              Offline font conversion (not part of the build)
src/
  assets/fonts/       Generated typeface.json consumed by three.js
  components/         LogoMark, Hero, SiteFooter
  layouts/            BaseLayout — head, meta, telemetry
  pages/              index.astro — the only route
  scripts/            hero-animation.ts — the WebGL scene
  styles/             global.css

How the hero animation works

TextGeometry extrudes the wordmark into a bevelled, non-indexed geometry, so every triangle owns its three vertices and can be moved independently. Each triangle is then given its own scatter offset, two bezier control points, a delay and a duration, stored as vertex attributes.

The vertex shader walks each triangle along that cubic bezier from "scattered" to "assembled", easing it and growing it out of its own centroid on the way in. Nothing is animated on the CPU — the render loop only advances a single uTime uniform, which ping-pongs so the wordmark repeatedly assembles and blows apart.

Scatter magnitudes are expressed as multiples of the wordmark's cap height rather than in absolute units, so the debris field stays proportional to the text at any viewport size.

Fallbacks. The real <h1> is always in the DOM and visible by default; the canvas replaces it only once WebGL has actually initialised. That covers no-JS, no-WebGL and crawlers for free. When prefers-reduced-motion: reduce is set, WebGL never boots at all and the plain heading stays.

Brand assets

public/logo.svg is the full vertical lock-up delivered by design — mark, "Alexis" wordmark and "TECHNOLOGIES" tagline. Treat it as read-only.

public/favicon.svg is the dotted X mark cut out of it (viewBox="0 0 120 120"). It is used both as the favicon and as the corner mark on the page, so the browser fetches one file for both. If logo.svg ever changes, re-cut it.

Code style

Enforced by oxfmt and .editorconfig:

• 2-space indent, LF endings, final newline
• single quotes, semicolons, trailing commas everywhere
• 120-column print width

Lint rules live in .oxlintrc.json. This project deliberately does not use ESLint or Prettier — do not add them.

Commits follow Conventional Commits.

Deployment

pnpm build emits a fully static site to dist/. Vercel picks it up directly; there is no Astro adapter and no server runtime.

The three.js bundle is roughly 139 KB gzipped — the dominant asset on the page, and inherent to shipping a WebGL renderer.

License

Proprietary. Copyright © Alexis Technologies. All rights reserved.

See LICENSE — no part of this repository may be copied, modified or distributed without prior written permission.