JeremyBlum.com

v3.0

JeremyBlum.com v3.0

JeremyBlum.com v3.0

Inception: A Website in a Website

A Revolution in Blum Information Technology

Ok, so that might be a bit of an overstatement, but you’ve gotta admit that this new design is pretty snazzy! This is the 3rd complete overhaul of my website styling, and I think this one finally captures the content of my site perfectly. V3 adds an extensive new portfolio section, which should make it easier to track down all the projects I’ve worked on and find the related info more easily. I’ve also assembled a new front page. Previously, my blog was the home page, but that can be confusing for first-time visitors. The new home page includes a large snippet of the most recent post from my blog and three smaller excerpts from recent blog posts. In the right column, there’s a short bio, a link to a random portfolio project, and a live stream of my tweets.

The Geekiest Header Ever?

Any new visitors to the site will probably realize right away that this website belongs to an uber geek. The header is a functional circuit board that I created in eagleCad and rendered using POV-Ray. Using some fancy javascript, I’ve even made the header interactive, allowing you to push the buttons to navigate between pages (although you can also use the text links above the header). An LED lights up depending on your current page, and the page titles are displayed in the 16×2 LCD display. Powering this “circuit” is an Atmel Atmega microprocessor. If fabricated and programmed, this circuit would work and function as shown in the header. The silk-screened images link to my profiles on various social media services. Note: the power supply and decoupling caps are hidden behind the content of the website.

 

It gets better! Like most of my projects, my header is open source hardware. A click on the open source hardware logo displayed on the board will take you to a github repository, where you can download the schematic and board files.

Mobile Versions & Personal Rebranding

In addition to relaunching the desktop version of my site, version 3.0 also introduced a redesigned mobile and iPad version of the site (read more about them in this blog post). These mobile versions load faster and make it easier to read my content on smaller screens. What’s more, I’ve used my website redesign as an opportunity to completely re-brand myself. Green and white is now my color scheme of choice – my redesigned youtube channel is another good example. I’ve also printed all new business cards with QR codes that send the recipient to a mobile page where they can automatically download my contact info, or browse my mobile site.

Thanks are in Order

I depended on several open source projects to make this website possible; thanks to the developers of all of them!

  • WordPress: The back-end that powers the site. I built a template, custom pages, etc, on top of wordpress.
  • Yoko WordPress Theme: The custom theme that I developed for this site is based on Yoko.
  • Eagle3D: The script that I used to export my eagle header designed into a file that could be rendered by POV-Ray.
  • POV-Ray: The rendering engine that I used to develop a 3D model for my website header.
  • ChromiteBlue: The developer responsible designing an LCD display for use with eagle3D. I used a modified version of this part in my header design.