Building My Developer Portfolio with Astro

说明与用途

使用 Astro 构建的个人开发者作品集，包含详细项目页面、SEO 元数据、JSON‑LD 结构化数据，并部署在 GitHub Pages 上。

问题

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

结果

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.

工作流

• 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.

证据

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

来源

Astro fit those requirements very well.

来源

The website is deployed using GitHub Pages.

来源

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

来源