Princeton Claude Hackathon Website

A modern, responsive website for the Princeton Claude Hackathon event featuring AI-first innovation and competition tracks.

Features

✨ Modern Design

• Princeton-themed orange and black color scheme
• Claude branding integration with blue and purple accents
• Smooth animations and transitions
• Responsive design for all devices

🎯 Sections

• Hero Section: Eye-catching landing with gradient backgrounds and animated orbs
• About: Event highlights with 4 key features
• Schedule: 7-item timeline of the 24-hour event
• Tracks: 4 competition categories with unique themes
• Registration: Form to sign up for the hackathon
• Footer: Event information and quick links

🛠️ Technical Stack

• Pure HTML5, CSS3, and Vanilla JavaScript
• No dependencies - fully self-contained
• Mobile-responsive design
• Smooth scroll animations
• Intersection Observer for scroll effects

File Structure

├── index.html      # Main HTML structure
├── styles.css      # All styling and animations
├── script.js       # Interactivity and animations
└── README.md       # This file

Getting Started

1. Clone the repository
2. Open index.html in a web browser
3. No build process or dependencies needed!

Customization

Colors

Edit the CSS variables in styles.css:

--princeton-orange: #FF6A33
--princeton-black: #1a1a1a
--claude-blue: #2563eb
--claude-purple: #7c3aed

Content

Update text, dates, and information directly in index.html

Styling

Modify animations, layouts, and responsive breakpoints in styles.css

Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Mobile browsers

Features Included

• Smooth scroll navigation
• Form validation and submission
• Scroll-based section highlighting
• Parallax effects in hero section
• Fade-in animations on scroll
• Fully accessible keyboard navigation

License

2026 Princeton Claude Hackathon - Powered by Anthropic