This porfolio uses custom MDX for blog posts, making it easy to include JSX components such as interactive embeds, charts, or alerts directly in your markdown content.
Here are some examples of using MDX:
This is bold text
This is italic text
Strikethrough text
A utility class like text-green-500 sets the text color to green.
If today were the last day of my life, would I want to do what I am about to do today? – Steve Jobs
This porfolio uses Next.js Image in MDX for seamless image rendering:
Renders:
This porfolio uses react-tweet to embed tweets in MDX posts.
Renders:
This porfolio uses react-youtube to embed YouTube videos in MDX posts.
Renders:
This porfolio uses react-wrap-balancer to evenly balance captions in MDX posts.
Renders:
This porfolio uses a custom table component to render tables in MDX posts.
Renders:
| Name | Type | Description |
|---|---|---|
name | string | Name of the resource |
path | string | Path to the resource |
This porfolio uses a custom callout component to render important information in MDX posts.
Renders:
This is a clean, simple, and fast portfolio built with Next.js, Tailwind CSS, and pnpm for optimal performance.
Default
Helpful advice for doing things better or more easily.
Info
Useful information that users should know.
Warning
Urgent info that needs immediate attention.
Error
Advises about risks or negative outcomes.
Important
Key information users need to know.
Custom icon
Custom icons are supported too.
Race
Result: 2:59:30
// This is commented-out code
export default function HelloWorld() {
return (
<h1>Hello, World!</h1>
);
}
<Image
src="https://images.unsplash.com/photo-1766816853912-6d46a891582b"
alt=""
width="300"
height="450"
/>
<Tweet id="1617979122625712128" />
<YouTube videoId="wXhTHyIgQ_U" />
<Caption>
Captions that flow smoothly, making your content easy to read and visually appealing with a clean look.
</Caption>
<Table
data={{
headers: ["Title", "Description"],
rows: [
[
"First item",
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid perspiciatis repellat amet quos.",
],
[
"Second item",
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid perspiciatis repellat amet quos.",
],
],
}}
/>
<Callout emoji="💡">
This is a clean, simple, and fast portfolio built with Next.js, Tailwind CSS, and pnpm for optimal performance.
</Callout>