Build an awesome developer portfolio website.

#portfolio #nextjs #webdev #javascript

As a software developer, it's important to have a robust portfolio website that can display our abilities and experiences. To assist other developers, I have designed a portfolio website using Next, Tailwind CSS, and EmailJS. In this article, I will provide a step-by-step guide on the setup process, along with the GitHub link.

Live preview URL

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

git clone https://github.com/Shahid6289/Shahid-Portfolio
cd developer-portfolio

STEP 02:
Now install all packages using npm or yarn.

npm install
# or
yarn

After installation, all packages, Now change all data on utils/data/* according to you. For example:

export const personalData = {
  name: "SHAHID PARVEZ",
  profile: '/profile.png',
  designation: "Software Developer",
  description: "My name is SHAHID PARVEZ.....',
  phone: '+91 6289883556',
  address: 'West Bengal - India - Kolkata - 700119 ',
  github: 'https://github.com/Shahid6289',
  facebook: 'https://www.facebook.com/shahid.parvez.94695',
  linkedIn: 'https://www.linkedin.com/in/shahid-parvez-8599961b3/',
  twitter: 'https://www.geeksforgeeks.org/user/shahidgotzao/',
  stackOverflow: 'https://stackoverflow.com/users/24319695/shahid-parvez',
  leetcode: "https://leetcode.com/Shahid6289/",
  devUsername: "Shahid6289",
  resume: "Your Resume"
}

The devusername properties replace it with your dev.to username and it will fetch all blogs from your dev.to website.

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 =
NEXT_PUBLIC_EMAILJS_TEMPLATE_ID =
NEXT_PUBLIC_EMAILJS_PUBLIC_KEY =

First of all, go to Emailjs.com and sign up for an account.

Make a email service using Gmail and take the Service ID and add it .env file as REACT_APP_YOUR_SERVICE_ID value.

Then make an Email template and take Template ID from the template setting and use it .env.

Then go to Account and take Public Key and use it in .env.

STEP 04:
Now the portfolio website is ready for the run. You can run it using npm or yarn.

npm run dev
# or
yarn dev

If you like the portfolio project Please give it a star on the GitHub Repository.
You can connect with me on Linkedin: https://www.linkedin.com/in/shahid-parvez-8599961b3/

DEV Community

Build an awesome developer portfolio website.

Top comments (0)