This site was built as an experiment in using Astro as a static site generator for a content-heavy project. The emphasis is on shipping HTML and CSS first, with JavaScript only where it would truly add value.

Instead of a single demo page, the project behaves like a small, opinionated blog. Posts are modeled as a content collection, then rendered through shared layouts and components so that the site feels cohesive and easy to maintain.

How this goes beyond a simple starter

• A reusable BaseLayout component wraps every page with the same header, footer, and overall chrome.
• The blog uses Astro's content collections instead of ad-hoc Markdown files sprinkled through src/pages.
• Listing pages and individual posts are all rendered statically, so navigation feels instant.

SPA vs MPA choice

This project intentionally uses an MPA-style approach: each route is a separately rendered HTML page generated by Astro at build time. There is no client-side router or SPA framework; instead, navigation happens via regular links, with small progressive enhancements layered on top.

Extra credit: Astro View Transitions

This project also enables Astro's built-in View Transitions (see the ViewTransitions component in BaseLayout.astro). Navigating between the blog index and individual posts animates the post titles using transition:name and transition:animate, providing a smooth, SPA-like experience while still serving static HTML.

To see this in action on the deployed site, open the Blog page from the header, then click any post card. Watch how the post title smoothly animates from the list view into the full article header as the page changes. Use your browser's back button to navigate back to the index and you'll see the reverse transition.

How to explore the code

• Browse the home page to see shared components and a curated list of recent posts.
• Visit the blog index at /blog/ to see how the content collection is queried.
• Open any post to inspect how Markdown, frontmatter, and the detail layout work together.

If you are reading this for grading, feel free to jump into the repository and skim src/layouts, src/components, and src/content for a quick overview of how everything fits together.