Site Redesign Progress Report

August 21st, 2017 by

Lots of new stuff here!

SVG header for main and interior pages? Check. Fancy weirdo animated cornices on every page? Got it. Subtle slidey background animation on all pages? Got you covered.

The background slider, which you should see on this very page, is composed of two layers. The furthest back is the jpeg image assigned to the background. Within the SVG file on top of that, you’ll find a bunch of diagonally sloped paths filled with a very translucent white (about 0.2 opacity, I think). On top of those sliders is a page wide svg rectangle filled with a radial gradient with a 0.4 opacity itself. I animated their horizontal route along the page using Snap.svg‘s transform routines. Finally, to give the sliders some variation, I assigned a random multiplier to the base speed using what is probably the most used function on the site:

function rolldice(min, max){

return Math.floor(Math.random()*(max-min+1)+min);

}

 

This returns a random number between whatever min and max values you plugin. I’m posting it here to save me the trouble of having to look it up again whenever I need it next.

Otherwise, lots of formatting and reformatting. Part of the development process is tossing out huge swaths of code you’d previously thought was the right way to do it. It’s best not to get too attached to it.

…And I still have a lengthy to-do list for the site, included here:

  • Create an SVG topper for the footer. Horizontal footer bars are boring
  • Backgrounds for the “teleporter” on the front page.
  • Add featured image support to the post templates.
  • Compile more images for the home page slider.
  • Format the contact form
  • Increase the size of the slideshow display buttons on mobile.
  • Mobile responsiveness overall is better but could still be improved.
  • Pagination for the post archive.
  • Fix the weird colored outline in the screen portion of the front page device. Probably a conflicting style with the header or cornices.
  • And a loading screen. The graphics and code initialization are extensive enough that it’s slowing down the initial display.