DEV Community

Cover image for Build an awesome developer portfolio website.

Build an awesome developer portfolio website.

ABU SAID on March 12, 2024

As a software developer, it's important to have a robust portfolio website that can display our abilities and experiences. To assist other develope...
Collapse
 
michaeltharrington profile image
Michael Tharrington

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?

Collapse
 
said7388 profile image
ABU SAID

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.

Collapse
 
michaeltharrington profile image
Michael Tharrington

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?

Collapse
 
octavioamu profile image
Octavio Amuchástegui

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.

Collapse
 
jonrandy profile image
Jon Randy 🎖️

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

Collapse
 
xr0master profile image
Sergey Khomushin

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.

Collapse
 
jonrandy profile image
Jon Randy 🎖️ • 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.

Thread Thread
 
xr0master profile image
Sergey Khomushin • 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.

Thread Thread
 
jonrandy profile image
Jon Randy 🎖️ • 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.

Thread Thread
 
link2twenty profile image
Andrew Bone

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.

Collapse
 
wiscaksono profile image
Wisnu

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

Collapse
 
said7388 profile image
ABU SAID

Your portfolio also cool 😎

Collapse
 
lightning1377 profile image
Siavash Kahe • 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

Collapse
 
wiscaksono profile image
Wisnu

Hi @lightning1377,

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

Collapse
 
earendildev profile image
Earendil

Amazing site... Much better

Collapse
 
abdishire1 profile image
AbdiShire1

can I ask how many years of experience you have?

Collapse
 
wiscaksono profile image
Wisnu

3 years

Collapse
 
matthieugravy profile image
Matthieu Gravy

Your Portfolio is amazing ⚡️

Collapse
 
mandrake profile image
Collins • 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

Collapse
 
gudata profile image
gudata

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

Collapse
 
wiscaksono profile image
Wisnu

fixed! thanks for letting me know

Collapse
 
pedrorfpacheco profile image
Pedro Pacheco

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.

Collapse
 
said7388 profile image
ABU SAID

Your portfolio also cool 😎

Collapse
 
sufian profile image
Sufian mustafa

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.

Image description

Collapse
 
said7388 profile image
ABU SAID

Thank you

Collapse
 
subaash_b profile image
Subaash

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

Collapse
 
ihssmaheel profile image
Mohamed Ismail

Vera maari 🔥

Collapse
 
subaash_b profile image
Subaash

Haha...nanri bro 😅🙏🏻

Collapse
 
mobinx profile image
MobinX

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

Collapse
 
adufeji1 profile image
Damilola Awopegba

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

Collapse
 
avneesh01 profile image
Avneesh Kumar • 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)
Enter fullscreen mode Exit fullscreen mode

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

error message screenshot

Collapse
 
patrickcsk1 profile image
Patrick Figueroa • 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

Collapse
 
amanr11314 profile image
Aman Raj

hey, were you able to fix this error?

Collapse
 
rahul_chandra profile image
Rahul Chandra

even i am getting the same error, please do share how to fix it.

Collapse
 
brian_curricular profile image
Brian G.

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").

Collapse
 
realfakenerd profile image
Lucas A. Ouverney

I want an opinion about mine.

Blog part is unfinished.

Collapse
 
said7388 profile image
ABU SAID

Language should be English!

Collapse
 
realfakenerd profile image
Lucas A. Ouverney

Thanks dude

Thread Thread
 
realaayush profile image
realaayush

Language isn't really a barrier for websites, almost all browsers can translate webapps. + @realfakenerd your site looks great !!

Collapse
 
gudata profile image
gudata

When I open it I saw "Do you want to translate from ...." window and I close it. Too much effort.

Collapse
 
gudata profile image
gudata

Open it again.
Nice and calm colors.
Home, and Sobre - look weird on wide screen. You should use some container to get the information more tight.

Collapse
 
ashishagarwal profile image
Ashish Agarwal

I though you would teach something like such gradient hover effects but hell nah, you actually took someone's code and seems like this isn't fair. I may look somewhere else for a better tutorial but as @michaeltharrington said, you should give inspiration.

Collapse
 
jekpaler23 profile image
JerickPH • Edited

Hello. Got this error.

Image description

This is my .env

Image description

Collapse
 
gatere profile image
Elvis Gatere Kinyanjui

Hello Said,

Thank you for sharing this. Incidentally, I'm in the process of building something similar, with the same stack, though still in the rudimentary phase. Two questions:

  1. Which service are you using for deployment and/or hosting?
  2. Tied to that, I've struggled with my Email.Js environment variables - they can't seem to be co-operate. How have you gone about them, when it comes to production?
Collapse
 
avneesh01 profile image
Avneesh Kumar

Hello there!!

I am having a problem with installing npm packages, can you please guide me for step 2?

Collapse
 
khaliddaowd profile image
Khalid

Could u give me a feedback about main plz?

Collapse
 
khaliddaowd profile image
Khalid

Collapse
 
ebrardev profile image
ebrar

Hi thanks for post, Can I use this template for my bio ? thank u

Collapse
 
ebrardev profile image
ebrar

I can't connect dev.to for blogs, can u help me ?