48eda8b04f
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
148 lines
6.4 KiB
Markdown
148 lines
6.4 KiB
Markdown
# 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
|