Pinewood Robotics Website

This is the official website for Pinewood Robotics, FRC team 4765. Built with modern web technologies including Astro and React, featuring smooth animations, 3D graphics, and a responsive design.

🚀 Features

Modern Tech Stack: Built with Astro 7 and React 19
Smooth Animations: Lenis smooth scrolling and custom text animations
3D Graphics: Three.js integration with React Three Fiber
Responsive Design: Mobile-first approach with Tailwind CSS
Performance Optimized: Static site generation with image optimization
Analytics: PostHog integration for user analytics
Authentication: Clerk integration for user management
Cloud Storage: AWS S3 integration for media assets
Background video: AV1/HEVC/H.264 MP4s served as static assets, no player library
Deployment Ready: Cloudflare Workers deployment configuration

🛠️ Tech Stack

Core Framework

Astro - Static site generator with islands architecture
React - UI component library
TypeScript - Type-safe JavaScript

Styling & UI

Tailwind CSS - Utility-first CSS framework
Tailwind Animate - Animation utilities
Lucide React - Icon library
Class Variance Authority - Component variant management

3D & Animation

Three.js - 3D graphics library
React Three Fiber - React renderer for Three.js
Lenis - Smooth scrolling library

Services & Integrations

Clerk - Authentication and user management
PostHog - Product analytics
AWS SDK - S3 storage integration
Upstash Redis - Serverless Redis database

Development Tools

PNPM - Fast, disk space efficient package manager
Wrangler - Cloudflare Workers CLI

📁 Project Structure

pwrup-site/
├── public/                 # Static assets
│   ├── PWRUP_text.svg     # Logo and branding
│   ├── Reefscape-Robot.webp # Robot images
│   └── ...
├── src/
│   ├── components/        # React components
│   │   ├── ui/           # Reusable UI components
│   │   ├── Welcome.tsx   # Main landing page component
│   │   ├── NavBar.tsx    # Navigation component
│   │   ├── AboutRobotics.tsx # About section
│   │   ├── Positions.tsx # Team positions
│   │   ├── Clips.tsx     # Video clips section
│   │   └── PEARL.tsx     # PEARL robot showcase
│   ├── hooks/            # Custom React hooks
│   │   └── useLenis.ts   # Smooth scrolling hook
│   ├── layouts/          # Astro layouts
│   │   └── Layout.astro  # Main page layout
│   ├── lib/              # Utility libraries
│   │   ├── auth.ts       # Authentication utilities
│   │   ├── kv.ts         # Key-value store utilities
│   │   └── utils.ts      # General utilities
│   ├── pages/            # Astro pages
│   │   ├── index.astro   # Home page
│   │   └── sign-up.astro # Registration page
│   └── styles/           # Global styles
│       └── global.css    # Global CSS
├── astro.config.mjs      # Astro configuration
├── tailwind.config.js    # Tailwind CSS configuration
├── wrangler.toml         # Cloudflare Workers configuration
├── deploy.sh             # Deployment script
└── package.json          # Dependencies and scripts

🚀 Getting Started

Prerequisites

Node.js (v22.12 or higher; Astro 7 requires >=22.12.0)
pnpm 9.12.3 or later (pinned via packageManager)

Installation

Clone the repository

git clone https://github.com/adamexu/pwrup-site.git
cd pwrup-site

Install dependencies
```
pnpm install
```
Start the development server
```
pnpm dev
```
Open your browser Navigate to http://localhost:4321 to see the site in action.

Available Scripts

pnpm dev - Start development server
pnpm build - Build for production
pnpm preview - Preview production build locally
pnpm deploy - Deploy to Cloudflare Workers

🎨 Key Components

Welcome Component

The main landing page featuring:

Animated typewriter effect
Smooth reveal animations
Background video integration
Call-to-action buttons

Navigation Bar

Responsive navigation with:

Auto-hide on scroll down
Smooth backdrop blur effect
Logo and registration link

About Robotics

Information section highlighting:

Team benefits and opportunities
Robot showcase with custom arrow graphics
Responsive layout for mobile and desktop

Positions

Team roles and opportunities with:

Interactive position cards
Detailed descriptions
Application links

🔧 Configuration

Environment Variables

Create a .env file in the root directory:

# Clerk Authentication
PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_key
CLERK_SECRET_KEY=your_clerk_secret

# PostHog Analytics
PUBLIC_POSTHOG_KEY=your_posthog_key

# AWS S3 (if using)
AWS_ACCESS_KEY_ID=your_aws_key
AWS_SECRET_ACCESS_KEY=your_aws_secret
AWS_REGION=your_aws_region

# Upstash Redis (if using)
UPSTASH_REDIS_REST_URL=your_redis_url
UPSTASH_REDIS_REST_TOKEN=your_redis_token

Customization

Fonts

The site uses custom fonts defined in tailwind.config.js:

Jost - Primary font family
Red Hat Display - Secondary font family

Colors & Theming

Brand colors and theming can be customized in:

tailwind.config.js - Tailwind theme configuration
src/styles/global.css - Global CSS variables

Animation Configuration

Text reveal animations can be customized in src/components/Welcome.tsx:

const REVEAL_CONFIG = {
    textAlign: "right" as "left" | "center" | "right",
    text: "Pinewood Robotics",
};

🚀 Deployment

Cloudflare Workers (Recommended)

Install Wrangler CLI
```
npm install -g wrangler
```
Login to Cloudflare
```
wrangler login
```
Deploy
```
pnpm deploy
```

The site is configured for static deployment. Cloudflare Workers Builds must use Node.js 22.12 or later (.nvmrc and package.json engines.node). Cache headers for hashed assets live in public/_headers. Production custom domains (pinewoodrobotics.org) are under [env.production] in wrangler.toml.

Alternative Deployment Options

Vercel: Connect your GitHub repository to Vercel for automatic deployments
Netlify: Deploy directly from GitHub with build command pnpm build
GitHub Pages: Use GitHub Actions for automated deployment

🧪 Testing

Browser Testing

The project includes Playwright configuration for end-to-end testing:

# Install Playwright
npx playwright install

# Run tests
npx playwright test

Performance Testing

Test compression and optimization:

node test-compression.js https://your-site.workers.dev

📱 Mobile Optimization

The site is fully responsive with:

Mobile-first design approach
Touch-friendly navigation
Optimized images and assets
Smooth scrolling on mobile devices

🔍 SEO & Analytics

SEO Features

Meta tags and Open Graph integration
Structured data markup
Sitemap generation
Image optimization with alt text

Analytics

PostHog integration for user behavior tracking
Custom event tracking for interactions
Performance monitoring

🤝 Contributing

Fork the repository
Create a feature branch
```
git checkout -b feature/amazing-feature
```

Commit your changes

git commit -m 'Add some amazing feature'

Push to the branch
```
git push origin feature/amazing-feature
```
Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🏆 About Pinewood Robotics

Pinewood Robotics (FRC Team 4765) is a competitive robotics team from Pinewood School. We participate in the FIRST Robotics Competition (FRC), building robots to compete in annual challenges while fostering STEM education and teamwork.

Team Highlights

Established: FRC Team 4765
School: Pinewood School
Competition: FIRST Robotics Competition
Focus: Engineering, programming, design, and outreach

📞 Contact

Website: pinewood.one
Registration: Sign up for interest
School: Pinewood School

Built with ❤️ by the Pinewood Robotics team

Name		Name	Last commit message	Last commit date
public		public
src		src
.env.example		.env.example
.gitignore		.gitignore
.nvmrc		.nvmrc
AGENTS.md		AGENTS.md
README.md		README.md
astro.config.mjs		astro.config.mjs
components.json		components.json
deploy.sh		deploy.sh
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json
vercel.json		vercel.json
wrangler.toml		wrangler.toml

Uh oh!

Latest commit

History

Folders and files

Repository files navigation