Web developers are a creative bunch. But unfortunately, there’s only a certain amount of creativity we can enjoy when we build products in the office. You have to look outside of the workplace to really see the entirety of a person's creativity. In the side projects, the mini-games, and of course, the developer portfolio.
Portfolios are meant to showcase what, we as web developers, are capable of. It’s a museum of our work, with past tech stacks, case studies, and our work history. It’s the cumulation of all the different experiences and hot tips we’ve gathered over the years. It can also be a way that we give back to the wonderful developer community, as we all try to learn and grow together. It’s our carved-out space on the humongous world wide web that we can build anyway we want to, and it’s a lot of fun!
Even if you don’t have a catalog of web developer projects to show on your portfolio , it’s important to spend some time personalising your site. In a way, it’s like a resume in itself. If people are impressed by your site chances are it’ll lead to something good. I suggest you start by looking at what other developers are doing and take some tips from them.
In this article, I’m going to share over a dozen developer portfolios that go beyond listing generic work experience to create an immersive website that serves as a living breathing example of their skill. I encourage you to use these examples as creative inspiration!
The navigation on Annie’s profile is simple, clean, and easy — an important part of any site for sure! I’m a huge fan of the design that splits the larger navigation from the content below, it looks so clean to me, and the colour scheme fits perfectly. Lastly, the fun facts section of her about me page lets her personality come through and I think that’s an imperative part of a great portfolio!
2. Brittany Chiang
Brittany’s site immediately gives good vibes with the brilliant colour scheme, modern design feel, and her main mission to build things for the web. A portfolio that shines from simplicity, setting a great example of what a web developer portfolio can be.
3. Bruno Simon
Have you ever driven a car around inside your web browser? Have you ever done so while learning all about a person’s career and portfolio? I certainly never did until this amazing portfolio was created. I recommend checking it out and good luck with bowling a strike!
4. Cassie Codes
My favourite part of Cassie’s portfolio is how you can click the lamp to switch between light and dark modes. It’s a simple nice touch to add the light turning on when dark mode is selected. There are so many simple, yet impactful UX pieces on this site that make it a joy to scroll through, click around, and read articles on.
5. Charles Bruyerre
This unique site has creative 3D shapes that animate as you move. Sharlee was created as a unique identity for Charles to be adaptable and modular for his online presence. The colours, the identity, and the site certainly show the thoughtfulness around it.
6. Jesse Zhou
Being a fan of Ramen and of excellent web dev creativity, Jesse’s Ramen portfolio shows an absolute masterpiece. This portfolio showcases how to make learning about someone’s career a blast, nicely done Jesse.
7. Jhey Tompkins
Am I on Jhey’s Twitter profile or portfolio? Jhey’s profile is his own take on a Twitter-like design for his articles and profile. It’s a very clean portfolio that shows his creativity on the web!
8. Monica Dinculescu
Monica’s side projects are always so much fun, like Tiny Care Terminal, which makes sure you don’t stress throughout your day. Her portfolio shows off many of her side projects, her articles, and her art. Exploring your creativity and sharing it with the world is what web dev portfolios are all about.
9. Jason Lengstorf
If you follow Jason on Twitter, his personality really shines through both his Tweets and on his website. The colour scheme, and the various animations, all while keeping it simple make this portfolio stand out to me. Nicely done Jason!
10. Kaleb McKelvey
For my own portfolio. I decided on using material design for simplicity in designing and implementing it (hello component libraries and thank you). My main focus was blog posts, with additional tidbits about me, my values, some of the projects I’ve worked on, and observations I’ve had in the world! The hope was for a modern and easy-to-follow portfolio, but who knows what's next in the redesign!
11. Lars Olson
This portfolio immediately gives me low-fi vibes, almost like I’m being transported to the 90s future. The spacey background, the floating pineapple and hand, and the awesome font demonstrate how fun a portfolio can be. Lars gives more information about his projects, and about himself, and demonstrates what he can do with motion on his site.
12. Lynn Fisher
Let’s start with the amazing fact that Lynn redesigns her portfolio every single year. As someone who has their portfolio running on Gatsby 2 (which I believe is now on version 4), I admire the ability to change up one’s portfolio so frequently. Being able to go back and see the various designs, and also marvel at the creativity for the current one, Lynn sets a great example of what carving out your space on the internet means.
Neal’s “tiny website on the internet” isn’t exactly a portfolio, but I find it unique nonetheless. Clicking into the various projects that show interesting facts about the world is a lot of fun. The project called “Draw a Perfect Circle” was impossible for me — I tried it a bunch of times. Creating awesome projects, having your own space to showcase them, and making the internet a better place, that’s what this portfolio/website-building post is all about!
14. Omonigho K Jimmy
The cursor stands out as soon as I land on this portfolio. Add in the great font choice, the additions to the page as you scroll, and the simple colour scheme, and you get an awesome portfolio! I truly feel the connection to web dev, as he created a representation of him sitting at the desk with a few windows open—definitely my favourite part.
There are a bunch of reasons why you might want to create a portfolio. You might be creating one that helps you stand out during a job search or simply just wanting a tiny space on the web to showcase your skills, your personality, and your work.
Whatever it is, you’ve got an opportunity to get wildly creative. So don’t just settle for a markdown down page with your work experience listed out. Get creative like these of other web developer portfolios. Develop something that stands out from the crowd. Good luck out there, thanks for reading.
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
Static and dynamic content editing
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
How to customize formatting for each rich text
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.