Building a Kickass Portfolio
zen-of-programming.com
zen-of-programming.com
https://www.jacobyyoung.com/about
http://web.archive.org/web/20180501202224/https://shiba.comp...
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.
I shared it a while ago here, but it didn't get much traction.
I'm a fan of personal sites, too. Some of the ones that I like most, in no particular order:
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.
Thankyou.
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.
It's in need of some help so I've been looking around for inspiration. I'll be taking a look at everything posted. Some I've found previously I like:
http://blog.echen.me/ https://www.liyaoxiang.com/ http://www.randalolson.com/ https://jvns.ca/ http://www.nowozin.net/sebastian/ http://www.emilio.ferrara.name/ http://danielnee.com/ http://daynebatten.com/ https://thomaslarock.com/ http://treycausey.com/ http://mvjantzen.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!
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 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. :) )
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!
Can I ask what you used to make that pixelated avatar of yourself?
Both are ~1 KiB handcrafted html + css, excluding the web font. I like minimalism. Hope you like it too!
Great site, by the way. I've been looking for some personal site inspiration and you've got a great aggregation going on here.
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.
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.
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.
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.
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.
https://benjamintaylorportfolio.netlify.com/#/
Built with Vue.js and uses Wordpress REST API as a headless content management system.
https://benjamintaylorportfolio.netlify.com/#/post/lazy-load...
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.
Would love feedback on what works / doesn't work design-wise.
(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.)
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.
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.
Visit Start > Issues. What a novel way to do a blog type thing.
And wow. Even more simple than mine!
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
Self-written with React for component reuse. Hosted on my Hetzner Dedicated, Dockerized and Reverse proxied with Traefik.
I like the little GG that flashes for a moment.
Here's mine: https://droxey.com
[1] https://productforums.google.com/forum/#!topic/youtube/uykx9...
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)
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’m pretty proud of it, but I know things can always be improved. The portfolios shared in this thread though provide such inspiration!
Any feedback is appreciated!
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!
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.
Unfortunately I haven't updated it in a while, but I plan on doing that in a couple of weeks with recent projects.
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.
Me - https://dcpos.ch
Paul Shen - https://bypaulshen.com
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.
Here's some other ones that I've collected and found cool interesting.
Want something fun? Check out all the old designs with the Internet Archive! The 2010 design is a little... uh....
It's a modified jekyll theme so the design is not originally mine.
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’?
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).
Your link is well done. The blue and gray hearken to the Old Web.
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.
Tried to keep it simple
From the time when I had too much free time.
Would love to hear your thoughts.
And here's my blog page: https://blog.praveen.science/
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 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...
Also, I built few minimalist Jekyll themes.
Possibly a bit grandiose. Any feedback much appreciated.
I love ASCII text a lot :)
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.
They said it was immediately obvious I knew what I was doing. Nice to have that edge over people who have nothing to show.
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.
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.
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 ;)
I've just finished a MVP of a desktop app in Electron for creating TechFolios called TechFolio Designer:
http://techfolios.github.io/designer.html
I would be interested to know of similar sites/approaches.
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!)
If memory serves, there's 6! = 720 distinct graphs. Was a custom illustration created for each of those?
Either way, really nicely done IMHO.
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 :)
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.
> 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 :)
2. Draw the rest of the f* owl
Truth be told that makes this much more impressive...
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?
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.
Edit: lol even one of the other repliers is called ‘pixelbash’
> 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.
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.
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."
PS: In case if one wonders what I mean, check this Googe Analytics heatmap for my home page: https://imgur.com/a/swtufo9
You could reduce that list by three by showing another list with icons instead of the name (GitHub, LinkedIn, email).
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.
Minor bug: When viewing from the home page to About on Safari at 1080p, your profile picture is squished horizontally. Refreshing fixes it.
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. :(
Any other opinions?
> 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.
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.
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.
Portfolio looks great though!
"Now also available as a generic anything-you-want-it-to-be top-level domain" -- from the .tel site
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...)
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
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
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.
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
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.
This approach gives a lot better flexibility than Github's standard Jekyll.
It used to be in AngularJS, now it's vanilla HTML & CSS. Mostly typography with just a little bit of animation.
Anybody have links to example portfolios that solve this problem well?
Written from scratch. Just wanted to keep it simple and straightforward. It runs on a $5/month DO box.
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
I basically gave up on this, because somehow I never finished my private projects.
No CMS. Just a single pager with some JSON config.
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.
Just realized I need to update my bio to now say I'm working at Google instead of Microsoft