Fast, SEO-friendly Next.js Portfolio Template with MDX Blog

Modern Portfolio Website is an open-source web template that helps you create fast, SEO-optimized personal portfolio websites using Next.js, Tailwind CSS, and shadcn/ui components.

Features

Use Cases

• Developer Portfolio: Showcase your software development projects with detailed descriptions and links.
• Designer Showcase: Display your design work in a clean and visually appealing layout.
• Personal Blog: Share your thoughts and expertise on various topics through the MDX-powered blog.
• Freelancer Website: Create a professional online presence to attract potential clients.
• Project Documentation: Use the blog structure to document your personal projects.

How to Use It

1. Clone the repository to your local machine using git.

https://github.com/timtbdev/Next.js-Portfolio-App.git
cd portfolio-template

2. Install the project dependencies using your preferred package manager.

npm install

or

yarn install

or

pnpm install

3. Create a new file named .env.local in the root of your project directory. This file will hold your secret keys and other environment-specific settings.

You will need to obtain the necessary keys from GitHub, Supabase, and Resend for the corresponding variables.

NEXT_PUBLIC_APP_URL=http://localhost:3000
NEXT_PUBLIC_WEB_URL=your_production_domain_name
GITHUB_TOKEN=your_github_token
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_key
RESEND_API_KEY=your_resend_api_key

4. Start the development server, and you can now view your portfolio at http://localhost:3000.

npm run dev

5. Configure the portfolio through files like next.config.mjs for Next.js settings, tailwind.config.ts for styling, and contentlayer.config.ts for content management.

Related Resources

• Next.js Documentation provides complete guides on App Router, Server Components, and optimization techniques for Next.js 15 applications.
• Tailwind CSS Documentation covers utility-first CSS framework concepts, configuration options, and component styling patterns.
• Fumadocs offers documentation on building MDX-powered documentation sites with features like search and table of contents.
• TanStack Query explains server state management patterns, caching strategies, and data synchronization techniques.

FAQs

Q: Can I use this template for commercial projects?
A: Yes. The MIT License allows you to use this template for personal and commercial projects without restrictions. You can modify the code, sell websites built with it, and create derivative works freely.

Q: How do I add new blog posts to the site?

A: Create new MDX files in the content directory with frontmatter metadata including title, date, and description. The Content Collection system automatically detects new files and generates routes. Your posts appear on the blog index page without requiring manual route configuration.

Q: What hosting platforms work with this template?
A: Any platform supporting Node.js and Next.js works. Vercel offers the best integration with automatic builds and deployments. Netlify, Railway, and DigitalOcean App Platform also support Next.js applications. You need Node.js 18.0 or later on your hosting environment.

Q: Can I replace Supabase with another database?
A: Yes. The template’s architecture separates data fetching logic from UI components. You can swap Supabase for PostgreSQL, MongoDB, or other databases by updating the data access functions. TanStack Query handles caching regardless of your database choice.