AmosChenZixuan Personal Blog

Based off the Tailwind Nextjs Starter Blog

This is a Next.js, Tailwind CSS project which is based on Next App directory with React Server Component and uses Contentlayer to manage markdown content.

Addtional Features by Me

• Internationalization
  • Supports English and Chinese.
• Customized Font
• Smart Nav Bar
  • Hides itself and reappears by scrolling
• Parallax Scrolling Tags
• Spotify Status
  • Displays currently playing song
  • If no song is playing, displays the last played song
• Image Viewer
  • Supports dragging and zooming
• Photo Gallery (Work in Progress)
  • Responsive and compact grid of images
  • Supports sharing and external links
• Resume (To-Do)
  • Timeline with cool scrolling animations

Original Features From the Template

• Next.js with Typescript
• Contentlayer to manage content logic
• Easy styling customization with Tailwind 3.0 and primary color attribute
• MDX - write JSX in markdown documents!
• Near perfect lighthouse score - Lighthouse report
• Lightweight, 85kB first load JS
• Mobile-friendly view
• Light and dark theme
• Font optimization with next/font
• Integration with pliny that provides:
  • Multiple analytics options including Umami, Plausible, Simple Analytics, Posthog and Google Analytics
  • Comments via Giscus, Utterances or Disqus
  • Newsletter API and component with support for Mailchimp, Buttondown, Convertkit, Klaviyo, Revue, and Emailoctopus
  • Command palette search with Kbar or Algolia
• Server-side syntax highlighting with line numbers and line highlighting via rehype-prism-plus
• Math display supported via KaTeX
• Citation and bibliography support via rehype-citation
• Automatic image optimization via next/image
• Support for tags - each unique tag will be its own page
• Support for multiple authors
• 3 different blog layouts
• 2 different blog listing layouts
• Support for nested routing of blog posts
• Projects page
• Preconfigured security headers
• SEO friendly with RSS feed, sitemaps and more!

Installation

Prerequisite: Node and Yarn

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
nvm install 18
nvm use 18

npm i --global yarn

yarn

Please note, that if you are using Windows, you may need to run:

set PWD="$(pwd)"

Development

First, run the development server:

yarn dev

Open http://localhost:3000 with your browser to see the result.

Edit the layout in app or content in data. With live reloading, the pages auto-updates as you edit them.