DEV Community

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

Posted on

1

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:

Quadratic AI

Quadratic AI – The Spreadsheet with AI, Code, and Connections

  • AI-Powered Insights: Ask questions in plain English and get instant visualizations
  • Multi-Language Support: Seamlessly switch between Python, SQL, and JavaScript in one workspace
  • Zero Setup Required: Connect to databases or drag-and-drop files straight from your browser
  • Live Collaboration: Work together in real-time, no matter where your team is located
  • Beyond Formulas: Tackle complex analysis that traditional spreadsheets can't handle

Get started for free.

Watch The Demo 📊✨

Top comments (0)

Image of PulumiUP 2025

Let's talk about the current state of cloud and IaC, platform engineering, and security.

Dive into the stories and experiences of innovators and experts, from Startup Founders to Industry Leaders at PulumiUP 2025.

Register Now