A static redesign of troynjrotc.org for a high-school Navy JROTC program. The front door is a WebGL hero scene: a fresnel energy core, a wireframe globe, orbiting gyroscope rings, and a parallax starfield, all moving under smooth scroll animation. A dark navy, red, and white design system carries that look across 30+ pages.
The problem
A JROTC unit's site has to carry a large, sprawling program. That means the core unit plus a dozen-plus competitive teams, all while still reading like a naval organization. Most templated school sites manage neither. They flatten everything into the same generic pages and feel nothing like the unit they represent.
What I built
Built and ready to ship: 30+ pages with the custom WebGL hero and per-team sections. Not yet deployed.
How it works
The hero is a Three.js WebGL scene built around a custom fresnel shader. The energy core glows brighter at its edges, where the view angle grazes the surface, and it's wrapped by a wireframe globe, orbiting gyroscope rings, and a parallax particle starfield for depth. Motion runs on Lenis for smooth scroll, feeding GSAP ScrollTrigger so animations fire as sections enter the viewport instead of on a timer. The whole thing is static JavaScript with no build step or backend. That lets the 30+ pages, including 12+ dedicated competitive-team pages for CyberPatriot, robotics, and StellarXplorers, share one navy/red/white design system in Cinzel and Oswald rather than getting squeezed into a single template.
Highlights
- Three.js WebGL hero with a custom fresnel core, wireframe globe, orbit rings, and starfield
- GSAP ScrollTrigger driven by Lenis for scroll-triggered animation
- 12+ dedicated competitive-team pages (CyberPatriot, robotics, StellarXplorers)
- Navy / red / white design system in Cinzel and Oswald typography
- Fully static JavaScript, with no build step and no backend
- 30+ pages sharing one consistent naval design language
Let's build yours.
Tell me what you're trying to ship — you'll get a scoped plan and a straight answer.