|
| 1 | +# CLAUDE.md |
| 2 | + |
| 3 | +This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. |
| 4 | + |
| 5 | +## Development Commands |
| 6 | + |
| 7 | +- `npm run dev` - Start development server with Turbopack |
| 8 | +- `npm run build` - Build production application |
| 9 | +- `npm run lint` - Run ESLint |
| 10 | +- `npm start` - Start production server |
| 11 | + |
| 12 | +## Architecture Overview |
| 13 | + |
| 14 | +This is a Next.js 15 marketing website for Vortex, a columnar file format. The site features: |
| 15 | + |
| 16 | +### Core Technologies |
| 17 | +- **Next.js 15** with App Router and Turbopack for development |
| 18 | +- **React 19** with TypeScript |
| 19 | +- **TailwindCSS 4** for styling |
| 20 | +- **OGL** (WebGL library) for 3D graphics and ASCII art effect |
| 21 | +- **Plausible Analytics** for privacy-focused tracking |
| 22 | +- **Vercel Analytics** for performance monitoring |
| 23 | + |
| 24 | +### Visual System |
| 25 | +- **3D Logo Animation**: WebGL-rendered GLTF model (`/public/logo.glb`) with ASCII art shader effect |
| 26 | +- **Interactive Mouse/Touch Controls**: Model rotates based on user interaction |
| 27 | +- **Responsive Design**: Different camera positions and sizing for mobile/desktop |
| 28 | +- **Custom Fonts**: Geist Sans, Geist Mono, and Funnel Display |
| 29 | + |
| 30 | +### Component Structure |
| 31 | +- `HeroASCII` - Main 3D logo component with WebGL rendering and ASCII conversion |
| 32 | +- `Overlay` - Text overlay on top of the 3D scene |
| 33 | +- Layout components (`Header`, `Footer`) wrap all pages |
| 34 | +- 404 page has its own hero variant (`hero-404`, `overlay-404`) |
| 35 | + |
| 36 | +### Key Files |
| 37 | +- `src/app/page.tsx` - Homepage with metadata for SEO |
| 38 | +- `src/components/hero/index.tsx` - Complex WebGL rendering with custom shaders |
| 39 | +- `src/app/layout.tsx` - Root layout with analytics providers and font loading |
| 40 | +- `next.config.ts` - Plausible proxy configuration |
| 41 | + |
| 42 | +The site is optimized for performance with font optimization, analytics integration, and responsive WebGL rendering. |
0 commit comments