Astrofell

About the project

Migration and complete redesign of the Castelldefels Astronomical Association (ASTROFELS) website, going from a Blogger blog to a modern site built from scratch, with a centerpiece: a fully interactive, custom-made 3D solar system.

Key features

• Built with Astro (SSG) and React for interactive islands
• Three.js (WebGL) integration with a custom GLTF parser supporting the KHR_materials_pbrSpecularGlossiness legacy extension
• Custom 3D camera physics utilizing camera.setViewOffset for distortion-free viewport scaling
• Interactive 3D solar system featuring raycasting-based smooth fly-to camera transitions and drag-to-rotate controls
• Performance-optimized UX that delays 3D rendering and container expansion until user interaction to save CPU/GPU
• Parallel 3D asset loading via Promise.all, significantly reducing initial load times for the planetary models
• Dynamic, backend-free news section powered by build-time data fetching from a public Blogger JSON feed
• Full content migration of institutional history, foundation details, and observatory documentation from the legacy site
• Pure CSS custom design system featuring a responsive dark theme with gold and cyan accents
• Fully responsive architecture with mobile-adapted panels, preserving the 3D WebGL experience on small screens