{"id":2882,"date":"2019-08-21T14:03:44","date_gmt":"2019-08-21T20:03:44","guid":{"rendered":"https:\/\/alliwalk.com\/blog\/?p=2882"},"modified":"2019-08-27T12:58:26","modified_gmt":"2019-08-27T18:58:26","slug":"portfolio-and-website-updates","status":"publish","type":"post","link":"https:\/\/alliwalk.com\/blog\/2019\/08\/portfolio-and-website-updates\/","title":{"rendered":"Portfolio and Website Updates"},"content":{"rendered":"<p>I have begun a process of updates for my website at alliwalk.com and an additional portfolio at cargocollective.com\/alliwalk.<\/p>\n<p>Here are changes in mind for the portfolio and the website.<\/p>\n<hr \/>\n<h2>Portfolio Updates<\/h2>\n<p>Changes for\u00a0<a href=\"https:\/\/cargocollective.com\/alliwalk\">my portfolio<\/a> began after\u00a0I read a Nielsen Norman Group article on UX Portfolios.\u00a0The article is called <a href=\"https:\/\/www.nngroup.com\/articles\/ux-design-portfolios\/\">5-Steps to Creating a UX-Design Portfolio<\/a>. The 5 steps are:<\/p>\n<ol>\n<li>Take Inventory of All Your Projects<\/li>\n<li>Choose 3\u20135 Projects as Detailed Case Studies<\/li>\n<li>Choose Your Desired Format<\/li>\n<li>Create Your Portfolio<\/li>\n<li>Get Feedback and Iterate<\/li>\n<\/ol>\n<h3>Implementing the Tips &amp; Other Updates<\/h3>\n<h4>Take Inventory<\/h4>\n<p><a href=\"https:\/\/alliwalk.com\/blog\/2019\/04\/favorite-nypl-resume-tips\/\">Given my work on improving my resume<\/a>, I&#8217;ve already taken some inventory of what I feel I&#8217;m good at and what differentiates me from other designers.<\/p>\n<h4>3-5 Projects<\/h4>\n<p>But I do have a lot of projects. Far more than 3-5 as recommended. So that&#8217;s been difficult to evaluate objectively.<\/p>\n<h4>Writing<\/h4>\n<p>I also took a second look at the writing and how I described my projects. And I&#8217;ve decided to focus on improving the content so it&#8217;s ideal for the web.<\/p>\n<ul>\n<li>Hemingway App helped to simply sentences and eliminate long words<\/li>\n<li>Lists help get points across in an easier to scan format.<\/li>\n<\/ul>\n<p>A short course I&#8217;ve been referencing is available on Lynda.<br \/>\n<iframe loading=\"lazy\" src=\"https:\/\/www.lynda.com\/player\/embed\/362233?fs=3&amp;w=560&amp;h=315&amp;ps=paused&amp;utm_medium=referral&amp;utm_source=embed+video&amp;utm_campaign=ldc-website&amp;utm_content=vid-362233\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<div style=\"margin-bottom: 10px;\"><strong><a title=\"Get practical techniques for writing for the web, including tips on front-loading content, avoiding jargon, and keeping your content up to date.\" href=\"https:\/\/www.lynda.com\/Web-Content-Strategy-tutorials\/Writing-Web\/180104-2.html\">Learning to Write for the Web<\/a><\/strong> by <a href=\"https:\/\/www.lynda.com\/author\/1401548\">Chris Nodder<\/a><\/div>\n<h4>Styles<\/h4>\n<p>Styles aren&#8217;t part of the list, but I made a few changes:<\/p>\n<ul>\n<li>I used Coolors to use\u00a0find colors that complement each other<\/li>\n<li>Use HSL instead of HEX values<\/li>\n<\/ul>\n<h4>Feedback<\/h4>\n<p>I&#8217;ve asked a friend, a new contact, and an acquaintance for feedback on my portfolio. Not everyone has responded with their take, but I&#8217;ve already begun making edits.<\/p>\n<h3>Upcoming<\/h3>\n<p>I plan to continue making more changes and improvements, to the order of each project and the writing.<\/p>\n<hr \/>\n<h2>Also, Website Updates<\/h2>\n<p><em>Some big changes here&#8230;.<\/em><\/p>\n<p>I recently made some pretty drastic updates to <a href=\"https:\/\/alliwalk.com\">my website<\/a>.<\/p>\n<h4>Style, Images, Content<\/h4>\n<ul>\n<li>Using Coolors to get a complementary color palette<\/li>\n<li>Adding SVGs from <a href=\"https:\/\/undraw.co\/illustrations\">UnDraw.co<\/a><\/li>\n<li>Updating the content: Removed CSS projects; Added an &#8220;About&#8221; section<\/li>\n<\/ul>\n<p>That&#8217;s it for now, but there are more changes I still want to make.<\/p>\n<h3>More Changes I Want to Make<\/h3>\n<h4>Remove IDs<\/h4>\n<p>3-4 years ago when I first made this site, I didn&#8217;t know the difference between IDs and Classes. Now I do and I want to update the HTML to use the correct tags.<\/p>\n<h4>Add Responsive Images<\/h4>\n<p>The technique now is to use responsive images,\u00a0using <code>srcset<\/code> and <code>sizes<\/code>. A how-to is available on <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/HTML\/Multimedia_and_embedding\/Responsive_images\">MDN<\/a>.<\/p>\n<h4>Update to Bootstrap 4<\/h4>\n<p>Although I think I&#8217;m OK with Bootstrap 3, it would be a good idea to update to the newest version. Bootstrap 4 uses Flex by default and possibly Grid.<\/p>\n<h4>Optimize the SVGS for Animation<\/h4>\n<p>In order to add animations to SVGs, the different paths and shapes need to be given names. Moving the styles out of the code means\u00a0colors and other styles can be animated.<\/p>\n<h4>Animate the SVGs<\/h4>\n<p>After optimizing the SVGs, I can add some animations.<\/p>\n<h4>Create a CSS Experiments page<\/h4>\n<p>The site used to have a section for CSS animations. But I took that out to focus the page on just one message. I plan to put everything I removed onto a new page\/section.<\/p>\n<h4>Domain Email<\/h4>\n<p><del>I&#8217;ve got a domain but I&#8217;m not using the email for it. This isn&#8217;t really a website thing, just a professional thing<\/del>.<\/p>\n<p>Happy to report, this is done!<\/p>\n<hr \/>\n<p>I plan to write another post about some of the feedback and ongoing changes.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>After reading a Nielsen Norman Group article on UX Portfolios, I recently began a process of updating my own portfolio and website. Here is a recap and plans for the future.<\/p>\n","protected":false},"author":1,"featured_media":2894,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1,122,3],"tags":[526,353,352],"_links":{"self":[{"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/posts\/2882"}],"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=2882"}],"version-history":[{"count":9,"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/posts\/2882\/revisions"}],"predecessor-version":[{"id":2910,"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/posts\/2882\/revisions\/2910"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/media\/2894"}],"wp:attachment":[{"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/media?parent=2882"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/categories?post=2882"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/tags?post=2882"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}