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
This commit is contained in:
4
.replit
4
.replit
@@ -12,6 +12,10 @@ deploymentTarget = "cloudrun"
|
|||||||
localPort = 5000
|
localPort = 5000
|
||||||
externalPort = 80
|
externalPort = 80
|
||||||
|
|
||||||
|
[[ports]]
|
||||||
|
localPort = 37899
|
||||||
|
externalPort = 3000
|
||||||
|
|
||||||
[agent]
|
[agent]
|
||||||
expertMode = true
|
expertMode = true
|
||||||
|
|
||||||
|
|||||||
27
replit.md
27
replit.md
@@ -5,6 +5,27 @@ Flask-based website for FTC Team 23344 with a modern dark theme (#000000 pure bl
|
|||||||
|
|
||||||
## Recent Changes (November 8, 2025)
|
## 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
|
### Premium Animation & UX Enhancements
|
||||||
Transformed the entire site with smooth scrolling, parallax effects, and grand animations for a premium, modern feel:
|
Transformed the entire site with smooth scrolling, parallax effects, and grand animations for a premium, modern feel:
|
||||||
|
|
||||||
@@ -12,7 +33,7 @@ Transformed the entire site with smooth scrolling, parallax effects, and grand a
|
|||||||
- **Lenis Smooth Scrolling**: Integrated velocity-based smooth scrolling with 1.2s duration and custom easing
|
- **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
|
- **GSAP ScrollTrigger**: Properly proxied with Lenis for synchronized scroll-triggered animations
|
||||||
- **Parallax Effects**: Multi-layer parallax on hero images, team photos, and sponsor logos
|
- **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
|
- **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
|
- **Magnetic Buttons**: Interactive hover effects with 3D transforms on CTAs
|
||||||
- **Floating Elements**: Subtle continuous animations on cards and member profiles
|
- **Floating Elements**: Subtle continuous animations on cards and member profiles
|
||||||
|
|
||||||
@@ -20,9 +41,8 @@ Transformed the entire site with smooth scrolling, parallax effects, and grand a
|
|||||||
- **Custom Cursor**: Premium dual-cursor effect (main + follower) on desktop
|
- **Custom Cursor**: Premium dual-cursor effect (main + follower) on desktop
|
||||||
- **Scroll Progress Bar**: Gradient progress indicator at top of page
|
- **Scroll Progress Bar**: Gradient progress indicator at top of page
|
||||||
- **Animated Gradients**: Shifting blue/purple gradients on stat cards
|
- **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
|
- **Shimmer Effects**: Animated shine effects on headings and dividers
|
||||||
- **Background Ambience**: Subtle floating gradient orbs for depth
|
- **Background Ambience**: Prominent floating gradient orbs for depth
|
||||||
|
|
||||||
**Performance:**
|
**Performance:**
|
||||||
- All animations use CSS transforms (GPU-accelerated)
|
- All animations use CSS transforms (GPU-accelerated)
|
||||||
@@ -33,6 +53,7 @@ Transformed the entire site with smooth scrolling, parallax effects, and grand a
|
|||||||
**Libraries Added:**
|
**Libraries Added:**
|
||||||
- Lenis v1.0.42 for smooth scrolling
|
- Lenis v1.0.42 for smooth scrolling
|
||||||
- GSAP 3.12.2 + ScrollTrigger for advanced animations
|
- GSAP 3.12.2 + ScrollTrigger for advanced animations
|
||||||
|
- Feather Icons for value card icons
|
||||||
|
|
||||||
## Recent Changes (October 3, 2025)
|
## Recent Changes (October 3, 2025)
|
||||||
|
|
||||||
|
|||||||
@@ -42,7 +42,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||||||
|
|
||||||
ScrollTrigger.defaults({ scroller: document.body });
|
ScrollTrigger.defaults({ scroller: document.body });
|
||||||
|
|
||||||
ScrollTrigger.addEventListener('refresh', () => lenis.update());
|
ScrollTrigger.addEventListener('refresh', () => lenis.resize());
|
||||||
ScrollTrigger.refresh();
|
ScrollTrigger.refresh();
|
||||||
|
|
||||||
let lastScrollTop = 0;
|
let lastScrollTop = 0;
|
||||||
|
|||||||
Reference in New Issue
Block a user