Sample Website Up

Last week I finished building a sample website. I've already built a similar site but since I haven't deployed that one I thought it would be worthwhile to build another one as a means of showing what can be done with the tools I'm using. Details can be found in the About section of the site and the link is in the navigation bar above.

I included a JavaScript based canvas animation instead of a 'hero' image. I like the way it looks but getting the canvas screen to be the right size AND responsive was a challenge. I used the usual set up for the canvas size and resize (using window.innerWidth and innerHeight/2) but what gave me issues was the CSS. I had to make sure that I removed margin and padding from the div where the canvas was housed. Then I had to make sure that the div's background matched the fillStyle I was using for my canvas. This is because there is still a slight gap between the end of the canvas and the end of the div (even with all paddings and margins removed - if you have padding this difference will be even more obvious, particularly upon resizing). So getting this canvas to work how I wanted wasn't as trivial as I though it would initially be.

The next issue was the parallax scrolling effect on two of the background sections. Just quickly, for aesthetics and readability I modified the first background picture with Photoshop equivalent GIMP to blur the middle section of it. The main problem though again was getting the background picture sizes right to adjust for both parallax and screen resizing. I played around with the CSS a lot before figuring it out. The key was setting the container div's position to relative. The image's position is absolute, width, height both at 100%. Background-size cover, background-position: center center and just in case I put in a y-repeat but that hasn't been necessary. The images are large enough to accommodate for scrolling and mobile view.

There weren't any other major time consuming issues other than a few standard difficulties with getting the JavaScript animation to look and behave as I wanted, I got some great tips from The Coding Train, Daniel Shiffman https://www.youtube.com/watch?v=CKeyIbT3vXI. Particularly, with regards to splicing objects via a differently ordered for loop:

for (var i = this.particles.length -1; i >= 0 ; i--)

It's a great way to do it. It was handy to get some more grids practice also. Please feel free to check out the site.