My Work!
Antioch Volunteer Fire Dept.
I did a total redesign of the site, complete with new graphics done in Photoshop and Illustrator.
I got rid of the table based layout and replaced it with XHTML & CSS, integrated a Google calendar
so that the client can make changes and updates at any time without having to rely on me updating
the html for them. JQuery handles validation on the application as well as the photo gallery.
Click the image for a screen shot
A.V.F.D. Redesign #2
We recently moved the A.V.F.D. site to a new hosting provider, and during the move I redesigned the
site once again.
This time I built a custom designed WordPress template so that they could easily add news posts to keep
the community updated with news and events. The events list on the main page utilizes the Google api to pull items out of the
calendar and the sidebar navigation uses CSS3 pseudoselectors for the hilighting.
Click the image for a screen shot or visit the site for a more in depth look.
360 degree Rotation using jQuery
I created a 3 dimensional globe using Photoshop CS4 Extended and added a bump map
Texture to it in order to give the mountain ranges some depth. Next I roatated the globe 10 degrees and duplicated
this layer and repeated the process to give me a total of 36 frames and one full rotation. Finally, I added a pattern
overlay on each of the layers and decreased the size of the overlay by one percent per layer to give the clouds
the appearence that they were moving as well.
I then used some jQuery magic to rotate the image.
If you click and drag the globe will rotate in the direction you drag the mouse.
As you drag farther away from the globe it wil spin faster until you move the mouse outside of the window.
Starry Night
I decided to do a little bit of tinkering with the CSS3 alpha channel support. You can use the notation:
background-color: rgba(255,255,255,0.5); to lower the opacity of an element, or
background-color: rgba(255,255,255), opacity:(0.5); to set the opacity of an element and all of its child elements.
This of course does not work in Internet Explorer 8 and below.
Click the image for a screen shot or click the link to see it in action.
View Template
Swirly
Portfolio Design Concept
Click the image for a screen shot or click the link to see it in action.
View Template
Scrolly-poly
Portfolio Design Concept
Building on a previous experiment, I created a background that was one big multicolore gradient. Using javascript, I just animated the background position on a loop to give a subtle color changing effect.
The menu is also animated using javascript in an attempt to mimic the Mac interface.
View Template
Billboard
I used absolute positioned background images, and jQuery to animate the margin of the slices in order to create the rotation effect.
Sure there are a myriad of sliders out there that would have achieved the same thing, but none that would give the effect of the
rotaing slices on a mechanical billboard that I wanted to get.
The menu also slides up and down through the use of jQuery.
This particular design almost became the main page for my site but I felt that it did not leave enough
"wiggle room" to provide the proper amount of information required for the main page.
Rotating and zooming boxes
jQuery intercepts the click event on the smaller blocks and removes the current CSS styling and applies the target styling, and then CSS3 transitions handles the easing from one state to the next.
The hover effect on the smaller blocks comes from the pseudo-selector, using box shadow CSS3 styling. The h1 text effect is achieved with text-shadow. Sadly, even though the page itself will work correctly, you will need a webkit browser like Google Chrome or Firefox 3.7 to see all off the goodness.
Sorry Internet Exploder you're not invited.