I've finally updated my main webpage at taesup.com
So originally I built it without using any frameworks or tools at all. Well that's a lie. I did use jQuery for hiding and viewing a few divs. But I didn't really like how it looked and it didn't really work on phones. Since then I've added Twitter Bootstrap and a few other JavaScript tools to get some pretty amazing ideas and features.
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.
The last thing to do with the background image is the ability to remove all the content and just appreciate the image at full screen. This is the "View" button on the far right. Since there's one div for the background image set at z-index 1 and all the other content is actually in just one div at z-index 2. All I really have to do in display: hide that second div. Of course I need some way to bring it all back. I decided the best way to do this would be to simply handle the ESC key using JavaScript. Of course, I also need something to tell the user that the ESC key will bring the content back (that's also what the div that handles bring the content back is called, "bringTheContentBack"). So I used Bootstrap's alert message box to bring about that effect. It basically fades in when the content fades out and alerts the user that pressing the ESC key will bring the content back. At the same time, you can actually close that alert box as well. Giving you a full view of the image at full screen with no distractions.
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.