website – Thoughts from the Underground

Portfolio and Website Updates

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.

I have begun a process of updates for my website at alliwalk.com and an additional portfolio at cargocollective.com/alliwalk.

Here are changes in mind for the portfolio and the website.

Portfolio Updates

Changes for my portfolio began after I read a Nielsen Norman Group article on UX Portfolios. The article is called 5-Steps to Creating a UX-Design Portfolio. The 5 steps are:

Take Inventory of All Your Projects
Choose 3–5 Projects as Detailed Case Studies
Choose Your Desired Format
Create Your Portfolio
Get Feedback and Iterate

Implementing the Tips & Other Updates

Take Inventory

Given my work on improving my resume, I’ve already taken some inventory of what I feel I’m good at and what differentiates me from other designers.

3-5 Projects

But I do have a lot of projects. Far more than 3-5 as recommended. So that’s been difficult to evaluate objectively.

Writing

I also took a second look at the writing and how I described my projects. And I’ve decided to focus on improving the content so it’s ideal for the web.

Hemingway App helped to simply sentences and eliminate long words
Lists help get points across in an easier to scan format.

A short course I’ve been referencing is available on Lynda.

Learning to Write for the Web by Chris Nodder

Styles

Styles aren’t part of the list, but I made a few changes:

I used Coolors to use find colors that complement each other
Use HSL instead of HEX values

Feedback

I’ve asked a friend, a new contact, and an acquaintance for feedback on my portfolio. Not everyone has responded with their take, but I’ve already begun making edits.

Upcoming

I plan to continue making more changes and improvements, to the order of each project and the writing.

Also, Website Updates

Some big changes here….

I recently made some pretty drastic updates to my website.

Style, Images, Content

Using Coolors to get a complementary color palette
Adding SVGs from UnDraw.co
Updating the content: Removed CSS projects; Added an “About” section

That’s it for now, but there are more changes I still want to make.

More Changes I Want to Make

Remove IDs

3-4 years ago when I first made this site, I didn’t know the difference between IDs and Classes. Now I do and I want to update the HTML to use the correct tags.

Add Responsive Images

The technique now is to use responsive images, using srcset and sizes. A how-to is available on MDN.

Update to Bootstrap 4

Although I think I’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.

Optimize the SVGS for Animation

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 colors and other styles can be animated.

Animate the SVGs

After optimizing the SVGs, I can add some animations.

Create a CSS Experiments page

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.

Domain Email

~~I’ve got a domain but I’m not using the email for it. This isn’t really a website thing, just a professional thing~~.

Happy to report, this is done!

I plan to write another post about some of the feedback and ongoing changes.

Event: Advancing The Careers of Technical Women (ACT-W), Highlights

Wisdom from “Advancing The Careers of Technical Women (ACT-W)” New York 2017 Conference

Or How a Woman’s Tech Conference Saved My Butt

Kind of on a whim, I decided to attend the Advancing The Careers of Technical Women (ACT-W), 1-day conference. The purpose was to provide career advice for women in all parts of the tech world, not just for developers. Overall, it was incredibly inspiring and energizing, which I really needed. Job hunts can be very depressing.

In an upcoming post, I will share detailed notes from each speaker. But for now, I will share some highlights and how I’ve applied the advice I learned from attending.

Highlights of Wisdom, Summarized

build a community; don’t network
create an objective panel of reviewers
tell your unique story
diversity of opinions and experience is important
earn trust
ask for help
be honest

Taking Action

Examples of how I applied the advice I learned by taking action:

1 – BUILDING A COMMUNITY

I immediately started applying the concept of community building. I got some business cards and names, from a few attendees, and I connected with them on LinkedIn and sent emails. I’ve even been reaching out to complete strangers on LinkedIn!

Coincidentally, this was kind of happening in real life, too, which made everything a little overwhelming but also provided another opportunity to try out these new ideas.

2 – ASKING FOR HELP

I decided to ask for help from people I haven’t tried before. For instance, I reached out to employers that rejected me for a job, to ask for help. Either to ask what they look for or to ask for career advice.

3 – BUILDING TRUST

I’ve been working on redoing my website (again) and this time, I included more information highlighting my expertise. Not to brag, but to build trust.

4 – TELLING MY STORY

As a part of redoing my website, I’ve included an About page. I’ve used part of that page to go into more detail into my background and how I got to where I am.

My new “About Me” page has a “My Story” section.

My next post will include detailed notes from the speakers.

Web/Portfolio Update – Part 2: Performance

Currently finished with the 90% of the HTML/CSS of my website. I found this great free photograph to use in the main image section of the site. (Looks so classy.) I need to post some of the portfolio image alternatives I came up, but decided not to use.

This post is all about site performance optimization, what I did and what I learned. (That big, fat, red F in my cover image is explained below!)

Getting Started
I wasn’t initially set on improving the performance of my site. (It’s only 1 page.) But, remembering all my lessons on Treehouse, I decided to minify some files anyway, like a pro. For CSS minification, here’s a nice simple site for that: cssminifier.com. This site also has a js minifier and image optimizers. In addition to working on my style.css file, I went through and deleted unnecessary classes for my font-awesome css file, and minified the CSS, since I only needed about 12 icons. (I’ve since added a few back.) I also minified the smoothscroll.js file, which gives my site that, you know, smooth scroll effect. It’s a pretty short file, but it doesn’t hurt.

Before I used cssminifier.com, I also took it through a clean CSS filter on http://www.website-performance.org/ to prettify* my style.CSS file before minifying it. While I was there, I also decided check out the site performance. Ouch! Some big issues, especially with compressing images, including my new classy photo. This is where I got started on improving site performance.

Optimizing Files
Two big problems were too many CSS calls and images that were not optimized. I realized that I needed to link to some CDNs to reduce CSS calls. Instead of including the jQuery.js, Bootstrap.js, and Bootstrap CSS files, I’m now linking to the the files via CDN. I tried using one of the above websites to optimize my images, and also convert some of them to PNGs, but the server couldn’t handle it. So I used good, old Photoshop.

“Gzip Compression”
I did not know what this term meant, but I got an F from a few site performance websites. GTMetrix explains that using a compressed, zip, file will save a lot of space. But it’s up to the browser to decide which file to use. GTMetrix and Website-Performance.org both suggested compressing my styles.ccs, bootstrap.css, and font-awesome.min.css files. Well, since I’m going to be using a CDN for the Bootstrap and jQuery files, I’m not too concerned about those. But I did continue as it advised for the relevant files.

Having done all this, I am happy my site loads fast, especially on mobile. And a learned a lot, not just from these websites, but also about the tools I used to complete them. For instance, Cyberduck, an FTP-transfer client doesn’t show .htaccess files, but Filezilla does.

Annoyances
The sites were a little pedantic about image compression, and they would complain about the need to compress images another 1-4% or so. Since I’m using a portfolio site, it’s not really that important to me to try to squeeze every last unnecessary pixel out of my images, especially since most of them aren’t visible when the page loads. The only one I might consider continue to optimize is the main hero image, because it’s the first one you see.

The optimization sites also pointed about how long it takes for an embedded Vimeo link to load. This is also not a concern for me, because the video is only visible in a pop-up. And the sites also dinged all my embedded CSS files and image files because they were not coming a CDN. I looked into the option of uploading them into a CDN, but abandoned that idea. (I think it might have required a payment, and per my previous entry, that was not going to work for me.)

Summary
For my next project, I’ll start with this site first, because it lists out everything that’s slowing down a site, such as a missing .htaccess file — or I may use it to improve the performance of my other project sites. The nice thing about the results it provides is that it’s very helpful for organizing tasks and working systematically through the performance optimization process.

* Yes, prettify is word!