Developer Portfolio Templates

A collection of modern, responsive portfolio templates built with Next.js and TailwindCSS. Perfect for developers looking to showcase their work with minimal setup.

🌐 View All Templates

Features

• 📱 Fully responsive designs for all devices
• 🎨 Modern and clean UI with smooth animations
• 🚀 Built with performance in mind
• 📝 Easy to customize and maintain
• 🌙 Dark/Light versions
• 🎯 SEO optimized

Tech Stack

• Next.js
• React
• TypeScript
• TailwindCSS

Getting Started

You have two options to get started with your preferred template:

Option 1: Using Git Sparse Checkout

If you want to clone only a specific portfolio template:

git clone --no-checkout https://github.com/devportfoliotemplates/devportfoliotemplates.git
cd devportfoliotemplates
git sparse-checkout init --cone
git sparse-checkout set example-portfolio-template
git checkout

Replace example-portfolio-template with your preferred template name (minimalist-portfolio-template, simple-portfolio-template, etc.).

Option 2: Direct Download

You can download a specific portfolio template as a ZIP file:

1. Visit download-directory.github.io
2. Paste the URL of your preferred portfolio folder (e.g., https://github.com/devportfoliotemplates/devportfoliotemplates/tree/main/minimalist-portfolio-template)
3. Download and extract the ZIP file

Running the Template

Once you have your preferred template:

1. Install dependencies:

npm install
# or
yarn install
# or
pnpm install

1. Run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

1. Open http://localhost:3000 in your browser to see the portfolio.

Customization

Personal Information

1. Update metadata in app/layout.tsx:

2. Site title

3. Description
4. Open Graph metadata

5. Favicon

6. Modify content in app/page.tsx:

7. Hero section

8. About section
9. Projects

10. Contact information

11. Replace assets:

12. Replace images in the public directory
13. Update social media icons
14. Modify logo if needed

Styling

1. Colors and Theme:

2. Customize colors in tailwind.config.js

3. Modify theme variables in app/globals.css

4. Typography:

5. Update font families in tailwind.config.js

6. Modify text sizes and weights

7. Layout:

8. Adjust spacing and padding in component files
9. Modify responsive breakpoints in tailwind.config.js

Troubleshooting

Common Issues

1. Build Errors

2. Ensure all dependencies are installed

3. Clear .next folder and node_modules

4. Run npm install again

5. Styling Issues

6. Run npm run build to ensure TailwindCSS classes are generated

7. Check for conflicting styles in globals.css

8. Image Loading

9. Verify images are in the correct format (PNG, JPG, WebP)
10. Check image paths are correct
11. Ensure images are in the public directory

Deployment

Follow these steps to deploy your portfolio for free using GitHub and Vercel:

1. Create a new GitHub repository

2. Push your portfolio to GitHub

3. Deploy with Vercel:

4. Go to Vercel
5. Sign up or log in with GitHub
6. Click "New Project"
7. Import your GitHub repository
8. Vercel will automatically detect Next.js
9. Click "Deploy"

Your portfolio will be live in minutes with a free Vercel domain (e.g., your-repo.vercel.app). You can later add a custom domain in your Vercel project settings.

Contributing

Contributions are welcome! Here's how you can help:

1. Fork the repository
2. Create a new branch (git checkout -b feature/improvement)
3. Make your changes
4. Commit your changes (git commit -am 'Add new feature')
5. Push to the branch (git push origin feature/improvement)
6. Create a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

If you find these templates helpful, please consider:

• Starring the repository ⭐
• Sharing with other developers
• Buying me a coffee ☕

For issues and feature requests, please create an issue.