A Next.js portfolio site using markdown-based content management with MDX.
- Clone the repository
- Install dependencies:
yarn install - Run the development server:
yarn dev - Open http://localhost:3000
Content is stored as markdown files in:
content/posts/- Blog postscontent/projects/- Project case studies
- Create a new file in
content/posts/[slug].mdx - Add frontmatter:
--- title: "My Post Title" subtitle: "My post subtitle" slug: "my-post-slug" publishDate: "2024年01月01日T00:00:00.000Z" isPublished: true ---
- Write your content in MDX format below the frontmatter
- Create a new file in
content/projects/[slug].mdx - Add frontmatter:
--- title: "My Project" subtitle: "Project description" slug: "my-project" projectType: "work" timeline: "2024" company: "Company Name" isPublished: true bgColor: "#ffffff" hasDarkBg: false featuredImage: "/img/uploaded/image.jpg" ---
- Write your content in MDX format below the frontmatter
<Quote> This is a quote that will be styled accordingly. </Quote>
<Image src="/img/uploaded/image.jpg" alt="Image description" width={768} height={384} caption="Optional caption" />
- Next.js 14 - React framework with Pages Router
- React 18 - UI library
- TypeScript - Type safety
- MDX - Markdown with JSX support
- Tailwind CSS - Styling
- Framer Motion - Animations
yarn build yarn start