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.
- 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
- 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!
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
nvm install 18
nvm use 18
npm i --global yarnyarnPlease note, that if you are using Windows, you may need to run:
set PWD="$(pwd)"First, run the development server:
yarn devOpen 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.