{"id":2955,"date":"2019-09-17T10:38:03","date_gmt":"2019-09-17T16:38:03","guid":{"rendered":"https:\/\/alliwalk.com\/blog\/?p=2955"},"modified":"2020-06-05T17:31:02","modified_gmt":"2020-06-05T23:31:02","slug":"portfolio-resources","status":"publish","type":"post","link":"https:\/\/alliwalk.com\/blog\/2019\/09\/portfolio-resources\/","title":{"rendered":"Portfolio Resources"},"content":{"rendered":"<h2>Yet another portfolio post!<\/h2>\n<p>Rather than go on about my own issues, I wanted to share a few resources. Before I begin, I\u2019m going to make a little rant in case you\u2019re feeling overwhelmed, like I am.<\/p>\n<p>One of the sites emphasizes the importance the design a portfolio has on your job prospects. I feel this importance is overblown because the the design or tool seems to have such a big impact on how the portfolio is perceived. I can&#8217;t emphasize enough how\u00a0many\u00a0people use <strong>paid<\/strong> templates, plus the cost of a web domain. And I would be lying if I said it didn&#8217;t bother me that choosing the wrong CMS template is the difference between gainful employment vs not.<\/p>\n<p>The fact that\u00a0the portfolio\u00a0makes a difference at all seems like the difference between showing up in a limo, BMW, Toyota, or SmartCar. I guess it really is like dating, which I admittedly know absolutely nothing about.<\/p>\n<p>At the start of this review, my feeling is that people just want to be entertained. My thoughts changed somewhat, which you can read at the end.<\/p>\n<p>\/rant<\/p>\n<p>&nbsp;<\/p>\n<p>Ok, now that I&#8217;m off my soapbox, here is my list. It&#8217;s organized like this:<\/p>\n<ul>\n<li>Sites &#8211; Guides, essays, and portfolio collections<\/li>\n<li>Tools &#8211; What people use to create their portfolio<\/li>\n<li>People &#8211; A small handful of portfolios<\/li>\n<\/ul>\n<hr \/>\n<h2>1. Sites<\/h2>\n<h3>A collection of essays, slides, and guides.<\/h3>\n<p><img loading=\"lazy\" class=\"wp-image-2969 size-large\" src=\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2019\/09\/FireShot-Capture-090-The-case-study-factory-essays.uxdesign.cc-1024x542.png\" alt=\"\" width=\"840\" height=\"445\" \/><\/p>\n<p>Article page: The Case Study Factory<a href=\"https:\/\/essays.uxdesign.cc\/case-study-factory\/\">The Case Study Factory<\/a>\u00a0is about how similar so many UX portfolios seemingly look alike. The authors write:<\/p>\n<blockquote><p>&#8220;How the formulaic approach to UX case studies is numbing our critical thinking as designers, and how to bring a unique point of view to our work.&#8221;<\/p><\/blockquote>\n<p>Provides some pretty good tips at the end, however I recommend you read the whole article for context. Also because it&#8217;s a good article.<\/p>\n<ol>\n<li class=\"paragraph-3\" data-anchor-link-pos-phone_portrait=\"empty\"><span data-style-phone_portrait=\"letter-spacing: -0.6px; color: #000000;\" data-anchor-link-pos-phone_portrait=\"empty\">Define your area of focus<\/span><\/li>\n<li class=\"paragraph-3\" data-anchor-link-pos-phone_portrait=\"empty\"><span data-style-phone_portrait=\"letter-spacing: -0.6px; color: #000000;\" data-anchor-link-pos-phone_portrait=\"empty\">Align the story with the medium<\/span><\/li>\n<li class=\"paragraph-3\" data-anchor-link-pos-phone_portrait=\"empty\"><span data-style-phone_portrait=\"letter-spacing: -0.6px; color: #000000;\" data-anchor-link-pos-phone_portrait=\"empty\">Set up the context of the project<\/span><\/li>\n<li class=\"paragraph-3\" data-anchor-link-pos-phone_portrait=\"empty\"><span data-style-phone_portrait=\"letter-spacing: -0.6px; color: #000000;\" data-anchor-link-pos-phone_portrait=\"empty\">Focus on insights rather than process<\/span><\/li>\n<li class=\"paragraph-3\" data-anchor-link-pos-phone_portrait=\"empty\"><span data-style-phone_portrait=\"letter-spacing: -0.6px; color: #000000;\" data-anchor-link-pos-phone_portrait=\"empty\">Design your case study reading experience<\/span><\/li>\n<li class=\"paragraph-3\" data-anchor-link-pos-phone_portrait=\"empty\"><span data-style-phone_portrait=\"letter-spacing: -0.6px; color: #000000;\" data-anchor-link-pos-phone_portrait=\"empty\">Obsess over your case study visuals<\/span><\/li>\n<li class=\"paragraph-3\" data-anchor-link-pos-phone_portrait=\"empty\"><span data-style-phone_portrait=\"letter-spacing: -0.6px; color: #000000;\" data-anchor-link-pos-phone_portrait=\"empty\">Make it personal<\/span><\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_2970\" aria-describedby=\"caption-attachment-2970\" style=\"width: 840px\" class=\"wp-caption alignleft\"><img loading=\"lazy\" class=\"wp-image-2970 size-large\" src=\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2019\/09\/FireShot-Capture-091-80-MORE-Essential-UX-Portfolios-2019-Edition-UX-Guide-Medium_-medium.com_-1024x507.png\" alt=\"\" width=\"840\" height=\"416\" \/><figcaption id=\"caption-attachment-2970\" class=\"wp-caption-text\">Article home page<\/figcaption><\/figure>\n<p>Sometimes it&#8217;s just helpful to look at a big list. <a href=\"https:\/\/medium.com\/userexperience-guide\/80-more-essential-ux-portfolios-2019-edition-9d146874590f\">Here&#8217;s a list of 80 portfolios.<\/a>\u00a0I talked about 2 in the <strong>People<\/strong> section.<\/p>\n<h5>Guides and Slides<\/h5>\n<figure id=\"attachment_2968\" aria-describedby=\"caption-attachment-2968\" style=\"width: 840px\" class=\"wp-caption alignleft\"><img loading=\"lazy\" class=\"wp-image-2968 size-large\" src=\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2019\/09\/FireShot-Capture-089-Design-a-Winning-Portfolio-\u2014-Tips-Tricks-from-a-Google-Designer-\u2728_-blog.prototypr.io_-1024x542.png\" alt=\"\" width=\"840\" height=\"445\" \/><figcaption id=\"caption-attachment-2968\" class=\"wp-caption-text\">Article page, &#8220;Design a Winning Portfolio \u2014 Tips + Tricks from a Google Designer &#8220;<\/figcaption><\/figure>\n<p><a href=\"https:\/\/blog.prototypr.io\/https-medium-com-lisasuefischer-design-a-winning-portfolio-expert-tips-from-a-google-designer-e73832dc9228\">Design a Winning Portfolio \u2014 Tips + Tricks from a Google Designer\u00a0<\/a>\u00a0is a slide deck of tips and tricks. The slides are shared from Google slides (<a href=\"https:\/\/docs.google.com\/presentation\/d\/1mmLw8VQGjP35yhAVoJMN7GHDqyQTUz_XCx6zZe9IJo8\/edit?usp=sharing\">link<\/a>).<\/p>\n<p>This is a compilation of tips and tricks to improve a design portfolio. She states:<\/p>\n<p><em>While each design discipline has slightly different project expectations (i.e. UX wants wireframes while Branding wants logo sketches), I\u2019ve realized\u00a0<strong class=\"nn mn\">there is an overall universal set of tactics that, when applied, will automatically enhance and differentiate any design portfolio.<\/strong><\/em><\/p>\n<p>The Google slide deck is really big and there are videos, so keep that in mind. It loads a little slow.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-3001 size-large\" src=\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2019\/09\/FireShot-Capture-106-5-Steps-to-Creating-a-UX-Design-Portfolio-www.nngroup.com_-1024x507.png\" alt=\"\" width=\"840\" height=\"416\" \/><\/p>\n<p><strong>nng.com&#8217;s<\/strong> recent article, &#8220;<strong><a href=\"https:\/\/www.nngroup.com\/articles\/ux-design-portfolios\/\">5 Steps to Creating a UX-Design Portfolio<\/a><\/strong>&#8221; is probably what kicked this whole thing off. Actually I talked about this in <a href=\"https:\/\/alliwalk.com\/blog\/2019\/08\/portfolio-updates-feedback\/\">another post<\/a>, so I won&#8217;t rehash. But I will point out that I&#8217;ve made a number of changes to my website and my portfolio at Cargo Collective, which at this moment is offline.<\/p>\n<h5>My Personal Bookmarks<\/h5>\n<p>I&#8217;ve had the following links bookmarked for a few years. These seem more geared to PDFs.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-3005 size-large\" src=\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2019\/09\/FireShot-Capture-108-www.portfoliohandbook.com_-1024x507.png\" alt=\"\" width=\"840\" height=\"416\" \/><\/p>\n<p><a href=\"http:\/\/www.portfoliohandbook.com\/PortfolioHandbook_UCID12.pdf\"><strong>Portfolio Handbook<\/strong> [PDF]<\/a> from the\u00a0Class of 2012 Industrial Design, DAAP, University of Cincinnati.<\/p>\n<p><em>This book was put together for the purpose of facilitating higher-quality portfolios. It will not cover project processes, but will act as a guide to documenting a project well for your portfolio. We hope the book will ease some of the anxiety around creating your first portfolio and then later exist as a helpful reference book to check a newer portfolio concept against<\/em><\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-3006 size-large\" src=\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2019\/09\/FireShot-Capture-109-zebrapeople.com_-1024x507.png\" alt=\"\" width=\"840\" height=\"416\" \/><\/p>\n<p><strong><a href=\"https:\/\/zebrapeople.com\/downloads\/Zebra-People-UX-Portfolio-Guidance.pdf?v=1.2\">UX Portfolio Guidance<\/a><\/strong>, from Zebra People [PDF], London<\/p>\n<p><em>We are fortunate enough to see some great portfolios, however there are still many UX practitioners who are selling themselves short. There are some absolutely brilliant and in-depth guides about UX portfolios out there. But our intention with this document is to provide a concise, visual hand book on what to include in your portfolio.<\/em><\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.slideshare.net\/slideshow\/embed_code\/key\/cOTsSXtdDuIvHr\" width=\"427\" height=\"356\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" style=\"border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;\" allowfullscreen> <\/iframe> <\/p>\n<div style=\"margin-bottom:5px\"> <strong> <a href=\"https:\/\/www.slideshare.net\/Hugeinc\/ux-portfolio-tips\" title=\"UX Portfolio Tips\" target=\"_blank\">UX Portfolio Tips<\/a> <\/strong> from <strong><a href=\"https:\/\/www.slideshare.net\/Hugeinc\" target=\"_blank\">Huge<\/a><\/strong> <\/div>\n<p><em>Your portfolio represents you. But you\u2019re not always there to talk about your work. No one gets hired on their portfolio alone. The best outcome is a meeting. Tonight is about snap judgments.<\/em><\/p>\n<hr \/>\n<h2>2. Tools<\/h2>\n<h3>What people use to create sites<\/h3>\n<p>From the list of 80 above, (plus a few others I found) I randomly clicked\u00a0into about 3-4 portfolios per group and I took a\u00a0look at the page source.<\/p>\n<p><strong>Many, many\u00a0<\/strong>sites are\u00a0built using Squarespace, WordPress, Wix, or some other type of CMS with either built-in or plugins for flashy animation, grids, and what-not.<\/p>\n<p>Other sites were hand-coded, often with Bootstrap or Foundation. I took note of the\u00a0many\u00a0JavaScript libraries.<\/p>\n<h4>WordPress and Adobe Portfolio<\/h4>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-2973 size-large\" src=\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2019\/09\/FireShot-Capture-094-Semplice-Create-your-custom-online-design-portfolio-www.semplice.com_-1024x507.png\" alt=\"\" width=\"840\" height=\"416\" \/><\/p>\n<p>Semplice home pageFor WordPress,\u00a0I came across a template called\u00a0<a href=\"https:\/\/www.semplice.com\">Semplice<\/a>. It is advertised as\u00a0a WordPress template for designers. The latest version is Semplice4. Price is $100. I wouldn&#8217;t be surprised if many people have upgraded to the Studio version for $140. Semplice does not seem to have options for blogging; I didn&#8217;t see it.<\/p>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_2972\" aria-describedby=\"caption-attachment-2972\" style=\"width: 840px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"wp-image-2972 size-large\" src=\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2019\/09\/FireShot-Capture-093-Salient-Responsive-Multi-Purpose-Theme-Preview-ThemeForest_-preview.themeforest.net_-1024x507.png\" alt=\"\" width=\"840\" height=\"416\" \/><figcaption id=\"caption-attachment-2972\" class=\"wp-caption-text\">Salient Live Demo<\/figcaption><\/figure>\n<p>Another theme I\u00a0came across is\u00a0<a href=\"https:\/\/themeforest.net\/item\/salient-responsive-multipurpose-theme\/4363266\">Salient<\/a>, although\u00a0the\u00a0site I found it on had a &#8220;Under Construction&#8221; label. It&#8217;s $60 and available on ThemeForest. It has over 5,500 reviews, over 95,000 sales, and is currently\u00a0rated as 5-star.<\/p>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_2974\" aria-describedby=\"caption-attachment-2974\" style=\"width: 840px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"wp-image-2974 size-large\" src=\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2019\/09\/FireShot-Capture-096-Adobe-Portfolio-Build-your-own-personalized-website-portfolio.adobe_.com_-1024x507.png\" alt=\"\" width=\"840\" height=\"416\" \/><figcaption id=\"caption-attachment-2974\" class=\"wp-caption-text\">portfolio.adobe.com<\/figcaption><\/figure>\n<p>If you use Behance, you may be interested in\u00a0<a href=\"https:\/\/portfolio.adobe.com\/\">Adobe Portfolio<\/a>. It&#8217;s $9.99\/month, paid annually (about $120). You get access to Adobe Portfolio, Photoshop, and Lightroom, as well as access to Adobe Fonts. You can get a free trial, but you need to upgrade to connect a domain\/subdomain.<\/p>\n<h3>Free DIY Options<\/h3>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-2993 size-large\" src=\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2019\/09\/FireShot-Capture-103-Free-Bootstrap-Themes-Templates-Snippets-and-Guides-Start-Bootst_-startbootstrap.com_-1024x542.png\" alt=\"\" width=\"840\" height=\"445\" \/><\/p>\n<p><a href=\"https:\/\/startbootstrap.com\/\"><strong>Startbootstrap.com<\/strong><\/a> offers free Bootstrap templates, themes, and snippets that you can download and customize. Basically everything is free, with the obvious exceptions that you cannot use Startbootstrap templates to create a competitive website serving free Bootstrap templates.<\/p>\n<p>I have used Startbootstrap multiple times and I find them pretty easy to use and combine. Some have CSS or JS animations built in; mostly CSS.<\/p>\n<p>It does require solid HTML and CSS knowledge.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-2994 size-large\" src=\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2019\/09\/FireShot-Capture-104-GitHub-Pages-Websites-for-you-and-your-projects-hosted-directly-fr_-pages.github.com_-1024x542.png\" alt=\"\" width=\"840\" height=\"445\" \/><\/p>\n<p><a href=\"https:\/\/pages.github.com\/\">Github Pages<\/a> uses your own github\u00a0respository to host a website. It&#8217;s 100% free. However, it will say <em>username<\/em>.github.io\/<em>yourproject. <\/em>And your code will be online for all to see. I&#8217;m also not sure if you can use Google Analytics.<\/p>\n<p>Again, this is for people who have experience developing websites.<\/p>\n<p>Obviously, having a free site generator is great. If you want to have your own domain, you can get a personal email address, like yourname@yourdomain.com. And you can connect it to github. But all that is well beyond the scope of this post.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-3004 size-large\" src=\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2019\/09\/FireShot-Capture-107-BlankSlate-WordPress-theme-WordPress.org-wordpress.org_-1024x507.png\" alt=\"\" width=\"840\" height=\"416\" \/><\/p>\n<p><a href=\"https:\/\/wordpress.org\/themes\/blankslate\/\">BlankSlate<\/a> by <a href=\"http:\/\/tidythemes.com\/\">TidyThemes<\/a> allows you to completely customize a WordPress installation, by providing a theme with absolutely zero styling. Sometimes you use a nice theme, but end up undoing stuff you don&#8217;t really like. Needless to say, this theme is for people with a good amount of experience. I say no more.<\/p>\n<h3>JavaScript Libraries<\/h3>\n<p>If you code your own site, these were some of the libraries and plug-ins some people used. I thought tilt.js was pretty cool.<\/p>\n<p>There are so many JS libraries, this list will keep getting updated.<\/p>\n<ul>\n<li><strong>stellar.js<\/strong> &#8211; <a href=\"https:\/\/markdalgleish.com\/projects\/stellar.js\/\">https:\/\/markdalgleish.com\/projects\/stellar.js\/<\/a> &#8211; Parallax plugin<\/li>\n<li><strong>easing.js<\/strong> &#8211; jQuery plugin to create custom animation easing<\/li>\n<li><strong>superfish.js<\/strong> &#8211; <a href=\"https:\/\/superfish.joelbirch.design\/\">https:\/\/superfish.joelbirch.design\/ <\/a>&#8211; improvements for dropdown menus<\/li>\n<li><strong>hoverintent.js<\/strong> &#8211;\u00a0<a href=\"https:\/\/briancherne.github.io\/jquery-hoverIntent\/\">https:\/\/briancherne.github.io\/jquery-hoverIntent\/<\/a> &#8211; an alternative to hover in jQuery<\/li>\n<li><strong>waypoints.js<\/strong> &#8211;\u00a0<a href=\"http:\/\/imakewebthings.com\/waypoints\/\">http:\/\/imakewebthings.com\/waypoints\/<\/a> &#8211; You know those things that fly in from the side, when you scroll down a page? This does that.<\/li>\n<li><strong>typed.js<\/strong> &#8211;\u00a0<a href=\"https:\/\/mattboldt.com\/demos\/typed-js\/\">https:\/\/mattboldt.com\/demos\/typed-js\/<\/a> &#8211; Creates a typing animation effect<\/li>\n<li><strong>tilt.js<\/strong> &#8211;\u00a0<a href=\"https:\/\/gijsroge.github.io\/tilt.js\/\">https:\/\/gijsroge.github.io\/tilt.js\/<\/a> &#8211; a lightweight plug-in for parallax. Sort of like animate.css, but you have to include some (extremely little) JavaScript. (I liked this one!)<\/li>\n<li><strong>in-view.js<\/strong> &#8211; <a href=\"http:\/\/imakewebthings.com\/waypoints\/\">https:\/\/camwiegert.github.io\/in-view\/<\/a> &#8211; notifies you when your item is in view. Used to be called scrollie.js.<\/li>\n<li><strong>scrollSpeed.js<\/strong> &#8211; <a href=\"https:\/\/code.nath.co\/scrollSpeed\">https:\/\/code.nath.co\/scrollSpeed<\/a> &#8211; allows custom scroll speed in browsers<\/li>\n<li><strong>scrollrevealjs.org<\/strong> &#8211; <a href=\"https:\/\/scrollrevealjs.org\/\">https:\/\/scrollrevealjs.org\/<\/a> &#8211;\u00a0JavaScript library for easily animating elements as they enter\/leave the viewport<\/li>\n<li><strong>countdown.js<\/strong> &#8211; <a href=\"http:\/\/countdownjs.org\/\">http:\/\/countdownjs.org\/<\/a> &#8211; simple JS API countdown<\/li>\n<li><strong>masonry.js<\/strong> &#8211;\u00a0<a href=\"https:\/\/masonry.desandro.com\/\">https:\/\/masonry.desandro.com\/<\/a> &#8211; creates masonry layout<\/li>\n<li><strong>sidemenu.js<\/strong> &#8211; <a href=\"https:\/\/github.com\/kami-zh\/jquery.sidemenu.js?files=1\">https:\/\/github.com\/kami-zh\/jquery.sidemenu.js?files=1<\/a> &#8211; creates a side menu. Might be mobile only.<\/li>\n<li><a href=\"https:\/\/pupunzi.com\/mb.components\/mb.YTPlayer\/demo\/demo.html\"><strong>jQuery.mb.YTPlayer<\/strong><\/a>\u00a0&#8211; Creates HTML5 video backgrounds for YouTube videos<\/li>\n<li><strong><a href=\"https:\/\/www.jqueryscript.net\/demo\/Clean-Flexible-jQuery-Content-Slider-Plugin-unslider\/\">unslider.js<\/a> <\/strong>&#8211;\u00a0\u00a0a slim horizontal slider plugin (for images or content)<\/li>\n<li><strong>velocity.js<\/strong> &#8211; a fast animation engine. Similar to animate.css, but with JavaScript and more options<\/li>\n<li><strong>elastilunr.js<\/strong> &#8211;\u00a0<a href=\"http:\/\/elasticlunr.com\/\">http:\/\/elasticlunr.com\/ <\/a>&#8211; full-text search engine in Javascript for browser search and offline search<\/li>\n<li><strong>lazyload<\/strong> &#8211; OK there are too many to name to pick just one. Here are a few resources though. <a href=\"https:\/\/developers.google.com\/web\/fundamentals\/performance\/lazy-loading-guidance\/images-and-video\/#lazy_loading_libraries\">One<\/a> from Google, and the <a href=\"https:\/\/github.com\/verlok\/lazyload\">first search result<\/a>\u00a0for lazyload.js.<\/li>\n<li><strong>whatinput.js<\/strong> &#8211; <a href=\"https:\/\/ten1seven.github.io\/what-input\/\">https:\/\/ten1seven.github.io\/what-input\/<\/a>\u00a0&#8211; Detects if the input is coming from keyboard, mouse, or touch.<\/li>\n<\/ul>\n<h4>Lightboxes &amp; Carousels<\/h4>\n<ul>\n<li><strong>lightbox.js<\/strong> &#8211;\u00a0<a href=\"https:\/\/lokeshdhakar.com\/projects\/lightbox2\/\">https:\/\/lokeshdhakar.com\/projects\/lightbox2\/<\/a> &#8211; creates lightboxes and carousels<\/li>\n<li><strong>flexslider.js<\/strong> &#8211; <a href=\"http:\/\/flexslider.woothemes.com\/\">http:\/\/flexslider.woothemes.com\/<\/a> &#8211; Another image carousel, from\/for Woothemes<\/li>\n<li><strong>chocolat.js<\/strong> &#8211; http:\/\/chocolat.insipi.de\/#home &#8211; jquery lightbox plugin<\/li>\n<li><strong>fancybox.js<\/strong> &#8211;\u00a0<a href=\"https:\/\/fancyapps.com\/fancybox\/3\/\">https:\/\/fancyapps.com\/fancybox\/3\/<\/a> &#8211; It&#8217;s a pretty fancy image lightbox. Very fancy, indeed.<\/li>\n<li><strong>slick.js<\/strong> &#8211;\u00a0<a href=\"https:\/\/kenwheeler.github.io\/slick\/\">https:\/\/kenwheeler.github.io\/slick\/<\/a> &#8211; Responsive image carousel<\/li>\n<\/ul>\n<h4>Instagram Embeds<\/h4>\n<ul>\n<li>lightwidget.com &#8211; Embeds Instagram photos into a webpage.<\/li>\n<li><strong>spectragram.js<\/strong> &#8211;\u00a0<a href=\"http:\/\/spectragram.js.org\/\">http:\/\/spectragram.js.org\/<\/a> &#8211; Instagram API plugin<\/li>\n<\/ul>\n<h3>CSS<\/h3>\n<ul>\n<li><strong>animate.css<\/strong> &#8211; <a href=\"https:\/\/daneden.github.io\/animate.css\/\">https:\/\/daneden.github.io\/animate.css\/<\/a> &#8211; Creates animations on elements, with classes.<\/li>\n<li><strong>superfish.css<\/strong> &#8211; There&#8217;s a CSS stylesheet for superfish.js, and you need to include both to use it.<\/li>\n<li><strong>themify icons<\/strong> &#8211; <a href=\"https:\/\/themify.me\/themify-icons\">https:\/\/themify.me\/themify-icons<\/a>. An alternative icon font to font awesome, with thinner strokes. Also it\u2019s 100% free.<\/li>\n<\/ul>\n<p>Obviously Bootstrap, Foundation, grid\/flex, and icon font libraries also showed up.<\/p>\n<h3>Jekyll\/Jekyll Themes<\/h3>\n<ul>\n<li>poole &#8211; http:\/\/demo.getpoole.com\/ &#8211; the Butler for Jekyll<\/li>\n<li>hyde &#8211;\u00a0http:\/\/hyde.getpoole.com\/ &#8211;\u00a0 a 2-column Jekyll theme<\/li>\n<\/ul>\n<h3>Layout<\/h3>\n<p>If you are a PDF portfolio person, you might be interested in using a grid.<\/p>\n<figure id=\"attachment_2975\" aria-describedby=\"caption-attachment-2975\" style=\"width: 840px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"wp-image-2975 size-large\" src=\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2019\/09\/FireShot-Capture-097-The-Grid-System-thegridsystem.net_-1024x507.png\" alt=\"\" width=\"840\" height=\"416\" \/><figcaption id=\"caption-attachment-2975\" class=\"wp-caption-text\">The Grid System<\/figcaption><\/figure>\n<p><strong><a href=\"http:\/\/thegridsystem.net\/about\/\">Grid System<\/a><\/strong><\/p>\n<p><em>&#8220;The ultimate resource in grid systems.&#8221;<\/em><\/p>\n<p>You can download InDesign templates, at 8.5 x 11 and 11 x 17. Good if you want to create a print portfolio, or if you want to redesign your resume.<\/p>\n<hr \/>\n<h2>3. People<\/h2>\n<h3>A few portfolios in use<\/h3>\n<p>I randomly came across the following people, either in context of this post, or when reading an article, or serendipitously in some other way.<\/p>\n<p>Caveat: In no way am I promoting any of the following people. I have never met them. I don&#8217;t know if they&#8217;re the kind of people who cut in line or litter. Maybe they don&#8217;t pick up after their dog&#8230;.<\/p>\n<p>The one thing that is true is that I took a look at their websites and I have an opinion. If you disagree, there&#8217;s a list of 80 portfolios above to check out.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-2976 size-large\" src=\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2019\/09\/FireShot-Capture-098-Antonio-Carusone-Product-Designer-www.antoniocarusone.com_-1024x507.png\" alt=\"\" width=\"840\" height=\"416\" \/><\/p>\n<p><a href=\"http:\/\/www.antoniocarusone.com\/\">Antonio Carusone<\/a>, creator of Grid System. A very simple website. No images. He simply links to his other websites, most of them photography sites. The site is made with <a href=\"https:\/\/github.com\/eudicots\/Cactus\">Cactus<\/a>, which is another static-site generator not using Jekyll. (The last commit was 2 years ago, so it may not be maintained.)<\/p>\n<p>I viewed a few other personal websites like this: simple, text-only, with no images. I think this is a good way to connect disparate interests. He seems to have a lot of experience, which is also good to know if you&#8217;re looking for ideas and you&#8217;re not early in your career.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" class=\"alignleft size-large wp-image-2977\" src=\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2019\/09\/FireShot-Capture-099-BMO-Secure-Redesign-on-Behance-www.behance.net_-1024x507.png\" alt=\"\" width=\"840\" height=\"416\" \/><\/p>\n<p><a class=\"Project-ownerName-a2r js-mini-profile\" href=\"https:\/\/www.behance.net\/hiroakito2a2d\" target=\"_blank\" rel=\"noopener noreferrer\" data-id=\"23097617\">Hiroaki Ito<\/a>\u00a0has\u00a0<a href=\"https:\/\/www.behance.net\/gallery\/68987273\/BMO-secure-redesign\">this project<\/a> on Behance. I&#8217;m including this person because I attended a virtual recruiter session with Google. The three recruiters reviewed two portfolios, and this project was one of them as an example from a visual designer. (The UX designer was Simon Pan, who uses WordPress. It appears to be his own theme although it could&#8217;ve started from BlankSlate.)<\/p>\n<p>The project above is a combination of several very long images, stacked one on top of the other.\u00a0This designer\u00a0has a job at Google. He does not seem to have as much experience as the first guy.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" class=\"alignleft wp-image-2979 size-large\" src=\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2019\/09\/FireShot-Capture-100-johnapaolino.github.io-johnapaolino.github.io_-1024x507.png\" alt=\"\" width=\"840\" height=\"416\" \/><\/p>\n<p><a href=\"http:\/\/johnapaolino.github.io\/\">Johna Paolino<\/a>\u00a0is someone I came across on Medium. She wrote an article on using CSS grid. Then I found her website, which is hosted on github. So that&#8217;s another &#8211; FREE &#8211; option. Looked like an interesting site and she seems to be employed at the NY Times.<\/p>\n<p>That big font is BungeeShade.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" class=\"alignleft wp-image-2980 size-large\" src=\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2019\/09\/FireShot-Capture-101-Pendar-Yousefi-Projects-mahimoto.com_-1024x507.png\" alt=\"\" width=\"840\" height=\"416\" \/><\/p>\n<p><a href=\"https:\/\/mahimoto.com\/projects\">Pendar Yousefi<\/a>\u00a0is the only person I came across in the list above that used Adobe Portfolio. It was pretty nice looking, so I&#8217;m including that here. He also appears to be employed at Google. He also seems to have many years of experience,\u00a0which is another good data point.<\/p>\n<p>To be clear, you cannot create an Adobe Portfolio account and link it to a personal domain without becoming paid subscriber. He does a good job of connecting his web properties. For him, he&#8217;s getting his money&#8217;s worth. But I just want to make sure it&#8217;s clear, according to the website, money appears to have been exchanged.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" class=\"alignleft wp-image-2981 size-large\" src=\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2019\/09\/FireShot-Capture-102-Sharon-Tsao-UX-Design-Illustration-Austin-sharontsao.design-1024x507.png\" alt=\"\" width=\"840\" height=\"416\" \/>I came across\u00a0<a href=\"https:\/\/sharontsao.design\/index.html\">Sharon Tsao<\/a>&#8216;s portfolio above, too. She\u00a0does NOT appear to be employed. But I thought\u00a0her simple site was an interesting example, and she seemed to explain her background particularly well.<\/p>\n<p>She built this herself, or at least she did not use a template or CMS.<\/p>\n<hr \/>\n<figure id=\"attachment_3054\" aria-describedby=\"caption-attachment-3054\" style=\"width: 840px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"wp-image-3054 size-large\" src=\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2019\/09\/matteo-kutufa-mNMs0_kYjSE-unsplash-1024x684.jpg\" alt=\"Foot imprints on sand near a beach\" width=\"840\" height=\"561\" \/><figcaption id=\"caption-attachment-3054\" class=\"wp-caption-text\">Photo by Matteo Kutufa on Unsplash<\/figcaption><\/figure>\n<h2>Thoughts &amp; Reflections<\/h2>\n<p>I wrote this post over the course of 1-2 weeks. Right away, my initial thoughts for my own portfolio when the time of this post were\u00a0to create\u00a0a simple site that links out to other websites or to just expand my current WordPress installation (this blog). I also considered installing a separate WordPress instance altogether, which is still a strong possibility.<\/p>\n<p>Yet after writing the majority of this post, I continued to investigate the list of 80 portfolios. I kept finding new CSS and JavaScript libraries. And, I wanted to dig a little deeper into some of these to find out more about how they were made and other details that the guides above don&#8217;t really get into.<\/p>\n<p>Despite my rant at the top of this post, I have started to change my opinion a little on the importance of portfolios. I think there is something to be said for trying to display your work in as good a light as possible.<\/p>\n<p>I&#8217;m still collecting more data about these 80 portfolios, so there will be another post. And I&#8217;ve found more items to add to the Tools section (Webflow, anyone?), so I&#8217;ll probably continue making updates to this post in addition to simply posting again.<\/p>\n<p>[Featured image credit: Photo by Pierre Bamin on Unsplash]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>These are sites I&#8217;ve come across that may help someone building a portfolio. (Writing it also helps me remember!)<\/p>\n","protected":false},"author":1,"featured_media":3855,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[211,1,8,330],"tags":[350,532,531,325,353,377],"_links":{"self":[{"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/posts\/2955"}],"collection":[{"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/comments?post=2955"}],"version-history":[{"count":34,"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/posts\/2955\/revisions"}],"predecessor-version":[{"id":3857,"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/posts\/2955\/revisions\/3857"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/media\/3855"}],"wp:attachment":[{"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/media?parent=2955"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/categories?post=2955"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/tags?post=2955"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}