mirror of
https://github.com/Such-Software/such.software.git
synced 2026-10-21 06:08:32 +02:00
jwinterm
3c1e0b659c
- Fix color contrast: emerald-600 → emerald-700 for WCAG AA compliance - Fix heading hierarchy across all pages (h1 → h2 → h3 → h4) - Lazy load NebulaField with next/dynamic and requestIdleCallback - Remove debug console.log statements - Add .env.example for Turnstile configuration - Update documentation with audit results
158 lines
4.4 KiB
Markdown
158 lines
4.4 KiB
Markdown
# Such Software Website
|
|
|
|
Corporate website for Such Software LLC, a full-service software provider based in Kennett Square, PA.
|
|
|
|
## Lighthouse Scores (Production Build)
|
|
|
|
| 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 for bot protection.
|
|
|
|
## Tech Stack
|
|
|
|
### Core Framework
|
|
- **Next.js 15** - React framework with App Router
|
|
- **React 18** - UI library
|
|
- **TypeScript 5** - Type safety
|
|
|
|
### Styling & Animation
|
|
- **Tailwind CSS 3** - Utility-first CSS
|
|
- **Framer Motion 11** - Animations and transitions
|
|
- **tailwind-merge** - Conditional class merging
|
|
- **class-variance-authority** - Component variants
|
|
|
|
### UI Components
|
|
- **Radix UI** - Accessible primitives
|
|
- **Lucide React** - Icon library
|
|
- **react-icons** - Additional icons (FontAwesome, etc.)
|
|
|
|
### Theming
|
|
- **next-themes 0.4** - Dark/light mode with system preference detection
|
|
|
|
### Forms & Validation
|
|
- **Zod** - Schema validation
|
|
- **Cloudflare Turnstile** - Bot protection via `@marsidev/react-turnstile`
|
|
|
|
### Build & Dev Tools
|
|
- **Turborepo** - Monorepo build system
|
|
- **pnpm 9** - Package manager
|
|
- **ESLint** - Linting
|
|
- **Prettier** - Code formatting
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
such-software-site/
|
|
├── apps/
|
|
│ └── web/ # Next.js website
|
|
│ ├── src/
|
|
│ │ ├── app/ # App Router pages
|
|
│ │ │ ├── page.tsx # Homepage
|
|
│ │ │ ├── services/ # Services page
|
|
│ │ │ ├── about/ # About page
|
|
│ │ │ └── layout.tsx # Root layout
|
|
│ │ ├── components/
|
|
│ │ │ ├── about/ # About page components
|
|
│ │ │ ├── contact/ # Contact form
|
|
│ │ │ ├── landing/ # Homepage components
|
|
│ │ │ ├── layout/ # Header, Footer, etc.
|
|
│ │ │ └── portfolio/ # Portfolio grid
|
|
│ │ ├── actions/ # Server actions
|
|
│ │ └── lib/ # Utilities
|
|
│ └── public/ # Static assets
|
|
├── packages/
|
|
│ ├── ui/ # Shared UI components
|
|
│ │ └── src/
|
|
│ │ ├── components/ # Button, Card, etc.
|
|
│ │ ├── procedural/ # Canvas animations (NebulaField, DataGrid)
|
|
│ │ └── lib/ # Utilities (cn)
|
|
│ └── config/ # Shared TypeScript/ESLint config
|
|
├── turbo.json # Turborepo config
|
|
├── pnpm-workspace.yaml # pnpm workspace config
|
|
└── package.json # Root package.json
|
|
```
|
|
|
|
## Development
|
|
|
|
### Prerequisites
|
|
- Node.js >= 20.0.0
|
|
- pnpm >= 9.0.0
|
|
|
|
### Getting Started
|
|
|
|
```bash
|
|
# Install dependencies
|
|
pnpm install
|
|
|
|
# Start development server
|
|
pnpm dev
|
|
|
|
# Build for production
|
|
pnpm build
|
|
|
|
# Start production server
|
|
pnpm start
|
|
```
|
|
|
|
The dev server runs at `http://localhost:3000`.
|
|
|
|
## Accessibility & Quality
|
|
|
|
### WCAG 2.2 AA Compliance
|
|
|
|
This site achieves **100% Lighthouse Accessibility** on all pages through:
|
|
|
|
- Skip-to-main-content link
|
|
- Semantic HTML5 structure (`<main>`, `<nav>`, `<header>`, `<footer>`, `<address>`)
|
|
- Proper heading hierarchy (h1 → h2 → h3 → h4)
|
|
- ARIA labels on interactive elements
|
|
- Form fields with proper labels and error handling
|
|
- Color contrast ratios meeting 4.5:1 minimum
|
|
- Keyboard navigation support
|
|
- Dark/light mode with system preference
|
|
- Reduced motion support in theme transitions
|
|
|
|
See [TODO_ACCESS.md](TODO_ACCESS.md) for detailed audit results.
|
|
|
|
### Testing
|
|
|
|
```bash
|
|
# Run Lighthouse audit (requires production build)
|
|
pnpm build && pnpm start
|
|
|
|
# In another terminal:
|
|
npx lighthouse http://localhost:3000 --view
|
|
```
|
|
|
|
## Environment Variables
|
|
|
|
Create `.env.local` in `apps/web/`:
|
|
|
|
```env
|
|
# Cloudflare Turnstile (for contact form)
|
|
NEXT_PUBLIC_TURNSTILE_SITE_KEY=your_site_key
|
|
TURNSTILE_SECRET_KEY=your_secret_key
|
|
|
|
# Contact form email (optional)
|
|
CONTACT_EMAIL=your@email.com
|
|
```
|
|
|
|
See `.env.example` for a template.
|
|
|
|
## Deployment
|
|
|
|
Built for deployment on Vercel or any Node.js hosting platform.
|
|
|
|
```bash
|
|
pnpm build
|
|
pnpm start
|
|
```
|
|
|
|
## License
|
|
|
|
Proprietary - Such Software LLC
|