DEV Community

Cover image for Build an awesome developer portfolio website.
Trimech Sarah
Trimech Sarah

Posted on

Build an awesome developer portfolio website.

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:

Image description
STEP 01:
Clone the Repository usingand change the directory to the developer-portfolio.

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

STEP 02:
Now install all packages using npmor 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: "Sarah trimech",
  profile: "/profile.png",
  designation: "Full-Stack web Developer",
  description: "My name is Sarah....",
  email: "Sarahtrimech456@gmail.com",
  phone: "+216 51637145",
  address: "tunis, Monastir",
  github: "https://github.com/Sarahtrimech/Sarahtrimech.git",
  facebook: "https://www.facebook.com/sarra.tremiche",
  linkedIn: "https://linkedin.com/in/sarah-trimech-48bb09336",
  instagram: "https://www.instagram.com/serah___tr?igshMWNtemRxYmd6NDJ3Mg",
  devUsername: "https://dev.to/trimech_sarah",
  resume: "...",
};

Enter fullscreen mode Exit fullscreen mode

The devusernameproperties 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 .envfile and set up our Email.JS credential in a .envfile. I am using EmailJsin this project for the user to send mail to me and It's free. The .env file will be the following:

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:

Top comments (0)