kristiannmiller / km-portfolio Goto Github PK

Buttons seem to have a strange focus effect happening where they turn black after being pressed, and the padding is visible.
Would also like to see ALL buttons have a hover effect on the mouse (especially on the carousels)

Would love to see elements appear as the viewer scrolls through each page.

Add and rearrange tests for components that have new features

Rethink landing page to be more exciting / less repetitive

Thoughts from Louisa : "really opinionated typeface used for the “logo,” which is then used twice on landing page is overkill. Consider scale of this in the header, as well. It’s very large, which causes the header to be disproportionately scaled to the rest of the page/main content. Maybe pull in a hero image of a “featured project” on the landing page rather than have your name in script twice? that would give you a nice visual hook right away and make it a little more visually engaging when you first hit this page."

Not sure where it would make the most sense

Utilize new colors in design and work on responsiveness

Animation might be too long, add a button that offers the ability to skip it

Redesign as mobile-first application
Utilize more responsive css practices
Minimize media-queries

Thoughts from Louisa:

• Large screens (732px and up wide): Consider moving the social icon links to ta footer (they jump up into the header on mid to large screens). Current page arrangement makes the top of the page pretty cluttered while the lower portion of the page empty.
• Open this in mobile and go through it with a fine-toothed comb. There are some squirrely things happening with text throughout the site. We also have lost the KM logo in the header on mobile — I’d keep that so folks know it’s you!
• Take some time and break this layout in the browser to see where it needs to be tightened up. Mess with the size of the browser window (make it really wide, make it really narrow, make it short, make it tall) and see what gets wonky. Currently, there is a lot of movement happening as the window changes size, with various elements misbehaving and going places they shouldn’t be.

Lines don't currently match up like they do on other pages

Notes from Louisa:

• Consider color palette. What emotion do you want to associate with this page? The rust accent color isn’t quite bright enough/different in contrast to really “pop” when paired with black and mid-tone gray. This post has some interesting points about the importance of color in brand: https://studywebdevelopment.com/understanding-color-web-design.html
• On mobile, the “selected” button highlight color in the header has really low contract of background to text color (rust on black), this makes it very hard to read for folks with vision impairments. To check the contrast to make it more legible/accessible take a look here: https://webaim.org/resources/contrastchecker/

Run lint

Troubleshoot loadtime - maybe deploy with Netlify or GH-Pages instead of Heroku or purchase Dynos

Would ideally like to see the page scroll back to the top after navigating to a different page

Once the final slide is shown, the back button stops working.

A user should be able to cycle back through the slides

• All previous tests pass
• New features are tested thoroughly

Notes from Louisa:

• You have a photography section, but when I go there, I don’t get to see any of your work! I’d see if you can find a way to include some photography. Doesn’t have to be a lot, but at least give folks a peek into that part of your career!

Study text and legibility Refine text usage throughout app

Notes from Louisa:

• I’d consider the amount of text being used. It’s tough to really cut copy to make it as directed and concise as possible, but, unfortunately, people are busy/lazy and reading is “hard” so if there’s too much text it probably won’t get read. You want to make a really powerful impact as fast as possible. I’d take some time and see where you can reduce the amount of copy.
• Center justified text is harder to read than left justified — I’d see if you can adjust the layout to have your body copy not all be center justified.
• Line length: text gets hard to read above 75-ish characters and below about 40. On large screens, your text blocks expand to fill the full width of the screen, making them tough to read. This article has some good info on text and legibility: https://www.smashingmagazine.com/2014/09/balancing-line-length-font-size-responsive-web-design/