mirror of
https://github.com/Such-Software/such.software.git
synced 2026-10-17 05:32:05 +02:00
jwinterm
887b59629d
Two separate problems, one of them a real bug. THE FLASH. The splash is server-rendered, so on a refresh the browser painted it and only then did hydration read sessionStorage, decide this visitor had already entered, and remove it. That one painted frame is the flash, and React cannot prevent it: even useLayoutEffect runs after the server HTML is painted. So the decision moved before paint. A tiny synchronous script in <head> reads the session flag and prefers-reduced-motion and stamps the root element; a plain CSS rule hides the overlay in the frame it would otherwise appear in. The overlay is `fixed`, so hiding it shifts no layout. Verified with a Playwright run: after reload the root is already stamped at readyState "interactive", the overlay computes to display:none, and the splash is not visible in any of twelve sampled frames. THE SPLASH ITSELF. It is now only the pillar signature: four dots become the four pillar symbols -- commerce, crypto, games, education -- become the word SUCH, then the page takes over. One generated asset (morph_splash*.svg) whose CSS timeline is scaled to land exactly on 1337ms, from such-graphics 628fcc1. SPLASH_MS here and motion.splash.ms there are the same number by construction: a gate that closes early cuts the last letter mid-draw. Everything else on the splash is gone -- tagline, supporting line, the four corner nav links, the chevron, the water-refraction filter and its pre-warm. The corner links were unreachable inside a gate this short anyway, and the header carries them. splash-logo-data.ts goes with them, now orphaned. Perf, measured on a local production build: mobile 97, desktop 98, unchanged from what production scores today. CLS stays ~0. LCP moves 0.9s -> 1.2s on mobile, because the mark is now a 12KB request where the old logo was an inlined data URI. Both theme variants are fetched (3.7KB each gzipped) since `dark:hidden` hides but does not prevent the download, so half of that is waste. Fixable by inlining as data URIs the way splash-logo-data.ts did, at the cost of ~30KB in the bundle; not done here because the score did not move.
Such Software Website
Corporate website for Such Software LLC, a full-service software provider based in Kennett Square, PA.
Lighthouse Scores
| Page | Performance | Accessibility | SEO | Best Practices |
|---|---|---|---|---|
| Home | 99% | 100% | 100% | 77%* |
| Services | 98% | 100% | 100% | 100% |
| About | 99% | 100% | 100% | 100% |
*Home page Best Practices is 77% due to Cloudflare Turnstile third-party cookies.
Tech Stack
- Next.js 15 with App Router
- React 18 + TypeScript 5
- Tailwind CSS 3 + Framer Motion 11
- Radix UI accessible primitives
- next-themes for dark/light mode
- Zod for validation
- Cloudflare Turnstile for bot protection
- Turborepo + pnpm 9
Project Structure
such-software-site/
├── apps/web/ # Next.js website
│ ├── src/app/ # Pages (home, services, about)
│ ├── src/components/ # React components
│ ├── tests/ # Playwright a11y tests
│ └── public/ # Static assets
├── packages/ui/ # Shared UI components
└── packages/config/ # Shared config
Development
pnpm install # Install dependencies
pnpm dev # Start dev server at localhost:3000
pnpm build # Production build
pnpm start # Start production server
Testing
cd apps/web
pnpm test:a11y # Run Playwright accessibility tests
pnpm test:ui # Run tests with interactive UI
42 accessibility tests across Chromium, Firefox, and WebKit covering WCAG 2.2 AA criteria, heading hierarchy, color contrast, and keyboard navigation.
Accessibility
- WCAG 2.2 AA: engineered to meet, audited against (Lighthouse measured 100%)
- Skip-to-main link, semantic HTML5, ARIA labels
- Proper heading hierarchy, color contrast (4.5:1+)
prefers-reduced-motionsupport- Keyboard navigation, focus indicators
- Structured data (JSON-LD) and canonical URLs
Environment Variables
Create apps/web/.env.local:
NEXT_PUBLIC_TURNSTILE_SITE_KEY=your_site_key
TURNSTILE_SECRET_KEY=your_secret_key
See apps/web/.env.example for template.
License
Proprietary - Such Software LLC