FTCWebsite/replit.md

# FTC Team 23344 "Technical Turbulence" Website

## Overview
Flask-based website for FTC Team 23344 with a modern dark theme (#000000 pure black background), comprehensive content management system, PostgreSQL database integration, and premium smooth-scrolling animations.

## Recent Changes (November 8, 2025)

### Premium Animation & UX Enhancements
Transformed the entire site with smooth scrolling, parallax effects, and grand animations for a premium, modern feel:

**Animation System:**
- **Lenis Smooth Scrolling**: Integrated velocity-based smooth scrolling with 1.2s duration and custom easing
- **GSAP ScrollTrigger**: Properly proxied with Lenis for synchronized scroll-triggered animations
- **Parallax Effects**: Multi-layer parallax on hero images, team photos, and sponsor logos
- **Scroll Animations**: Fade-in and slide-up effects on all major content sections
- **Magnetic Buttons**: Interactive hover effects with 3D transforms on CTAs
- **Floating Elements**: Subtle continuous animations on cards and member profiles

**Visual Enhancements:**
- **Custom Cursor**: Premium dual-cursor effect (main + follower) on desktop
- **Scroll Progress Bar**: Gradient progress indicator at top of page
- **Animated Gradients**: Shifting blue/purple gradients on stat cards
- **Hover Glows**: Radial gradient effects that expand on card hover
- **Shimmer Effects**: Animated shine effects on headings and dividers
- **Background Ambience**: Subtle floating gradient orbs for depth

**Performance:**
- All animations use CSS transforms (GPU-accelerated)
- RequestAnimationFrame loop for smooth 60fps
- Mobile-optimized with reduced motion support
- Custom cursor disabled on mobile devices

**Libraries Added:**
- Lenis v1.0.42 for smooth scrolling
- GSAP 3.12.2 + ScrollTrigger for advanced animations

## Recent Changes (October 3, 2025)

### Admin Panel System
Created a complete admin panel with password-protected access for managing all website content:

**Access:** `/admin/login` (Password: `techturb123`)

**Features:**
- 📊 **Stats Management**: Edit homepage statistics (seasons, members, awards, competitions)
- 👥 **Members/Mentors Management**: Add, edit, remove team members and mentors with profile picture uploads
- 🏆 **Competitions Management**: Add competitions by season with optional images, awards (bullet points), descriptions, event names, and dates
- 💼 **Sponsors Management**: Add/remove sponsors with logo uploads and website URLs

### Database Integration
- Migrated all content from hardcoded templates to PostgreSQL database
- All public pages now pull data dynamically from database
- Data persists across server restarts
- Initial data seeded from existing website content

**Database Schema:**
- `stats` - Homepage statistics
- `members` - Team members with images, roles, names
- `mentors` - Mentors/coaches with images, roles, names
- `competitions` - Competition entries organized by season
- `sponsors` - Sponsor cards with logos and URLs

### Design Improvements
- Pure black (#000000) background throughout
- Cinematic hero section (700px tall) with darkened team image and text overlay
- Light gray text (gray-300) for paragraph content
- Reduced top margins on headers (40px instead of 64px)
- Mobile-responsive with optimized padding (20px/16px)
- Modern cards with 20px border radius and blue accent hover effects

## Project Structure
```
├── app.py                 # Flask routes, database connections, admin system
├── templates/
│   ├── admin/            # Admin panel templates
│   │   ├── login.html
│   │   ├── base.html     # Admin layout with side navigation
│   │   ├── stats.html
│   │   ├── members.html
│   │   ├── competitions.html
│   │   └── sponsors.html
│   ├── base.html         # Public site layout
│   ├── home.html         # Homepage with stats from DB
│   ├── contributors.html # Team members from DB
│   ├── competitions.html # Competitions from DB
│   └── sponsors.html     # Sponsors from DB
├── static/
│   ├── css/styles.css    # All styling
│   ├── js/scripts.js
│   └── images/           # Team photos, logos, uploads
└── replit.md             # This file

```

## Technology Stack
- **Backend**: Flask (Python)
- **Database**: PostgreSQL (Neon-backed via Replit)
- **Session Management**: Flask-Session
- **File Uploads**: Werkzeug secure_filename
- **Frontend**: HTML5, CSS3, JavaScript

## User Preferences
- Pure black (#000000) background theme
- Gray-300 text color for paragraphs (light grayish, not pure white)
- Preserve hero section layered image design (michiana.png + techturb.gif)
- Minimal navbar with blur effect
- Dramatic spacing reduction throughout site
- Mobile-first responsive design

## Database Connection
Environment variables automatically configured:
- `DATABASE_URL`
- `PGHOST`, `PGPORT`, `PGUSER`, `PGPASSWORD`, `PGDATABASE`

## Security Notes
- Admin password currently hardcoded (techturb123) - consider moving to environment variable for production
- Session secret key uses environment variable with fallback
- File uploads use secure_filename to prevent path traversal
- Admin routes protected with session-based authentication

## Future Considerations
- Add admin password management
- Implement image optimization for uploads
- Add bulk operations for members/competitions
- Consider adding revision history for content changes
- Add export/backup functionality for database content