Skip to main content
Projects showcase your work and technical skills. They’re stored in src/content/projects/ as markdown files with frontmatter defining project metadata.

​
Projects Collection Schema

The projects collection is defined in src/content.config.ts with the following schema:
​
title
string
required
The name of your project (e.g., “Amiccii”, “Vue Google Translate”)
​
tech
array
required
An array of technologies used in the project (e.g., ["Next.js", "Tailwind CSS", "Beehiv"])
​
year
number
required
The year the project was completed (e.g., 2025)
​
external_link
string (URL)
Optional link to the live project website
​
github_link
string (URL)
Optional link to the GitHub repository
​
app_store
string (URL)
Optional link to Apple App Store if it’s a mobile app
​
google_play
string (URL)
Optional link to Google Play Store if it’s an Android app
​
cover_image
string
Optional path to a cover image (e.g., /projects/amiccii.png)
​
featured
boolean
Optional flag to mark the project as featured on your homepage (defaults to false)
​
made_at
string
Optional field indicating where the project was created (e.g., “Inflection Studio”, “Open Source Software”)

​
Adding a New Project

1

Create a project file

Navigate to src/content/projects/ and create a new .md file using kebab-case:
touch src/content/projects/my-awesome-project.md
2

Add project frontmatter

Start with YAML frontmatter containing all required fields and any optional ones:
---
title: Amiccii
tech: ['Next.js', 'Tailwind CSS', 'Beehiv']
external_link: https://amiccii.com
cover_image: /projects/amiccii.png
featured: true
year: 2025
made_at: Inflection Studio
---
3

Write project description

Below the frontmatter, describe your project in detail:
Amiccii is a premier talent and brand partnership agency headquartered in 
London, operating on a global scale. The platform is designed to connect 
top-tier athletes and entertainers with world-class events and strategic 
brand collaborations.
4

Preview your project

Run your development server to see the project:
npm run dev
Projects are typically displayed on your projects page or portfolio section.

​
Project Types

​
Client Work with Live Site

For professional client projects with live websites: 
---
title: Amiccii
tech: ['Next.js', 'Tailwind CSS', 'Beehiv']
external_link: https://amiccii.com
cover_image: /projects/amiccii.png
featured: true
year: 2025
made_at: Inflection Studio
---

Amiccii is a premier talent and brand partnership agency headquartered in 
London, operating on a global scale. The platform connects top-tier athletes 
and entertainers with world-class events and strategic brand collaborations.

​
Open Source Projects

For open source projects with GitHub repositories: 
---
title: Vue google translate
tech: ["vue.js", "javascript"]
external_link: https://codesandbox.io/s/wz1ln
github_link: https://github.com/lewis-kori/vue-google-translate
year: 2021
made_at: Open Source Software
featured: false
---

This package enables localization of web apps made with vue by use of google 
translate. As your website and app grows, you may find a need to expand to 
other markets outside your home country.

​
Mobile Apps

For mobile applications with app store links: 
---
title: My Mobile App
tech: ["React Native", "TypeScript", "Firebase"]
app_store: https://apps.apple.com/app/my-app
google_play: https://play.google.com/store/apps/details?id=com.myapp
cover_image: /projects/mobile-app.png
featured: true
year: 2025
---

A powerful mobile application that helps users manage their daily tasks...
Use the featured field to highlight your best work on your homepage: 
---
title: My Best Project
tech: ["Next.js", "TypeScript"]
featured: true
year: 2025
---
Featured projects typically appear in a prominent section on your homepage or portfolio landing page. Set featured: true for your 3-5 best projects.

​
Real-World Examples

---
title: Vue google translate
tech: ["vue.js", "javascript"]
external_link: https://codesandbox.io/s/wz1ln
github_link: https://github.com/lewis-kori/vue-google-translate
year: 2021
made_at: Open Source Software
featured: false
---

This package enables localization of web apps made with vue by use of google 
translate. As your website and app grows, you may find a need to expand to 
other markets outside your home country.

If your target market lives across the sea and speaks a different language, 
you may not have any choice but to localize. However, if those people can 
speak your language, consider other aspects (cultural and/or legal) to make 
an informed decision on whether to translate.

​
File Organization

Projects are stored in src/content/projects/ with this structure: 
src/content/projects/
├── amiccii.md
├── vue-google-translate.md
├── django-multitenant.md
├── portfolio-version-1.md
└── ...
The filename becomes the URL slug. For example, amiccii.md will be accessible at /projects/amiccii

​
Tech Stack Guidelines

When listing technologies in the tech array:
  1. Use official names - “Next.js” not “nextjs”, “Tailwind CSS” not “tailwind”
  2. Be specific - “React Native” instead of just “React” for mobile apps
  3. Include key technologies - Framework, language, major libraries, and notable services
  4. Keep it concise - Aim for 3-7 technologies per project
  5. Order by importance - List the most important technologies first

​
Good Examples

tech: ["Next.js", "TypeScript", "Tailwind CSS", "PostgreSQL"]
tech: ["Python", "Django", "Vue.js", "Docker"]
tech: ["React Native", "TypeScript", "Firebase", "Expo"]

​
Best Practices

  1. Use high-quality cover images - Projects with cover_image stand out more
  2. Write clear descriptions - Explain what the project does and your role
  3. Link to live projects - Always include external_link if the project is live
  4. Showcase open source work - Include github_link for public repositories
  5. Mark your best work as featured - Use featured: true for portfolio highlights
  6. Keep years accurate - The year field helps organize your project timeline
  7. Credit collaborations - Use made_at to indicate where the project was created

​
Querying Projects

In your Astro components, query projects using the Content Collections API: 
import { getCollection } from 'astro:content';

// Get all projects
const allProjects = await getCollection('projects');

// Get featured projects only
const featuredProjects = allProjects.filter(
  project => project.data.featured === true
);

// Get projects by year
const recentProjects = allProjects
  .filter(project => project.data.year >= 2024)
  .sort((a, b) => b.data.year - a.data.year);

// Get projects by technology
const nextProjects = allProjects.filter(
  project => project.data.tech.includes('Next.js')
);

​
Adding Project Images

Place project images in the public/projects/ directory: 
public/
├── projects/
│   ├── amiccii.png
│   ├── vue-translate.png
│   └── portfolio.jpg
Then reference them in your frontmatter: 
cover_image: /projects/amiccii.png
Images in the public/ directory are served at the root level, so use paths starting with / like /projects/image.png

Build docs developers (and LLMs) love

Get started for freeTalk to us