Since the day I launched this blog, I basically stopped thinking about my name-sake page, aarontgrogg.com. I converted it to a portal page, just linking out to the various locations you can find information about me on the web, and basically forgot about it.
Well, recently I decided that the site should become my laboratory, a place where I could test advanced CSS and JS, try new things, etc.
And so, I present to you, the new & improved aarontgrogg.com!
The site is HTML5, using the IE Shiv for IE via a conditional comment, uses a healthy does of CSS3, is littered with Microformats, and uses a little dab of jQuery for the “fancy navigation”.
As the Intro section states, my goal is to push the envelope, but not break any browsers, not even our old friend IE6. Everything should work just fine across all modern browsers, but should degrade gracefully where feature support is missing.
For instance, the site really looks best, not surprisingly, in the Safari 4. Safari 4 handles all of the advanced features I’m using, including border radius (border-radius), drop shadows (box-shadow and text-shadow), background transparency (rgba), background gradient colors (-webkit-gradient) transitions (-webkit-transition), and transforms (-webkit-transform). While none of these features are supported in older versions of IE, the page still looks just fine, it just doesn’t have the fades and rotations that it has in Safari.
I also fetch the pic of me from my Facebook profile via Facebook Connect (which was the hardest implementation on the page, mostly because their documentation is, ironically, terribly disconnected)…
I still have other features I plan to add, but need to take a break from a weekend of hunching over my laptop… :-)
Would love to hear what you think, good, bad, or otherwise,
Atg
PS: Here are a few resources/inspirations: