From 23056b61fe7877120de1a4fe6eeef1a111777b15 Mon Sep 17 00:00:00 2001 From: Shazzz Date: Wed, 21 Jan 2026 09:00:14 -0500 Subject: [PATCH 1/3] simplified mobile view for hero page --- src/components/hero/HTMLBox.tsx | 4 ++-- src/components/hero/Stats.tsx | 14 +++++++------- src/components/hero/Welcome.tsx | 8 +++++--- src/pages/Hero.tsx | 2 +- 4 files changed, 15 insertions(+), 13 deletions(-) diff --git a/src/components/hero/HTMLBox.tsx b/src/components/hero/HTMLBox.tsx index 4f2d58c..d36e5ee 100644 --- a/src/components/hero/HTMLBox.tsx +++ b/src/components/hero/HTMLBox.tsx @@ -5,7 +5,7 @@ const HTMLBox = () => { return (
{/* Bracket SVG - Left */} -
+
bracket
@@ -72,7 +72,7 @@ const HTMLBox = () => {
{/* Bracket SVG - Right */} -
+
bracket
diff --git a/src/components/hero/Stats.tsx b/src/components/hero/Stats.tsx index 74d7200..16aa5fb 100644 --- a/src/components/hero/Stats.tsx +++ b/src/components/hero/Stats.tsx @@ -54,19 +54,19 @@ export const Stats = () => { }, []); return ( -
- {/* Stats Grid - 1 column mobile, 3 columns desktop */} -
+
+ {/* Stats Grid - flex row mobile, 3 columns desktop */} +
{statsData.map((stat, index) => (
{/* Number Container - Animated count-up */} -
+
{ {/* Label Text - Regular weight Dosis font */}

{ {/* Laurier Computing Society Text */}

LAURIER COMPUTING SOCIETY

{/* Mascots Section */} - +
+ +
); }; diff --git a/src/pages/Hero.tsx b/src/pages/Hero.tsx index 03b9761..a1bfd79 100644 --- a/src/pages/Hero.tsx +++ b/src/pages/Hero.tsx @@ -9,7 +9,7 @@ import HTMLBox from '../components/hero/HTMLBox'; export const HeroPage = () => { return ( <> -
+
From 7ccffb086acbd3a2e41c565a2ba8c6188aae4af5 Mon Sep 17 00:00:00 2001 From: Shazzz Date: Wed, 21 Jan 2026 09:29:54 -0500 Subject: [PATCH 2/3] modified mobile view for events --- src/components/events/EventCarousel.tsx | 30 ++++++++++++++----- src/components/events/EventCarouselItem.tsx | 12 ++++---- .../universal/PatternBackground.tsx | 5 +++- src/pages/Events.tsx | 4 +-- 4 files changed, 34 insertions(+), 17 deletions(-) diff --git a/src/components/events/EventCarousel.tsx b/src/components/events/EventCarousel.tsx index 5cb8c31..5e26730 100644 --- a/src/components/events/EventCarousel.tsx +++ b/src/components/events/EventCarousel.tsx @@ -18,6 +18,7 @@ export const EventCarousel = ({ events }: EventCarouselProps) => { const [isDragging, setIsDragging] = useState(false); const [speedMultiplier, setSpeedMultiplier] = useState(1); const [translateX, setTranslateX] = useState(0); + const [isMobile, setIsMobile] = useState(false); const speedMultiplierRef = useRef(1); const animationFrameRef = useRef(null); @@ -38,17 +39,27 @@ export const EventCarousel = ({ events }: EventCarouselProps) => { lastTimeVelocityRef.current = Date.now(); }, []); + // Detect mobile screen size + useEffect(() => { + const checkMobile = () => setIsMobile(window.innerWidth < 768); + checkMobile(); + window.addEventListener('resize', checkMobile); + return () => window.removeEventListener('resize', checkMobile); + }, []); + // Update ref when speedMultiplier changes useEffect(() => { speedMultiplierRef.current = speedMultiplier; }, [speedMultiplier]); - // Handle deceleration on hover and acceleration on unhover + // Handle deceleration on hover and acceleration on unhover (desktop only) useEffect(() => { const interval = setInterval(() => { setSpeedMultiplier((prev) => { - if (isHovered || isDragging) { + if ((isHovered || isDragging) && !isMobile) { return Math.max(0, prev - 0.2); + } else if (isMobile) { + return 1; // Keep full speed on mobile } else { return Math.min(1, prev + 0.2); } @@ -56,10 +67,13 @@ export const EventCarousel = ({ events }: EventCarouselProps) => { }, 100); return () => clearInterval(interval); - }, [isHovered, isDragging]); + }, [isHovered, isDragging, isMobile]); - // Handle mouse down - start drag + // Handle mouse down - start drag (disabled on mobile) const handleMouseDown = (e: React.MouseEvent) => { + // Disable dragging on mobile + if (isMobile) return; + // Only allow dragging when carousel is stopped (speedMultiplier is 0) if (speedMultiplierRef.current > 0.05) return; @@ -161,7 +175,7 @@ export const EventCarousel = ({ events }: EventCarouselProps) => { return (
{ width: 'fit-content', userSelect: 'none', }} - onMouseEnter={() => !isDragging && setIsHovered(true)} - onMouseLeave={() => !isDragging && setIsHovered(false)} - onMouseDown={handleMouseDown} + onMouseEnter={() => !isDragging && !isMobile && setIsHovered(true)} + onMouseLeave={() => !isDragging && !isMobile && setIsHovered(false)} + onMouseDown={!isMobile ? handleMouseDown : undefined} > {duplicatedEvents.map((event, index) => (
diff --git a/src/components/events/EventCarouselItem.tsx b/src/components/events/EventCarouselItem.tsx index ffd5caa..6c46088 100644 --- a/src/components/events/EventCarouselItem.tsx +++ b/src/components/events/EventCarouselItem.tsx @@ -13,7 +13,7 @@ export const EventCarouselItem = ({ }: EventCarouselItemProps) => { return (
{/* Text overlay content - positioned at bottom */} -
+
{/* Title and Date */} -
-

+
+

{title}

-

{date}

+

{date}

{/* Description */} -

+

{description}

diff --git a/src/components/universal/PatternBackground.tsx b/src/components/universal/PatternBackground.tsx index 5c7daf6..62ac315 100644 --- a/src/components/universal/PatternBackground.tsx +++ b/src/components/universal/PatternBackground.tsx @@ -1,6 +1,8 @@ import patternSvg from '../../assets/patterns/Icon_Pattern.svg'; export const PatternBackground = () => { + const isMobile = window.innerWidth < 768; + return (
{ inset: '-50%', backgroundImage: `url(${patternSvg})`, backgroundRepeat: 'repeat', - backgroundSize: '800px', + backgroundSize: isMobile ? '600px' : '800px', opacity: 0.02, transform: 'rotate(-15deg)', transformOrigin: 'center', + willChange: 'auto', }} />
diff --git a/src/pages/Events.tsx b/src/pages/Events.tsx index 64afe18..c1582d7 100644 --- a/src/pages/Events.tsx +++ b/src/pages/Events.tsx @@ -63,9 +63,9 @@ function Events() { ]; return ( -
+

Upcoming Events From 84686ce1c4ac37ebf0633d914f7062a5cb69866f Mon Sep 17 00:00:00 2001 From: Shazzz Date: Wed, 21 Jan 2026 09:38:29 -0500 Subject: [PATCH 3/3] fixed mobile view for initiatives page --- src/components/initiatives/MeetThePros.tsx | 4 ++-- src/components/initiatives/SpeakerSignUp.tsx | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/initiatives/MeetThePros.tsx b/src/components/initiatives/MeetThePros.tsx index 6c9cecc..b8f1fc5 100644 --- a/src/components/initiatives/MeetThePros.tsx +++ b/src/components/initiatives/MeetThePros.tsx @@ -19,11 +19,11 @@ export default function MeetThePros() {
-

+

PROFESSIONALS

-
+

Our flagship event bringing together professionals from different fields to give students a first hand retelling of the field and provide them with advice.

diff --git a/src/components/initiatives/SpeakerSignUp.tsx b/src/components/initiatives/SpeakerSignUp.tsx index 099bfe2..5ca1e1d 100644 --- a/src/components/initiatives/SpeakerSignUp.tsx +++ b/src/components/initiatives/SpeakerSignUp.tsx @@ -6,21 +6,21 @@ export default function SpeakerSignup() {
{/* Doug Mascot positioned to pop out of top and clip at bottom - trying */} -
+
{/* Content */}
-

+

WANT TO BE A SPEAKER AT OUR NEXT MTP SESSION?

-

+

We'd love to hear from anyone eager to inform the youth of today about the dangers of the outside world [employement]. Click the button below and sign up to attend our next session!