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

Complete Object Storage Migration

All uploaded images are now stored permanently in Replit Object Storage, preventing the issue where files would disappear after a few hours.

What Was Done:

1. Installed replit-object-storage official Python package
2. Created object_storage.py using official Replit SDK
3. Added /storage/<path> route to serve files from object storage
4. Added |image_url Jinja template filter to handle both local and storage paths
5. Migrated all existing member, mentor, competition, and sponsor images to object storage
6. Updated database paths from images/filename.jpg to /storage/folder/uuid.ext

How It Works:

• New uploads go directly to object storage via upload_file_to_storage() helper
• Database stores paths like /storage/members/uuid.png
• Templates use {{ image_path|image_url }} filter which handles both formats
• /storage/ route serves files from object storage bucket
• Background images (hero, team, etc.) remain local as they don't get erased

Bucket: ftc-team-images Package: replit-object-storage (installed via pip)

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