Devfolio is an open-source developer portfolio template built with Next.js and Tailwind CSS that generates a personal portfolio website from a single JSON data file. It was created by ariflogs and is published under the MIT License, making it free to use, modify, and deploy for personal or commercial projects.
What is Devfolio?
Devfolio is a free, open-source portfolio starter for developers. It takes a JSON file containing your personal information, skills, work experience, and projects, and renders it into a clean, responsive website using Next.js and Tailwind CSS. The template uses shadcn-ui components and is designed to be deployed to platforms like Vercel or Netlify.
Key Features
- JSON-driven content — All portfolio data lives in
public/data.json, so you update your site by editing that file rather than touching React components. - Next.js framework — Built on the React-based Next.js framework, which gives you server-side rendering and easy static export for fast load times.
- Tailwind CSS styling — Styling is handled by Tailwind CSS, with customization options in
tailwind.config.jsandstyles/globals.css. - shadcn-ui integration — The interface relies on shadcn-ui components, giving a modern look with accessible, copy-paste React components.
- Multiple package managers — Supports npm, yarn, and pnpm; the instructions use
pnpm installandpnpm run dev. - Easy deployment — Can be deployed to any Node.js-compatible host, including Vercel and Netlify, with no special server configuration.
- MIT License — Fully open source; you can fork, modify, and use it commercially without restrictions.
Who is it for?
- Developers who want a personal portfolio site without building from scratch — they can clone the repo, edit one JSON file, and have a live site.
- Job seekers in tech who need to present their skills, experience, and projects in a professional format.
- Freelancers who want a minimal, clean online presence to direct clients to, with quick customization of project lists and skills.
What can you do with Devfolio?
- Developers: Set up a portfolio in minutes by running
git clone, installing dependencies, and starting the dev server athttp://localhost:3000. - Job seekers: Showcase your work history and projects by editing the data file with your own details, then deploying to Vercel for a live URL.
- Open-source contributors: Use the template as a base and contribute improvements back via pull requests, since contributions are welcome.
How does Devfolio work?
The template runs as a standard Next.js app. After cloning and installing dependencies with pnpm, you start the development server with pnpm run dev, then edit public/data.json to populate your information. When you're ready, you can deploy the project to any Node.js-compatible hosting service.
FAQ
Is Devfolio free?
Yes, Devfolio is free and open-source under the MIT License. There are no costs for using the template, and you can use it for commercial projects.
What do I need to install before using Devfolio?
You need Node.js, a package manager (npm, yarn, or pnpm — pnpm is used in the instructions), and Git to clone the repository.
How do I customize my portfolio?
Edit the public/data.json file to update your name, skills, experience, projects, and other sections. Styling can be adjusted in tailwind.config.js and styles/globals.css.
Can I deploy Devfolio to Vercel or Netlify?
Yes, the template is a standard Next.js application and can be deployed to Vercel, Netlify, or any platform that supports Node.js applications.
Does Devfolio include a blog or contact form?
The content does not mention a blog or contact form; it focuses on portfolio sections like skills, experience, and projects.
