Introduction

Welcome to your new blog! Your portfolio is already set up perfectly to handle blog posts using Velite and MDX.

Because it uses MDX, you can write standard Markdown but with the added superpower of beautiful syntax highlighting, and even custom React components if you choose to build them.

Adding Images

You can embed images using standard markdown syntax. This is perfect for screenshots of your UI designs, architectural diagrams, or anything else.

Just make sure to put the image file in the same directory as your .mdx file, and reference it relatively like this:

Caption: The Go programming language logo used as a dummy diagram.

Code Snippets

Since you're using rehype-pretty-code, your code blocks will look stunning automatically. Here is an example of a dummy snippet:

import React from 'react';
 
const ArchitectureDiagram = () => {
    return (
        <div className="flex flex-col items-center">
            <h1>System Overview</h1>
            <p>This is where your interactive component could go!</p>
        </div>
    );
};
 
export default ArchitectureDiagram;

Summary

To add a new blog post in the future:

1. Create a new folder in src/content/posts/ (e.g., src/content/posts/my-new-post/).
2. Add your images to that folder (e.g., cover.png, diagram1.png).
3. Create an index.mdx file in that folder.
4. Fill out the frontmatter at the top of the file (title, description, cover image relative path, date, tags).
5. Write your content using standard Markdown!

It's that simple. Happy writing!