Overview
This project involved transforming an unstyled Astro repository into a visually engaging directory website featuring senior design students. Each student profile included a photo, short biography, favorite emoji, and links to their portfolio, GitHub, and CodePen accounts. The project focused on learning Astro's content management system, dynamic routing, and component-based development while creating a cohesive user experience.
Problem
The provided Astro project contained the underlying structure and content organization but lacked visual styling and personalization. The challenge was to create a polished experience that highlighted each student's personality while learning how Astro manages data, content collections, and dynamically generated pages.
Process
I began by analyzing the existing project structure to understand how student data was organized and displayed. After establishing a visual direction, I developed a consistent design system that balanced personality with readability. Throughout the project, I worked with Astro content collections, data folders, and slugs to generate individual student profile pages dynamically. I also customized site assets, layouts, and navigation to create a more engaging browsing experience.
Final Solution
The final website presents senior design students through a collection of individualized profile pages generated from structured content. Visitors can easily browse student information, learn about their interests, and access professional portfolios and coding work through linked GitHub and CodePen profiles. The finished design transforms the original repository into a polished and approachable showcase of student work.
Images
Reflection
This project provided valuable experience working within an existing codebase rather than building a site entirely from scratch. I developed a stronger understanding of Astro's content collections, dynamic routes, slugs, and reusable components while learning how structured data can drive scalable website content. The experience increased my confidence in adapting to unfamiliar frameworks and collaborating with established project structures.
Details
The most interesting aspect of this project was seeing how a single data source could generate multiple student profile pages automatically. Rather than manually building each page, Astro’s content-driven workflow allowed information such as student photos, biographies, favorite emojis, and professional links to populate dynamically. This demonstrated how modern frameworks can efficiently manage large amounts of content while maintaining a consistent design and user experience.