Hacker News new | past | comments | ask | show | jobs | submit login
Building a Kickass Portfolio (zen-of-programming.com)
648 points by aspit on Aug 2, 2018 | hide | past | favorite | 280 comments

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.









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



Please share your personal page links, too.

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

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


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

It's so extremely overdone that it becomes a category all of its own. Awesome.

well, thanks for giving me impostor syndrome

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

Wow! Reminds me of those flashy Flash sites ... when Flash was still used for innocent purposes...

That's awesome.


Here's my personal website: https://matall.in

I'm a fan of personal sites, too. Some of the ones that I like most, in no particular order:







Seen some of this before, but glad to see it again.

Your site is well done - I particularly like the timeline overview of your life. Everyone should do one of those. I've been obsessed with 1995 era Yahoo/DMOZ link directories lately - your site reminds me of a little directory to your life. I don't know if you track heart rate and stuff like that, but I was honestly glad it was more of a summary than an exhaustive data dump.


I like your site, think I'll steal the Changelog idea.

Just as a notice to everyone here, I am going to make a nice directory of these links at http://www.kickscondor.com/hrefhunt/. My previous "hunt" is there - but I'll make a new page there over the next day, archiving my old one.

Thank you for being generous with your links. I think there is a kind of resistance toward self-promotion of your personal pages these days. Or perhaps you feel like no one wants to see your page. Well, I do. I want to find pages that can't be found by Googling. One also has to look through every page to find the obscure pages that can be loved.

I would encourage all of you too to be curious about what is out there. There is still much to do on the web - it has just become very orderly in general.

See, this is great - I am not in the research work and am never exposed to blogs like this. Added you here: https://www.kickscondor.com/hrefhunt/

I actually quite like it. It is fast, to the point and funnels you through a way to contact you.

Thanks. I'm pleased you mentioned the speed. When I created the site it wasn't something I focused on but I have thought about more recently. I'll aim for any changes I make to be at worse time neutral.

My personal site, made with hand-coded HTML and CSS, generated with Hugo, and published with rsync: https://www.simongriffee.com/

I use a couple of JavaScript libraries for displaying portfolio image galleries and the masonry-style blog list pages under /notebook/, but am thinking of reverting the latter into a single-column chronological format instead.

May the independent web live long and prosper!


Full of great stuff. Your photography is sensational. I think the masonry style suits it very well here, but I understand wanting to shake things up.

Thank you!

The ability to change things is one of the nice things about personal websites.

I am enjoying exploring kickscondor.com


I'm mostly an artist, and I take delight in the aggressive unhipness of my site running on top of Wordpress. It's had the same front page since 2011.

Someday I should really change the menus in the blog/portfolio sections to work with touch browsers. I got comics to draw, though.

The depth of your site is mind-blowing. I will have to return and read through some of the longer comics. I love the style of Parallax.

Thanks! I'm glad to hear people outside my existing fans like how Parallax looks; it's been brewing out of view for a couple years now.

(The site's a repository for about seventeen years of my creative output. You, too, can have something that mind-blowingly complex if you just keep at it for a significant part of a lifetime. :) )

Really dig your style!

Thank you!

Dynamical systems engineer for games and simulations. Portfolio out of necessity, because I've never been good at explaining with words what I do.


Love this site! Watched a couple of the videos too, and you've got some great visualizations. I know you said that you're not great at explaining what you've done with words, but having a couple of lines that express to me (especially as a non-expert) what your contribution was for each video would serve you really well: i.e. the videos look cool, but I don't know what it was that you did that was hard.

Ok, yours will take some time to dig through. Added you here https://www.kickscondor.com/hrefhunt/

I like the technologies section, nice way of showing "no limitations"

I actually finished mine the other day: https://sterlingdemille.com

Boy, making a portfolio is excruciating. All these links make it look so easy, but when I started it was like pulling teeth. If anyone has feedback (harsh even), I'd love to hear it!

Big fan of your layout & color-scheme.

Can I ask what you used to make that pixelated avatar of yourself?

Professional: https://me.jrl.ninja/ Personal: https://jrl.ninja/

Both are ~1 KiB handcrafted html + css, excluding the web font. I like minimalism. Hope you like it too!

Thanks! :D

Great site, by the way. I've been looking for some personal site inspiration and you've got a great aggregation going on here.

I love it!

Nested iframes on that last one. Do you remember sites that would popup hundreds of popups - not virus/porn sites, but design sites that would orchestrate a variety of images in the popups? I recall iframes that would bring up more iframes as well. I wonder where we'd be if we'd followed these routes instead.

Had a chuckle at the "weakness" of that last one. Pretty sure "ugh, I just work too hard!" is everybody's go to weakness.

Can’t not mention acko.net ; maybe not a typical ‘portfolio’ but more or less fits the bill too

Great stuff. How did you find those?

My favourites:



Those are experiences. I'll update my website to be so awesome when I get some time for it (bit difficult while managing a team).

My own site, wanted to update it ever since. Not really an eye-catcher, I know. It uses Grav CMS, it's a great CMS (and file-based).


And the website of my agency (it's German)


Would love to hear some feedback, especially browser quirks.

I find links by clicking on different Twitter users' links or clicking around on "indieweb" blogs. But today has been amazing - having a chance to look at a variety of designs and blogs shared by their creators.

These designs you linked are more modern than the others that I've seen. It made me realize that there is a lot of nostaglia - either utter minimalism or vaporwave - floating around in personal pages right now - which I do enjoy. But these go in giant page directions. Another good example in this direction is: http://aaf.nyc. It's not a long page, but has a large feeling.

Never knew that so many developers go to such extremes w.r.t minimalism.

The site you've linked has great videos in the background and I like the animated logo, that really helps in making it interesting.

Personally, I still prefer those sites I've linked, because I know that they are harder to make than those minimalistic/no-css sites. I think it depends if it's a backend dev or a full stack web dev with a focus on UI/UX. In the latter case, it's a good way to show off what you're capable of. With those minimalistic designs (some of them also have bad UX) I don't really know if they're able to create modern, responsive and more complex websites.

Will throw mine in the mix: https://trevore.com/

Static site built with hugo, hosted on a 5$/month DigitalOcean droplet, using LetsEncrypt for TLS. Been considering some other hosting options that might be cheaper since I barely get any traffic, other than a couple times my posts went viral.

Huge respect to those that can consistently push out content. I have a big list of articles I want to write, but always lose motivation when it comes down to it. Maybe I'm a slow writer, it seems to take me an entire day to write something I'm proud to share.

Hey thanks! Added you to the directory https://www.kickscondor.com/hrefhunt/

Definitely look into something like S3 + CloudFront, or Netlify if you don't want to set any of that up yourself.

Yes, S3 + CloudFront. I host a bunch of domains, including few whose properties/IP/company was acquired. The monthly for the static hosting is less than a dollar a month.

Cloudflare > CloudFront + S3 (sometimes just S3 responding to Cloudflare's request). I could have done Route53 but I've lots of other domains managed by Cloudflare.

I have a single instance Jekyll setup that spits out a bunch of index.html files for all the domains, including my primary personal[1]. To automate further, the setup runs within a few NPM modules, and gulp does the compile and build. When I need to change/update something, I let it build and then deploy to the primary S3 Bucket. The deployment is done with the S3_website[2] Gem.

Been running this setup for over 3 years or so. I can strip away everything and just stay with the minimal Jekyll setup and manually upload the files.

1. https://brajeshwar.me

2. https://github.com/laurilehmijoki/s3_website

Here is mine!


Built with Vue.js and uses Wordpress REST API as a headless content management system.

Very well organized. And PDFs that go into detail on the design.

Thank you :) I worked hard on it!

Very nice! Like the lazy loading of images etc.

Thanks so much, I actually wrote about how I achieved that as my first blog post:


Instead of reaching for an external library I decided to go with my own solution and I like to think that it made me more appreciative of Vue.js in general.

I'm about 90% through a rework of my personal site, https://www.brentbaum.com/

Would love feedback on what works / doesn't work design-wise.

The lighting thing is pretty cute. But you have completely and totally broken scrolling.

(Or at least you have for OSX Safari 11.1.2. Two-finger scrolling on my trackpad does nothing, trying to drag the scrollbar does nothing, space and arrow keys do nothing. Clicking on the links does nothing either.)

Yes, the lightning is nice. I am on Firefox and also cannot scroll. I wonder what's down there.

Looks great. Setting a line-height of 2.7rem gave the paragraphs some more room to breathe, those thick underlines made it claustrophobic in there. They're also not really adding anything to the presentation other than to break up the monotony of bare text, with the colored onHover gives the appearance of a link but then you get disappointed when they don't function that way. I'd pick some other way to highlight the words than underlining.

The email address at the bottom has too slight a color difference from the 'contact me at' part. Either make it contrast more or just make them the same color. The email address also gives the appearance but not behavior of a link.

Decreasing font-size on the non-bolded text on Recent Work to 1.1rem gives a better contrast with the headings.

Lowering the line height for the description text of the TwinThread blurb to 2.2rem makes the structure of the information more cohesive.

Fantastic typography feedback, thanks.

The front page looks awesome. I'm using Firefox on OSX- for some reason I can't scroll down. Maybe it's just not implemented yet?

Awesome, thanks for the report. I had someone report that before and couldn't reproduce. Looks like I should have tested in base Firefox, not just Firefox Developer Edition :)

I also can't scroll at all in Chrome on Windows. If it helps, when I mouse over one of the underlined words like "developer" then the outside border goes orange and strangely enough I can scroll a bit.

Same thing happens in Chrome for OS X.

I'm using Firefox on windows with the same issue.

Yup - also Firefox user (Windows) and cannot scroll.

Chrome on Ubuntu does not work also.

I really love this use of shadow! It creates a fantastic appearance of depth. One thought: Since the shadow redraws itself based on cursor position, when you move the cursor off of the grey background container and back on in a different location, the shadow effect seems to skip. At first I thought the site was buggy/lagging. It might be worth it to extend the CSS/JS trigger to the entire viewable document, rather than just the grey box.

Good catch!

Not a big fan of the white border. That's just me though

The words in the main paragraph are underlined but not links to anything? Make them link to something.

I can't scroll properly but i'm sure you will fix that.

Emphasize what work you actually did at those brands you listed.

They're good dogs Brent

I recently built my personal site and this is the first time I'm sharing it with the world! https://matthewblode.com/

This is reminiscent of windows93.net - but I like that this is a personal zine. It's easy to get distracted by the games and apps included, as if they are the primary draw.

Visit Start > Issues. What a novel way to do a blog type thing.

Mine is crazy simple... just moved to a new server setup with nginx.


This works! Reminds me of http://domhofmann.com/


And wow. Even more simple than mine!

Nice, webpages without CSS are simply superior :)



Check me out: https://castrio.me/

I'm most proud of the hover outlines, which I spent way too long making. They're on npm as a React component if anyone else finds them cool: https://www.npmjs.com/package/dynamic-outlines

Really great yellows in there! Added you here https://www.kickscondor.com/hrefhunt/

These hover outlines look awesome! Definitely a fun little personal detail.

Here's mine: https://gerogerke.de/

Self-written with React for component reuse. Hosted on my Hetzner Dedicated, Dockerized and Reverse proxied with Traefik.

Code: https://github.com/Empty2k12/portfolio/

Added you here https://www.kickscondor.com/hrefhunt/

I like the little GG that flashes for a moment.

I built mine about 6 years ago, and it's starting to look a touch dated now, but I'm still pretty proud of it. It's helped me land my last two full-time jobs as well as a few freelance things here and there.


I made one with LEGOs! https://bryce.io/

As someone familiar with front-end technologies, I'm always surprised at how folks build such a thing. Wouldn't know where to start. Guessing it has something to do with css transforms to make boxes diagonals.

That's neat. They're individually drawn with divs.

Love it! Very cool concept.

As a programming instructor, I'm always encouraging my students to keep beautiful, up to date portfolios. I appreciate the numerous examples in this thread, and will be sure to pass along the inspiration to my students!

Here's mine: https://droxey.com

your patent is an example of what's wrong with the software patent industry. i don't mean to be rude, although you did feature it promo prominently as the first bit of information about you on your resume. i mean, does soundcloud or any of the multitude of video websites that have done this for years have to pay you license fees?

I have to agree; when a comment on the YouTube Google Forums[1] is reasonable prior art, maybe it's not really such a great or original invention.

[1] https://productforums.google.com/forum/#!topic/youtube/uykx9...

Cool portfolio! Wow that time-shifted comment patent is cool stuff, doesn't every social video platform used time-shifted comments or does your patent cover a specific nuanced scenario within this space, cause it seems many companies do video streaming chat like the way the patent described e.g. twitch, Facebook live, etc.

The unfolding zine is neat! Some of the other zine links inn these comments should take note. The little pages within a larger HTML page really stirs up the ideas in a "hey dawg I hear you like pages" kind of way.

Breaking the back button and bogus sw patent, not sure you will be too popular here.

My personal site:


The typing interaction was inspired from a site called Hacker Typer. I like how it invests the user in the sight by inviting them to interact immediately. (View on PC. It's non interactive on mobile)

Thanks for listing these. Reminds me I have to address my site now that I snatched the .com variant earlier when it expired on the original owner.




Static Site / blog made with Pelican and a custom theme, all open source.

It's hosted at my house on an old thinkpad 430 with a cracked LCD running SmartOS.

I pointed out my personal website earlier in the thread, but later recalled I’ve kept archives of every major version going back to ~2000. They sort of capture trends over time.







My first attempt at a professional portfolio: http://bradbain.com (or bradba.in)

I’m pretty proud of it, but I know things can always be improved. The portfolios shared in this thread though provide such inspiration!

Funny-- her site is very much not the same as mine, but there are several parts that certainly rhyme (shapes on the homepage, projects displayed in colorful wells, etc).

Any feedback is appreciated!


I was just talking to a friend yesterday about the mouse trail. This is a good innovation you have done. All of your projects look tight.

I recently learnt web-dev and made this:


it's not that good not even near those given in the links but hey, it's my website and I'd love some suggestions!

Ok, great! Responded here https://www.kickscondor.com/hrefhunt/

blog "Read more" is broken

Was just updating the site. Do try now.

After 5 years of not having a portfolio, put one up earlier this year! https://moeamaya.com/. Interestingly my best project leads have come from launching the site.

Very practical, but elegant feeling. A new appreciation for blue. I recall your cool backgrounds project. Looking forward to further essays. Thankyou!

I would appreciate any feedback: https://www.echevarria.io/. It's just basic HTML, CSS, and I think three small scripts for the whole thing.

I have bookmarked the pastels blog entry to revisit - I think this is a fun post. Your blue puts you with the other link here https://moeamaya.com/ which is good company.

One question: is there a reason you chose to go with left-right arrows on the photo page and scrolling on the code page?

You are doing good work. Continue.

Thanks! I went with left-right arrows because that's pretty much the standard for fine art photographers and I did scrolling on the code page because I suspect that developers would get frustrated with the lack of information density. I feel weird that the photos are the odd page out, but I struggled with finding an alternative when I made this.

Ok, that makes sense. I like that.

Nice site! I'm biased because I use my phone so much, but if you add in a viewport tag it'll look better on mobile. I just added one in the console and I think it still looks pretty good

Wow, thanks so much for pointing this out. I spent a day or two getting things mobile-responsive, but I couldn't figure out why certain mobile browsers didn't display the site as I intended. I added a little thank you in the README: https://github.com/iechevarria/iechevarria.github.io

Here's mine: http://payodpanda.com

Unfortunately I haven't updated it in a while, but I plan on doing that in a couple of weeks with recent projects.

This is a great expansion on the minimalist sites everyone is posting. Listed you here https://www.kickscondor.com/hrefhunt/

Thanks! That's a great list for inspiration.

My old (handcoded starting in 1999, so ancient tech) site www.lomont.org. It now looks like 1999, so needs some serious updating, which led me to making www.clomont.com, in the hopes someday I will merge them with newer tech to make it easier to post articles.

Now I'm leaning on using or making a static site generator, needs markdown supporting math via some LaTeX flavored plugin, and simple to edit. Maybe one day when I'm less busy I'll get around to merging, updating, and posting the gazillion articles/talks/progs I've done that have gone unposted.

Mine's https://www.jamestease.co.uk . I designed it about five years ago and can't be bothered to change it now :)

Two kinds of minimalism

Me - https://dcpos.ch

Paul Shen - https://bypaulshen.com

Ha! The man page inspired design made me really happy. Thanks for sharing.

I mostly work on interpreters and compilers.

Mine is minimal because I refuse to make it otherwise: https://bernsteinbear.com


edit: I tried to keep it minimal but informative. I recently rebuilt it using Gatsby.

Mine's at https://ckuhl.com/

Here's some other ones that I've collected and found cool interesting.




Just did a rework on mine and would love any feedback: https://jamievaughn.github.io

Been transitioning mine from bloglike to more of a personal site: https://kolemcrae.com

Should mention this is built on Ghost.org but is a 100% custom template. Used to use jeckyll with a Github page but with the microsoft takeover I decided to try something new.

Want something fun? Check out all the old designs with the Internet Archive! The 2010 design is a little... uh....


Here is mine - https://krtkush.com

It's a modified jekyll theme so the design is not originally mine.

Thankyou! Gave you an entry here https://www.kickscondor.com/hrefhunt/

My own site, intentionally brutalist: https://jonathan.hefner.pro/

heres mine i've gotten some good feedback on it, and it runs ultra fast:


UX is your specialty but you have no screen caps of your portfolio next to each project name.

If I want an overview of your work I need to click through each link, instead of simply scrolling through the page and then clicking on what I’m interested in. No offence, but that’s some poorly thought out UX right there.

What good is it that it ‘runs ultra fast’?

Thank you for the feedback! Do you have examples of screen caps you like? I had considered this but decided to take it out because of wanting to keep to the old school terminal aesthetic. Plus since I do a lot of programming, I figured linking to the site to see how it works might be more useful than simply a screen grab, since I'm not the one usually doing the design (which would make sense at that point).

User experience and performance go hand-in-hand. Users get frustrated if a site loads slowly or doesn't function. So I made sure to have a site that does those things (plus web performance is one of my specialties).

It is a strange coincidence that I was just on a poet's site today who goes by "caconrad". http://caconrad.blogspot.com/

Your link is well done. The blue and gray hearken to the Old Web.

My suggestion is to tone down the first red and blue backgrounds.

I don't know - I like the colors. They feel alive.

Built mine some days ago with a custom "portfolio generator" :


The animation on http://merkoba.com/ hurts my brain.

Every time I hear the phrase: https://youtu.be/evlrs5Bi_6E?t=1m25s


I like to think that if any future employers don’t enjoy my self-deprecating humor it probably won’t make a great fit anyway.

I used the site as an opportunity to roll my own static site generator for no reason. Bit of a whatever website, but it was a fun learning experience nonetheless.

I like that "Google" links to google.com, so there's no confusion!

Thanks for noticing! It’s the little things, ya know?

This is mine: http://dragthelake.com/

Tried to keep it simple

I like the small "highlights I’m proud of" section. It's a nice approach. To me it feels more, genuine, I guess? I always feel uncomfortable talking about what I'm good at. I really like how you frame accomplishments as something you are proud of without it coming off like a big marketing pitch.

The slight tilt. Brilliant.

I was definitely confused when I clicked. I thought my monitor wasn't level for a second.

Thanks :)

There ya go :)


From the time when I had too much free time.


Would love to hear your thoughts.

http://steveasleep.com still going strong!

A tad basic, but mine at https://www.jeremycantu.com tries to do the whole "multi-discipline" angle with that toggle in the center, which I thought might be a neat element for folks with varying creative pursuits.

Very clean. I like the general attitude. The mustard color is good. Such an ideal color does wonders. Going to have to follow your blog. Thanks!

Here's my website: https://praveen.science/

And here's my blog page: https://blog.praveen.science/

Ohno. Just a few weeks before finishing my design overhaul!


I'd encourage you to take a second look at the end of August, I'm very excited about the pending redesign and rewritten content.

I'm a big fan of your steam db and api work! thank you!!

Here's mine: https://thomasnyberg.com

I think I might win the prize for the laziest and least fancy site. I've never even bothered to give any info page of who I am...

Feedback appreciated!


I'm a fan of simplicity, speed and Jekyll. I have my own personal site at https://heiswayi.nrird.com

Also, I built few minimalist Jekyll themes.

Aye. Thanks for linking me. Was wondering why I had a spike in traffic.

Hey! Yes - well I found your blog to be gorgeous and I think it sets a standard for the Indieweb (which is generally very practical.) Which - I like that you don't sacrifice practicality for appearance. The layout of the metadata on your posts is sterling.

Here's mine: h12n.nz

Possibly a bit grandiose. Any feedback much appreciated.

That's a nice effect. Are there other pages?

Thanks. Just the one page at present.

Mine's super simple, but once I have more projects under my belt I'll be expanding it out:


Redid mine a few weeks ago (with a new domain that I've been pining after), thoughts?


How many blockchain projects have you done? Looking at the body of work you've shown, it all looks to be standard web projects - nothing at all wrong with those kind of projects, but when you put "web & blockchain solutions" at the top, it makes it feel like hype marketing.

I've helped out 4 ICOs with smart contract programming & web interfaces. I do not list them on my public portfolio, only present them to interested clients.

https://gir.me.uk/ - static site built with Metalsmith - full marks on PageSpeed :)


I love ASCII text a lot :)

personally, i like nik's and jacobyyoungs the most. straightforward and to the point. merkoba makes my eyes hurt and as impressive as joelcalifa's background is, i dont like that its written as if to be read by 8 year old children.

mines based off of windows GUI with my projects page being a faux terminal



I've been gathering some inspirations for a personal site. Here are a couple I liked. (Although now that I think about it, these were linked at the end of the article).





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.

The last three jobs I had at smaller companies definitely had someone at least look at my Github portfolio which is quite extensive. I know because the person who looked told me once they were my coworker.

They said it was immediately obvious I knew what I was doing. Nice to have that edge over people who have nothing to show.

The reverse of this, however, has impacted our hiring process in the past. We never really looked for things from someone's portfolio or personal website as a way to judge their skill level, but we have been much more critical on some prospects due to their personal site.

I won't personally judge harshly if it's not prominently displayed on linkedin, or easily searchable. But we've had several candidates that had links to their personal website on linkedin, or even in their resume, and they were ATROCIOUS. I just find it crazy that someone would advertise a personal website that was poorly written. If it's a personal project you don't work on much, then don't show it off on your professional resume.

But I agree with your initial point, we never really used portfolio sites to determine if they were worth hiring.

The only time I was ever asked about "portfolio" type stuff was when my resume was extremely short (1.5 years of not-super-interesting work). Landed a job that was way more interesting solely on the strength of some research-y stuff I'd done in school while contemplating going to grad school.

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

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

As someone who knows nothing about typography, I just wanted to let you know that I really like your choice of fonts and the logo you're using!

Yeah -- mine is more for speaking and blogging instead of looking for jobs. Though, I do get approached by companies all the time because of my portfolio. Definitely not necessary, but it can be really helpful as well.

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:


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


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

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/

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

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.

Nice work. I'm replying just to bookmark this and look into it further. Thanks.

Did you know you can add comments to a favorites list? Click on the comment's time stamp, e.g. '3 hours ago' and on the next page there will be a 'favorite' link right above the comment.

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/

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

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.

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/. Check out the source code https://github.com/voellig-ohne/timobecker

Sources for drawings: https://github.com/voellig-ohne/timobecker/tree/master/compo...

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

1. Be a frontend developer

2. Draw the rest of the f* owl

Seriously. What’s a backend developer to do?

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

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

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.

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

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

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?

Building a personal site is initially a design and time management exercise.

Set aside a few hours a night, and before getting into Vue.js, CSS, etc., jot down a list of pages, sketch out a layout, and gather inspiration for the visual style and any creative ideas you want to add.

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’

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

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

As pixelbash said. You have to keep looking at new inspiration, and your subconscious mind will ruminate on it to give you interesting new combinations & ideas.

Everyone cribs from each other. :D

Really - find what elements attract you and reshape them. I think the more pages you look at, the more your brain will get stirred up about it.

If the designer I share an office with is anything to go by a key part is spending a good chunk of your day looking at other peoples designs..

To comfort you these probably aren't the 1%, it's more likely the 0.1% or maybe the 1% of the 1% you see.

Thanks for sharing! Your projects are awesome.

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.

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

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.

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

Being a backend developer I am not quite good at making a good looking portfolio. My current site(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

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

It's the ordering! I would put Blog first, and change this to a two-row layout. The first row with internal links, the second row with icons of your social sites.

Thanks for your input. Will try it for sure.

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/ [2] https://news.ycombinator.com/item?id=14445587.


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

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.

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

I’ll throw mine in the ring: 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. :(

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?

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.

From my past life as a hiring manager: having a portfolio (or better yet a demo that you can show during your interview) helps junior hires a lot. It helps in 2 major ways:

1. I can see that the junior hire actually _did_ something worthwhile in addition to their mandatory coursework

2. It creates a topic for discussion that is: a). more comfortable for the candidate and b). more revealing about their work-related traits.

It's a win-win. For senior candidates I just look at the track record. If they have a relevant project on e.g. GitHub, I might take a look, but it's not going to sway anything in a major way unless it happens to be exactly the domain expertise we're looking for, which happened only once.

That's a small company though. A large company will not even look at your portfolio or GitHub unless you're a GitHub superstar of some sort, and maybe not even then. There are several well publicized stories when people who drive huge projects on GH failed to get an offer from FANGs of the world.

The best dev we hired though, had nothing on github and did not have a portfolio. He just wrote code three times faster than anybody I've ever seen and without any bugs.

Looking at all of these portfolios only serves to remind me that although I work in tech, I have very little in common with frontend devs in terms of what I think is good or interesting. Most of what has been posted as examples of 'these are great personal sites!' I find actively annoying.

I am not a stick in the mud. :) I just work in a different part of the field, and finding work has never been an issue. So do many others, and they're fine, too. I wouldn't worry about it.

I have it mostly for speaking and blogging purposes; however, I get a pretty decent stream of people reaching out to me over it which would be really cool if I were looking for a job! I think it also really helps candidates stand out.

A portfolio seems pretty useless to me if you have a decent CV.

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

Portfolio looks great though!


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

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.

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

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

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 and I think its a little easier to read -- just changed font to "sans-serif" increased line height and font size to 1.25rem.

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

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.

You can find mine at 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

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.

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.



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

My PS: 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.

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.

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.

You can setup Gitlab for hosting as well. I use Gitlab CI to build my Hugo site, then Gitlab also does the hosting.

This approach gives a lot better flexibility than Github's standard Jekyll.

Github pages is awesome, I would only do Jekyll if you want to host a blog though, otherwise its overkill.

Seems great if you are comfortable with Jekyll. If not, find one that you grok and go from there.

I’ll throw mine in the ring:


Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact