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

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

STEP 02:

Now install all packages using npm or yarn.

npm install
# or
yarn

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'
};

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 = ""

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

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

Comments

[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.

[Ambrish Goswami]

Thanks give right suggestion

[Kiran Naragund]

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

[Best Codes]

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

bestcodes.dev

[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.

[sitecountry]

Building a developer portfolio is a great way to showcase your skills, and this step-by-step guide is super helpful for anyone looking to create their own! I love how you’ve used NextJS, Tailwind CSS, and EmailJS to make the process smooth. If you’re looking for a reliable hosting solution to bring your portfolio to life, SiteCountry offers great services that can help you showcase your work with ease!

[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!

[Michael Garcia]

// This component helps you build an amazing developer portfolio website
// A developer portfolio is a personal website that showcases your skills, projects, and achievements.
// Key sections to include:
// 1. Introduction/About Me - Share who you are and what drives you as a developer.
// 2. Skills - Highlight the technologies, programming languages, and tools you excel in.
// 3. Projects - Display your most impressive projects with links, descriptions, and code snippets.
// 4. Contact - Provide ways for potential employers or clients to get in touch.
// A good portfolio should have a clean, modern design, be easy to navigate, and demonstrate your best work.
For More...