Managing Projects

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:

string

required

The name of your project (e.g., “Amiccii”, “Vue Google Translate”)

array

required

An array of technologies used in the project (e.g., ["Next.js", "Tailwind CSS", "Beehiv"])

number

required

The year the project was completed (e.g., 2025)

string (URL)

Optional link to the live project website

string (URL)

Optional link to the GitHub repository

string (URL)

Optional link to Apple App Store if it’s a mobile app

string (URL)

Optional link to Google Play Store if it’s an Android app

string

Optional path to a cover image (e.g., /projects/amiccii.png)

boolean

Optional flag to mark the project as featured on your homepage (defaults to false)

string

Optional field indicating where the project was created (e.g., “Inflection Studio”, “Open Source Software”)

Adding a New Project

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

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

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.

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

Featured Projects

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

Example 1: Featured Client Project

---
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 is designed to connect 
top-tier athletes and entertainers with world-class events and strategic 
brand collaborations. Inflection Studio led the project from concept to 
launch, delivering a cohesive brand identity, intuitive user experience, 
and a high-performance digital platform.

Example 2: Open Source Library

---
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:

Use official names - “Next.js” not “nextjs”, “Tailwind CSS” not “tailwind”
Be specific - “React Native” instead of just “React” for mobile apps
Include key technologies - Framework, language, major libraries, and notable services
Keep it concise - Aim for 3-7 technologies per project
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

Use high-quality cover images - Projects with cover_image stand out more
Write clear descriptions - Explain what the project does and your role
Link to live projects - Always include external_link if the project is live
Showcase open source work - Include github_link for public repositories
Mark your best work as featured - Use featured: true for portfolio highlights
Keep years accurate - The year field helps organize your project timeline
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

Get Started

Core Features

Content Management

Customization

Deployment

Projects Collection Schema

Adding a New Project

Project Types

Client Work with Live Site

Open Source Projects

Mobile Apps

Featured Projects

Real-World Examples

File Organization

Tech Stack Guidelines

Good Examples

Best Practices

Querying Projects

Adding Project Images

​Projects Collection Schema

​Adding a New Project

​Project Types

​Client Work with Live Site

​Open Source Projects

​Mobile Apps

​Featured Projects

​Real-World Examples

​File Organization

​Tech Stack Guidelines

​Good Examples

​Best Practices

​Querying Projects

​Adding Project Images

Projects Collection Schema

Adding a New Project

Project Types

Client Work with Live Site

Open Source Projects

Mobile Apps

Featured Projects

Real-World Examples

File Organization

Tech Stack Guidelines

Good Examples

Best Practices

Querying Projects

Adding Project Images