Skip to content

Selective web-only merge from feat/image-resize-scripts #3

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

Merged
WesP10 merged 1 commit into from
May 21, 2026
Merged

Selective web-only merge from feat/image-resize-scripts #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
61 changes: 61 additions & 0 deletions 404.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html class="dark" lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Cornell Hyperloop — Page Not Found</title>
<meta name="description" content="The page you requested was not found. Return home or explore Cornell Hyperloop subteams and members."/>
<meta name="robots" content="noindex,follow"/>
<link rel="canonical" href="https://www.cornellhyperloop.com/404.html"/>
<meta property="og:title" content="Cornell Hyperloop — Page Not Found"/>
<meta property="og:description" content="The page you requested was not found. Return home or explore Cornell Hyperloop subteams and members."/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://www.cornellhyperloop.com/404.html"/>
<meta property="og:image" content="https://www.cornellhyperloop.com/res/2025springhyperloop.avif"/>
<meta property="og:image:alt" content="Cornell Hyperloop team at competition"/>
<meta property="og:site_name" content="Cornell Hyperloop"/>
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content="Cornell Hyperloop — Page Not Found"/>
<meta name="twitter:description" content="The page you requested was not found. Return home or explore Cornell Hyperloop subteams and members."/>
<meta name="twitter:image" content="https://www.cornellhyperloop.com/res/2025springhyperloop.avif"/>
<link rel="icon" href="https://www.cornellhyperloop.com/favicon.png" type="image/png"/>
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; base-uri 'self'; form-action 'self'; img-src 'self' data: https:; font-src 'self' data:; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline'; connect-src 'self'; frame-src https://www.youtube.com; worker-src 'self'; object-src 'none'"/>
<link rel="stylesheet" href="res/tw.css?v=8"/>
<style>
@font-face{font-family:'Material Symbols Outlined';src:url('res/fonts/material-symbols-outlined.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('res/fonts/Inter/Inter-VariableFont_opsz,wght.subset.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('res/fonts/Inter/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype');font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('res/fonts/Space_Grotesk/SpaceGrotesk-VariableFont_wght.subset.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap}
.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased}
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24 }
html,body{background:#0c1324;color:#dce1fb;overflow-x:hidden}
</style>
</head>
<body class="bg-background text-on-background font-body-md text-body-md overflow-x-hidden">
<div id="nav-placeholder"></div>

<main>
<section class="min-h-[70vh] flex items-center border-b border-outline-variant">
<div class="max-w-container-max mx-auto px-margin py-24">
<div class="border-l-2 border-primary-container pl-8">
<span class="font-label-caps text-label-caps text-primary tracking-[0.2em] uppercase flex items-center gap-2 mb-4">
<span class="w-8 h-[1px] bg-primary block"></span>404
</span>
<h1 class="font-headline-xl text-headline-xl text-on-surface uppercase tracking-tighter mb-4">Page Not Found</h1>
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-2xl mb-8">
The link you followed does not exist. Use the links below to get back on track.
</p>
<div class="flex flex-wrap gap-4">
<a class="bg-primary-container text-on-primary-container px-6 py-3 font-label-caps text-label-caps uppercase tracking-widest hover:bg-primary transition-colors duration-200" href="index.html">Home</a>
<a class="bg-transparent text-primary px-6 py-3 font-label-caps text-label-caps uppercase tracking-widest border border-outline-variant hover:border-primary hover:bg-surface-container transition-all duration-200" href="subteams.html">Subteams</a>
<a class="bg-transparent text-primary px-6 py-3 font-label-caps text-label-caps uppercase tracking-widest border border-outline-variant hover:border-primary hover:bg-surface-container transition-all duration-200" href="members.html">Members</a>
</div>
</div>
</div>
</section>
</main>

<div id="footer-placeholder"></div>
<script src="shared.js?v=8"></script>
</body>
</html>
1 change: 1 addition & 0 deletions CNAME
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
www.cornellhyperloop.com
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ hyperloop_website/
├── members.html # Full roster, data-driven from members.json
├── apply.html # Recruitment / application page
├── sponsors.html # Sponsor logos and tiers
├── updates.html # News / updates feed
├── shared.js # Nav + footer renderer, service worker registration
├── sw.js # Service worker (cache-first, prefetch on load)
├── members.json # Symlink/copy of res/members.json (used by sw.js cache path)
Expand All @@ -46,6 +45,7 @@ hyperloop_website/
## Adding / Editing Content

- **Roster** — Edit `res/members.json`. Each person needs `name`, `role`, `subteam`, `photo` (filename in `compressed_teamPhotos/`), and optionally `linkedin`.
- **Image optimization** — Run `tools/convert_images.py` to convert any new JPG/PNG assets to AVIF before referencing them in HTML or `res/members.json`.
- **New subteam page** — Copy an existing file from `subteam-views/`, update content, add a card to `subteams.html`, and add the path to the `PAGES` array in `sw.js`.
- **Nav links** — Edit the `NAV_LINKS` array at the top of `shared.js`.
- **Color / typography** — The Tailwind config block is duplicated in each HTML file's `<head>`. Update all files if changing the design system (or consolidate into a shared config file if a build step is introduced).
16 changes: 16 additions & 0 deletions apply.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,22 @@
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Cornell Hyperloop — Apply</title>
<meta name="description" content="Apply to join Cornell Hyperloop. Learn roles, recruitment timeline, and how to get involved with the team."/>
<meta name="robots" content="index,follow"/>
<link rel="canonical" href="https://www.cornellhyperloop.com/apply.html"/>
<meta property="og:title" content="Cornell Hyperloop — Apply"/>
<meta property="og:description" content="Apply to join Cornell Hyperloop. Learn roles, recruitment timeline, and how to get involved with the team."/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://www.cornellhyperloop.com/apply.html"/>
<meta property="og:image" content="https://www.cornellhyperloop.com/res/2025springhyperloop.avif"/>
<meta property="og:image:alt" content="Cornell Hyperloop team at competition"/>
<meta property="og:site_name" content="Cornell Hyperloop"/>
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content="Cornell Hyperloop — Apply"/>
<meta name="twitter:description" content="Apply to join Cornell Hyperloop. Learn roles, recruitment timeline, and how to get involved with the team."/>
<meta name="twitter:image" content="https://www.cornellhyperloop.com/res/2025springhyperloop.avif"/>
<link rel="icon" href="https://www.cornellhyperloop.com/favicon.png" type="image/png"/>
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; base-uri 'self'; form-action 'self'; img-src 'self' data: https:; font-src 'self' data:; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline'; connect-src 'self'; frame-src https://www.youtube.com; worker-src 'self'; object-src 'none'"/>
<link rel="stylesheet" href="res/tw.css?v=8"/>
<style>
html { scroll-behavior: smooth; }
Expand Down
Binary file added favicon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
34 changes: 25 additions & 9 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,22 @@
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Cornell Hyperloop</title>
<meta name="description" content="Student-led Cornell Hyperloop designs and tests hyperloop pods, uniting mechanical, electrical, and business teams at Cornell University."/>
<meta name="robots" content="index,follow"/>
<link rel="canonical" href="https://www.cornellhyperloop.com/"/>
<meta property="og:title" content="Cornell Hyperloop"/>
<meta property="og:description" content="Student-led Cornell Hyperloop designs and tests hyperloop pods, uniting mechanical, electrical, and business teams at Cornell University."/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://www.cornellhyperloop.com/"/>
<meta property="og:image" content="https://www.cornellhyperloop.com/res/2025springhyperloop.avif"/>
<meta property="og:image:alt" content="Cornell Hyperloop team at competition"/>
<meta property="og:site_name" content="Cornell Hyperloop"/>
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content="Cornell Hyperloop"/>
<meta name="twitter:description" content="Student-led Cornell Hyperloop designs and tests hyperloop pods, uniting mechanical, electrical, and business teams at Cornell University."/>
<meta name="twitter:image" content="https://www.cornellhyperloop.com/res/2025springhyperloop.avif"/>
<link rel="icon" href="https://www.cornellhyperloop.com/favicon.png" type="image/png"/>
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; base-uri 'self'; form-action 'self'; img-src 'self' data: https:; font-src 'self' data:; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline'; connect-src 'self'; frame-src https://www.youtube.com; worker-src 'self'; object-src 'none'"/>
<link rel="stylesheet" href="res/tw.css?v=8"/>
<style>
@font-face{font-family:'Material Symbols Outlined';src:url('res/fonts/material-symbols-outlined.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
Expand Down Expand Up @@ -71,7 +87,7 @@
<!-- Hero -->
<section class="relative min-h-[100vh] flex items-center justify-center overflow-hidden bg-surface-container-low border-b border-outline-variant">
<div class="absolute inset-0 z-0 lg:left-[-8%] xl:left-[-12%] 2xl:left-[-16%]">
<img alt="Hyperloop pod visualization" class="w-full h-full object-contain opacity3" src="res/claireArt.avif" loading="lazy" decoding="async"/>
<img alt="Hyperloop pod visualization" class="w-full h-full object-contain opacity3" src="res/claireart.avif" loading="lazy" decoding="async"/>
</div>
<div class="grid-overlay absolute inset-0 z-10 opacity-30"></div>
<!-- Decorative rings -->
Expand All @@ -92,7 +108,7 @@
<g class="ring-spin"><circle cx="310" cy="310" r="200" stroke="#d22b2b" stroke-width="1.5" opacity="0.20"/></g>
<g class="ring-spin"><circle cx="310" cy="310" r="170" stroke="#d22b2b" stroke-width="0.5" stroke-dasharray="4 6" opacity="0.15"/></g>
</svg>
<svg id="hero-ring-br" class="absolute -bottom-[75%] -right-20 md:-bottom-40 md:-right-40 w-[580px] h-[580px] opacity-85 z-10 pointer-events-none" viewBox="0 0 580 580" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<svg id="hero-ring-br" class="absolute -bottom-[70%] -right-[55%] md:-bottom-40 md:-right-40 w-[580px] h-[580px] opacity-85 z-10 pointer-events-none" viewBox="0 0 580 580" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<g class="ring-spin"><circle cx="290" cy="290" r="270" stroke="#d22b2b" stroke-width="0.5" opacity="0.15"/>
<line x1="290" y1="20" x2="290" y2="35" stroke="#d22b2b" stroke-width="1" opacity="0.40"/>
<line x1="290" y1="545" x2="290" y2="560" stroke="#d22b2b" stroke-width="1" opacity="0.40"/>
Expand Down Expand Up @@ -133,7 +149,7 @@ <h1 class="font-headline-xl text-headline-xl text-on-surface leading-tight upper
<!-- Right: triangular photo panel -->
<div id="hero-panel" class="hidden lg:flex md:flex-1 relative" style="padding-right: var(--hero-spread); margin-top: 5%;">
<div class="hero-photo-clip absolute inset-0 overflow-hidden">
<img id="hero-panel-img" alt="Cornell Hyperloop team at competition" class="w-full h-full object-cover" src="res/2025 Spring Hyperloop.avif" fetchpriority="high" decoding="async"/>
<img id="hero-panel-img" alt="Cornell Hyperloop team at competition" class="w-full h-full object-cover" src="res/2025springhyperloop.avif" fetchpriority="high" decoding="async"/>
<div class="absolute inset-0 bg-gradient-to-r from-background/60 via-transparent to-transparent"></div>
<div class="absolute inset-0 bg-primary-container/10"></div>
</div>
Expand All @@ -149,9 +165,9 @@ <h1 class="font-headline-xl text-headline-xl text-on-surface leading-tight upper
<section id="project-mission" class="py-24 relative overflow-hidden bg-surface border-b border-outline-variant">
<div class="grid-overlay absolute inset-0 z-0 opacity-10"></div>
<!-- CAD silhouette backgrounds -->
<img src="res/outputA.avif" aria-hidden="true" class="cad-parallax-layer invisible md:visible absolute left-[-12%] top-[18%] h-[45%] 2xl:h-[60%] w-auto object-contain opacity-[0.15] md:opacity-[0.09] grayscale pointer-events-none select-none z-0" style="--base-x: 0px; --base-y: 0px; --base-scale: 1; --base-rotate: 0deg; filter: grayscale(1) brightness(1.4);" data-parallax-x="-22" data-parallax-y="-42" data-parallax-scale="0.016" data-parallax-rotate="0.8" loading="lazy" decoding="async"/>
<img src="res/outputB.avif" aria-hidden="true" class="cad-parallax-layer invisible md:visible absolute left-[82%] top-[18%] h-[45%] w-auto object-contain opacity-[0.15] grayscale pointer-events-none select-none z-0" style="--base-x: -50%; --base-y: -50%; --base-scale: 1; --base-rotate: 0deg; filter: grayscale(1) brightness(1.4);" data-parallax-x="18" data-parallax-y="-32" data-parallax-scale="0.013" data-parallax-rotate="-0.6" loading="lazy" decoding="async"/>
<img src="res/outputC.avif" aria-hidden="true" class="cad-parallax-layer invisible md:visible absolute left-[40%] bottom-[-23%] h-[65%] w-auto object-contain opacity-[0.15] md:opacity-[0.09] grayscale pointer-events-none select-none z-0" style="--base-x: 0px; --base-y: 0px; --base-scale: 1; --base-rotate: -15deg; filter: grayscale(1) brightness(1.4);" data-parallax-x="-14" data-parallax-y="-52" data-parallax-scale="0.015" data-parallax-rotate="0.9" loading="lazy" decoding="async"/>
<img src="res/outputa.avif" aria-hidden="true" class="cad-parallax-layer absolute left-[-2%] top-[0%] h-[30%] md:left-[-12%] md:top-[18%] md:h-[45%] 2xl:h-[60%] w-auto object-contain opacity-[0.08] md:opacity-[0.09] grayscale pointer-events-none select-none z-0" style="--base-x: 0px; --base-y: 0px; --base-scale: 1; --base-rotate: 0deg; filter: grayscale(1) brightness(1.4);" data-parallax-x="-22" data-parallax-y="-42" data-parallax-scale="0.016" data-parallax-rotate="0.8" loading="lazy" decoding="async"/>
<img src="res/outputb.avif" aria-hidden="true" class="cad-parallax-layer absolute left-[55%] top-[53%] h-[28%] md:right-auto md:left-[82%] md:top-[18%] md:h-[45%] w-auto object-contain opacity-[0.08] md:opacity-[0.15] grayscale pointer-events-none select-none z-0" style="--base-x: -50%; --base-y: -50%; --base-scale: 1; --base-rotate: 0deg; filter: grayscale(1) brightness(1.4);" data-parallax-x="18" data-parallax-y="-32" data-parallax-scale="0.013" data-parallax-rotate="-0.6" loading="lazy" decoding="async"/>
<img src="res/outputc.avif" aria-hidden="true" class="cad-parallax-layer absolute left-[6%] bottom-[-18%] h-[42%] md:left-[40%] md:bottom-[-23%] md:h-[65%] w-auto object-contain opacity-[0.08] md:opacity-[0.09] grayscale pointer-events-none select-none z-0" style="--base-x: 0px; --base-y: 0px; --base-scale: 1; --base-rotate: -15deg; filter: grayscale(1) brightness(1.4);" data-parallax-x="-14" data-parallax-y="-52" data-parallax-scale="0.015" data-parallax-rotate="0.9" loading="lazy" decoding="async"/>
<div class="relative z-10 max-w-container-max mx-auto px-margin">
<span class="font-label-caps text-label-caps text-primary tracking-[0.2em] uppercase flex items-center gap-2 mb-6">
<span class="w-8 h-[1px] bg-primary block"></span>
Expand All @@ -169,7 +185,7 @@ <h2 class="font-headline-lg text-headline-lg text-on-surface uppercase mb-6">The
<span class="absolute top-3 left-3 font-label-caps text-label-caps text-primary tracking-widest uppercase z-20">Pod Demo</span>
<span class="absolute top-3 right-3 font-label-caps text-[10px] text-outline-variant group-hover:text-primary transition-colors z-20">VID-01</span>
<div class="relative aspect-video bg-surface-container-lowest cursor-pointer" id="yt-facade" onclick="this.innerHTML='<iframe class=\'w-full h-full\' src=\'https://www.youtube.com/embed/Kyc69w9Pzhw?autoplay=1\' title=\'Pod Demo\' frameborder=\'0\' allow=\'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\' allowfullscreen></iframe>';this.onclick=null;">
<img src="https://i.ytimg.com/vi/Kyc69w9Pzhw/hqdefault.jpg" alt="Pod Demo video thumbnail" class="w-full h-full object-cover" loading="lazy" decoding="async"/>
<img src="res/poddemothumb.avif" alt="Pod Demo video thumbnail" class="w-full h-full object-cover" loading="lazy" decoding="async"/>
<div class="absolute inset-0 flex items-center justify-center">
<div class="w-16 h-16 bg-primary-container/90 rounded-full flex items-center justify-center hover:bg-primary transition-colors">
<svg viewBox="0 0 24 24" class="w-8 h-8 fill-on-primary ml-1"><path d="M8 5v14l11-7z"/></svg>
Expand All @@ -191,7 +207,7 @@ <h2 class="font-headline-lg text-headline-lg text-on-surface uppercase mb-6">The
<span class="absolute top-3 left-3 font-label-caps text-label-caps text-primary tracking-widest uppercase z-20">2025 Pod CAD</span>
<span class="absolute top-3 right-3 font-label-caps text-[10px] text-outline-variant group-hover:text-primary transition-colors z-20">CAD-01</span>
<div class="relative aspect-video overflow-hidden">
<img src="res/podCAD2025.avif" alt="2025 Pod CAD model" class="w-full h-full object-contain bg-surface-container-lowest group-hover:grayscale-0 group-hover:scale-105 transition-all duration-500"/>
<img src="res/podcad2025.avif" alt="2025 Pod CAD model" class="w-full h-full object-contain bg-surface-container-lowest group-hover:grayscale-0 group-hover:scale-105 transition-all duration-500"/>
<div class="absolute inset-0 bg-surface/40 group-hover:bg-transparent transition-all duration-300"></div>
<!-- Hover overlay -->
<div class="absolute inset-0 flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
Expand Down Expand Up @@ -265,7 +281,7 @@ <h2 class="font-headline-lg text-headline-lg text-on-surface uppercase mb-4">Com
<span class="absolute top-2 right-2 font-label-caps text-label-caps text-outline-variant/50">SYS-ID: CH-V4.2</span>
</div>
<a href="https://www.cornellsun.com/article/2025/10/cornell-hyperloop-mathematically-models-magnetic-levitation-technology" target="_blank" rel="noopener noreferrer" class="relative z-10 max-w-[400px] w-full overflow-hidden border border-outline p-2 bg-surface block">
<img alt="Cornell Hyperloop Pod" class="w-full h-auto object-cover grayscale hover:grayscale-0 transition-all duration-500" src="res/dailySunArticle.webp" loading="lazy" decoding="async"/>
<img alt="Cornell Hyperloop Pod" class="w-full h-auto object-cover grayscale hover:grayscale-0 transition-all duration-500" src="res/dailysunarticle.webp" loading="lazy" decoding="async"/>
</a>
</div>
</div>
Expand Down
Loading
Loading