DEV Community

Cover image for Developer Portfolios as Inspiration ✨
Firangiz Ganbarli
Firangiz Ganbarli

Posted on • Updated on

Developer Portfolios as Inspiration ✨

Developer portfolios are extremely entertaining, inspirational and motivational to explore. I have been debating creating my own for a while, and have collected some inspiring developer portfolios that I came across online.

In no particular order, here are some portfolios that you can take inspiration from. Enjoy!

1. Bruno Simon

Bruno Simon has an extremely entertaining portfolio website that you can explore for a while and forget the existence of time. Honestly.

There is a car that you can use to move around and interact with the objects (play bowling or even use the honk).

Bruno's website

2. Robby Leonardi

Robby has received many awards for his CSS art, and his portfolio website is an interactive resume. The gameified resume is very interesting to read through, and the illustrations are pretty.

Robby's interactive resume

3. Matthew Farley

Matt is a designer, front-end developer and a mentor. His portfolio website is nicely designed, with beautiful illustrations. His experiences and previous work is presented in a nicely manner.

Matt's website

4. Riccardo Zanutta

Riccardo's portfolio has nice shapes that float around when you hover over them. His previous work is presented in slides and the website also has both light and dark mode available.

Riccardo's Website

5. Seán Halpin

Seán's portfolio is minimalistic. He includes his work in simple cards and the home page has a giant eye that looks around the page 👀

Seán's website

6. Rafael Caferati

Rafael is a full-stack developer and his website is very interactive. A cool feature I noticed is the ability to filter off his projects based on the category of tech stack. You can also destroy the webpage after you have read it by playing a game and earning points like shown below.

Rafael's Website

7. Jacek Jeznach

Jacek is a Front-End Developer. With the infamous TikTok logo as his initial, the front page of the portfolio itself is amazing. When you hover above the letters in the introduction, letters bounce around. You can also enjoy a great music while exploring.

Jacek's website

If you have a website of your own, or any other suggestions, add them down below so we can check it out!

Top comments (136)

Collapse
 
sidthesloth92 profile image
Dinesh Balaji

Checkout mine: dineshbalaji.in. I was inspired by many of these to build my own.. :D

Collapse
 
firangizg profile image
Firangiz Ganbarli

I ABSOLUTELY LOVE THE FISH 🐟 You have done a great job, definitely adding this into my list. One suggestion though, make the icon on right-hand corner bigger or add text so that viewer can know it isn't just a logo or something. I accidentally found that you have more pages there 😅 Other than great, amazing!

Collapse
 
sidthesloth92 profile image
Dinesh Balaji

Thanks mate for the feedback. Much appreciated.. :)

Collapse
 
ghana7989 profile image
ghana

I always want to build a site like that but I don't know what technologies to use.
Can you make a post on how you did that website or a github link of that website code.
Awesome website from fellow 🇮🇳,
Thanks

Collapse
 
sidthesloth92 profile image
Dinesh Balaji

Thanks mate. I have written a post on that: dev.to/sidthesloth92/story-of-how-... . You can find the repo here: github.com/sidthesloth92/db-portfolio . Do drop a star if you like it.. :)

Collapse
 
miguelmj profile image
MiguelMJ

I'm amazed that it is totally responsive. I didn't expect it to look so well on a mobile phone!

Collapse
 
sidthesloth92 profile image
Dinesh Balaji

Thanks, man. Responsiveness was one thing I wanted to ensure was there. We live in a mobile world pretty much these days.. :)

Collapse
 
gilfewster profile image
Gil Fewster

Yeah, I had the same thought. Really great to see a site using fancy effects and animations that still works (and works well) on a mobile device.

Thread Thread
 
sidthesloth92 profile image
Dinesh Balaji

Thanks mate.. :)

Collapse
 
leotocca profile image
Leonardo Toccaceli

This is somenthing REALLY impressive. I'm amazed and inspired. Could you share the stack and the tech used to get the animations? Thanks!

Collapse
 
firangizg profile image
Firangiz Ganbarli

He has made a post about it on the website if you go to Posts. The first one is about how he developed it, I think

Thread Thread
 
leotocca profile image
Leonardo Toccaceli

Oh, great! Thanks for the info!

Collapse
 
madflows profile image
Folarin Lawal

Wow, I'm following you for this

Collapse
 
sidthesloth92 profile image
Dinesh Balaji

Thanks man. Really appreciate it.. :)

Collapse
 
rahul7007 profile image
Rahul Sarma

Stunning design.

Collapse
 
sidthesloth92 profile image
Dinesh Balaji

Thank You.. :)

Collapse
 
ctrleffive profile image
Chandu J S

Wow..!! This is awesome! Nice color combo and cool animations.
And I'm seeing a horizontal scrollbar in Firefox.

Collapse
 
sidthesloth92 profile image
Dinesh Balaji

Thank man.. :) Will fix that.. :)

Collapse
 
berlinkoche profile image
BerlinKoche

looks realy cool

Collapse
 
sidthesloth92 profile image
Dinesh Balaji

Thanks mate.. :)

Collapse
 
otumianempire profile image
Michael Otu

this is sick.. I like the colors and how they blend with the animation..

Collapse
 
sidthesloth92 profile image
Dinesh Balaji

Thanks mate.. :)

Collapse
 
gilfewster profile image
Gil Fewster

Very nice work, Dinesh.

Collapse
 
sidthesloth92 profile image
Dinesh Balaji

Thanks mate.. :)

Collapse
 
qviper profile image
Viper

It is looking so awesome on phone.

Collapse
 
sidthesloth92 profile image
Dinesh Balaji

Thanks Mate.. :)

Collapse
 
gidoskales profile image
GidoSkales

Bravo... Still the best so far

Collapse
 
sidthesloth92 profile image
Dinesh Balaji

Thanks mate...:)

Collapse
 
psyxman profile image
The Man

This looks really good Dinesh

Collapse
 
blessinghirwa profile image
Blessing Hirwa

This is crazy dude. Is it public?

Collapse
 
sidthesloth92 profile image
Dinesh Balaji • Edited

Thanks and Yes.. :)

Thread Thread
 
blessinghirwa profile image
Blessing Hirwa

Can you share the github repo? I want to improve mine also

Thread Thread
 
sidthesloth92 profile image
Dinesh Balaji
Thread Thread
 
blessinghirwa profile image
Blessing Hirwa

Thanks a bunch

Collapse
 
ctrleffive profile image
Chandu J S • Edited

Awesome list!
I made mine a while ago. Have a look.
chandujs.dev

Collapse
 
sidthesloth92 profile image
Dinesh Balaji

The colors are great. The site looks well rounded..:D

Collapse
 
ctrleffive profile image
Chandu J S

Thank you! 😌

Collapse
 
firangizg profile image
Firangiz Ganbarli

The color combination and the layout is amazing. I think it manages to highlight your work and achievements well! Thank you for sharing:)

Collapse
 
ctrleffive profile image
Chandu J S

Thanks 🙂

Collapse
 
gedalyakrycer profile image
Gedalya Krycer

Nice job, great use of color, and pinning elements to the sides of the screen.

Collapse
 
ctrleffive profile image
Chandu J S

Thank you! I love this community. You guys made my day. ☺️

Collapse
 
otumianempire profile image
Michael Otu

very simple my friend.. very simple.

Collapse
 
ctrleffive profile image
Chandu J S

Thank you so much! 🙃

Collapse
 
jcoelho profile image
José Coelho • Edited

I made a personal website when I was job hunting. It’s open source and easily customizable with your own information, just fork and update the resume.json.

Have a look 😊
jcoelho93.netlify.com
github.com/jcoelho93/personal-website

Collapse
 
firangizg profile image
Firangiz Ganbarli

I like your website! One think that I noticed is that it moves from a dark color combinations to light very quickly. (And the green being so bright doesn't help the eyes either 😅) I really liked the structure of listing your experiences and will probably use that for mine, too! Thank you for sharing 😊

Collapse
 
miguelmj profile image
MiguelMJ

I liked it! Pretty straightforward.

Collapse
 
gedalyakrycer profile image
Gedalya Krycer

Good work, love seeing more Bulma sites! I really enjoy using that framework as well. :)

Collapse
 
ptprashanttripathi profile image
Pt. Prashant tripathi

Check out mine and give some feedback

ptprashanttripathi.github.io

Collapse
 
firangizg profile image
Firangiz Ganbarli

I really liked the "card" like structure of the way you introduced yourself on the website! I can't really add on, except maybe try adding more images to the background unless simplicity is what you want to achieve. I really like the "vibe" first image creates and would probably continue adding images of similar color combination for the whole website. 😊

Collapse
 
miguelmj profile image
MiguelMJ

I totally agree.

Collapse
 
qviper profile image
Viper

Really loved your portfolio and appreciate all those works. Just some typo in Poet section Poerty instead of Poetry . And your link to interest isnot working.

Collapse
 
ptprashanttripathi profile image
Pt. Prashant tripathi • Edited

Thanks brother, silly misteak 😁

Which link is not working can you please dm me

Collapse
 
otumianempire profile image
Michael Otu

I don't know what to say but it is awesome..

Collapse
 
gedalyakrycer profile image
Gedalya Krycer

Found this very inspiring, especially seeing everyone's portfolios in the comment section. :)

This is my current React.js portfolio site, with GSAP 3 animations. gedalyakrycer.com/

My plan is to re-structure it in the new year and link it up to dev.to's REST API, similar idea to José Coelho's site.

Collapse
 
allison profile image
Allison Walker

Very ambitious but done well. What were your goals in putting together the site?

It almost looks like you have more design projects than developer projects. On the design site, why did you choose to not have the featured project be the project that opens when you land on the site? It's featured, but not featured.... Also, why did you decide to put the design website on a sub-domain?

I also noticed that the resume needs to be downloaded. There's so much else going on, yet it seems kind of old-school to have to download the PDF.

Collapse
 
gedalyakrycer profile image
Gedalya Krycer

Thanks for the questions, they are really good ones! And I’ll be referring back to them as I go through an upcoming redesign. :)

Original Goal: To make a React website in one week for my bootcamp homework, but something strong enough to show employers.

Ongoing Goal: As I learn new things (animations, filtering skill section, etc) incrementally add them to the site as a quick testing ground.

2021 Goal: Rebuild site to be more logically structured, feature more dev projects and support my dev.to blog.

The design website is actually my old Adobe powered design portfolio site. That is why it is on a sub domain because it is powered by a different platform. (Great catch btw.)

(I was a designer for 5 years before starting development this year.)

I definitely want to bring over the design projects into my React site in the future and structure them in a better way.

Up until this time my motivation has been speed and experimentation over targeted deep user experience. But future plans will switch that, as I’m thinking more of what types of jobs I want to go for.

PDF I will probably still keep as an option, will likely upgrade my About page to reflect more of its information.

Thread Thread
 
allison profile image
Allison Walker

My comment about the PDF is specifically about downloading it. When I click on it, it prompts me to download vs viewing it on another tab. That seems kind of out of place, in context with the rest of the site.

I've been curious when looking at different portfolios to know how well they serve their creators when it comes to job hunting. I hope your goals/changes work out for you.

Thread Thread
 
gedalyakrycer profile image
Gedalya Krycer

Ah ok, makes sense now about the PDF. I think it depends on the device. On my phone in safari and chrome it opens in a new tab. On desktop it does indeed download.

Good luck on your research! And thank you for the well wishes.

Collapse
 
firangizg profile image
Firangiz Ganbarli

I really liked that it is a minimalistic website, but still has nice animations and features that surprises. The way you show your previous work is very pretty, in my opinion. Thank you for sharing!

Collapse
 
pena56 profile image
pena56

Amazing list..
Check out mine

moses-o.web.app/

Collapse
 
allison profile image
Allison Walker

It depends on what your goals are for your portfolio, but I think it's direct and includes what it needs to and not much unnecessary information.

What I like about your project section is that you describe what the project was, the language you used, and what you learned. However, spend some time checking that the spelling and grammar is correct, that the punctuation is correct, that there are upper/lower case letters where they should be.

I also recommend increasing the font size a bit, and perhaps switching the body copy to perhaps something less stylized. Maybe Open Sans, but try it out.

Lastly, I would check out the different sizes of your portfolio on very large or very small screens. Is the experience what you want it to be? You're described yourself as a 'design oriented' developer. This should be reflected in your website.

I'm giving this feedback because overall I like what you've done. These are small tweaks to help make it even better.

Collapse
 
pena56 profile image
pena56

Wow.. thanks alot .. I really appreciate the detailed feedback.. you are right... This was kind of a rushed project... I will put all the concerns you raised into consideration when reworking the site...
Once again thanks

Collapse
 
firangizg profile image
Firangiz Ganbarli

Hi! I like the overall look and feel of the website, but agree with Miguel that some animations are distracting (and unnecessary). For example, I feel like the animation on about you text (Hello...) should not be there, since a viewer has to wait and see what it is gonna show up. But, animation on your projects is awesome since it happens quickly and comes as I scroll down! Overall, great job. Thank you for sharing:)

Collapse
 
pena56 profile image
pena56

Thanks for the feedback... Will definitely put that into consideration in the version 2.0

Collapse
 
miguelmj profile image
MiguelMJ

I like it but I find all the animations a bit distracting. Anyways, good job.

Collapse
 
pena56 profile image
pena56

Thanks for the feedback

Collapse
 
kaisermann profile image
Christian Kaisermann

Loved these portfolios!

Here's mine: Kaisermann.me 😳

Collapse
 
firangizg profile image
Firangiz Ganbarli

I like this one! Very unique and different. It is clear within a moment that you worked really hard on this one (especially the space mode). Great work!

Collapse
 
sheilagomes profile image
Sheila Gomes

Love your portfolio, very creative!

Collapse
 
matthewpalmer9 profile image
Matthew Palmer

I created mine to test my knowledge in pure CSS and JavaScript. I'm pretty proud of it!

matthewonrails.com

Collapse
 
firangizg profile image
Firangiz Ganbarli

You did a great job! It looks amazing and as Gedalya said, the glows are great. One thing I suggest is to have a little more space between the text used in Project descriptions and Contact form to make it more easy to read. Thank you for sharing!

Collapse
 
gedalyakrycer profile image
Gedalya Krycer

Nice job, I like the little glow on the burger menu icon. :)

Collapse
 
matthewpalmer9 profile image
Matthew Palmer

Thank you, Gedalya! 😁

Collapse
 
justinjunodev profile image
Justin Juno

I just revamped my personal site. Content is still little sparse for the blog/ playground, but I'll be adding to it weekly. Feel free to check it out: justinjuno.dev 🔥🔥🔥

Collapse
 
firangizg profile image
Firangiz Ganbarli

I like the look of it, and it looks solid. I like the sandbox as well, but I am curious about why don't you showcase more of your projects or have a separate page for it?

Collapse
 
justinjunodev profile image
Justin Juno

Appreciate the kind words and great question!

As a father of twins and full-time engineer, larger projects simply aren't feasible. As the time I'd spend building and then maintaining a project, would cut into the time I've set aside for family or my own personal study/ growth.

Using sandboxes (and a blog), I can still demonstrate my abilities as a developer, but focus on specific gaps in knowledge and output more work/ content. However, this approach isn't for everyone. I'm fortunate in that I already have professional experience under my belt and can talk to that work/ my contributions on previous projects, teams, etc.

Hope this helps clears things up!

Collapse
 
allison profile image
Allison Walker • Edited

I did some research into portfolios, so it's very interesting to view these in that context. Overall, I think it's important to have a goal in mind for what you want your portfolio to accomplish. Is it to help you find work, or just a playground for your ideas? Maybe it's a requirement for school. It can be easy to get discouraged by other designs if you don't have a goal.

And while I do think these are all very interesting portfolios, there's still room for improvement on some of them. A few of them have 404 Page Not Found links for their projects. One of them I had to quit because it didn't load fast enough. I'm overall not a fan of sound on websites that cannot be turned off. And overall, just checking spelling and grammar is also important.

I also think those charts where people rank their own skills and abilities should not ever be included on resumes, portfolios, etc....

Collapse
 
firangizg profile image
Firangiz Ganbarli

Oh, thank you for your perspective on the matter. I wasn't aware of the 404 Page Not Found links. I completely agree on the last point though. I really don't think the words "expert" or the level of proficiency should appear anywhere, and some developers go as far as ranking them (out of stars/points) and it just generates more confusion than clarity.

Collapse
 
allison profile image
Allison Walker

I found the links because I was purposely clicking around looking for stuff like that.... These types of round ups are helpful. It's good to know what you like and what you don't like. It's interesting that developers create portfolios in the first place. I figured most people would rely on github.

(And of course I have a typo in my comment [which I've edited out], LOL! :D

Collapse
 
szg251 profile image
Szabo Gergely

I’ve just finished mine. Check it out:
szabogergely.com

Collapse
 
firangizg profile image
Firangiz Ganbarli

Very creative and impressive! I like the thought and hard work that went behind this. If you want to spice it up more, you can try having a toggle switch for light mode, too!

Collapse
 
szg251 profile image
Szabo Gergely

Thanks!
Color theming sounds a good idea, and it wouldn't be hard to implement!

Collapse
 
otumianempire profile image
Michael Otu

I am back-end developer with little or no front-end skill.. How do I stand out as the front-end developers do, without design.

Collapse
 
polaroidkidd profile image
Daniel Einars

As a front-end dev, having spent my off hours designing my own portfolio website, I'd recommend buying a good design. There's so much to keep in mind when designing that I regret not having done that. It's not that expensive for a few pages (about me/previous work/contact/blog/homepage).

The fancy portfolio designs are for frontend Devs to showcase their skills as designers and implementors. Your main goal is to highlight your experience, previous work and a quick and easy way to reach you. With that in mind I'd reckon it's easier to pay a designer for a individualised way to present these, than it is for you to create one. You can still gather a ton of front-end experience by implementing it.

Hope it helps!

Collapse
 
samsky profile image
Samsky

I disagree with you Daniel,
if you're frontend developer then it's a chance for you to be good at designing and by that practicing on your website. on the other hand if you're backend then I can understand. us frontend devs always work the layouts and UI's so it should be fun.

Collapse
 
firangizg profile image
Firangiz Ganbarli

I agree with Daniel, and also want to add that, if you are not that good at front-end, you have a few options. You can find templates online and customize however you can. Another option would be to keep it simple on the design and front-end. I have seen many portfolios that are just one page, with links to social media and GitHub accounts (or projects). Although I doubt the use of a one page website like that, it can work.

Collapse
 
allison profile image
Allison Walker

The more you include in your design, there more there is to criticize.

Go for simplicity over complexity. Focus on responsiveness, accessibility, and performance optimization.

The main thing is to decide what you want your portfolio to accomplish. Why are you making a portfolio?

I also recommend you look around. These are just a handful of examples. There's a really wide breadth of portfolio styles. It's important to know what you like as well as what you don't.

Collapse
 
omhet profile image
Vladimir

Awesome list, thanks!
Btw, here is mine
vlivanov.space/

Collapse
 
firangizg profile image
Firangiz Ganbarli

I love your portfolio! I think it would be better if you made the project images look smaller and not full page, but nevertheless, it looks awesome.

Collapse
 
omhet profile image
Vladimir

Thank you for your kind feedback :)

Collapse
 
miguelmj profile image
MiguelMJ

I hope I'm not too late, here's mine. I'm not a designer, so any criticism is welcome!

miguelmj.github.io

Collapse
 
firangizg profile image
Firangiz Ganbarli

It is simple and nice. I don't know if I am the only one, but the animation at the bottom of the page kept me waiting for something. 😅 Other than that, the website seems nice, but you can experiment with some animations if you want it to be less empty (the about page).

Collapse
 
miguelmj profile image
MiguelMJ

Oh, I didn't realize that animation looked like a loading animation! I will have to change that. Thanks a lot for your feedback, is very appreciated! ❤️ ❤️ ❤️

Collapse
 
imagineeeinc profile image
Imagineee • Edited

i have one for the fun of one: imagineeeinc.github.io

Collapse
 
firangizg profile image
Firangiz Ganbarli