π‘ Inspiration While space exploration often focuses on rockets and planets, we wanted to shift the spotlight to the people who make it all possible β astronauts. These brave individuals undergo rigorous training, travel beyond Earth, and represent humanityβs endless curiosity. The idea behind Astro_Know was to create an engaging, interactive, and lightweight experience to honor their legacy and educate the next generation of explorers.
We noticed that while many sites mention astronauts, few do it in a way that feels fun, personal, and accessible β especially for students and space lovers who just want to explore in a single scroll. Astro_Know was born to fill that gap.
π What It Does Astro_Know is a web-based application featuring 10 famous astronauts displayed as interactive flip cards. Each card contains:
π¨βπ Astronaut Name
π Nationality
π° Space Missions
π Key Achievements
π¬ Fun Fact or Quote
Users can hover or tap on a card to flip it and reveal the full story. It's fully responsive, works on all devices, and doesn't rely on any backend or external libraries.
π How We Built It HTML: For structure β each astronaut is a card element.
CSS: Used for layout, styling, animations, and responsiveness. Flip effects are created using 3D transforms.
JavaScript: Handles interactivity (optional enhancement).
Assets: Emoji-based visuals or hand-drawn avatars to keep it fast and lightweight.
The project is entirely static and can be hosted for free using GitHub Pages, Netlify, or Vercel.
π§± Challenges We Ran Into Designing a clean and consistent layout for 10 cards without cluttering the page.
Ensuring flip animations work smoothly on both desktop and mobile.
Keeping file size low while still having visually appealing astronaut profiles.
Gathering astronaut bios that are accurate but concise.
π Accomplishments That We're Proud Of Created a fully functional project without any frameworks or APIs.
Delivered an educational experience in under 100 lines of core logic.
Made it mobile-first and instantly loadable.
Successfully made something that can be used in classrooms, space clubs, or public events.
π What We Learned Mastered CSS 3D transformations for card flipping animations.
Improved skills in responsive design and semantic HTML structure.
Learned to craft engaging UI with zero dependencies.
Understood the importance of educational design β keeping it intuitive and friendly for all age groups.
π Whatβs Next for Astro_Know We see this project as a starting point. Hereβs what we plan to add:
π Search and filter by country, mission, or decade
π§© More astronauts (Apollo crew, ISS teams, global astronauts)
π Voice narration or text-to-speech for accessibility
π Quiz Mode to test usersβ astronaut knowledge
π Timeline Mode β scroll through missions across the years
π°οΈ Integration with NASA Open Data to pull in real-time astronaut updates
Astro_Know is a small project with big potential β a tribute to the people whoβve left Earth so the rest of us could dream bigger.
Log in or sign up for Devpost to join the conversation.