Skip to main content
Learn how to add new project entries to showcase your work in the portfolio.

​
Project Structure

Projects are stored as markdown files in the src/content/work/ directory. Each project is a separate .md file with frontmatter metadata. 
src/content/work/
├── config.ts           # Content collection schema
├── audiogpt.md        # Example project
├── vst-plugins.md     # Example project
└── your-project.md    # Your new project

​
Creating a New Project

1

Create a new markdown file

Create a new .md file in src/content/work/:
touch src/content/work/my-awesome-project.md
The filename will be used as the URL slug: /work/my-awesome-project
2

Add frontmatter metadata

Start with the required frontmatter fields:
src/content/work/my-awesome-project.md
---
title: My Awesome Project
publishDate: 2024-03-15 00:00:00
img: /assets/my-project.jpg
img_alt: Screenshot of My Awesome Project
description: |
  A revolutionary web application that solves real-world problems with cutting-edge technology.
tags:
  - Web Development
  - React
  - TypeScript
  - Node.js
---

## Project Overview

Your project content goes here...
3

Add project content

Write the project description using markdown:
## Features

- Feature one with detailed explanation
- Feature two showcasing innovation
- Feature three demonstrating impact

## Technologies Used

The project leverages:
- React for the frontend
- Node.js for the backend
- PostgreSQL for data persistence

## Challenges and Solutions

Describe the technical challenges you faced and how you solved them.
4

Add project images

Place image assets in the public/assets/ directory:
cp my-project-screenshot.jpg public/assets/
Then reference them in your frontmatter:
img: /assets/my-project-screenshot.jpg

​
Frontmatter Fields

All projects must include these frontmatter fields:

​
Required Fields

​
title
string
required
The project title displayed on the card and project page.
title: VST Plugins
​
description
string
required
A short description of the project. Supports multi-line text using | syntax.
description: |
  Desarrollo de plugins de audio VST para producción musical,
  procesamiento de sonido y efectos creativos.
​
publishDate
date
required
The publication date in YYYY-MM-DD HH:MM:SS format. Used for sorting projects.
publishDate: 2023-07-10 00:00:00
​
tags
array
required
An array of tags categorizing the project.
tags:
  - Audio Programming
  - Music Production
  - DSP
  - C++
​
img
string
required
Path to the project thumbnail image, relative to the public/ directory.
img: /assets/stock-6.jpg

​
Optional Fields

​
img_alt
string
Alternative text for the project image (accessibility).
img_alt: VST Plugins interface screenshot

​
Real Project Examples

​
Example 1: AudioGPT

src/content/work/audiogpt.md
---
title: AudioGPT
publishDate: 2024-03-10 00:00:00
img: /assets/stock-2.jpg
img_alt: AudioGPT application interface
description: |
  Aplicación de inteligencia artificial que convierte texto a voz
  con diversas opciones de personalización y control.
tags:
  - AI
  - Audio Generation
  - Web App
  - Speech Synthesis
---

## AudioGPT: Generación de voz avanzada con IA

Este proyecto combina tecnologías de procesamiento de lenguaje natural
y síntesis de voz para convertir texto en audio de alta calidad con
diferentes voces, acentos y estilos emocionales.

### Características principales

- Conversión de texto a voz con múltiples opciones de personalización
- Selección entre diferentes voces, acentos y idiomas
- Control de parámetros como velocidad, tono y énfasis emocional

​
Example 2: VST Plugins

src/content/work/vst-plugins.md
---
title: VST Plugins
publishDate: 2023-07-10 00:00:00
img: /assets/stock-6.jpg
img_alt: VST Plugins interface screenshot
description: |
  Desarrollo de plugins de audio VST para producción musical,
  procesamiento de sonido y efectos creativos.
tags:
  - Audio Programming
  - Music Production
  - DSP
  - C++
---

## VST Plugins: Herramientas para la producción musical digital

Este proyecto comprende el desarrollo de varios plugins VST diseñados
para mejorar el flujo de trabajo en la producción musical.

### Plugins desarrollados

1. **Procesador de Dinámica Multibanda**: Control preciso sobre
   diferentes rangos de frecuencia
2. **Sintetizador FM Modular**: Instrumento virtual basado en síntesis
   de modulación de frecuencia

​
Markdown Features

You can use standard markdown formatting:

​
Headings

## Main Section
### Subsection
#### Detail

​
Lists

- Unordered item
- Another item
  - Nested item

1. Ordered item
2. Second item

[Visit site](https://juanroccia.github.io/)
[GitHub Repository](https://github.com/juanroccia/project)

​
Code Blocks

```javascript
const greeting = 'Hello, World!'
console.log(greeting)


### Emphasis

```markdown
**Bold text**
*Italic text*
***Bold and italic***

​
Project Ordering

Projects are displayed in reverse chronological order based on the publishDate field. More recent projects appear first. To feature a project at the top, use a future date or a more recent date: 
publishDate: 2024-12-01 00:00:00  # Will appear before older projects

​
Best Practices

Use descriptive titles

Choose clear, concise titles that accurately represent the project.

Write compelling descriptions

The description appears on project cards. Make it engaging and informative.

Choose relevant tags

Use tags that reflect the technologies and skills demonstrated.

Optimize images

Compress images to reduce file size while maintaining quality.

​
Validation

The content collection schema automatically validates your projects. If you’re missing required fields or have incorrect data types, you’ll see an error when running the dev server. Run type checking manually: 
npm run astro check

​
Next Steps

Build docs developers (and LLMs) love

Get started for freeTalk to us