dev-portfolio

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.