Step Out of the Textbook. Step Into Real STEM.
Welcome to the official repository for the ByteSize STEM landing page. Built entirely from scratch using clean, modern HTML, CSS (General Sans typography, custom variables), and JavaScript.
ByteSize STEM is a student-led, non-profit NGO dedicated to rescuing youth from boring memorization. We deliver high-impact, hands-on technology bootcamps directly to schools and provide elite training to help students excel in national and international STEM Olympiads.
As the Founder, I built this responsive landing page to showcase our core mission, map out our learning modules, highlight our community reach, and introduce our founding team.
- 🎨 Neo-brutalist Aesthetic: Vibrant color palette using strict custom CSS variables (
--lime,--forest,--blue,--maroon). - 📱 Fully Responsive Layout: Designed using modern CSS Grid and Flexbox to look flawless on any screen size.
- 🃏 Interactive Card Deck: Custom JavaScript-driven rotating slider to highlight active school programs in real-time.
- ⚡ Fluid Performance: Optimized for fast load times and clean element reveal transitions.
- HTML5 — Semantic markup structure
- CSS3 — Custom design tokens, transitions, and component layouts
- Vanilla JavaScript — Dynamic mobile menu navigation and interactive card rotation components
- Nihal Hyder — Founder & Executive Director
- Muhammad Ubair — Director of Finance & Academics
- Ayan Ali — Director of Marketing & Management
Want to view or tweak the site locally?
- Clone this repository:
git clone [https://github.com/YOUR_USERNAME/bytesize-stem.git](https://github.com/YOUR_USERNAME/bytesize-stem.git)