How to Build an awesome developer portfolio website.

As a software developer, having a robust portfolio website is one of the best ways to showcase your technical skills, projects, and professional journey. To help the developer community, I have designed a modern, high-performance portfolio website using Next.js, Tailwind CSS, and EmailJS.

In this guide, I will walk you through the setup process step-by-step so you can deploy your own professional portfolio in minutes!

STEP 01:

Clone the Repository using GitHub link and change the directory to the developer-portfolio.

🚀 Live Demo

Before we start, you can check out my own live portfolio to see the final result:👉sadekulislam.netlify.app

🛠️ Step 01: Clone the Repository

First, clone the project from my GitHub and navigate into the directory.

git clone [https://github.com/Sadekul-me/my-portfolio.git](https://github.com/Sadekul-me/my-portfolio.git)
cd my-portfolio

🛠️ Step 02: Install Dependencies & Customize Data

Install all the necessary packages using npm or yarn.

npm install
# or
yarn

After installation, open the project in your code editor. Navigate to utils/data/ and update the personal information with your own details.

Example (My Configuration):

export const personalData = {
  name: "Sadekul Islam",
  profile: '/profile.png',
  designation: "Software Engineer",
  description: "I am Sadekul Islam... 👨‍💻 My Belief: Technology is not just code; it’s an infinite world of creativity. 🚀",
  email: '[e-mail]',
  phone: '[phone]',
  address: "Taihu Campus, Wuxi University of Technology, Wuxi, China",
  github: '[https://github.com/Sadekul-me](https://github.com/Sadekul-me)',
  facebook: '[https://www.facebook.com/sadekul.dev](https://www.facebook.com/sadekul.dev)',
  linkedIn: '[https://www.linkedin.com/in/sadekul-me/](https://www.linkedin.com/in/sadekul-me/)',
  twitter: '[https://x.com/SadekulDev](https://x.com/SadekulDev)',
  stackOverflow: '[https://stackoverflow.com/](https://stackoverflow.com/)',
  leetcode: "[https://leetcode.com/u/SadekulDev/](https://leetcode.com/u/SadekulDev/)",
  devUsername: "Sadekul_me", // This will fetch your Dev.to blogs automatically!
  resume: "[https://drive.google.com/drive/folders/your-resume-link](https://drive.google.com/drive/folders/your-resume-link)"
}

🛠️ Step 03: Environment Setup (EmailJS)

This portfolio uses EmailJS to allow visitors to send messages directly to your email for free. Create a .env file in the root directory and add your credentials:

STEP 03:

Now we will make a .env file and set up our Email.JS credential in a .env file. I am using EmailJs in this project for the user to send mail to me and It's free. The .env file will be the following:

NEXT_PUBLIC_EMAILJS_SERVICE_ID = your_service_id
NEXT_PUBLIC_EMAILJS_TEMPLATE_ID = your_template_id
NEXT_PUBLIC_EMAILJS_PUBLIC_KEY = your_public_key

How to get these keys?

1. Sign up atEmailJS.com
2. Create an Email Service (Connect your Gmail) to get the Service ID.
3. Create an Email Template to get the Template ID.
4. Go to Account/API Keys to find your Public Key.

🛠️ Step 04: Run & Deploy

Now your portfolio is ready! Run the development server to see it in action:

npm run dev
# or
yarn dev

Open http://localhost:3000 in your browser. Once you're happy with it, you can easily deploy it to Vercel or Netlify.

✨ Final Words

If you find this project helpful, please consider giving a ⭐ to the GitHub Repository.
Let's connect and build something amazing together!
🔗GitHub: 🔗 LinkedIn:
🔗 Facebook:

Happy Coding! 🚀