mirror of
https://github.com/Such-Software/such.software.git
synced 2026-10-17 05:32:05 +02:00
jwinterm
b1590c3a2b
An animated icon has to still BE the icon, so the geometry is copied verbatim from the app's own icon source (hash-wallet assets/images/hash_wallet_app_icon_source.svg): full-bleed #1a5c38, four white lines at stroke-width 80 with square caps, horizontals at y=412/612, verticals at x=412/612, all spanning 212..812. It draws on in 850ms and settles into a frame that is pixel-for-pixel the static PNG. Not hash.boats/splash.svg, which was the obvious candidate and is wrong twice: its # is slanted where the shipped icon is upright, and it insets its green box inside a transparent margin. The site rounds icons with a 22% CSS radius, so that margin would have shown card background at the corners, which is the exact artifact we just finished removing from the icon set. CSS rather than SMIL, for the reason the brand pack already documents: prefers-reduced-motion is a media query and cannot reach inside a SMIL <animate>. Under reduced motion this is just the finished icon. Draws once and holds, rather than looping. Five icons looping forever on a directory page is a distraction, and an app icon's resting state should be an app icon. `animatedIcon` is optional per app and `unoptimized` is set only when it is used, because the image optimizer would rasterise the SVG and throw the animation away.
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