DEV Community

Cover image for Build an awesome developer portfolio website.
Swarup Mahato
Swarup Mahato

Posted on • Edited on

Build an awesome developer portfolio website.

#portfolio #devpolio #webdev #nextjs

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.

Here is the live preview:
Live preview url

Image description

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

git clone https://github.com/swarupinfotech/developer-portfolio.git
cd developer-portfolio
Enter fullscreen mode Exit fullscreen mode

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

npm install
# or
yarn
Enter fullscreen mode Exit fullscreen mode

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

export const personalData = {
  name: "Swarup Mahato",
  profile: '/profile.png',
  designation: "Software Developer",
  description: "My name is Swarup Mahato. I am a professional and enthusiastic programmer in my daily life. I am a quick learner with a self-learning attitude. I love to learn and explore new technologies and am passionate about problem-solving. I love almost all the stacks of web application development and love to make the web more open to the world. My core skill is based on JavaScript and I love to do most of the things using JavaScript. I am available for any kind of job opportunity that suits my skills and interests.",
  email: 'info@swarupinfotech.in',
  phone: '+91 9142922542',
  address: 'Mango Jamshedpur, Jharkhand 831012 ',
  github: 'https://github.com/swarupinfotech',
  facebook: 'https://www.facebook.com/profile.php?id=100069856215966',
  linkedIn: 'https://www.linkedin.com/in/sarup-m-1a1372288/',
  twitter: 'https://x.com/SwarupInfotech',
  stackOverflow: 'https://stackoverflow.com/users/22920700/swarup-infotech',
  leetcode: "https://leetcode.com/u/lL3NvWLd4u/",
  devUsername: "swarupinfotech1",
  resume: "#"
};
Enter fullscreen mode Exit fullscreen mode

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 =
Enter fullscreen mode Exit fullscreen mode

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 a 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
Enter fullscreen mode Exit fullscreen mode

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/sarup-m-1a1372288/

Top comments (4)

Collapse
 
swarupinfotech1 profile image
Swarup Mahato •

Currently I am working on this site, so wait a few minutes to see the project. Thank you.

Collapse
 
nathan_tarbert profile image
Nathan Tarbert •

pretty cool seeing the full step-by-step walk through like this honestly makes me wonder if building your own portfolio from scratch is better than using those one-click templates everywhere

Collapse
 
swarupinfotech1 profile image
Swarup Mahato •

Thank you

Collapse
 
swarupinfotech1 profile image
Swarup Mahato •

Now you can see the ui.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.