Building a Kickass Portfolio

Ali Spittel on August 02, 2018

According to GitHub, I have had a portfolio site since September 1st, 2016. And, according to Google Analytics, I got less than 300 views on the tw... [Read Full]
markdown guide

Thank you for helping me discover the magical wonderland that is
cc @ben


Best decision of my life. Just don't visit if you have bandwidth constraints!

It's just now that saw your comment.When I receive the message that I've consume 90% of my datas. -_-!


I've got my own portfolio here - I built it on Gatsby and didn't use any front-end frameworks other than some Sass setups I've used before.

I opted for something on the simpler side since I wanted to focus on the writing, which is a big part of my career focus. So I aimed for an accessible design and good typography, things like that. I did want to add some flair, so I used Gatsby for a few touches.

  • Having a "stream" of items on the homepage that reflect several important areas - recent articles and posts, other places I write, a few interesting images/quotes, and a quirky widget that randomly styles random quotes from an API
  • Being able to filter articles down in another page
  • A "Notes" page for small musings too short for real posts

I agree that a portfolio should be something custom, it's my own corner of the web so I should use it to show off my skills and focuses to some extend. I do try to make it reflect my own styles and priorities as a developer though, which is why I prioritized accessibility and durability over animations and complexity. That mostly comes down to personal preference though, and having your personality/brand come through in more than just the content.

Also I like how you included past versions of your portfolio here. That's one of the earlier lessons most devs should learn - you will redo your portfolio site many times, and you will have many different feelings on them. I've done it at least seven times or so in my life, and most of the memories aren't too good haha.


I really like your site! Super clean and fast. It also really emphasizes what you want it to, which is super important.

I use Gatsby for my blog, and I'm obsessed with it -- you can do so many cool things so easily!


I like how your articles are always practical and gives us something to learn. I made my portfolio the ol' style with no frameworks, just me seeing how can I make it look cool with plain HTML, CSS and a lil' bit of JavaScript.
I went scouring the internet looking for some inspiration and then ended up doing this kind of portfolio


The original version of this site was just html, css, js too, and it was totally fine! Just got sick of writing html haha.

I really like your portfolio!


Thank you! I kinda feel like using a framework will take out some of the "magic" of building something from scratch, although I wouldn't deny that they can be very useful and time saving.
Guess I'm used to like doing stuff with the essentials first, seeing as my first programming language ever was C.

Juan, like your portfolio, but your background is huge and takes a long time to load - nearly 13mb, and is a fairly simple graphic. You could reduce this to where it could easily be 1/1000th the size.

Your other 2 graphics are quite large for their size as well at ~200k, none of these really need to be much more than 10k or so for a reasonable fidelity.

Thanks mate! appreciate the feedback, I'm gonna see if I can make it smaller and easier to load.


Portfolios are my favorite, but because of that, I'm never happy with my own :P

I keep one for my online handle that uses @flexdinesh 's original template and now I have one for my "real" name that works more like a resume. But I think I'm on rewrite 3 now and I barely link to it anywhere, so no one has ever seen 1 and 2 other than myself.


Awesome work Ali! I actually wrote an article where I developed this site: and took some inspiration citing your original work here:

I love the simplicity and basic interactivity your website enables - keep up the great work!


Took a chance with my portfolio and have media queries that morph the entire site into a more native app feel with tab navigation. I might not do that for a client, but thought it would be a nice surprise to whoever tries to see if it passes the “responsive” test.


Recently created my portfolio / CV Website using GatsbyJS and I am amazed at how easy it is to create things with it!

I am still thinking about adding some more colour/interactivity to it, although I like the somewhat minimalistic approach...


Awesome post! Your portfolio site is really nice as well. After reading this, I feel inspired to create a portfolio. For awhile I've had a tech blog laying around, but now I'm thinking about adding a portfolio section to it, or maybe even starting a new domain/project all together so that I have a blank canvas to express my creativity! Hmm decisions, decisions...


I like the playful and fun nature of the sites. Nothing fancy for mine:
I realize menu link isn't working on mobile


Thanks for the mention. I built my site after getting inspired by your portfolio (at that time it was a bit different from how it is now).

This is my another favorite portfolio apart from yours. Minimal and right to the point.
Addy Osmani


Designing something for yourself is hard, especially if it's a portfolio. Been slowly working on mine for the last couple of weeks but I just keep tweaking 🙈

Tobias van Schneider has some great posts about launching your own portfolio.


Oooh thank you for writing this article! I kept getting held back by the unfortunate combination of self doubt, absurd perfectionism, poor visual design skills, small number of interesting work/projects -- but I'm finishing my landing & intro page this month! Your article and other portfolios you linked there are helpful & inspirational!


Which portfolio is the best in the entire web and why is it Ben's?

But seriously, great post. I saw the new portfolio back in October and thought it was pretty cute and the shapes are fun to play with.

What advice would you give to talk about projects that are private (confidential) without going to jail or something like that?


Great post! Here's my website, for kicks.
Static site, redesigned recently using Nuxt.js and hosted on github pages.

Any advice on drawing visitors beyond just making a good site? I feel like I have a lot of good content and I'd love to have more people reading it.


Now I see the bubbles and stuff!
I like the one page concept.

My website is here:

I used bootstrap for the tabs and a few other miscellaneous things, but I plan to change that in the future because I rarely use bootstrap any more (trying to develop my own CSS, and eventually, when I'm comfortable with it, JS frameworks).


I went through an exercise of relaunching my own portfolio a few years back with specific goals in mind, especially around speed, minimal resources and oddly the ability to make it printable. While I saw some uptake, perhaps not as much as I'd like or you've seen. You can find it at

While I'd been using LESS for a while, I'd recently moved to SASS, got to grips with flexbox and in my mind had a very clear layout which I was able to execute really well.

Any feedback would be appreciated :)


After chopping and changing my portfolio for years I'm finally happy with it. This is where I'm at:


here may be a hidden key factor: you did two prototypes before landing on one that really worked.

not that prototyping is the specific tool, but taking time to figure out what works, reviewing what isn't helping, thinking and trying things out, can be really useful


Hi Ali,
I really like you portfolio well. And here is my first portfolio:
And I know that I need to do more changes to it. Also I want to hear some suggestions from you. Thanks: )


Hi Ali, I've noticed a problem on your portfolio site - I wondered what your 404 page might look like so I went to /foo and it all goes a bit bonkers with circular redirects!


Great read! I've been meaning to redo my portfolio for like the past 8 years. Maybe this will be the kick in the pants I need actually make something?


Just thought you should know some of your project links are linked to the wrong project. I was viewing it on mobile.


I am in the thick of a nearly identical journey. Thank you for sharing your experience!


Dang, I gotta spend some time reading dev articles. So much good content in this post, thanks for this!


As a teen I always wanted one. Will never have time for it. Probably for the best.


Great article! I like how you added a list of portfolios you like.


Here's my Portfolio :3

I'm updating it soon with new UI


Was is an INCREDIBLE read, thank you so much for this! As someone whose trying to get her foot into the door of the web dev world, I appreciate that you laid all of this out so clearly. :)


That's and all those websites gave me ideas for my upcoming website (as my current one suck and the current portfolio wasn't really from me).


That was an awesome read! Thanks!

I too have built my own portfolio website from scratch. Mind taking a look at it?


This really is a kickass portfolio... Well done! :)


Thanks to your great post I also decided to rewrite and redesign my portfolio website:


This is my portfolio,
Any suggestions or advice would be helpful!
Thanks in advance


Nowadays I work on my portfolio site too - thanks for the insight. Anyway, I think I'll use squarespace though ( I'm not a web dev, so I don't need to showcase my skill on my website )...

code of conduct - report abuse