Astro Portfolio Project Structure
Personal portfolio with projects showcase, about page, and contact.
Project Directory
my-portfolio/
src/
components/
Header.astro
Footer.astro
ProjectCard.astro
SkillBadge.astro
ContactForm.astro
content/
projects/
Portfolio projects
project-one.md
project-two.md
config.ts
layouts/
Base.astro
Project.astro
pages/
index.astro
Hero + featured
about.astro
projects.astro
All projects
projects/
[...slug].astro
contact.astro
styles/
global.css
public/
favicon.svg
resume.pdf
images/
Project screenshots
astro.config.mjs
package.json
tsconfig.json
.gitignore
Why This Structure?
A clean portfolio structure with content collections for projects. Each project has frontmatter for title, description, tech stack, and links. Astro's image optimization keeps screenshots fast. Static output hosts anywhere for free.
Key Directories
- src/content/projects/-Markdown files for each project
- src/pages/projects/[...slug].astro-Dynamic project pages
- src/components/ProjectCard.astro-Reusable project preview
- public/images/-Project screenshots and assets
Project Frontmatter
---
title: "My App"
description: "A full-stack app I built"
tech: ["React", "Node.js", "PostgreSQL"]
github: "https://github.com/me/my-app"
live: "https://my-app.com"
image: "./my-app.png"
featured: true
---
When To Use This
- Developer portfolio sites
- Designer showcases
- Freelancer websites
- Personal landing pages
Trade-offs
- Static only-Contact form needs external service
- No blog-Add blog collection if needed
- Manual updates-Content is file-based, not CMS