mirror of
https://github.com/Such-Software/such.software.git
synced 2026-10-17 05:32:05 +02:00
jwinterm
2b9b1bf429
- Add gray-matter + next-mdx-remote for MDX rendering - Create content/blog/ with .mdx files and frontmatter - Add dynamic [slug] route and blog utility (src/lib/blog.ts) - Blog index auto-populates from MDX files, sorted newest first - Upgrade React to 19 for next-mdx-remote v6 compatibility - Convert existing posts: website-relaunch, smirk-wallet, bauhaus-echo, crypto-checkout
35 lines
1.7 KiB
Plaintext
35 lines
1.7 KiB
Plaintext
---
|
|
title: "Website Relaunch"
|
|
date: "February 6, 2026"
|
|
excerpt: "New design, new infrastructure, same focus on quality"
|
|
---
|
|
|
|
We rebuilt such.software. New design, new infrastructure, same focus on performance and accessibility.
|
|
|
|
## Stack
|
|
|
|
- **Framework:** Next.js 15 (App Router)
|
|
- **Language:** TypeScript
|
|
- **Styling:** Tailwind CSS with CSS variables for theming
|
|
- **Animation:** Framer Motion
|
|
- **Monorepo:** Turborepo + pnpm workspaces
|
|
- **Testing:** Playwright with axe-core for accessibility
|
|
- **Bot Protection:** Cloudflare Turnstile
|
|
- **Email:** Resend
|
|
|
|
## Procedural Graphics
|
|
|
|
The site features two custom procedural animations: NebulaField and DataGrid. Both are SVG-based, theme-aware, and respect prefers-reduced-motion. NebulaField renders animated data streams flowing toward a central icon using quadratic Bezier curves on the homepage. DataGrid draws a pulsing grid with traveling data packets on the Services page.
|
|
|
|
## Accessibility
|
|
|
|
We run 42 automated accessibility tests across Chromium, Firefox, and WebKit on every build. Tests cover WCAG 2.2 AA compliance, heading hierarchy, color contrast, keyboard navigation, and form accessibility. Lighthouse scores are 99-100 across all pages.
|
|
|
|
## Performance
|
|
|
|
The NebulaField component is lazy loaded with next/dynamic and requestIdleCallback. Canvas rendering is throttled. Fonts are loaded via next/font for zero layout shift. Images use next/image for automatic optimization.
|
|
|
|
## Structure
|
|
|
|
The site now has Products, Services, Blog, and About sections. Products showcases our standalone offerings: Webshops, Custom Websites, Smirk Wallet, and Bauhaus Echo. Services covers our partnership model and consulting work. Mobile users get a bottom navigation bar.
|