DEV Community

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

Read full post

Michael Tharrington • Mar 15 '24

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 '24

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 '24

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 '24

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.

tech_avi • Feb 26

got it bro but still rather than fighting...... who should get the credit and all we should look on the good side appreciate him for his work

who the heck thinks of code copyright but also design copyright...?

And why do he has to take direct permission for the work that he has did.....?

Think like a men not like bunch of kids..... bro....

Jon Randy 🎖️ • Mar 12 '24

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 '24

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 '24 • 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 '24 • 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 '24 • 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 '24

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 '24

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

ABU SAID • Mar 13 '24

Your portfolio also cool 😎

Siavash Kahe • Mar 14 '24 • 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 '24

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 '24

Amazing site... Much better

AbdiShire1 • May 6 '24

can I ask how many years of experience you have?

Wisnu • May 7 '24

3 years

PRIYANSHU SAINI • Dec 22 '24 • Edited

@wiscaksono Great bro, I find you there, after Allo. :)

Matthieu Gravy • Mar 28 '24

Your Portfolio is amazing ⚡️

Collins • Aug 27 '24 • 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 '24

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

Wisnu • May 19 '24

fixed! thanks for letting me know

Pedro Pacheco • Mar 12 '24

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 '24

Your portfolio also cool 😎

Sufian mustafa • Mar 12 '24

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 '24

Thank you

Subaash • Mar 14 '24

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 '24

Vera maari 🔥

Subaash • Mar 14 '24

Haha...nanri bro 😅🙏🏻

MobinX • Mar 18 '24

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

Brian G. • Mar 20 '24

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 '24 • 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 '24 • 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

Rahul Chandra • Apr 30 '24

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

Aman Raj • Apr 21 '24

hey, were you able to fix this error?

Damilola Awopegba • Apr 23 '24

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

Lucas A. Ouverney • Mar 14 '24

I want an opinion about mine.

Blog part is unfinished.

ABU SAID • Mar 15 '24

Language should be English!

Lucas A. Ouverney • Mar 18 '24

Thanks dude

realaayush • Mar 29 '24

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

gudata • May 19 '24

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

gudata • May 19 '24

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.

ReNuo • Dec 30 '24

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: lottie-react@2.4.0
npm ERR! Found: react@19.0.0
npm ERR! node_modules/react
npm ERR! react@"19.0.0" from the root project
npm ERR! peer react@"^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0" from @next/third-parties@15.1.1
npm ERR! node_modules/@next/third-parties
npm ERR! @next/third-parties@"15.1.1" from the root project
npm ERR! 8 more (next, react-async-script, react-dom, react-fast-marquee, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0 || ^17.0.0 || ^18.0.0" from lottie-react@2.4.0
npm ERR! node_modules/lottie-react
npm ERR! lottie-react@"^2.4.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react@18.3.1
npm ERR! node_modules/react
npm ERR! peer react@"^16.8.0 || ^17.0.0 || ^18.0.0" from lottie-react@2.4.0
npm ERR! node_modules/lottie-react
npm ERR! lottie-react@"^2.4.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! C:\Users---\AppData\Local\npm-cache_logs\2024-12-30T08_10_43_330Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: C:\Users---\AppData\Local\npm-cache_logs\2024-12-30T08_10_43_330Z-debug-0.log

Where and What is the problem here?

Crazy_dev • Feb 19

Hi, can anyone help me with this? - after running npm run dev, it is giving me some errors on console and also on localhost and project is not running.
And I don't know anything about next js, react js or even javascript. I needed a protfolio website and I followed everything in this post correctly.

Error(console)-

> developer-portfolio@0.1.0 dev
> next dev

   ▲ Next.js 15.1.1
   - Local:        http://localhost:3000
   - Network:      http://192.168.1.41:3000
   - Environments: .env.local

 ✓ Starting...
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry
 ✓ Ready in 1464ms
(node:29796) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
(Use `node --trace-deprecation ...` to show where the warning was created)
 ○ Compiling / ...
 ○ Compiling / ...
 ✓ Compiled / in 11.1s (1221 modules)
 ✓ Compiled / in 11.1s (1221 modules)
 ✓ Compiled in 1258ms (476 modules)
 ✓ Compiled in 1258ms (476 modules)
 ⨯ Error: Failed prop type: The prop `href` expects a `string` or `object` in `<Link>`, but got `undefined` instead.
 ⨯ Error: Failed prop type: The prop `href` expects a `string` or `object` in `<Link>`, but got `undefined` instead.
    at createPropError (..\..\src\client\app-dir\link.tsx:262:15)
    at createPropError (..\..\src\client\app-dir\link.tsx:262:15)
    at createPropError (..\..\src\client\app-dir\link.tsx:283:18)
    at Array.forEach (<anonymous>)
    at forEach (..\..\src\client\app-dir\link.tsx:277:20)
  260 |         actual: string
  261 |       }) {
> 262 |         return new Error(
      |               ^
  263 |           `Failed prop type: The prop \`${args.key}\` expects a ${args.expected} in \`<Link>\`, but got \`${args.actual}\` instead.` +
  264 |             (typeof window !== 'undefined'
  265 |               ? "\nOpen your browser's console to view the Component stack trace." {
  digest: '2737924932'
}
 GET / 500 in 13119ms
 ✓ Compiled /favicon.ico in 316ms (724 modules)
 GET /favicon.ico 200 in 410ms
 GET /favicon.ico 200 in 11ms
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8tgpg1gr0pv9slodowd2.png)

Ashish Agarwal • Apr 29 '24

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.

PRIYANSHU SAINI • Dec 22 '24

Awesome! What do you think about this. priyanshusaini.co/

RonakRafaliya • Jan 3

Hey @priyanshu_saini_096867baf I like your portfolio and it is very unique, according to me, and as I have checked so many portfolios, yours is another level quite impressive.

PRIYANSHU SAINI • Jan 5

@ronakrafaliya Thanks, I appreciate that.

JerickPH • Mar 23 '24 • Edited

Hello. Got this error.

This is my .env

Elvis Gatere Kinyanjui • Mar 16 '24

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:

Which service are you using for deployment and/or hosting?
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?