Skip to content

added ts dependencies and changed banner photo to tsx #119

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
str4wb3rrytea wants to merge 8 commits into
base: landing-page
Choose a base branch
from
Draft

added ts dependencies and changed banner photo to tsx #119

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c77b197
added ts dependencies and changed banner photo to tsx
jennnniferkuang Nov 13, 2025
555d576
add package-lock.json to gitignore
jennnniferkuang Nov 19, 2025
c512d3d
Merge branch 'master' of https://github.com/waterloo-rocketry/website…
jennnniferkuang Nov 25, 2025
55d65f9
just kidding we should keep package-lock around
jennnniferkuang Nov 25, 2025
4135c35
added video background component
str4wb3rrytea Nov 25, 2025
3cbb859
Merge branch 'landing-page' of https://github.com/waterloo-rocketry/w…
jennnniferkuang Nov 26, 2025
47cc226
added video to homepage background
str4wb3rrytea Nov 27, 2025
2575460
adjusted video speed, website font, and nav bar colours
str4wb3rrytea May 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11,981 changes: 11,588 additions & 393 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

87 changes: 45 additions & 42 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="The Waterloo Rocketry Website"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<script type="text/javascript">
// Single Page Apps for GitHub Pages
// MIT License
// https://github.com/rafgraph/spa-github-pages
// This script checks to see if a redirect is present in the query string,
// converts it back into the correct url and adds it to the
// browser's history using window.history.replaceState(...),
// which won't cause the browser to attempt to load the new url.
// When the single page app is loaded further down in this file,
// the correct url will be waiting in the browser's history for
// the single page app to route accordingly.
(function(l) {
if (l.search[1] === '/' ) {
var decoded = l.search.slice(1).split('&').map(function(s) {
return s.replace(/~and~/g, '&')
}).join('?');
window.history.replaceState(null, null,
l.pathname.slice(0, -1) + decoded + l.hash
);
}
}(window.location))
</script>
<title>Waterloo Rocketry</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="The Waterloo Rocketry Website"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<script type="text/javascript">
// Single Page Apps for GitHub Pages
// MIT License
// https://github.com/rafgraph/spa-github-pages
// This script checks to see if a redirect is present in the query string,
// converts it back into the correct url and adds it to the
// browser's history using window.history.replaceState(...),
// which won't cause the browser to attempt to load the new url.
// When the single page app is loaded further down in this file,
// the correct url will be waiting in the browser's history for
// the single page app to route accordingly.
(function(l) {
if (l.search[1] === '/' ) {
var decoded = l.search.slice(1).split('&').map(function(s) {
return s.replace(/~and~/g, '&')
}).join('?');
window.history.replaceState(null, null,
l.pathname.slice(0, -1) + decoded + l.hash
);
}
}(window.location))
</script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&family=Audiowide&family=Michroma&family=Sansation&display=swap" rel="stylesheet" />
<title>Waterloo Rocketry</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
0 public/Rocketry Launch Website BG.mp4 → public/launch_bg_vid.mp4
View file
Open in desktop
File renamed without changes.
150 changes: 75 additions & 75 deletions src/components/Navigation/Navigation.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,75 +1,75 @@
import React, { useState, useEffect } from 'react';
import {
Navbar, Container, Nav, Image,
} from 'react-bootstrap';

import { Link } from 'react-router-dom';

import styles from './Navigation.module.css';

import bannerLogoImage from '../../img/banner_logo.webp';

// The navbar at the top of each page
const Navigation = () => {
const [scrolled, setScrolled] = useState(false);
useEffect(() => {
const Scroll = () => {
const isScrolled = window.scrollY > 50;
if (isScrolled !== scrolled) {
setScrolled(isScrolled);
}
};
window.addEventListener('scroll', Scroll);
});

return (
<Navbar collapseOnSelect expand="lg" variant="dark" fixed="top" className={`${styles.navbar} ${scrolled ? styles.scrolled : ''}`}>
<Container className={styles.navbarContainer} fluid>
<Navbar.Brand as={Link} to="/">
<Image
src={bannerLogoImage}
alt="Waterloo Rocketry Logo"
className={styles.bannerLogo}
/>
</Navbar.Brand>
<Navbar.Toggle />
<Navbar.Collapse>
<Nav className={`${styles.nav} ${scrolled ? styles.scrolled : ''}`}>
<Nav.Link as={Link} className={styles.navbarLink} to="join">
JOIN
</Nav.Link>
<Nav.Link as={Link} className={styles.navbarLink} to="competition">
COMPETITION
</Nav.Link>
<Nav.Link as={Link} className={styles.navbarLink} to="sponsors">
SPONSORS
</Nav.Link>
<Nav.Link as={Link} className={styles.navbarLink} to="rockets">
ROCKETS
</Nav.Link>
<Nav.Link as={Link} className={styles.navbarLink} to="subsystems">
SUBSYSTEMS
</Nav.Link>
<Nav.Link as={Link} className={styles.navbarLink} to="team">
TEAM
</Nav.Link>
<Nav.Link as={Link} className={styles.navbarLink} to="awards">
AWARDS
</Nav.Link>
<Nav.Link as={Link} className={styles.navbarLink} to="outreach">
OUTREACH
</Nav.Link>
<Nav.Link as={Link} className={styles.navbarLink} to="documentation">
DOCUMENTATION
</Nav.Link>
<Nav.Link as={Link} className={styles.navbarLink} to="contact">
CONTACT
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
);
};

export default Navigation;
import React, { useState, useEffect } from 'react';
import {
Navbar, Container, Nav, Image,
} from 'react-bootstrap';
import { Link } from 'react-router-dom';
import styles from './Navigation.module.css';
import bannerLogoImage from '../../img/banner_logo.webp';
// The navbar at the top of each page
const Navigation = () => {
const [scrolled, setScrolled] = useState(false);
useEffect(() => {
const Scroll = () => {
const isScrolled = window.scrollY > 50;
if (isScrolled !== scrolled) {
setScrolled(isScrolled);
}
};
window.addEventListener('scroll', Scroll);
});
return (
<Navbar collapseOnSelect expand="lg" variant="dark" fixed="top" className={`${styles.navbar} ${scrolled ? styles.scrolled : ''}`}>
<Container className={styles.navbarContainer} fluid>
<Navbar.Brand as={Link} to="/">
<Image
src={bannerLogoImage}
alt="Waterloo Rocketry Logo"
className={styles.bannerLogo}
/>
</Navbar.Brand>
<Navbar.Toggle />
<Navbar.Collapse>
<Nav className={`${styles.nav} ${scrolled ? styles.scrolled : ''}`}>
<Nav.Link as={Link} className={styles.navbarLink} to="join">
JOIN
</Nav.Link>
{/* <Nav.Link as={Link} className={styles.navbarLink} to="competition">
COMPETITION
</Nav.Link> */}
<Nav.Link as={Link} className={styles.navbarLink} to="sponsors">
SPONSORS
</Nav.Link>
<Nav.Link as={Link} className={styles.navbarLink} to="rockets">
ROCKETS
</Nav.Link>
{/* <Nav.Link as={Link} className={styles.navbarLink} to="subsystems">
SUBSYSTEMS
</Nav.Link> */}
<Nav.Link as={Link} className={styles.navbarLink} to="team">
TEAM
</Nav.Link>
{/* <Nav.Link as={Link} className={styles.navbarLink} to="awards">
AWARDS
</Nav.Link> */}
{/* <Nav.Link as={Link} className={styles.navbarLink} to="outreach">
OUTREACH
</Nav.Link>
<Nav.Link as={Link} className={styles.navbarLink} to="documentation">
DOCUMENTATION
</Nav.Link> */}
<Nav.Link as={Link} className={styles.navbarLink} to="contact">
CONTACT
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
);
};
export default Navigation;
75 changes: 40 additions & 35 deletions src/components/Navigation/Navigation.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,40 @@
.bannerLogo {
height: 2.3rem;
}

.navbar {
background: rgba(0, 0, 0, 0.85);
z-index: 10;
position: relative;
height: 5rem;
transition: background 0.3s;
}

.scrolled {
background: rgba(0, 0, 0, 1);
}

.nav {
width: 100%;
justify-content: flex-end;
@media (max-width: 1000px) {
background: rgba(0, 0, 0, 0.95);
text-align: center;
}
}

.navbarContainer {
margin: 0.25rem 0.5rem 0 0.5rem;
}

.navbarLink {
font-weight: 300;
font-size: 1.1rem;
display: inline-block;
padding-bottom: 0.8rem;
}
.bannerLogo {
height: 2.3rem;
}

.navbar {
background: rgba(0, 0, 0, 0.85);
z-index: 10;
position: relative;
height: 5rem;
transition: background 0.3s;
}

.scrolled {
background: rgba(0, 0, 0, 1);
}

.nav {
width: 100%;
justify-content: flex-end;
@media (max-width: 1000px) {
background: rgba(0, 0, 0, 0.95);
text-align: center;
}
}

.navbarContainer {
margin: 0.25rem 0.5rem 0 0.5rem;
}

.navbarLink {
font-weight: 300;
font-size: 1.1rem;
display: inline-block;
padding-bottom: 0.8rem;
color: #EEEEEE !important;
}

.navbarLink:hover {
color:#FFFF !important;
}
4 changes: 2 additions & 2 deletions src/components/VideoBackground/VideoBackground.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@
position: relative
}

.backgroundImage {
filter: brightness(40%);
.backgroundVideo {
filter: brightness(80%);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
Expand Down
27 changes: 20 additions & 7 deletions src/components/VideoBackground/VideoBackground.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,35 @@
import React from 'react';
import React, { useRef } from 'react';

import styles from './VideoBackground.module.css';

interface BannerPhotoProps {
image: string;
interface VideoBackgroundProps {
video: string;
style?: React.CSSProperties;
children?: React.ReactNode;
}

// A background video spanning the width and height of the page
const VideoBackground: React.FC<BannerPhotoProps> = ({
image,
const VideoBackground: React.FC<VideoBackgroundProps> = ({
video,
style,
children,
}) => {
const videoRef = useRef<HTMLVideoElement>(null);

return (
<div className={styles.bannerPhoto}>
<div className={styles.backgroundImage} style={{ backgroundImage: `url(${image})`, ...style }} />
<div className={styles.bannerPhoto} style={style}>
<video
ref={videoRef}
onLoadedMetadata={(e) => {
e.currentTarget.playbackRate = 0.4;
}}
className={styles.backgroundVideo}
src={video}
autoPlay
loop
muted
playsInline
/>
<div className={styles.bannerText}>
{children}
</div>
Expand Down
Loading