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)