Updating gallery

src/data/EventsDatabase.tsx

@@ -1,36 +1,45 @@
 import { EventObject } from '../tools/CustomTypes'
 
-const semesterEnd = '5/08/25'
+const semesterEnd = '12/17/25'
 const EVENT_INFO: EventObject[] = [
+	// {
+	// 	title: 'Weekly SolidWorks Workshop',
+	// 	description: `The goal of these classes is to equip you with the skills to model and design on a professional
+	// 		level, as well as create a common ground for all engineers to work together more efficiently and effectively`,
+	// 	date: new Date('2025-03-10T17:30:00'),
+	// 	location: 'The ideas hub (second floor of the engineering building)',
+	// 	weekly: true,
+	// 	endDate: new Date(semesterEnd),
+	// 	duration: 90 // 1 hour 30 minutes
+	// },
 	{
-		title: 'Weekly SolidWorks Workshop',
-		description: `The goal of these classes is to equip you with the skills to model and design on a professional
-			level, as well as create a common ground for all engineers to work together more efficiently and effectively`,
-		date: new Date('2025-03-10T17:30:00'),
-		location: 'The ideas hub (second floor of the engineering building)',
-		weekly: true,
-		endDate: new Date(semesterEnd),
-		duration: 90 // 1 hour 30 minutes
+		title: 'General Body Meeting',
+		description: 'First GBM of the semester, talking about the goals for the year and updates on the competition.',
+		date: new Date('2025-08-27T18:30:00'),
+		location: 'Fishbowl (College of Engineering EN 102)'
 	},
 	{
-		title: 'General Body Meeting',
-		description: 'Updates on what happened since the last GBM and the plan for the rest of the semester as well as an activity',
-		date: new Date('2025-02-05T17:00:00'),
-		location: '201A classroom (The ideas hub second floor of the engineering building)'
+		title: 'Lockheed Martin Recruitment event',
+		description: `Lockheed Martin is coming out to talk to the members about recruitment opportunities 
+			and food will be available as well`,
+		date: new Date('2025-09-22T17:00:00'),
+		location: 'Fishbowl (College of Engineering EN 102)'
 	},
 	{
 		title: 'Weekly Programming Meeting',
-		description: 'The weekly meeting for the programming sub-team. Take a look at the code for the robot',
-		date: new Date('2025-03-12T17:00:00'),
+		description: `The weekly meeting for the programming sub-team. Learn how to program the robot in ROS (Robot Operating System)
+		 and more!`,
+		date: new Date('2025-09-05T14:00:00'),
 		location: 'The ideas hub (second floor of the engineering building)',
 		weekly: true,
 		endDate: new Date(semesterEnd),
 		duration: 60 // 1 hour
 	},
 	{
 		title: 'Weekly Electrical Meeting',
-		description: 'The weekly meeting for the electrical sub-team. Talk about improved batteries, wiring, and more!',
-		date: new Date('2025-03-12T18:00:00'),
+		description: `The weekly meeting for the electrical sub-team. Talk about improved batteries, wiring, custom motor controllers
+		 and more!`,
+		date: new Date('2025-09-08T17:00:00'),
 		location: 'The ideas hub (second floor of the engineering building)',
 		weekly: true,
 		endDate: new Date(semesterEnd),
@@ -39,7 +48,7 @@ const EVENT_INFO: EventObject[] = [
 	{
 		title: 'Weekly Mechanical Meeting',
 		description: 'The weekly meeting for the mechanical sub-team. Learn about the design aspects of robot and 3D model parts.',
-		date: new Date('2025-03-12T16:00:00'),
+		date: new Date('2025-09-02T17:00:00'),
 		location: 'The ideas hub (second floor of the engineering building)',
 		weekly: true,
 		endDate: new Date(semesterEnd),

src/data/HomeCarouselInfo.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import { SlideInfo } from '../pages/general/carousel/CarouselStyles'
-import slide1 from '../assets/pics/photo-gallery/rmc/comp-team-2024.jpg'
+import slide1 from '../assets/pics/photo-gallery/rmc/comp-team-2025.jpeg'
 import slide2 from '../assets/pics/carousel/rocksat17.jpeg'
 import slide3 from '../assets/pics/carousel/rmc-team.jpeg'
 import slide4 from '../assets/pics/carousel/balloon-team.jpeg'

src/data/RoboticsPhotoGalleryInfo.tsx

@@ -3,30 +3,33 @@ import { GalleryImage } from '../pages/general/photo-gallery/PhotoGalleryStyles'
 
 // eslint-disable-next-line id-length
 const ROBOTICS_PHOTO_GALLERY_INFO: GalleryImage[] = [
-	{ image: RMC_PHOTO_GALLERY[0], title: '2024', description: `The team before our first competition run at the University of 
+	{ image: RMC_PHOTO_GALLERY[0], title: '2025', description: `The team before our first competition run at the University of 
 		Central Florida.`},
-	{ image: RMC_PHOTO_GALLERY[1], title: '2023', description: 'The team after our first competition run at the University of Alabama.' },
-	{ image: RMC_PHOTO_GALLERY[2], title: '2023', description: `The leads in front of the project after finishing 
+	{ image: RMC_PHOTO_GALLERY[1], title: '2025', description: 'Temple Robotics volunteering at the FRC competition'},
+	{ image: RMC_PHOTO_GALLERY[2], title: '2024', description: `The team before our first competition run at the University of 
+		Central Florida.`},
+	{ image: RMC_PHOTO_GALLERY[3], title: '2023', description: 'The team after our first competition run at the University of Alabama.' },
+	{ image: RMC_PHOTO_GALLERY[4], title: '2023', description: `The leads in front of the project after finishing 
 		the outside construction.` },
-	{ image: RMC_PHOTO_GALLERY[3], title: '2023', description: `The team worked hard on the design in the fall semester,
+	{ image: RMC_PHOTO_GALLERY[5], title: '2023', description: `The team worked hard on the design in the fall semester,
 		then built the arena over winter break.` },
-	{ image: RMC_PHOTO_GALLERY[4], title: '2023', description: `A major goal of 2023 was to construct a practice arena 
+	{ image: RMC_PHOTO_GALLERY[6], title: '2023', description: `A major goal of 2023 was to construct a practice arena 
 		for the robot. Here is the team hard at work!` },
-	{ image: RMC_PHOTO_GALLERY[5], title: '2022', description: `The 2022 robot is coming together! No belts yet but the
+	{ image: RMC_PHOTO_GALLERY[7], title: '2022', description: `The 2022 robot is coming together! No belts yet but the
 		chasses is complete.` },
-	{ image: RMC_PHOTO_GALLERY[6], title: '2022', description: 'I guess our team has never heard of cable management...' },
-	{ image: RMC_PHOTO_GALLERY[7], title: '2022', description: `Us showing off JPL at the 30th anniversary of the NASA
+	{ image: RMC_PHOTO_GALLERY[8], title: '2022', description: 'I guess our team has never heard of cable management...' },
+	{ image: RMC_PHOTO_GALLERY[9], title: '2022', description: `Us showing off JPL at the 30th anniversary of the NASA
 		Space Grant.` },
-	{ image: RMC_PHOTO_GALLERY[8], title: '2018', description: 'Our ME\'s filing away to make sure everything fits perfectly.' },
-	{ image: RMC_PHOTO_GALLERY[9], title: '2018', description: 'BoxBot, of course we still love you.' },
-	{ image: RMC_PHOTO_GALLERY[10], title: '2017', description: `Our team plugged the ethernet cable into the wrong port. 
+	{ image: RMC_PHOTO_GALLERY[10], title: '2018', description: 'Our ME\'s filing away to make sure everything fits perfectly.' },
+	{ image: RMC_PHOTO_GALLERY[11], title: '2018', description: 'BoxBot, of course we still love you.' },
+	{ image: RMC_PHOTO_GALLERY[12], title: '2017', description: `Our team plugged the ethernet cable into the wrong port. 
 		Good thing duct tape fixes everything!` },
-	{ image: RMC_PHOTO_GALLERY[11], title: '2017', description: `Our hotel didn't like us working on the robot in our rooms. 
+	{ image: RMC_PHOTO_GALLERY[13], title: '2017', description: `Our hotel didn't like us working on the robot in our rooms. 
 		I guess we'll just use our vans.` },
-	{ image: RMC_PHOTO_GALLERY[12], title: '2011', description: `The year our team's autonomous was so good they had to
+	{ image: RMC_PHOTO_GALLERY[14], title: '2011', description: `The year our team's autonomous was so good they had to
 		change the rules.` },
-	{ image: RMC_PHOTO_GALLERY[13], title: '2010', description: 'Scoops was born.' },
-	{ image: RMC_PHOTO_GALLERY[14], title: '2009', description: 'Our first team at the very first Robotics Mining Competition.' }
+	{ image: RMC_PHOTO_GALLERY[15], title: '2010', description: 'Scoops was born.' },
+	{ image: RMC_PHOTO_GALLERY[16], title: '2009', description: 'Our first team at the very first Robotics Mining Competition.' }
 ]
 
 export default ROBOTICS_PHOTO_GALLERY_INFO

src/declaration.d.ts

@@ -1,6 +1,7 @@
 declare module '*.mp4';
 declare module '*.jpg';
 declare module '*.png';
+declare module '*.PNG';
 declare module '*.woff';
 declare module '*.woff2';
 declare module '*.otf';

src/pages/events/EventListStyles.tsx

@@ -14,9 +14,6 @@ export default class EventListStyles {
 		@media (max-width: 718px) {
 			display: grid;
 			grid-template-columns: 100%;
-			grid-template-rows:
-				calc(var(--vh) * .2)    /* Intro heading */
-				max(calc(var(--vh) * .15), 100px);  /* Contact info */
 			justify-content: center;
 			align-content: center;
 		}

src/pages/general/navigation/Navigation.tsx

@@ -21,28 +21,36 @@ const Navigation = (): React.ReactElement => {
 
 	// State for handling dropdown visibility
 	const [showDropdown, setShowDropdown] = useState(false)
+	// const isDesktop = useMemo(() => {
+	// 	if (typeof window === 'undefined') return false
+	// 	return window.matchMedia('(hover: hover) and (pointer: fine)').matches
+	// }, [])
 
+	const isDesktop = (): boolean => {
+		if(width < Constants.MOBILE_SIZE)
+			return false
+		return true
+	}
 	// Timeout variable to prevent flickering
 	let hideDropdownTimeout: NodeJS.Timeout
 
 	// Open dropdown when hovering over "Projects"
 	const handleMouseEnter = (): void => {
-		clearTimeout(hideDropdownTimeout) // Cancel hide if mouse enters again
-		setShowDropdown(true)
+		if(isDesktop()){
+			clearTimeout(hideDropdownTimeout) // Cancel hide if mouse enters again
+			setShowDropdown(true)
+		}
 	}
 
 	// Close dropdown when mouse leaves (with small delay)
 	const handleMouseLeave = (): void => {
-		hideDropdownTimeout = setTimeout(() => {
-			setShowDropdown(false)
-		}, 400) // Small delay before closing
+		if(isDesktop()){
+			hideDropdownTimeout = setTimeout(() => {
+				setShowDropdown(false)
+			}, 400) // Small delay before closing
+		}
 	}
 
-	// Close dropdown when clicking a project
-	const handleItemClick = (): void => {
-		setShowDropdown(false) // Close dropdown when a project is clicked
-		scrollToTop()
-	}
 
 	return (
 		<>
@@ -63,7 +71,9 @@ const Navigation = (): React.ReactElement => {
 
 				<Navbar.Toggle aria-controls='basic-navbar-nav' />
 				<Navbar.Collapse className='basic-navbar-links'>
-					<Styles.NavbarLinks variant='pills' toggle={width < Constants.MOBILE_SIZE ? 1 : 0}>
+					<Styles.NavbarLinks variant='pills'
+						toggle={width < Constants.MOBILE_SIZE ? 1 : 0}
+						transparency={scroll <= 10 && width > Constants.MOBILE_SIZE ? 1 : 0}>
 						<NavLink eventKey='1' as={Link} to={Constants.PATHS.HOME} onClick={scrollToTop}>Home</NavLink>
 						<NavLink eventKey='2' as={Link} to={Constants.PATHS.EVENTS} onClick={scrollToTop}>Events</NavLink>
 						<NavLink eventKey='3' as={Link} to={Constants.PATHS.SPONSORS} onClick={scrollToTop}>Sponsors</NavLink>
@@ -73,18 +83,23 @@ const Navigation = (): React.ReactElement => {
 							onMouseEnter={handleMouseEnter}
 							onMouseLeave={handleMouseLeave}>
 							<NavDropdown
-								title='Projects'
+								title='Groups'
 								id='projects-dropdown'
 								show={showDropdown}
-								className='nav-link'>
+								className='nav-link'
+								onToggle={(nextShow /* boolean */) => {
+									if (!isDesktop()) setShowDropdown(nextShow)
+								}}
+								// Close on any item selection
+								onSelect={() => setShowDropdown(false)}>
 								<div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
-									<NavDropdown.Item as={Link} to={Constants.PATHS.ROBOTICS} onClick={handleItemClick}>
+									<NavDropdown.Item eventKey='4' as={Link} to={Constants.PATHS.ROBOTICS} onClick={scrollToTop}>
 										Robotics
 									</NavDropdown.Item>
-									<NavDropdown.Item as={Link} to={Constants.PATHS.ROCKSAT} onClick={handleItemClick}>
+									<NavDropdown.Item eventKey='5' as={Link} to={Constants.PATHS.ROCKSAT} onClick={scrollToTop}>
 										RockSat
 									</NavDropdown.Item>
-									<NavDropdown.Item as={Link} to={Constants.PATHS.BALLOONING} onClick={handleItemClick}>
+									<NavDropdown.Item eventKey='6' as={Link} to={Constants.PATHS.BALLOONING} onClick={scrollToTop}>
 										NASA Ballooning
 									</NavDropdown.Item>
 								</div>

src/pages/general/navigation/NavigationStyles.tsx

@@ -62,6 +62,7 @@ export default class NavigationStyles {
 		& > a.nav-link.active {
 			background-color: ${props => props.toggle ? `${COLORS.SELECTED}` : 'transparent'} !important;
 		}
+
 
 		& > a.nav-link:hover {
 			color: ${COLORS.HOVER_TEXT} !important;
@@ -86,22 +87,26 @@ export default class NavigationStyles {
 		}
 
 		a.dropdown-toggle {
-			background-color: ${props => props.toggle ? `${COLORS.SELECTED}` : 'transparent'} !important;
+			background-color: ${props => props.toggle ? `${COLORS.BACKGROUND}` : 'transparent'} !important;
 			color: ${COLORS.TEXT} !important;
 			font-size: 17px;
-			padding: 6px 8px 8px 8px;
+			padding-left: 5%;
 		}
 
+		a.dropdown-item.active {
+			background-color: ${props => props.toggle ? `${COLORS.SELECTED}` : 'transparent'} !important;
+		}
+
 		.dropdown-menu {
 			position: absolute;
-			background-color: ${COLORS.PRIMARY} !important;
+			background-color: ${props => props.transparency ? 'transparent' : `${COLORS.PRIMARY}`} !important;
+			transition: background-color 0.5s;
 			padding: 0px 8px 8px 16px;
 			border: none;
 		}
 
 		.dropdown-item {
 			color: ${COLORS.TEXT} !important;
-			background-color: ${props => props.toggle ? `${COLORS.SELECTED}` : 'transparent'} !important;
 			font-size: 15px;
 			border: none;
 			padding: 0px

src/pages/home/Home.tsx

@@ -12,8 +12,8 @@ import Button from '../general/button/Button'
 // Images
 import nasaLogo from '../../assets/pics/logos/nasa.png'
 import HOME_CAROUSEL_INFO from '../../data/HomeCarouselInfo'
-const  TEAMS = `https://teams.microsoft.com/l/team/19%3aeaf903fd81cd48eba95d8e769ed78544%40thread.tacv2/conversations?groupId=8f
-		78ecbb-62f3-4b2c-bda7-7488eca908ee&tenantId=716e81ef-b522-4473-8e31-10bd02ccf6e5`
+const  TEAMS = `https://teams.microsoft.com/l/team/19%3Aeaf903fd81cd48eba95d8e769ed78544%40thread.tacv2/conversations?groupId=8f78ecbb-62f3
+-4b2c-bda7-7488eca908ee&tenantId=716e81ef-b522-4473-8e31-10bd02ccf6e5`
 
 const Home = (): React.ReactElement => {
 	return (

src/pages/home/HomeStyles.tsx

@@ -16,6 +16,8 @@ export default class HomeStyles {
 			max(calc(var(--vh) * .3), 100px)   		/* Sponsors section heading */
 			max(calc(var(--vh) * .15), 70px);  		/* Contacts */
 		justify-content: center;
+		width: 100%;
+		overflow-x: hidden; /* guard against any stray overflow */
 	`
 
 	static readonly TitleContainer = styled.div`
@@ -111,20 +113,30 @@ export default class HomeStyles {
 	`
 
 	static readonly VideoSource = styled.div`
-		display: grid;
-		grid-template-columns: 50% 50%;
-		grid-template-rows: 100%;
-		align-items: center;
-		margin-bottom: calc(var(--vh) * .02);
-
-		& > * {
-			margin-left: 5%;
-			margin-right: 5%;
-		}
-
-		& > img {
-			height: 100%;
-			justify-self: right;
-		}
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	align-items: center;
+	padding: 0 5%;                 /* replaces child margins */
+	gap: 1rem;                      /* spacing between grid items */
+	margin-bottom: calc(var(--vh) * .02);
+
+	& > * {
+		margin: 0;                    /* remove overflow-causing margins */
+	}
+
+	& > img {
+		justify-self: right;
+		max-width: 40%;              /* never exceed its column */
+		height: 40%;                 /* keep aspect ratio on mobile */
+		padding-bottom: 20px;              /* remove overflow-causing margins */
+
+	}
+
+	/* Stack on very small screens to avoid squish */
+	@media (max-width: 600px) {
+		grid-template-columns: 1fr;
+		justify-items: center;
+		text-align: center;
+	}
 	`
 }