ABU SAID

Posted on Mar 12

Build an awesome developer portfolio website.

#portfolio #devpolio #webdev #nextjs

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:
Live preview url

STEP 01:
Clone the Repository using GitHub link and change the directory to the developer-portfolio.



git clone https://github.com/said7388/developer-portfolio.git
cd developer-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 personalData = {
  name: "ABU SAID",
  profile: "/profile.png",
  designation: "Full-Stack Software Developer",
  description: "My name is ABU SAID....",
  email: "abusaid7388@gmail.com",
  phone: "+8801608797655",
  address: "Dhaka, Bangladesh",
  github: "https://github.com/said7388",
  facebook: "https://www.facebook.com/abusaid.riyaz/",
  linkedIn: "https://www.linkedin.com/in/abu-said-bd/",
  twitter: "https://twitter.com/said7388",
  stackOverflow: "https://stackoverflow.com/users/16840768/abu-said",
  leetcode: "https://leetcode.com/said3812/",
  devUsername: "said7388",
  resume: "...",
};

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_EMAILJS_SERVICE_ID =
NEXT_PUBLIC_EMAILJS_TEMPLATE_ID =
NEXT_PUBLIC_EMAILJS_PUBLIC_KEY =

First of all, go to Emailjs.com and sign up for an account.

Make a email service using Gmail and take the Service ID and add it .env file as REACT_APP_YOUR_SERVICE_ID value.

Then make a Email template and take Template ID from the template setting and use it .env.

Then go to Account and take Public Key and use it in .env.

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

If you like the portfolio project Please give it a star on the GitHub Repository.
You can connect with me on Linkedin: https://www.linkedin.com/in/abu-said-bd/

Top comments (49)

Michael Tharrington • Mar 15

Hey there!

It was pointed out to us that this design is really quite similar to that of codewithmosh.com/

If you're using that site as inspiration for your portfolio, would you please add mention of it to your post as a reference?

ABU SAID • Mar 15

Hello Michael!
Inspiration for the only hero section on my portfolio website was taken from Code with Mosh. However, the remaining 6 sections are unique in concept.

Michael Tharrington • Mar 15

Hey Abu!

Totally understand your point. That said, I still think you should probably give Code with Mosh credit for the partial inspiration though, you know? You could always point out that they just inspired the hero section and design colors.

For instance, the DEV Code of Conduct has an attribution section even though it doesn't directly copy these sources. It's just a good practice — it's a great way to show appreciation for the things that directly inspired you. No one will fault you for including attribution, but they might if you exclude it, so why not add it?

Octavio Amuchástegui • Mar 27

Hey man sorry but that is not right, there is a line between "inspiration" or just copy assets like github.com/said7388/developer-port...

The thing is you are even putting it on a repo when the original author didn't even open source it, so is not only Immoral but also illegal.

Is not only about code copyright but also design copyright. Mosh site have a branding an palette of colors based on it.

Unless you have Mosh direct permission to do it of course.

Jon Randy 🎖️ • Mar 12

As a software developer, it's important to have a robust portfolio website that can display our abilities and experiences.

It really isn't. This is a total myth

Sergey Khomushin • Mar 12

It's not a myth at all. In particular, if you're a junior, the project is a big bonus for being invited to an interview. So, if your website doesn't work smoothly, it means you don't understand your profession well. For the company, it is better to look at other candidates.

Jon Randy 🎖️ • Mar 12 • Edited

Not true at all.

I've been a professional developer for approximately 30 years, and have been interviewing candidates for about 10.

The majority of the best developers I've interviewed or hired have not had portfolio websites.... and the majority of developers who have had portfolio websites turned out to be the weakest candidates. For some candidates, the main factor in rejecting them was actually their portfolio site itself (browser errors, over-engineering, inappropriate use of technology etc). Without the site, they would likely have gotten further in the interview process.

Much better to have an interesting, unvarnished, active GitHub (or similar) account. This tells a prospective employer way more about your skills and passion than a curated vanity project ever can.

Sergey Khomushin • Mar 12 • Edited

Maybe another 30 years and you will find out that first, you need to pass the HR selection :)

For some candidates, the main factor in rejecting them was their portfolio site (browser errors, over-engineering, inappropriate use of technology etc.)

Well, you see. It saved a lot of time and money for you and the company.

Jon Randy 🎖️ • Mar 12 • Edited

Hahaha, yeah.

The problem in a lot of companies is non-technical HR people being involved in the hiring of technical candidates. They're often blinded by sparkly nonsense, resulting in the rejection of a lot of the best candidates, and the wasting of time by the continued consideration of poor candidates.

Andrew Bone • Mar 12

When I'm sifting through potentials I look for a GitHub too because I'd rather see real code over a portfolio site.

But before candidates make it to me a non-technical person removes all candidates that don't mention certain keywords in their resume or don't have a GitHub or portfolio link.

My advice would be, making a good portfolio won't hurt your chance of getting shortlisted but making a bad one sure will.

Wisnu • Mar 12

Cool portfolio Said! what do you think of mine? wiscaksono.com/

ABU SAID • Mar 13

Your portfolio also cool 😎

Siavash Kahe • Mar 14 • Edited

Hi,
I like the idea of the coding activity section, is it being filled automatically with some extension in your editor? Could be more helpful with one month and one year durations (I'm not an expert, just a suggestion)
The projects section also looks neat, though the sub sections seem to be empty, e.g. wiscaksono.com/projects?tag=next
This is showing me an empty list although you do have Next projects

Wisnu • Mar 15

Hi @lightning1377,

Thanks for the suggestion! about the coding activity section, yes it will fill automatically with the extension, am using WakaTime for it

Earendil • May 10

Amazing site... Much better

AbdiShire1 • May 6

can I ask how many years of experience you have?

Wisnu • May 7

3 years

Matthieu Gravy • Mar 28

Your Portfolio is amazing ⚡️

Collins • Aug 27 • Edited

Awesome Portfolio how can i build one like that. I like the electron project and the sense of humor when you click the animated eyes

gudata • May 19

amazing job! however on mobile (ff) I see only blank pages on wiscaksono.com/projects?tag=next and the other sections.

Wisnu • May 19

fixed! thanks for letting me know

Pedro Pacheco • Mar 12

Good initiative, however I think that equal websites are not very good for both sides!

By the way, I like the design of your website! Its very simple to work, and gives a personal touch.

I made a Website Portfolio too! Its not finished, but the main things that I want to add are finished.

ABU SAID • Mar 13

Your portfolio also cool 😎

Subaash • Mar 14

Great colour choice especially the blurred borders are really good. I thought the project section wasn't rendered, but later on recognised that it was meant to be like that. Good creativity.

Btw, check out mine

Mohamed Ismail • Mar 14

Vera maari 🔥

Subaash • Mar 14

Haha...nanri bro 😅🙏🏻

Sufian mustafa • Mar 12

I'm truly impressed by the professionalism and elegance of this portfolio! It's unlike any I've seen before, with a stunningly polished UI that truly sets it apart.

ABU SAID • Mar 13

Thank you

MobinX • Mar 18

it is nice to see someone from BD . I loved your work brother.Btw if you dont mind , i have some question, you probably not studied csc in NSU but self taught.So how are u getting job right now, actually i am struggling with this situation of mine...it will be helpful if you provide info

Damilola Awopegba • Apr 23

I tried running it on my vscode
I guess there was an error
this is a good one

Brian G. • Mar 20

It's a good-looking portfolio. Nice design. From a content perspective, consider including links to your projects in your portfolio. Seeing your work in action will be far more impressive to prospective employers.

Also, it would be helpful to include a description of each app's functionality. As is, descriptions like "Me and my team built an AI-powered financial mobile application" don't really explain anything further that isn't in the title ("AI Powered Financial App").

Avneesh Kumar • Mar 17 • Edited



1 of 1 unhandled error
Next.js (13.5.3) is outdated (learn more)

Unhandled Runtime Error
Error: Failed prop type: The prop `href` expects a `string` or `object` in `<Link>`, but got `undefined` instead.
Open your browser's console to view the Component stack trace.

Call Stack
Next.js
Array.forEach
<anonymous>
Next.js
renderWithHooks
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (10707:0)
updateForwardRef
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (14692:0)
mountLazyComponent
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (15650:0)
beginWork$1
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (17335:0)
beginWork
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (25702:0)
performUnitOfWork
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (24553:0)
workLoopSync
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (24269:0)
renderRootSync
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (24224:0)
recoverFromConcurrentError
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23452:0)
performConcurrentWorkOnRoot
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23397:0)
workLoop
node_modules\next\dist\compiled\scheduler\cjs\scheduler.development.js (261:0)
flushWork
node_modules\next\dist\compiled\scheduler\cjs\scheduler.development.js (230:0)
MessagePort.performWorkUntilDeadline
node_modules\next\dist\compiled\scheduler\cjs\scheduler.development.js (534:0)

this is the error I encountered after running
npm run dev
command

Patrick Figueroa • Jun 30 • Edited

I got inspiration/motivation from his repository and did my own with custom information and little modifications in the code. Also, I enhance the performance of the page: can check here if you need it: github.com/patrickcsk1/portfolio