If you happen to look around my site occasionally, you may have noticed that it looks very different now from what it looked like a few days before this post. That's what this post is about.
Before, there was a sidebar on the left, and the content on the right. The background was just black for the sidebar and white for the content. The styling was minimal, and yet still managed to break repeatedly.
This change came about when I updated to SeleniumTelluride 2. SeTe2 is not backwards-compatible with SeTe1; the codebase was rewritten from the ground up, so I decided that its flagship site (my website) should be as well. I decided to go all-out; I spent weeks after school looking up methods of creating a good-looking website, and also finding examples of what I considered good websites and figuring out what I liked and how to apply it. This is the result.
I have to say, this hasn't been a quick process, but I consider it well worth it. Looking at the old site (which is the live one at the time of this writing) and this new one (viewed on a local webserver, courtesy of SeTe2), this design is astronomically better than the old.
A few things about this site that I'm especially proud of, or are generally worth noting:
- The background image scrolls with you as you move the page. This page seems to be just the right length to showcase this effect, which I call parallax, because the background seems to move as the window moves down the page.
- Intra-page links (with
#in the link) scroll smoothly rather than instantaneously jumping. Also, when scrolling up to a link, the window will scroll 75px more than it would by default so that the header doesn't get in the way. (This point also plays well with the scrolling background image effect.)
- The majority of the site's styling is written in Less, a precompiled form of CSS. SeTe2 recently got an update that allows it to automatically process
.lessfiles into their
.cssequivalents. Less has many benefits over CSS, so being able to write in Less is a massive help.
<attr>tags and the SeTe2 variables.