dev-portfolio is an open-source developer portfolio template built with Next.js and Tailwind CSS that gives developers a ready-made single-page site to showcase skills, projects, and contact information.
What is dev-portfolio?
dev-portfolio is a responsive single-page portfolio template created by Dhaval Patel and published on GitHub. It takes personal content edited in mock data files and renders a hero section, about paragraph, project grid, skill proficiency bars, social links, and a contact form powered by EmailJS. The template runs on Next.js and can be deployed to Vercel with one click.
Key Features
- Next.js and React — Built on the Next.js framework with React components, providing server-rendered pages and a component-based architecture.
- Tailwind CSS styling — All layout and design use Tailwind CSS utility classes, so you can tweak spacing, colors, and typography without leaving your HTML.
- EmailJS contact form — The contact section sends messages through EmailJS; you configure your service ID, template ID, and public key in the local environment file.
- Framer Motion animations — Scroll and entrance animations are implemented with Framer Motion to add motion without heavy custom JavaScript.
- Iconify icons — Social links and skill icons are defined by Iconify icon names, letting you swap icons by changing a string in the mock data.
- Lottie animations — You can add Lottie JSON files to the mock/lottie directory and use them as animated illustrations in the page.
- Customizable mock data — Personalize hero titles, about text, social links, projects, and skills by editing src/mock/profile.js, src/mock/projects.js, and src/mock/tech-skills.js.
- One-click Vercel deploy — A deploy button is included that clones the repository and sets up the project on Vercel automatically.
Who is it for?
- Freelance developers — Quickly launch a professional-looking site that highlights your past projects and the technologies you work with.
- Developers applying for jobs — Replace the default profile and projects with your own details to create a personal portfolio for resumes and interviews.
- Students and bootcamp graduates — Use the template to publish a clean portfolio without designing from scratch, then host it free on Vercel.
What can you do with dev-portfolio?
- Freelancers: Showcase your services through the projects grid and skill bars, and collect client inquiries via the EmailJS-powered contact form.
- Developers building a personal brand: Update the hero titles, about paragraph, and document title in the mock profile to match your name and specialty, and link your Twitter, GitHub, and LinkedIn.
- Open-source contributors: Fork the repository, add new Lottie animations, or extend the React components with additional sections.
How does dev-portfolio work?
Clone the repository, copy the env.example file to .env.local, and add your EmailJS credentials. Install dependencies with npm install and run npm start to launch a local dev server. Edit the mock data files to replace the default content, then push the repository to Vercel for deployment.
