Adding Projects

Adding Projects

Every project on /work is a single .mdx file in src/app/work/projects/. The front matter (the block between the --- lines) fills the card; the text below it becomes the case study page at /work/<file-name>.

---

Add a project in five steps

1. Add a cover image to public/images/projects/, for example public/images/projects/my-project.jpg. Cards and case studies show covers at 16:10. The example covers are 2000 × 1250 pixels.
2. Create the file src/app/work/projects/my-project.mdx. The file name becomes the address: /work/my-project.
3. Fill in the front matter:

   ---
   title: "My Project"
   publishedAt: "2026-01-15"
   order: 1
   summary: "One or two lines that explain what it is and why it matters."
   images:
     - "/images/projects/my-project.jpg"
   team:
     - name: "Your Name"
       role: "Founder"
       avatar: "/images/avatar.jpg"
       linkedIn: "https://linkedin.com/in/your-name"
   link: "https://my-project.com"
   ---

4. Write the case study under the front matter in Markdown or MDX:

   ## What it does
   
   A short story of the project: the problem, what you built, and the result.

5. Check it: run npm run dev and open http://localhost:3000/work.

The project appears automatically. You do not need to register it anywhere else.

---

Front matter reference

These are all the fields the code reads (src/utils/utils.ts):

Field	Default	What it does
title	""	Card heading, case study heading and page title, and the Visit <title> button.
publishedAt	none	Date shown on the case study (YYYY-MM-DD). Also used to sort projects that have no order, in the sitemap and in schema data. Always set it.
summary	""	Text on the card and the case study's meta description. Supports live numbers.
images	[]	A list of image paths. The first one is the cover and the fallback for the live screenshot. Only the first image is shown.
link	""	The project's website. Shows View project on the card and Visit <title> on the case study, and is the page captured for the live screenshot.
order	none	Position on /work, lowest first. Projects without order come after all ordered ones, newest first.
team	[]	People shown on the case study. Each entry has name, role, avatar and linkedIn. The page shows the avatars and the names, each name linking to linkedIn.
screenshot	true	Set to false to always use your own cover instead of a live screenshot.
screenshotUrl	""	A different page to capture, when the best screenshot is not the page in link.
image	""	Share image for the case study (Open Graph and schema). If empty, an image is generated at /api/og/generate?title=<title>.
tag	[]	Read by the code but not shown on project pages.

---

Covers and live screenshots

A project gets a live screenshot as its cover when all of these are true:

• screenshot is not false,
• it has a link or a screenshotUrl,
• it has at least one entry in images.

The screenshot is served from /screenshots/<file-name>, taken during the build, and refreshed once a week. If a capture fails during the build, the first image in images is used, so always add a cover image even if you plan to rely on screenshots.

Use screenshot: false when:

• the site sits behind a login, a bot check or a consent wall,
• the project has no website (for example a desktop app),
• you designed a cover you like better.

More detail on how captures work: Pages and Features.

---

What you can write in a case study

Standard Markdown works and is styled for you:

You write	You get
## Heading	A heading with an anchor link
	A rounded image you can click to enlarge
```ts ... ```	A code block with a language label and a copy button
[text](/about)	An internal link
[text](https://...)	An external link that opens in a new tab
- item / 1. item	Styled lists
---	A short centred divider

You can also use these Once UI components directly in the file, without importing them:

Heading, Text, CodeBlock, InlineCode, Accordion, AccordionGroup, Table, Feedback, Button, Card, Grid, Row, Column, Icon, Media, SmartLink

For example, a button (these props are the ones the case study page itself uses):

<Button href="https://my-project.com" variant="primary" size="m" suffixIcon="arrowRight">
  Try it
</Button>

Note: Live-number tokens such as %beatra.users% are replaced in the case study text too. An unknown token stays in the text exactly as written, so remove the author's tokens from your own projects.

---

Change the order

Give each project an order number. The example projects use:

order	File
0	codeshare-technology.mdx
1	mcstat-minecraft-server-list.mdx
2	beatra-streaming-platform.mdx
3	justdiscord-server-bot-list.mdx
4	sylon-discord-bot.mdx
5	justanime-anime-tracker.mdx
6	dotrai-ai-chat.mdx
7	creator-studio-automation.mdx

---

A card without a case study

Leave the space under the front matter empty. The card then shows only View project (if link is set) and no Read case study link.

---

Remove the example projects

For each example you do not want:

1. Delete its .mdx file from src/app/work/projects/.
2. Delete its cover from public/images/projects/.
3. Remove its /screenshots/<file-name> entry from gallery in src/resources/site-data.tsx. Otherwise the gallery tries to show a screenshot that no longer exists.
4. If you remove codeshare-technology.mdx, also remove the redirect to /work/codeshare-technology in next.config.mjs.

---

Related pages

• Make It Yours: the rest of the personal content.
• Configuration: all settings.
• Troubleshooting: when a cover or screenshot does not show up.