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 13, 2025)

Critical Fix: Persistent Object Storage for Uploaded Files

Fixed the issue where uploaded images (members, mentors, competitions, sponsors) were disappearing after a few hours.

The Problem:

• Files were being saved to local filesystem (static/images/)
• Local storage in Replit is ephemeral and gets cleared periodically
• All uploaded images would vanish after a few hours

The Solution:

• Migrated to Replit Object Storage (built on Google Cloud Storage)
• All file uploads now go to persistent, permanent storage
• Images are served directly from Google's CDN with full URLs

Technical Implementation:

• Created object_storage.py module using Google Cloud Storage Python client
• Updated all upload routes to use object storage:
  • add_member(), update_member() - Member/mentor photos
  • add_competition(), edit_competition() - Competition images
  • add_sponsor() - Sponsor logos
• Intelligent fallback: uses local storage if object storage not configured
• Files organized by type: members/, competitions/, sponsors/ folders
• Unique UUIDs prevent filename conflicts
• Public URLs stored in database instead of local paths

Setup Required (See OBJECT_STORAGE_SETUP.md):

1. Create bucket in Object Storage pane
2. Set OBJECT_STORAGE_BUCKET environment variable
3. Restart server

Dependencies Added:

• google-cloud-storage (v3.5.0)

Recent Changes (November 12, 2025)

Admin Panel Enhancement: Competition Editing

Added full CRUD functionality to the competitions admin panel:

New Features:

• ✏️ Edit Competition Cards: Click the "Edit" button on any competition to modify its details
• Collapsible Edit Forms: Each competition now has an inline edit form that expands/collapses
• Full Field Editing: Edit season, event name, date, description, awards, and replace images
• Image Preservation: Existing images are preserved unless a new one is uploaded
• Yellow Edit Buttons: New amber/yellow themed edit buttons next to delete buttons

Technical Implementation:

• New /admin/competition/edit route in Flask backend
• Inline collapsible forms with JavaScript toggle functionality
• Award text automatically converted between pipe-separated (database) and newline-separated (form) formats
• Retains existing image if no new file uploaded

Recent Changes (November 8, 2025)

Latest UI/UX Refinements

Final polish and user experience improvements:

Hero Section Enhancements:

• Made hero section full viewport (100vw x 100vh) for immersive experience
• Applied black & white filter (grayscale 100%) to team image
• Added shadow gradient to top of section for smooth transition from navigation
• Darkened overlay gradient for improved text readability

Button & Interaction Standardization:

• Unified all buttons to match team CTA style (blue transparent with subtle border)
• Removed blue hover effects, replaced with clean white shadows
• Fixed custom cursor pointer-events to allow navigation bar clicking
• Removed parallax/wavy animations from sponsor cards and static elements

Design Refinements & Content Additions

Previous updates focused on improving visual balance and adding key content sections:

Visual Improvements:

• Removed excessive blue hover effects across all cards and elements
• Replaced blue hover glows with subtle white shadows for cleaner aesthetic
• Made background gradient significantly more prominent (increased opacity from 0.03 to 0.08)
• Disabled header underline animation on hover for simpler interactions

New Content Sections:

• Value Cards: Added four feature cards under mission statement showcasing core values:
  • STEM Outreach - workshops and demonstrations
  • Mentorship - guiding rookie teams
  • Education - teaching programming and CAD skills
  • Community - local partnerships and collaboration
• Restructured Team Section:
  • Text content now displays on left, team image on right
  • Fully responsive with stacked layout on mobile
  • New CTA button for viewing team members
  • Maintained parallax effects on team image

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 (including new value cards)
• 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
• Shimmer Effects: Animated shine effects on headings and dividers
• Background Ambience: Prominent 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
• Feather Icons for value card icons

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