mirror of https://github.com/Such-Software/such.software.git synced 2026-10-17 05:32:05 +02:00

Files

T

jwinterm f2940ad956 Add documentation and fix pnpm start command

- Add README.md with tech stack, project structure, and dev setup
- Add TODO_ACCESS.md with Lighthouse audit results and priority fixes
- Add start script to root package.json
- Add start task to turbo.json

2026-01-17 10:32:01 -05:00

4.6 KiB

Raw Blame History

Such Software Website

Corporate website for Such Software LLC, a full-service software provider based in Kennett Square, PA.

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

# 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

Current Status

See TODO_ACCESS.md for detailed audit results.

Lighthouse Scores (Dev Server)

Category	Score
Performance	51
Accessibility	95
SEO	91
Best Practices	73

Note: Production builds typically score higher.

Testing Tools

Current

Lighthouse - Performance, accessibility, SEO, best practices
```
npx lighthouse http://localhost:3000 --view
```

Planned

Playwright + axe-core - Automated accessibility testing

pnpm add -D @playwright/test @axe-core/playwright
npx playwright install

Accessibility Features

Skip-to-main-content link
Semantic HTML5 structure (<main>, <nav>, <header>, <footer>)
ARIA labels on interactive elements
Keyboard navigation support
Dark/light mode with system preference
Reduced motion support

Known Issues

Color contrast needs improvement in some areas
Heading hierarchy has gaps
Canvas animations impact performance (NebulaField)

Key Components

DynamicBackground

Homepage animated nebula background using canvas. Theme-aware with reduced motion support.

Header

Shared navigation with skip-to-main link, responsive design, and theme toggle.

ContactForm

Server action-powered form with Zod validation and Turnstile bot protection.

FounderSignature

Bio section with accessibility credentials and competency cards.

Environment Variables

Create .env.local in apps/web/:

# 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

Deployment

Built for deployment on Vercel or any Node.js hosting platform.

pnpm build
pnpm start

License

Proprietary - Such Software LLC

4.6 KiB Raw Blame History