falldowngoboone / falldowngoboone.github.io Goto Github PK

I want to replace the placeholder images in Side Projects with perhaps animated GIFs that show the projects in action.

The logo should change from white to blue when it passes the data-header-offset marker. I'm fairly certain the SVG will have to be embedded (I'll have to check on using <object />) in order to affect it with CSS.

I'm getting some SVG weirdness on Safari (big surprise). The logo has some weird bits on transition from blue to white. Need to research this.

This is what it's about! All images need to be responsive, and I need to come up with a plan for handling them. Pretty much the only images I have are the logo (which is SVG, so that's fine for now) and the projects images. I need to figure out if <picture /> is relevant here, as well as srcset.

The main header image will be adjusted through background-image.

All images, regardless of their implementation, must be optimized.

On mobile devices, the collapsible chrome is throwing off the page-header when the logo is clicked and the page jumps to the top.

Currently the page-header scrolls on overflow-y, however, this is not the desired behavior. It should be the nav that scrolls on overflow-y. This is currently resulting in buggy behavior when the page-header is opened on mobile, scrolled down, then collapsed by tapping a link. If you scroll back to the top, you will see the page-header is still in a scrolled position, and the menu button (as currently styled) is completely hidden. Boo.

The navigation needs to be updated to the hiding/pop-up style in dev.

I would like to lock out the horizontal scrolling. This has recently been introduced with some of the new styles. I'll have to take a look in dev tools.

Add Autoprefixer to the build chain and pipe the Sass result through.

I would like to animate the scroll to the different sections, taking the current page header height into account. I would like to do this without the aid of any libraries whatsoever, at least at first.

Add a key event handler that listens for the space key.

The inner page links should accommodate for the height of the Page Header.

Only animate transforms and opacity because: Performance™.

Images need to be compressed, possibly served through a CDN.

This page explains it's alway best to use rel="noopener noreferrer" to all links with target="_blank" so the targeted page has no access to window.opener object. Yikes.

When a class with a transition is added, the initial transition occurs. I need to see if there is a way to prevent this.

The menu should close if the logo is clicked. It currently does not.

The contact form needs to be designed and styled.

I'm seeing erratic behavior on the sticky nav when the user scrolls up hard. Also, the initial transition needs to be hidden somehow.

I might look at putting the links on the left or right. Source

I need to build a contact form using formspree. It should include a contact name, email, message, and submit button, as well as a honeypot.

Small screen styles are locked in (for now). Now medium screens (think iPad landscape) need to be built. The header image needs to be replaced with something more backed out. Margins need to be adjusted.

I need to add icons for external links that indicates the links will open in a new window.

Use the content from the Google doc.

Page header should get a nice background when it moves from 0 scroll. I have avoided this so far because I've set .nav to position: absolute. What needs to happen is I need to set .nav to fixed positioning, then move the logo and toggle into another div inside .page-header that can be set positionally so it can have a higher z-index. Basically, the div.nav will slide underneath the logo and toggle and above the background-color. Nav sandwich.

When is-open is applied to the page-header, the logo doesn't scale up and the margins don't change.

Figure out some ways to compact the information down. This could include either slide shows for the projects, accordion UI for each section, cards that expand to reveal more detailed info, etc.

Implement a custom after pseudo-element underline that fluidly animates under the navigation links and replaces the current underline.

I need to add the style markers as they are in the Sketch layout.

Create the correct web font kit using Museo Slab 700 and 700 Italic, mapped to the corresponding weight and style.