Personal Technology

Homepage Update

I’ve spent the last couple of weeks monkeying with different looks and feels for a homepage update. For a long while, I’ve had my homepage set as a lifestream, running SweetCron, but decided awhile back that with my tenure dossier coming due that I would like to rework it into something more polished. Also, the lifestream presented me as what I’m doing, and didn’t adequately represent either what I’ve done, nor what I’d like to do in the future.

So: redesign!

I wanted something clean, without a ton of design overhead, but also something that was flexible enough to take whatever I thought to throw at it. I also decided that I wanted to try using a pre-existing framework, specifically as CSS framework, and then tweak it to my needs. After looking around a bit, I decided to use Blueprint, a lovely CSS framework that allowed me to not worry about positioning, other than to figure out how Blueprint does it. Blueprint is extensible, and I wanted tabs, so off I went to the Blueprint Tab plugin.

The basic icons for my “social” tab were found here, and I took the look/feel and created a handful that they didn’t have using Photoshop. I also created the “rollover” images for everything using photoshop, and am using a clever little javascript simpleswap to handle that bit. I also had to install jquery for the first time, for the tab fade effect.

Other tools used in putting this together include: and slideshare for the presentations and videos, scribd for my CV, FriendFeed for my Lifestream, and Meebo and Google Voice for the Contact page.

After getting all the pieces in place, it took some time to work out the bugs. My wife convinced me to stick with the black/green scheme that I’ve been using for years…I’ve used it since graduate school, and I like it because it reminds me of the good old days with the green phosphor CRT terminals.

See what you think, and I’d love to have any feedback, especially if it’s broken in some way. 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *