I've finally updated my main webpage at taesup.com
So first off, using Bootstrap allowed me to create a consistent viewing experience through the page. The structure of the webpage is also consistent and I really did less work to make it look a lot better. This says two things. 1.) I stink at HTML/CSS/JS without a framework to work in. 2.) Bootstrap really does make everything A LOT easier. It made rounded corners, buttons and a few other things a lot easier and prettier.
I also used jQuery for all the transitions. This includes clicking on the main buttons and making the correct content fade in or fade out. I wanted to move away from jQuery and use CSS3 transitions to give a really cool sliding feature when switching between pages but it still doesn't have really good support across all broswers... cough microsoft sucks cough so I decided to forego that.
I also use highslide.js to handle images in the gallery so the user is never sent away from the viewing experience of the webpage. I've known about this handy little script for a while but never had a really good use for it until now.
It was interesting working with Bootstrap because I ended up ripping out all my old HTML and CSS to get Bootstrap to work properly. This really goes to show how little I really understand how to write GUI code that can take in all conditions. A lot of times it would look good on my monitor but didn't really work out well on a phone or even on a different size monitor until I fully transitioned into Bootstrap. Also Bootstrap has a responsive design option that's easily turned on which allowed me to keep how my webpage looked with having to created another set of CSS files that would handle different size viewports. It really impressed me.
Lastly, I used http://dfcb.github.com/Responsivator/?site=taesup.com to view my webpage on different size viewports to really tie down the whole responsive design thing. It was an invaluable tool. I know there are others out there but this one is fully open source and the one I had on hand.
So the fun featuers. The first and the most eye catching is the background image that's also static. I had to mess around and learn the z-index implementation to get this to work. Basically I have a div that takes up the whole viewport and is set at z-index 1. The rest of the content are at higher z-indices. Inside that div, is just a simple gif image that also has it's width and height set to 100%.
Tied to the static background image is the ability to change the background image based on a button set on the top right. I used Bootstrap's dropdown buttons to really get this to flow. Otherwise, I would have to use the regular HTML dropdown that's ugly and would not have flown with the page. Clicking on an option just goes into that full screen z-index at 1 div and changes the image there to another one. Simple.
Other than the background image. I tried to build the page so that the webpage didn't require much scrolling. Most of this had to do with having sparse content but separating things into discrete pieces of content made creating a scroll-less page a lot easier. For example, on a desktop screen the project's area is split into four different areas, one for each project. This allows the user to choose what to view from a simple sidebar area with out scrolling. I also tried something different with the About Me are by spliting the content into different areas.
The Gallery is really the only other holdover from the old page design. Instead of going to another page, I've moved all the content into the one page and used jQuery to hide/view it. At the same time, I got rid of that horrible background and tried to make it look like they were floating above the background. That's about it.
Enjoy. I had fun making it.