Assignment 4

The three main things in this assignment (login page, registration page, and contact page) are all things that I don't actually need on this website. Therefore, they may only be accessed through these links, for demonstration purposes:

Log In Register Contact Me

Use the links to the left to go to the full pages associated with this assignment.

Or, use the buttons down below to view the source code for the files that help beautify the site.

The Process

The main point of this assignment was to create a cohesive look for my website. I have been developping the final style you see right now for about a month as it is, and I'm still not 100% happy with how some of the elements perform. I've mostly gone for a floaty, bubbly, yet refined look for my site. I find that the floating boxes and buttons look professional, but not too edgy or harsh. I've used my favourite shade of blue as an accent colour, with a slightly reduced gray-tone on the background to make the site slightly easier on the eyes.

The largest design feature of this page is the sliding animation that plays when links to other pages on the site are clicked. This works by using JavaScript to change CSS properties of the main elements of the page. When the pages load, a special function sets link listeners on every link that points to a page on this site. That way, the animations won't be set to trigger on links that point to other addresses. This also means that the links will work when JavaScript is disabled.

Although, JavaScript probably shouldn't be disabled on this site. This site uses JQuery to load headers and footers into place, as well as control certain elements of the page with buttons (such as which source code is in the window below!).

I also had to convert my resume into a web-page. It can be viewed either from my Portfolio page (which I luckily already had in place), or here.

View Source Code

HTML

JavaScript

CSS