Your portfolio projects will appear in the gallery and also in your resume if you want.
Projects are defined via Markdown file content/projects.md. There is an example project called hello-world.md for reference.
Markdown is a very minimal text formatting language. Some commonly used syntax are shown in the hello-outer-world.md file. You can learn more about Markdown here here.
Pay attention to the file name carefully, because it will be part of the URL, e.g:
Ensure that the project file names follow this format without spaces or special characters. It's an unique ID for the project.
Metadata
The content between two sets of triple dashes (--- ---) represents the frontmatter—the metadata about the project. They are like the configs you changed earlier. But in a much simpler way. It looks something like this:
Here you change the part after the colon (:) and a space ( ).
title
Your project name.
coverImage
A preview of the project, points to an image file located in the folder.
date
Project creation date, release date or whatever. Projects will be sorted based on this date.
projectLink
A live/demo link of the project. It is optional.
Telling the Story
Below the metadata section there is the main content area, which is intended for writing something about the project. A description or notes. You can skip it, if you've nothing to brag about ;)
You can use most markdown features that you may used in a Github README. Like images and links.
These markdown images will be optimized too, the only extra thing that is good to provide is the original resolution of the image, like this:
This is important to prevent layout shifts. You can check the resolution of an image in VSCode, in the left side of the bottom bar.
Creating a New Project
Start by copying an existing project, rename it appropriately and change the properties accordingly. Put the cover image by creating a new directory for that specific project in public/assets/.
You can place images and other static assets anywhere in the public folder. The forward slash (/) at the beginning of the file path always points to that folder.
Each new project will get its own page and will appear in the gallery with the file name as the path (URL).