πŸ’‘ 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.

Built With

Share this project:

Updates

Submission history