{"id":3429,"date":"2019-11-11T11:30:56","date_gmt":"2019-11-11T17:30:56","guid":{"rendered":"https:\/\/alliwalk.com\/blog\/?p=3429"},"modified":"2019-11-11T09:13:12","modified_gmt":"2019-11-11T15:13:12","slug":"my-tachyons-portfolio","status":"publish","type":"post","link":"https:\/\/alliwalk.com\/blog\/2019\/11\/my-tachyons-portfolio\/","title":{"rendered":"My Tachyons Portfolio"},"content":{"rendered":"<p>My last\u00a0blog\u00a0post was\u00a0an account of what I have accomplished in my portfolio journey and ended with some ideas about next steps.<\/p>\n<figure id=\"attachment_3437\" aria-describedby=\"caption-attachment-3437\" style=\"width: 238px\" class=\"wp-caption alignright\"><a href=\"https:\/\/alliwalk.github.io\/adorama-work\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" class=\"wp-image-3437 size-full\" src=\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2019\/11\/FireShot-Capture-226-alliwalk.github.io_.png\" alt=\"\" width=\"238\" height=\"375\" srcset=\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2019\/11\/FireShot-Capture-226-alliwalk.github.io_.png 238w, https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2019\/11\/FireShot-Capture-226-alliwalk.github.io_-190x300.png 190w\" sizes=\"(max-width: 238px) 85vw, 238px\" \/><\/a><figcaption id=\"caption-attachment-3437\" class=\"wp-caption-text\">Sample Tachyons page, on github.<\/figcaption><\/figure>\n<p>At the time, I said I would\u00a0try and create a design using Tachyons, a lightweight CSS framework. That sample page, pictured, is available on <a href=\"https:\/\/alliwalk.github.io\/adorama-work\/\">github<\/a>.<\/p>\n<p>I also wrote about fears using vanilla HTML\/CSS, related to updates. I ended up going with DIY anyway. I still have that fear. I also wrote about using WordPress as a portfolio. I considered\u00a0I installing WordPress in multiple folders and testing out different options.<\/p>\n<p>&nbsp;<\/p>\n<h2><\/h2>\n<hr \/>\n<h2>Current State of My Portfolio<\/h2>\n<p>My portfolio is still at the same domain, but now it&#8217;s at a subdomain:\u00a0<a id=\"ember1011\" href=\"http:\/\/alliwalk.com\/ux\" target=\"_blank\" rel=\"noopener noreferrer\">alliwalk.com\/ux<\/a>. The reason is it gave me\u00a0more navigation options rather than putting everything on the homepage.<\/p>\n<p>I ended up using Tachyons for the entire site. It took a while to get\u00a0decode\u00a0the classes, which are a bit cryptic. I wrote some CSS, but not that much. I kind of missed writing\u00a0it. But it was also a very interesting way to implement styles. And it looks pretty clean.<\/p>\n<p>As I mentioned in my last post, one of the long-term strategies I had in mind for the site was to create more than one portfolio for my different interests, blogging, art\/design, and UX. I got\u00a0the idea of multiple portfolios\u00a0after watching a YouTube focused on PDF portfolios for graphic designers.<\/p>\n<p><em>This video is linked to the appropriate moment in time, or you can watch the relevant 40 seconds <a href=\"https:\/\/ytcropper.com\/cropped\/m55dc0602f4ee52\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a>.\u00a0<\/em><\/p>\n<p><iframe loading=\"lazy\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/m5xH3qM3PWk?start=237&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p>To alleviate one of my fears about updates, I created a landing page with nav links to each of\u00a0my three interests. Now\u00a0I can modify the link destinations, if I need to take\u00a0a portfolio offline for some reason.<\/p>\n<p>And finally, I did test a WordPress option, but it&#8217;s never as quick and easy at it seems. My portfolio went through a few versions, including PDF and a test in WordPress.<\/p>\n<h3>PDF Portfolio<\/h3>\n<p><strong>Strategy:\u00a0<\/strong>Some designers create their portfolio as a PDF to supplement their online portfolio. I&#8217;ve tried this before and I did not have good results. However, I thought that using my new font and style would help created compelling layouts. Plus, I needed something to point people to while working on updating my website.<\/p>\n<p><strong><a href=\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2019\/11\/Screen-Shot-2019-09-09-at-7.32.07-PM.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" class=\"alignright wp-image-3440 size-medium\" src=\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2019\/11\/Screen-Shot-2019-09-09-at-7.32.07-PM-300x169.png\" alt=\"\" width=\"300\" height=\"169\" srcset=\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2019\/11\/Screen-Shot-2019-09-09-at-7.32.07-PM-300x169.png 300w, https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2019\/11\/Screen-Shot-2019-09-09-at-7.32.07-PM.png 662w\" sizes=\"(max-width: 300px) 85vw, 300px\" \/><\/a>Actions:\u00a0<\/strong>I went through several iterations. I created PDF versions, which I created in Google Docs and Sketch. I attempted to use the<strong>\u00a0J. A. Van de Graaf<\/strong> canon, popularized by <strong>Jan Tschichold<\/strong>, to lay out the content. I referenced\u00a0the book\u00a0<strong><a href=\"https:\/\/www.bloomsbury.com\/uk\/basics-design-07-grids-9782940411924\/\" target=\"_blank\" rel=\"noopener noreferrer\">Grids<\/a><\/strong>, by Gavin Ambrose and Paul Harris, for inspiration.<\/p>\n<hr \/>\n<p><strong>Aside:<\/strong> I could write a whole post on page layout, Tschichold, Van de Graaf, but instead I&#8217;ll just share a few short videos.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/57018050?app_id=122963\" width=\"840\" height=\"473\" frameborder=\"0\" allow=\"autoplay; fullscreen\" allowfullscreen title=\"Canons of Page Construction\"><\/iframe><\/p>\n<p><iframe loading=\"lazy\" width=\"840\" height=\"630\" src=\"https:\/\/www.youtube.com\/embed\/MRUR52oTAP8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<hr \/>\n<p><strong>Review:\u00a0<\/strong>I\u00a0shared both versions as direct links or by uploading to Behance. I used both for job applications.\u00a0Neither got me very far. So essentially, my previous experience\u00a0was the same as it is now. However, creating them helped me later on when I was testing out my blog\/website. And\u00a0I now have portfolios available for future discussions, that I can present and discuss on the phone or\u00a0in a group.<\/p>\n<h3>Quantitative Research and Analysis<\/h3>\n<p><strong>Strategy:<\/strong> As per my previous post on\u00a0<a href=\"https:\/\/alliwalk.com\/blog\/2019\/09\/portfolio-resources\/\">portfolio resources<\/a>, I found that although I had a lot of summary and raw data on portfolios, I hadn&#8217;t fully analyzed it. My strategy was to thoroughly research the portfolios listed in one of my linked resources. I wanted to answer questions like:<\/p>\n<ul>\n<li>How many portfolios are from students and do they seem different?<\/li>\n<li>What types of profile images to designers use of themselves?<\/li>\n<li>What is the most common greeting on portfolios?<\/li>\n<li>How many designers use their own domain?<\/li>\n<li>What do most people use to create their portfolio?<\/li>\n<\/ul>\n<p><strong>Action:<\/strong>\u00a0It took a while, but I completed a significant amount of quantitative research. I have not yet shared my report, but I&#8217;ll probably post it on SlideShare and link to it. I hope to present it at a UX related talk.<\/p>\n<p><strong>Review: <\/strong>My\u00a0research clarified many questions about portfolios and helped answer questions on\u00a0how to design\u00a0specific areas of the site.\u00a0For instance,\u00a0previous reviewers suggested\u00a0using my own domain (vs using cargocollective). I didn&#8217;t understand why this was so important until I concluded my research, which showed the vast majority of designers used their own domain.<\/p>\n<p>The reviewers also made comments related to not getting a sense of who I am. I always find this difficult to articulate, but the research helped\u00a0again. Ultimately, I decided that this\u00a0blog would be able to serve as a supplement for anyone to learn more.<\/p>\n<p>The research also helped guide my headlines. Most designers used a very similar type of greeting on their site. I chose to use something that stood out a little bit more. I also used yellow on my landing page, to help people remember that yellow site, if they enter from that page.<\/p>\n<h5>WordPress or DIY<\/h5>\n<p>My research revealed that most designers, about two-thirds, use a CMS to build their portfolios. The 2 most popular are WordPress and Squarespace. The rest, or one-third, use a DIY solution.<\/p>\n<p>Initially I thought\u00a0WordPress\u00a0could be a good option. It&#8217;s free, I&#8217;ve used it for many years, I know how to install it. I decided\u00a0against\u00a0using\u00a0<em>this<\/em> blog as a combo portfolio+blog website. I&#8217;ve been using it as a blog for too long. And also, I wanted to keep the size of the database down. I considered installing a WP blog into a subdomain.<\/p>\n<p><strong>Free or Paid Themes.<\/strong> Many of the\u00a0popular WordPress themes, such as Semplice, are not free. But found a solution.\u00a0As I wrote previously,\u00a0<a href=\"https:\/\/kinsta.com\/blog\/twenty-twenty-theme\/\">WordPress Twenty Twenty<\/a> will be based on the free Chaplin theme by Anders Nor\u00e9n who leads WP 5.3 development. I went to\u00a0<a href=\"https:\/\/www.andersnoren.se\/teman\/\">Anders Nor\u00e9n&#8217;s lovely website<\/a>\u00a0and found multiple free templates.<\/p>\n<p>I created a test site, uploaded images, and added some write-ups. At the same time I was also created some test pages using Tachyons. Ultimately I decided against using WordPress. Anders Nor\u00e9n&#8217;s templates are beautiful, but I felt that in order to have a portfolio that could compare to the portfolios I reviewed in my research, I would need to still need to make a number of customizations. DIY was simply more fun and enjoyable.<\/p>\n<hr \/>\n<h2>Present and Future<\/h2>\n<p>The site is basically done, but there&#8217;s\u00a0still room for improvement. I\u00a0plan to implement image zoom using one of the JavaScript resources I listed in my post on <a href=\"https:\/\/alliwalk.com\/blog\/2019\/09\/portfolio-resources\/\">portfolio resources<\/a>. I also plan to make changes with image optimizations and swap out a few images. I want to update a few of the descriptions, perhaps adding another project or two.<\/p>\n<p>And, I\u00a0have some ideas about updating the layout of the yellow landing page.\u00a0It\u00a0might give me a chance to use more of my own CSS.<\/p>\n<p>Maybe one day I&#8217;ll use one of the templates on Anders Nor\u00e9n&#8217;s WordPress theme site for this blog.<\/p>\n<h5>Alternative Portfolios<\/h5>\n<p>I&#8217;m still using the\u00a0cargocollective account, but I&#8217;ve re-repurposed the site and it&#8217;s now back to showing creative\/art\/design projects. If that site gets too full, maybe I&#8217;ll create another portfolio focusing on one or two of those\u00a0interests.<\/p>\n<hr \/>\n<p>The next time I write about this, I hope it will just be about my research. Because on this, I&#8217;ve written a lot!<\/p>\n<p>For now, I&#8217;m happy to be done writing\u00a0with this topic. Plus,\u00a0I&#8217;ve written a number of other posts that are waiting in drafts to get posted.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A review into the current state of my portfolio and thoughts for the future.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[557,556,558,353,559],"_links":{"self":[{"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/posts\/3429"}],"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=3429"}],"version-history":[{"count":18,"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/posts\/3429\/revisions"}],"predecessor-version":[{"id":3471,"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/posts\/3429\/revisions\/3471"}],"wp:attachment":[{"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/media?parent=3429"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/categories?post=3429"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/tags?post=3429"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}