KeshavAnandCode/FTCWebsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
fcc02f381425265057e7e858178bdebbfba3dec8
FTCWebsite/replit.md
abhiramtx 48eda8b04f Update website design and add new content sections 
Refine UI by removing blue hover effects, increasing background gradient prominence, and disabling header underline animations. Add four new value cards under the mission statement and restructure the "Meet Our Team" section to be responsive with text on the left and image on the right. Update `replit.md` for documentation and `static/js/scripts.js` to replace `lenis.update()` with `lenis.resize()` in the `ScrollTrigger` refresh event listener.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 5e584ab0-c340-4432-97ef-1972582b60e9
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: cc61dc1c-ba8e-4081-8489-ced839534af9
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d0a1d46d-d203-4308-bc6a-312ac7c0243b/5e584ab0-c340-4432-97ef-1972582b60e9/UhOas7p
2025-11-08 22:33:41 +00:00

6.4 KiB
Raw Blame History

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)

Design Refinements & Content Additions

Latest 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
Reference in New Issue View Git Blame Copy Permalink