Building My Developer Portfolio with Astro

Description and use

A personal developer portfolio built with Astro featuring detailed project pages, SEO metadata, JSON‑LD structured data, and deployed on GitHub Pages.

Problem

Create a personal developer portfolio that showcases projects, skills, and learning journey while maintaining performance, SEO, and structured data.

Outcome

The portfolio now presents projects with detailed pages, optimized for search engines via metadata and JSON‑LD, and is deployed as a fast, static site on GitHub Pages.

Workflow

• 1. Set up Astro project structure with src/components, src/data, src/layouts, src/lib, src/pages.
• 2. Centralize site configuration (site name, GitHub profile, topics, URL).
• 3. Create individual project pages with details and links.
• 4. Add SEO metadata: titles, descriptions, canonical URLs, Open Graph, Twitter, robots directives.
• 5. Implement JSON‑LD structured data for Person entity and project relationships.
• 6. Deploy to GitHub Pages using CI workflow: push → build → deploy to monssifzhairi.github.io.
• 7. Iterate on interactive features while preserving performance and accessibility.

Evidence

I wanted my portfolio to be more than a collection of project cards.

Source

Astro fit those requirements very well.

Source

The website is deployed using GitHub Pages.

Source

I added standard metadata such as: Page titles, Descriptions, Canonical URLs, Open Graph metadata, Twitter metadata, Robots directives.

Source