glynnis / glynn.is Goto Github PK

Inspiration here: https://uxdesign.cc/the-faqs-that-got-me-more-ux-interviews-and-ultimately-my-dream-job-2e5dfe09132

Right now a lot of SASS is being brought in for Bourbon, Neat, and Refills, and not all of it is needed. Remove SASS that's not being used and tidy up stylesheet @imports, etc.

Add a background image for more visual interest and a kind of "first impression" to the homepage.

Right now on the homepage there's a bit of CSS hackiness using display: none for the thumbnails of the case studies. I couldn't get the responsive reordering to work properly in Neat, and need to reimplement and figure out what's wrong.

A starting place: http://stackoverflow.com/questions/24868817/re-ordering-columns-with-thoughtbot-bourbon-neat

The italic font for pull quotes doesn't render properly on my phone. Figure out what's causing this issue and fix.

The hero image doesn't look so great at smaller sizes, and could be better positioned within <section> so that it doesn't appear so far to the right on wide screens. I could probably also have better fallbacks for cross-browser compatibility and older browser support.

Worth experimenting more with in _custom.css (layering a gradient in section that has the background image over a gradient or solid .home-hero:

Helpful resources:
https://codepen.io/nxworld/pen/KpVZra
http://www.w3schools.com/css/css3_gradients.asp
https://css-tricks.com/perfect-full-page-background-image/
https://css-tricks.com/css3-gradients/
https://css-tricks.com/almanac/properties/b/background-position/

Experiment with new CSS Grid and how to properly use fallbacks. Consider eliminating Bourbon + Neat + Refills

Refer to talks from CSS Dev Conf:
https://rachelandrew.co.uk/archives/2017/03/20/css-grid-fallbacks-and-overrides/
https://oddbooksapp.com/book/css-layout
http://brendastorer.com/presentations/2017-10-CSSDevConf/assets/player/KeynoteDHTMLPlayer.html#0
https://slack.engineering/rebuilding-slack-com-b124c405c193

Right now "Contact" just uses a mailto: link, which is probably not what the user is expecting. Add a real contact form that offers a bit more security against spam and also is a better experience for the user.

On page load, there's a flash of unstyled fonts. Ideally on load fonts should render without flashing fallback font faces.

Something's up with Typekit probably, or the order the script gets loaded.

Right now the photo banner shows a lot of photos of me, but not many of them show my eyes. Update the banner with some other photos of me so I'm not wearing sunglasses in quite so many of them.

Modify _includes/head.html to be more SEO friendly.

Add an additional case study--perhaps refinements to Encore Search, or EncoreUI Framework work?

Firefox renders the :before quotation marks differently than Chrome, which shows spacing a bit differently and doesn't look as good.

Rewrite with styles that are more cross-browser compatible so that styles in both browsers match.

On Firefox:

Right now the homepage doesn't say "designer" as boldly as it could. Adding more case studies will help round out content, and allow more room for a thoughtful and creative design that's less typography-centric.