controversial / arkis.io Goto Github PK

This will reduce the amount that the header can be seen through the smoke when scrolled towards the "Our Team" section

The contact form on mobile is currently not looking as good as other contact forms that I've seen in the wild. Each input box should ideally be on a new line each (unless there's a better way) instead of being bunched up as they currently are. The button should also be larger as the text inside the button is being cut off.

When the page loads on mobile, the mobile menu has display: block with opacity: 0 leading to clickable ghost links floating on the page. They disappear if one opens and then closes the menu. display: none needs to be the initial value

The 3rd and 4th twitter card both link to the same account (the 3rd)

The mist looks really gray at the top in its current state:

whereas with the static mist image that I made in photoshop before, the mist looked thinner rather than darker at the top:

I also really liked the way the mist crept up the sides. This could likely be recreated by using a very short fade at the top of the mist, and a radial gradient from the top center to cut out a dip in the mist and make it appear to creep up the edges again.

Shows up on IE

For example, the smoke effect is set to take up 100% of the width of the display, but because a small bit of space on the right side of the screen is taken up by the scroll bar on Windows (this doesn't happen on MacOS, for instance), it adds a scrollbar on the bottom of the page, which, when scrolled to the right, looks really gross and terrible. Some messing around with the CSS ought to fix this.

A lot of my SASS can be simplified to use the vmin and vmax units where I'm currently using either vw or vh with media queries. vmin and vmax are designed to do this automatically, I just forgot they existed.

The twitter buttons should be the whole card instead of only the handles.

Having to click the A to get in is confusing and generally horrible from a UX perspective. Maybe the animation should automatically advance so that users don't have to figure out how to click on the A.

cc @EightBitBoot

When the navbar changed to fit the white section the hamburger menu has the same styling as on the dark area.

Set a session cookie so that the animation only plays once per browser session.

I'm using this to automatically fire the resize event on page load, but IE doesn't support this. The contents of the resize listener should be moved to a separate function that can be bound to both resize and load.

The mapbox-gl-js library and the tiles it loads weigh a ton, even without scrolling around the map. With the map, the page weighs 3.29 Mb. Before, it weighed only 888.8 kB. That's a 270% increase just for a tiny map. It might be worth taking a look at a solution involving a non-interactive map in the form of an image, as boring as that is.

I don't know if this is possible, but it'd be cool if the smoke could react to the cursor in some way. Like that when you move the cursor, you can push it away or something like that

Now that the build animations that play after the intro animation finishes are no longer dependent on a user click, the timing can be fixed and they can be defined in only CSS

Current webpack setup can't even handle multiple index.html files in different directories without overwriting, which is a pretty big issue. Maybe worth looking at html-webpack-plugin because it seems to be much more popular and much more powerful than Webpack's html-loader

HTML loads in before CSS is injected by the JS. This leads to a flash of unstyled content before the page has finished loading, which is ugly. Styles should be split out into a separate asset that can be loaded in page head.

On slower and older computers the mist effect lags and ends up slowing down the entire browser. There should be an option for older computers to be able to not have the animations.