Index Page Notes - workofjohn/portfolio GitHub Wiki

Alright so for my own reference I'm going to make notes here on how the Index/ Home page is working.

Essentially, the whole page is done with some divs and some funky CSS so that there's a nice block or post type of layout. This make a very user- friendly webpage that is also very easy to add pages onto or to remove pages from since everything exists in its own sort of bubble.

The problem with this of course is that whatever image you try to upload will terrorize the page layout unless it's exactly 200px x 262px like all of the others. The easy fix for this is to use Pixlr to edit the photos and to use the crop tool provided. On Pixlr their crop tool has an "Output Size" feature which will shrink your selection and crop to whatever size you desire. This is very helpful when it comes to tiny sizes! You won't lose a ton of image quality this way either since you're not shrinking the image multiple times beforehand. Since it's online too Pixlr is a fantastic resource!

Before pushing everything onto Github both absolute and relative links seemed to work, but now it appears that only absolute links will work, even when files are uploaded (excluding .html files). The backwards solution for this is to just open up the files in github and copy the image URLs, which takes a bit more work but will ensure that the code doesn't break.