A modern frontend project built with React, inspired by the Space Tourism design challenge. This responsive multi-page website mimics a futuristic space travel experience with elegant UI transitions, fixed sidebar navigation, and clean design.
🌐 Live Site: space-tourism-jonathan.vercel.app
- ✅ Responsive fixed sidebar with navigation highlights
- ✅ Explore button with hover glow animation
- ✅ Fully implemented page routing (Destination, Crew, Technology)
- ✅ Mobile-friendly layouts and stacked content views
- ✅ Google Fonts: Barlow, Barlow Condensed, Bellefair
- ✅ Frosted-glass backdrop effect with dark mode aesthetic
- ✅ Pixel-perfect background image switching based on screen size
- ✅ Clean Vercel Deployment: Live Preview
| Homepage | Destination | Crew | Technology |
|---|---|---|---|
 |
 |
 |
 |
- 🔍 Problem: Right-side white space on some pages.
- 🛠 Fix: Used
overflow-x: hiddenonbodyand fixedflexmisalignment withmax-width,margin: auto, and layout re-balancing.
- 🔍 Problem: Layouts would break on smaller screens or when switching tabs.
- 🛠 Fix: Added media queries and adjusted
flex-directionandgapvalues for mobile-first styling.
- 🔍 Problem: Matching Figma spacing, shadows, and text casing was tricky.
- 🛠 Fix: Used
Barlow Condensedwith exactletter-spacing, and added manual margins based on Figma references.
⚠️ Crafting full mobile responsiveness for the Home, Destination, Crew, and Technology pages required extensive layout overrides and fine-grained CSS tuning. Each section had unique alignment, scaling, and typography requirements that clashed with the desktop styles. Solving this involved mobile-first flexbox restructuring, background image breakpoints, exact rem/pixel spacing, and layered positioning to preserve fidelity across screen sizes.
git clone https://github.com/jonathanprogram2/space-tourism-site.git
cd space-tourism-site
npm install
npm startDesign Challenge: Frontend Mentor – Space Tourism (https://www.frontendmentor.io/challenges/space-tourism-multipage-website-gRWj1URZ3)
Fonts by Google: Bellefair, Barlow, Barlow Condensed
This project is for educational and portfolio purposes only. Not for commercial use.