About this project

My name is Cristian Grigorescu, and I’m a student in CSCI E‑12: Fundamentals of Web Application Development. Fall 2025 session. This project represents the culmination of what I’ve learned throughout the course. Bringing together HTML, CSS, JavaScript and modern build tools to create a dynamic, data‑driven website.

Why this project

Beyond academics, I have a deep passion for soccer, and the FIFA World Cup is one of the most exciting global events. With the 2026 tournament coming to the United States, especially matches in Seattle, it feels even more meaningful to highlight the stadiums and celebrate the sport through this project.

For my final project, I chose to build a site focused on the 2026 FIFA World Cup stadiums. The site highlights each stadium through:

• An index page with a map and stadium cards.
• Individual dynamic stadium pages featuring images, metadata, descriptions, and a live weather widget powered by the Metro Weather API.
• An About page (this one) describing the project.
• A World Cup overview page with context about the tournament.

The stadium data is stored in JSON and drives the generation of pages through Astro, ensuring the site is both scalable and maintainable.

Project goals & objectives

This assignment is designed to demonstrate that I can:

• Apply fundamental concepts of building websites and web applications.
• Extend those skills to accomplish something new beyond prior assignments.
• Create a project that is original, meaningful, and technically challenging.
• Explore deeper areas of interest. In this case, dynamic data rendering and API integration.

Technical highlights

• Astro build process with multiple pages generated dynamically.
• GitHub integration for version control and collaboration.
• 16 dynamically generated stadium pages plus 4 core pages (Index, About, World Cup 2026, and stadium subpages).
• Leaflet JS map object on the homepage for interactive stadium visualization.
• Data‑driven site generation using a structured JSON files (stadium descriptions, world cup respective matches table, capacity, date opened, location, etc.).
• Metro Weather API integration with error handling and loading spinner for live stadium forecasts.
• Responsive UI showcased across multiple screen sizes.
• Responsive navigation menu optimized for small screens.
• Deployment to Dreamhost via rsync for live access.
• A detailed README documenting how to run the project and how it meets course requirements.

Why it matters

By the end of this project, I’ve demonstrated not only technical proficiency but also the ability to design a user‑friendly, content‑rich application. The World Cup stadiums theme gave me the freedom to combine sports, design, and technology into a cohesive experience that reflects both creativity and practical web development skills.