
Building a Kickass Portfolio - aspit
https://zen-of-programming.com/kickass-portfolio
======
kickscondor
I'm always looking for personal sites that are still out there. I love some of
the ones she listed. Here are some random ones I found yesterday.

[http://merkoba.com/](http://merkoba.com/)

[http://angusnicneven.com/](http://angusnicneven.com/)

[http://danieltemkin.com/](http://danieltemkin.com/)

[http://joelcalifa.com/](http://joelcalifa.com/)

[https://jacky.wtf/](https://jacky.wtf/)

[https://www.jacobyyoung.com/about](https://www.jacobyyoung.com/about)

[http://nik.works/](http://nik.works/)

[http://web.archive.org/web/20180501202224/https://shiba.comp...](http://web.archive.org/web/20180501202224/https://shiba.computer/)

Here are two I found several days ago, but that I am still finding amusing
today.

[http://coolguy.website/](http://coolguy.website/)

[http://leonbambrick.com/](http://leonbambrick.com/)

Please share your personal page links, too.

Even if this list becomes long, that's okay. I will look at it.

~~~
Zyst
This guy from Japan still has my favorite portfolio so far:

[https://magical-girl.site/](https://magical-girl.site/)

I shared it a while ago here, but it didn't get much traction.

~~~
spiritcat
well, thanks for giving me impostor syndrome

~~~
finaliteration
And here I can’t even get two goddamn <div>s to line up properly.

------
andrew_wc_brown
I always ask people if they looked at website, my code or anything before
hiring me and the overwhelming answer is no. I've always had to get things in
front of people just get them to see the extent of work. People think you need
a portfolio to get hired you don't. I've built over 30 web-apps in the last
decade, and I've never bothered to screen cap them.

People only care what you can immediately do for them and if its not 1-to-1
with what they want they don't care.

Its sad but its true.

~~~
alexpetralia
Bring a color-print out of your projects. This worked wonders for me when I
was applying to jobs.

For reference, my website is here:
[https://www.alexpetralia.com](https://www.alexpetralia.com). I printed out
the first page, then could talk about each project quite tangibly with the
print-out in hand.

You still need a portfolio, you just also have to SHOW it. It is your job as
an applicant, not theirs to research every candidate that comes by.

~~~
ace_of_spades
Very nice portfolio, thank you for sharing!

I do have a somewhat unrelated comment, though. Looking through some of the
examples, I have found an analysis of charity „effectiveness“ where
effectiveness is defined very simplistically as the amount of money directed
to the cause. I just want to highlight that this kind of measure does not tell
you much about the real life effectiveness of charities in terms of how much
GOOD they actually do because the effectiveness of causes/interventions
themselves vary wildly per charity. For example, there is an organization
called playpumps international which has likely worsened the life of villagers
where they sponsored complicated water pumps that required kids to play on
them to produce water compared to simple water pumps that looked less fun but
could be used without this effort. Compare this to the Against Malaria
Foundation which has consistently shown to be able to save lifes by
costeffectively distributing treated bed nets in rural areas of Africa.

For donation recommendations have a look at www.givewell.org or for more
general information about the topic, check out www.effectivealtruism.com

If you are totally awesome you could also consider to update your project with
references to these websites and if you should use this project in a future
pitch shine with great evidence and expertise on the topic ;)

------
philipmjohnson
I teach software engineering to about 120 undergraduates a year, and require
them to build a professional portfolio during the first week of class. I used
to have them use WordPress, but the results were very uneven. To enable them
to focus on content until their skills were sufficient to create a non-
embarrassing custom design, I created the open source project TechFolios:

[http://techfolios.github.io/](http://techfolios.github.io/)

I've just finished a MVP of a desktop app in Electron for creating TechFolios
called TechFolio Designer:

[http://techfolios.github.io/designer.html](http://techfolios.github.io/designer.html)

I would be interested to know of similar sites/approaches.

~~~
spyhi
Oh hey Dr. Johnson, fancy seeing you here!

Here is an example of TechFolios in the wild [1] which I built while I was in
his class. [https://spyhi.github.io/](https://spyhi.github.io/)

(I’ve let it fall a bit out of date since the class, but this thread is good
inspiration!)

~~~
rainonmoon
Hey, this is pretty nice! The grey in the nav bar is a little severe for my
taste but I really appreciate that it loads fast even on my mediocre
connection. Seems like a neat tool.

------
mendelk
Pretty cool concept on Timo Becker's site[0] (linked in TFA), and I'm trying
to figure out how it's accomplished.

If memory serves, there's 6! = 720 distinct graphs. Was a custom illustration
created for each of those?

Either way, really nicely done IMHO.

[0] [https://timobecker.com/](https://timobecker.com/)

~~~
gumoro
I was wondering the same, but I thought the number of illustrations would be
7!/2 = 2520, that is, the number of permutations for 7 different elements,
divided by 2 because symmetrical sequences generate the same drawing.

Is it incorrect? How do you get "6!" ?

720 custom doodles seems doable, 2520 seems a bit much, so I suspect my
reasoning for 7!/2 is wrong :)

Edit : oh, I see how for all closed paths all 7 permutations are the same so
we can divide by 7 _for closed paths_ , but there are still the open paths...
hmmm (still pondering)

Edit 2 : aaaah, got it, I did not notice he was always closing the path
himself... tss that's cheating :)

~~~
Lanzaa
Yep, in the code there are 360 unique drawing references.

360 = 7!/(2*7)

7! different ways to choose a closed path on the seven nodes. However, it
doesn't matter which node you start on, so divide by 7. It also doesn't matter
which direction they are chosen in, so divide by 2.

~~~
mendelk
I believe you're right! Now that I've publicly displayed my ignorance, I
discovered this message in the console:

> Curios how its done? We are using paper.js and gatsby.js. Some behind the
> scenes:
> [http://volligohne.de/projekte/timobecker/](http://volligohne.de/projekte/timobecker/).
> Check out the source code [https://github.com/voellig-
> ohne/timobecker](https://github.com/voellig-ohne/timobecker)

Sources for drawings: [https://github.com/voellig-
ohne/timobecker/tree/master/compo...](https://github.com/voellig-
ohne/timobecker/tree/master/components/logo/paintingsSingle)

I can't say that I'm any less impressed that it's "only" 360 drawings :)

------
pletnes
1\. Be a frontend developer

2\. Draw the rest of the f __* owl

~~~
pmiller2
Seriously. What’s a backend developer to do?

~~~
aspit
Most of my career has actually been on the backend! Just keep the site simple!

~~~
vxNsr
Not to diminish, but by most of your career you mean 2 years, right? Because
you say you graduated from college with a BA in 2016.

Truth be told that makes this much more impressive...

~~~
aspit
three -- I was working full time as a software engineer for the year before
that. I also had two internships before that which I don't list.

------
firefoxd
I totally ripped off google[1] . I'm working on a facebook, and YouTube one,
because why not.

[1]: [http://www.ibrahimdiallo.com](http://www.ibrahimdiallo.com)

------
J-dawg
Anyone else find it depressing looking at all these awesome portfolio sites?

I’m a halfway-competent frontend developer who can build most things when I’m
given a design, but I can’t imagine ever coming up with a cool quirky idea
like this by myself. Where do you even begin?

~~~
abledon
Find a website design you like. Find a comic / movie / art piece you like .
Smash the two color scheme / designs aesthetics together . Most creativity is
smashing together previous stimuli into new things. Creative people can just
do it a lot more easily and unconsciously like a muscle reflex

Edit: lol even one of the other repliers is called ‘pixelbash’

~~~
J-dawg
Thanks, I appreciate the idea! I think part of the problem is believing I can
do it, I’m not sure how to overcome that

~~~
Jarwain
I read your comment, wanted to reply, didn't know what to say. I moved on,
ended up reading a speech by Neil Gaiman[1], with a quote that reminded me of
your plight.

> Someone asked me recently how to do something she thought was going to be
> difficult, in this case recording an audio book, and I suggested she pretend
> that she was someone who could do it. Not pretend to do it, but pretend she
> was someone who could. She put up a notice to this effect on the studio
> wall, and she said it helped.

[1] [https://www.uarts.edu/neil-gaiman-keynote-
address-2012](https://www.uarts.edu/neil-gaiman-keynote-address-2012)

------
fogleman
Some of my work:
[https://www.michaelfogleman.com/](https://www.michaelfogleman.com/)

~~~
kotrunga
Thanks for sharing! Your projects are awesome.

------
ghostbrainalpha
I love the general idea of not just saying what you should do, but also
showing the first two iterations of the site and talking about what didn't
work.

------
dudul
That's funny. When reading the title I was expecting a post giving tips to
build good _content_ for a portfolio (e.g. what kinds of project should be
highlighted more than others, how to balance different skills, etc), but it
exclusively focuses on styling/designing the website. Nobody else in the
comments seems surprise so it's probably me :)

~~~
Sytten
Totally agree with you, my portfolio is my github. I don't need fancy graphics
to show I am a good engineer, just look at the code I wrote.

------
gbear605
Really cool article!

Ironically, the portfolio site appears to have a console error. Whenever the
background is clicked on (to create a shape), it logs "> p5.js says: color()
was expecting Number for parameter #0 (zero-based index), received p5.Color
instead."

------
pknerd
Being a backend developer I am not quite good at making a good looking
portfolio. My current site([http://adnansiddiqi.me](http://adnansiddiqi.me))
home page is the inspiration I took from some other site. All links are
clicked by visitors but the blog one. Although my blog gives me more
traffic(and work) than the actual home site. Will seek her advice for sure.

PS: In case if one wonders what I mean, check this Googe Analytics heatmap for
my home page: [https://imgur.com/a/swtufo9](https://imgur.com/a/swtufo9)

~~~
r3bl
Too many links man, too many links. And a weird location of the blog link. I
would usually expect it to be the third link (home -> about -> blog -> contact
-> everything else), not sixth.

You could reduce that list by three by showing another list with icons instead
of the name (GitHub, LinkedIn, email).

------
deepaksurti
Michael Fogleman has a kickass representation of his work [1] with a good
discussion on HN [2]

I think what his portfolio shows is the importance of doing well scoped
projects on the side and finishing them, which includes a succint
representation on his portfolio.

Very inspiring, thanks for sharing Michael.

[1] [https://www.michaelfogleman.com/](https://www.michaelfogleman.com/) [2]
[https://news.ycombinator.com/item?id=14445587](https://news.ycombinator.com/item?id=14445587).

------
rozgo
[https://rozgo.github.io/](https://rozgo.github.io/)

I try. Dynamical systems engineer is difficult to describe with text.

------
servercobra
That's a nice looking site!

Minor bug: When viewing from the home page to About on Safari at 1080p, your
profile picture is squished horizontally. Refreshing fixes it.

~~~
aspit
Thanks! I (at the time I wrote it) didn't focus on making it Safari
compatible, but I really should go back to that!

------
wicker
I’ll throw mine in the ring: [http://jennerhanni.net](http://jennerhanni.net)

I started out on Jekyll on Github Pages because I needed a place to put photos
and I don’t use Facebook, Flickr, Google Plus, etc. It’s super simple, serving
the photos on Smugmug for a yearly fee, and it works just fine for friends and
family when I send a direct link. It feels manageable in a way that social
media (for me) often doesn’t.

I’m moving from hardware to software and it’s been a struggle to organize my
resume and portfolio. I’m pleased with how it looks now with the sorting by
category.

And, of course, I had to go and get a writing hobby where nobody wants you to
post anything online because they want first publishing rights. So I have a
page where I guess I’ll just list things I’ve exhibited or published when I
really want to post the poems or articles themselves. It’s the writing version
of “but the client insists this remain closed source” when I just want to
share and geek out about everything I make. :(

------
kelvin0
I'm an (veteran?) Software Dev with close to 20 years experience. I've never
had a portfolio, I always thought a resumé and a list of successfully
completed projects was enough. HR usually only looks at resumé, freelance
customers usually couldn't care less of it seems. Only devs would care about
another devs portfolio (in my opinion).

Any other opinions?

~~~
nfriedly
I don't think it's a requirement, but I'm pretty sure mine's helped me get
hired, both for freelance and full-time gigs. I've definitely had interviews
where it seemed like they were already sold on me before the interview even
started.

> Only devs would care about another devs portfolio (in my opinion).

It's often devs who perform some of the interviews ;)

Also, my portfolio has quite a bit more content then you'd ever want to put in
a resume. I don't feel like there's any need to limit it to 1-2 pages, so it
has 90+ projects with pictures and 1-3 paragraphs of text describing each one.
I think that has to have some impact, even if only on a subliminal level.

------
petepete
I thought .tel domains were restricted to the publishing of contact
information rather than websites.

Portfolio looks great though!

~~~
aspit
Thanks!

"Now also available as a generic anything-you-want-it-to-be top-level domain"
\-- from the .tel site

~~~
petepete
Ah thanks for that. I guess it makes sense for them to open it up, it never
really took off as a 'directory' , which is a slight shame.

------
kayman
As someone who has been on both sides of the coin. My take is: Don't make your
site for anyone and everyone. Keep a target audience in mind. Most of the
time, the person that hires you is usually the target audience.

Don't try to be too cute. For example, I have seen sites/resumes where the
whole thing looks like HTML tags. My first impression is "cute" but it makes
it hard to read as you try to gather real information.

Most of the time when someone is looking at your site, they are asking
themselves: \- Who is is this person?

\- What do they do?

\- How much will it cost me. (Does it look expensive, cheap or reasonable what
tier do they fall into. ex: Dominos pizza or Gourmet Pizza)

\- Have they done any projects that are similar to what I'm looking to get
done.

\- Are they competent

\- Do they look like someone I enjoy working with. (energy, attitude,
views...)

------
KennyCason
This makes me wish I took more screenshots of my old websites. My personal
sites have had some very fun evolutions, including some outrageous
styles/themes. May have to checkout the Wayback Machine. I’ve migrated from
Wordpress, to rails, to Hakyll, and finally to my own static site generator in
Kotlin, Kakyll. :)

My most recent change which significantly improved traffic was making it
mobile friendly. Im also no in the process of making blog content fit to
percentages of the page instead of absolute pixel size.

My one issue is that I’m always a bit concerned that my first page is a wall
of blog post titles... not the most pretty. feedback welcome:
[http://kennycason.com](http://kennycason.com)

~~~
aspit
I like it -- I would make the font a little bit bigger so it's easier to read.
I just did a few tweaks on it
[https://imgur.com/a/OfFruwF](https://imgur.com/a/OfFruwF) and I think its a
little easier to read -- just changed font to "sans-serif" increased line
height and font size to 1.25rem.

~~~
KennyCason
Thanks a lot, and double thanks for the specific feedback! Will incorporate.
:)

------
nixpulvis
I'm thinking about moving my site off GitHub pages to allow for some more
interesting kinds of features (with a DB), though in general I strongly
believe that sites like a personal blog or portfolio should be as lightweight
as possible.

------
fvcproductions
You can find mine at
[https://www.fvcproductions.com](https://www.fvcproductions.com).

It has scores of 100 on Lighthouse for everything except performance (98).

I still need to get rid of pagination on mine but based on what I've seen so
far, I would be interested to see what percentage of these websites are highly
performant/mobile-friendly.

I have a Raindrop.io collection of all the personal websites I think are
amazing:
[https://raindrop.io/collection/1553680](https://raindrop.io/collection/1553680)

------
Kagerjay
[http://vincentmtang.com](http://vincentmtang.com) is mine

My site sucks though, I haven't had time to update it unfortunately. I still
have about 50-100 blog posts I have on backlog I want to write about.

My train of thought is writing (or making videos) is more important since I
want to capture things that happen in my life, and my adventures of screw ups
and learning experiences. You can always make your portfolio later.

------
asimpletune
I think the most important thing is to focus on original design, and to treat
said design as solving a problem defined by constraints.

While most of my site has the feature flags disabled (still working on
content), I’m really happy with the design! It was really hard and it took a
lot of work, but in the end I think it turned out very original and
authentically me.

[https://asimpletune.github.io](https://asimpletune.github.io)

------
terkel
[https://terkel.com](https://terkel.com)

My old website (2016) is super outdated and lack real content, but it's
creative and works.

The source code:
[https://github.com/terkelg/terkel.com-2016](https://github.com/terkelg/terkel.com-2016)

------
pypanta
My PS: [https://pypanta.github.io/](https://pypanta.github.io/)

I built it using CSS grid. It's not yet all finished, but now, I have more
experience with CSS grid ;), so maybe I need to rewrite some parts again. And
also, now CSS grid have a better support across browsers.

------
throwawayaway12
I am curious if anyone has advice/tips for getting a simple portfolio up and
running. I am a physics phd student who has worked on a few side projects that
I would like to showcase. I am looking into Jekyll and hosting it on github,
but I am not sure if this is ideal for a simple static site.

~~~
edhu2017
Depends on how simple you want to get. If literally displaying text once in a
while, you don't even need jekyll. If you are a blog writer, want some sort of
templating / reusable snippets, or want cool themes then jekyll is good.

------
kermittd
I’ll throw mine in the ring:

[http://kermittdavis.com](http://kermittdavis.com)

------
interactivecode
[https://www.stefkors.com](https://www.stefkors.com)

------
rudolfwinestock
Here's my site:
[http://www.winestockwebdesign.com/](http://www.winestockwebdesign.com/)

It used to be in AngularJS, now it's vanilla HTML & CSS. Mostly typography
with just a little bit of animation.

~~~
sieabahlpark
Going to be honest, it doesn't look great and I don't think it shows off any
designer skills you may have.

------
sxp62000
I'm a designer 70% of the time, but I also do a lot of front-end, and iOS
development work. Don't know how to show a combination of design and dev-only
projects without confusing clients.

Anybody have links to example portfolios that solve this problem well?

~~~
aspit
You could do two tabs, I have the tab for speaking and the tab for projects --
you could do a design tab and a code tab!

------
sizzle
I need a crash course in personal branding and selling myself, any good
resources? Thanks!

------
davidsawyer
I'll toss mine out there as well: [https://www.david-
sawyer.com](https://www.david-sawyer.com)

Written from scratch. Just wanted to keep it simple and straightforward. It
runs on a $5/month DO box.

------
_jsdw
Here's me:

[https://jsdw.me](https://jsdw.me)

I am proud to have maybe the slowest css animation ever used so that, if you
wait several hours, you'll see the clouds move across the screen :D

------
k__
Pretty cool!

I basically gave up on this, because somehow I never finished my private
projects.

------
ogou
Frontend dev, content marketing in the API space, and multimedia art

[https://lucidbeaming.net/](https://lucidbeaming.net/)

No CMS. Just a single pager with some JSON config.

------
Hasz
I use my site mostly as a personal log, with an emphasis on simplicity.
Excluding pics, almost everything is <100KB

[https://ethanmye.rs](https://ethanmye.rs)

------
ohmatt
Just a heads up, your Simon Says project on your personal page doesn't seem to
work properly (Chrome on Windows). Every time I click start, and then try to
follow it, it just resets.

~~~
aspit
Ah weird -- it's working for me. It was definitely an hour and a half long
"I'm using a queue data structure in real life" experiment. Thanks for the
heads up!

------
whatever_dude
I'm someone who focuses on UI and loves animated work, and... I can't stand
portfolios that try to be _cute_. Some of the example portfolios on the linked
URL are examples of things I don't have patience for, and that I really think
are objectively not good.

If I'm judging someone's work, I want to see that someone's work, and nothing
else. Having an esoteric interface doesn't help.

Most people can create something profoundly artistic and nearly impenetrable
when they're doing it for themselves. What you do when you have _someone
else's_ goals in mind is what counts.

To me, trying too hard and creating something _too_ artistic normally means
the person doesn't have a lot of experience.

------
rwieruch
My personal site where it is more about blogging than a personal portfolio:
[https://www.robinwieruch.de](https://www.robinwieruch.de) :)

------
tkrupicka
Mine is more or less a flexible CV which expands to give more details as
necessary: [http://tylerkrupicka.com](http://tylerkrupicka.com)

~~~
Sytten
Computer Eng. student here too! Nice portfolio :) Just to let know you have a
typo in the intro: "engieering".

------
misterxi
I have a very minimal site where I post some stuff now and then. Feedback
welcome :)

[https://sivasubramanyam.me/](https://sivasubramanyam.me/)

------
pascoej
Mine is very simplistic, but some of the pages load slow because I haven’t
optimized the images.

[http://pascoe.pw](http://pascoe.pw)

------
sajattack
I'd be grateful if anyone had any feedback on my portfolio
[https://paulsajna.com](https://paulsajna.com)

------
TK85
Would love some feedback too:
[http://portfolio.zehfernando.com/](http://portfolio.zehfernando.com/)

------
ZainRiz
I've got a pretty minimalist one: www.zainrizvi.io

Just realized I need to update my bio to now say I'm working at Google instead
of Microsoft

------
balls187
Are portfolio sites specific to designers, and/or what used to be known as Web
Devs?

~~~
aspit
Career-wise I'm a mostly backend software engineer whose done some data
science-y stuff. Just think its fun to build sites like this, and I do a lot
of speaking/blogging now, so its good for that!

------
HugoDaniel
ah! [https://hugodaniel.pt](https://hugodaniel.pt) :D

------
mkoryak
feedback please:

[http://dogself.com](http://dogself.com)

------
snipesq
Just started

------
yathern
Minor point - title needs s/porfolio/portfolio/

~~~
dang
Fixed. Thanks!

------
cheez
That's a great portfolio.

