DEV Community

Cover image for Build an awesome developer portfolio website
Ambrish Goswami
Ambrish Goswami

Posted on

11 1 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:

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/ambrishgoswami80/github-portfolio.git
cd github-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 userData = {
  githubUser: 'ambrishgoswami',
  devUsername: "ambrishgoswami80",
  github: 'https://github.com/ambrishgoswami',
  instagram: 'https://www.instagram.com/divine.ambrish/',
  linkedIn: 'https://www.linkedin.com/in/goswamiambrish/',
  twitter: 'https://twitter.com/AmbrishGos76042',
  stackOverflow: 'https://stackoverflow.com/users/16840768/ambrish-goswami',
  leetcode: "https://leetcode.com/Ambrishgoswami/",
  resume: "https://drive.google.com/file/d/1-e5tfmd6SO48jAEaSOp1P1uMZAMEyeiB/view?usp=drive_link",
  skills: ['React', 'NodeJS', 'React', 'Express', 'NextJS', 'MySql', 'MongoDB', 'AWS'],
  timezone: '+6'
};

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

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

Disclaimer: In this repository, I have used some open-source APIs. All credits go to the owners of those repositories.

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (8)

Collapse
 
juniourrau profile image
Ravin Rau

Hi, @ambrishgoswami80 the live URL link doesn't seem to work. You can use the Link (CMD + K or CTRL + K) feature in dev.to to insert your URL.

Collapse
 
ambrishgoswami80 profile image
Ambrish Goswami

Thanks give right suggestion

Collapse
 
deathcrafter profile image
Shaktijeet Sahoo

This hardly looks good, let alone professional. Readability is the first priority of a professional portfolio.

If you want a modern attractive one, you need to create a design style keeping in view the standard approaches. Too flashy or unreadable portfolios are not recommended if you're looking for a job. For creative works, sky is the limit for graphics and animations but readability should not be compromised.

If the approach is creative, then you need to emphasize on what you are capable of creating or advertising to create. Just putting in a bunch of neon animated GIFs or gradient borders isn't going to cut it.

And another thing, do not use vw and vh to scale texts and relative objects. Use percentage and rem or em. You'll notice your current website doesn't respect desktop mode on mobile devices.

Collapse
 
dev_kiran profile image
Kiran Naragund

Cool! You can add it here - Awesome-Dev-Portfolios

Collapse
 
best_codes profile image
Best Codes

Cool repo!
How can I tell if my portfolio is awesome enough 🥲

bestcodes.dev

Collapse
 
wesborland profile image
Marcos Javier Gomez Hollger

Beautiful portfolio... Love the project section animation ❤️

Points to improve (personal view):

  • Put the header locked at top its good for better navigation & experience.
  • Add "Contact" in menu header.
  • Add responsive behaviour (currently no responsive for mobile/tablet and other resolutions)
  • Make the animation when you pick some menu option (About/Experience/etc) more smooth in the transition.
  • Hover effect in buttons can be better (contact me/resume/etc).

Thanks for share your project with us. Good work!

Collapse
 
hola_official profile image
Muhammed Musa

Nice portfolio check mine out

Collapse
 
psypher1 profile image
James 'Dante' Midzi

Are you aware that your link that the repo you are telling people to clone doesn't exist

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

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay