DEV Community

Cover image for Building a Kickass Portfolio

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...
Collapse
 
the_doctor profile image
Vaibhav

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

Collapse
 
aspittel profile image
Ali Spittel

It's incredible! So memorable!

Collapse
 
ben profile image
Ben Halpern

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

Thread Thread
 
ekimkael profile image
Ekim Kael • Edited

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

Collapse
 
maxwell_dev profile image
Max Antonucci

I've got my own portfolio here - maxwellantonucci.com/. 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.

Collapse
 
aspittel profile image
Ali Spittel

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!

Collapse
 
juanfrank77 profile image
Juan F Gonzalez

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

Collapse
 
aspittel profile image
Ali Spittel

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!

Collapse
 
juanfrank77 profile image
Juan F Gonzalez

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.

Thread Thread
 
brandall10 profile image
Beau Randall • Edited

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.

Thread Thread
 
juanfrank77 profile image
Juan F Gonzalez

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

Collapse
 
aalises profile image
Albert Alises

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

albertalises.me/

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

Collapse
 
danku profile image
Daniel McMahon

Awesome work Ali! I actually wrote an article where I developed this site: daniel40392.github.io/react-portfo... and took some inspiration citing your original work here: dev.to/daniel40392/building-a-port...

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

Collapse
 
marcaaron profile image
marcaaron

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.

marc-aaron.com

Collapse
 
robustdj profile image
Derrick Camerino

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

Collapse
 
scottyzen profile image
Scott Kennedy

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

Collapse
 
itsasine profile image
ItsASine (Kayla)

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.

Collapse
 
cchana9 profile image
Charanjit Chana

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

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 :)

Collapse
 
rattanakchea profile image
Rattanak Chea

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

Collapse
 
flexdinesh profile image
Dinesh Pandiyan

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

Collapse
 
renannobile profile image
Renan Lourençoni Nobile

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?

Collapse
 
midblue profile image
Jasper Stephenson

Great post! Here's my website, for kicks. jasperstephenson.com
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.

Collapse
 
rolandixor profile image
Roland Taylor

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

My website is here: rolandixor.pro

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

Collapse
 
link2twenty profile image
Andrew Bone • Edited

Hi Ali, I have a portfolio site but I'm not sure if it's a bit boring link2twenty.github.io/ 🙂

I also have a post about it here

Collapse
 
dandevri profile image
Danny de Vries

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.
vanschneider.com/category/portfoli...

Collapse
 
ekafyi profile image
Eka

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!

Collapse
 
tamouse profile image
Tamara Temple • Edited

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

Collapse
 
wtmech profile image
Billy

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

Collapse
 
c0derr0r profile image
Irkan Hadi

Lol, Ben's site gave me Hi5 flashbacks.

Collapse
 
moopet profile image
Ben Sinclair

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!

Collapse
 
pavankumardasireddy profile image
Pavan Kumar Dasireddy

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

Collapse
 
baedyl profile image
Baedyl • Edited

Hello guys! Is this feed still active? I finally built a first version of my portfolio using React, and I would love some feedback!
Thanks!

Collapse
 
scrabill profile image
Shannon Crabill

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?

Collapse
 
rahilka profile image
Rahilka Simonova

These are some great advices! Thanks a lot for sharing! Recently I built my portfolio, rahilkasimonova.com, but I would definitely improve it with your advices. Cheers!

Collapse
 
berkmann18 profile image
Maximilian Berkmann

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

Collapse
 
ash1eyish profile image
Ashley Maria

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

Collapse
 
iameddieyayaya profile image
Eddie Gomez

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

Collapse
 
lauriy profile image
Lauri Elias

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

Collapse
 
itsjzt profile image
Saurabh Sharma
Collapse
 
geeksamu profile image
Ahmed Abdelsalam

Here's my Portfolio :3

I'm updating it soon with new UI

wb.gy

Collapse
 
sansseryph profile image
Kyla

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

Collapse
 
mokkapps profile image
Michael Hoffmann

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

mokkapps.de

Collapse
 
lucaszapico profile image
LucasZapico

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

Collapse
 
bhupesh profile image
Bhupesh Varshney 👾

I may need an review on this
bhupeshv.me

Collapse
 
93alan profile image
Alan Montgomery

Here's mine ; alanmontgomery.co.uk

Collapse
 
inductor profile image
Kohei Ota

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

Collapse
 
adithyabhat17 profile image
Adithya NR

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