Documentation →

• This repo on Vercel: https://nextjs-portfolio-blog-research.vercel.app/
• My portfolio: zangwei.dev
• mengjunyi.com

A modern portfolio website with an integrated blog, supporting seamless AI-assisted coding for easy and highly flexible customization.

• ⚙️ Quick setup: Get started in minutes by editing the single config file.
• 📰 Rich portfolio: Showcase news, projects, experiences, and more.
• 📝 Blog support: Write effortlessly with Markdown in the content/ directory.
• 🌍 Internationalization: Out-of-the-box I18n for English & Chinese, easily extendable to other languages.
• 🌗 Light & dark mode: Instantly toggle color themes for the perfect look.
• 🧭 Intuitive navigation: Clean navbar, stylish footer, and simple language switching.
• 🌐 Social integration: Plenty of modern social media icons to connect everywhere.
• 🤖 AI-assisted coding: Seamless with Cursor and Cursor Rules.
• 📚 Detailed docs: Start fast & customize deep with full documentation.

Built with cutting-edge tech:

• ⚡ Next.js 15: Powered by the new App Router for flexibility & speed.
• 🔥 TypeScript: Full type-checking and safety.
• 💎 Tailwind CSS 4: Elegant, modern styling out of the box.
• ✅ Strict Mode: Takes advantage of TypeScript strictness and React 19 best practices.
• 💅 UI magic: Beautiful components via shadcn/ui & magic ui.
• 🎬 Smooth animation: Powered by Framer Motion.
• 🚀 Vercel ready: Deploy in seconds with global fast hosting.
• 📱 Responsive design: Looks stunning on all devices.
• 🤖 SEO optimized: Includes metadata, JSON-LD, and Open Graph tags for top rankings.
• 🗺️ Sitemap & robots: SEO and crawling handled automatically.
• 💯 Lighthouse perfection: Tuned for top performance and best practices.
• 📊 Analytics ready: Connect Google Analytics 4, Google Tag Manager, and Google Search Console for powerful insights.
• 💖 Prettier: Effortless code formatting.
• 📏 ESLint: Linting for code quality and consistency.
• 🏗️ Inspired by: dillionverma/portfolio

Run the following command on your local environment:

git clone https://github.com/zhengzangw/nextjs-portfolio-blog-research
cd nextjs-portfolio-blog-research
pnpm install # or npm install or yarn install

Then, you can start the development server:

pnpm dev # or npm run dev or yarn dev

Open http://localhost:3000 in your favorite browser to view your portfolio.

To customize your portfolio, simply edit the configuration in /src/data.tsx.

To create blog posts, add markdown (MDX) files to the content/ directory.

The default portfolio information and blog articles are provided as examples to help you get started quickly.

The simplest way to deploy your portfolio is via Vercel: just click deploy. The free Vercel plan is suitable for almost all personal use cases.

More details can be found in the Documentation.