Space tourism multi-page website

What are you most proud of, and what would you do differently next time?

What I'm most proud of:

1. Complete Multi-Page SPA Architecture I successfully built a fully functional single-page application that mimics a multi-page website with smooth transitions. All four pages (Home, Destination, Crew, Technology) work seamlessly with dynamic content switching without page reloads.

2. Responsive Design Implementation The website adapts perfectly across all three breakpoints (desktop, tablet, mobile). Background images, layouts, typography, and component sizes all adjust appropriately. The hamburger menu with overlay navigation provides an excellent mobile experience.

3. Interactive Content Switching I implemented three different interactive patterns:

Tab system for Destination page (Moon, Mars, Europa, Titan)

Dot navigation for Crew members

Numbered buttons for Technology pages

Each interaction updates images, text content, and active states simultaneously.

4. Dynamic Image Management The technology section automatically switches between portrait and landscape images based on viewport width, ensuring optimal display on all devices.

5. Clean Code Organization I structured the code with:

Centralized data management (DATA object)

Clear separation of concerns (HTML structure, CSS styling, JavaScript logic)

Reusable functions for updates

Semantic HTML and accessible markup

6. Visual Polish The design closely matches the provided mockups with:

Correct typography (Bellefair, Barlow, Barlow Condensed)

Proper spacing and alignment

Hover states and active indicators

Smooth animations and transitions

Consistent color scheme (dark background, light text)

What I would do differently next time:

1. Implement a Build Tool Instead of using CDN Tailwind CSS, I would set up a proper build process with:

PostCSS with Tailwind and Autoprefixer

CSS modules or CSS-in-JS for better style encapsulation

Webpack or Vite for asset optimization and bundling

This would improve performance and give more control over the final CSS size

2. Use WebP Images Exclusively I would prioritize WebP format with JPEG/PNG fallbacks using <picture> elements. Currently, I'm only using PNG/JPEG. WebP would significantly reduce load times, especially on mobile connections.

3. Add a Data Loading Pattern Instead of hardcoding data in JavaScript, I would:

Load data from the provided data.json file using fetch()

Implement proper error handling and loading states

Use a data service pattern for better maintainability

4. Implement Navigation State Management I would use:

URL hash routing (e.g., #destination, #crew) for bookmarkable pages

Browser history API for back/forward navigation support

This would improve user experience and SEO

5. Add Accessible Interactions

Keyboard navigation for all interactive elements (tabs, dots, tech buttons)

ARIA labels and roles for dynamic content updates

Focus management when switching pages

Screen reader announcements for content changes

6. Enhance Performance

Lazy load images below the fold

Add image preloading for quick tab switching

Implement debouncing for resize events

Use CSS containment to optimize rendering performance

7. Component-Based Architecture Instead of monolithic JavaScript, I would use a component-based approach:

Create separate component modules (Destination, Crew, Technology)

Use a simple state management pattern

This would make the code more maintainable and testable

8. Add Testing

Unit tests for data transformation and state management

Integration tests for page switching and content updates

Visual regression tests for responsive design

9. Improve the Explore Button Experience

Add a ripple effect or smooth scroll animation

Consider a countdown animation or space-themed transition

Make the experience more immersive

10. Better Typography Scaling I would use clamp() or fluid typography for smoother scaling across all screen sizes instead of fixed breakpoints. This would create a more polished experience on intermediate screen sizes.

11. Add Loading States

Skeleton screens or loading spinners while images load

This would improve perceived performance, especially on slower connections

12. Form Accessibility Although this site doesn't have forms, I would ensure any future forms are:

Properly labeled

Have clear error states

Support screen readers fully

What I learned from this project: Responsive design requires careful planning - Starting with mobile-first or desktop-first is crucial, but flexible layouts with CSS Grid and Flexbox make adaptation much easier.

Data-driven UI is powerful - Keeping content in a single data object makes updates trivial and keeps the UI consistent.

JavaScript state management - Maintaining and updating state across multiple components requires a clear mental model. Having a central state object helped tremendously.

Image optimization matters - Different devices need different image sizes and formats. The technology section's portrait/landscape swap was a good lesson in responsive images.

Tailwind CSS accelerates development - While the utility-first approach speeds up styling, it's important to balance it with custom CSS for complex animations and unique components.

Accessibility should be built-in, not bolted on - Adding ARIA attributes and keyboard support is easier during development than retrofitting later.

Where I need support: Advanced Animation - I'd appreciate feedback on how to add more polished transitions between pages or when switching tabs. Space tourism deserves immersive animations!

Performance Optimization - Tips on improving load times, especially for background images across multiple breakpoints, would be valuable.

SEO for SPAs - Since this is a single-page app, I'd like to learn better strategies for making it SEO-friendly without server-side rendering.

State Management - For larger projects, I'd like recommendations on state management libraries (Redux, Zustand, etc.) that would integrate well with this kind of UI.

CSS Architecture - Feedback on my use of custom properties and whether I should have used more Tailwind custom classes instead of writing so much custom CSS.

Web Accessibility Testing - I'd appreciate guidance on tools and techniques for testing accessibility in single-page applications with dynamic content.

Cross-Browser Compatibility - Any edge cases I should test for, especially regarding the backdrop-filter blur used in navigation.

Image Format Strategy - Best practices for serving WebP images with fallbacks, especially when using JavaScript for dynamic image updates.