The newest revision to my personal launch page. kris.nelson is the portal-like view into all the areas my browser and code editor have played in over the last few years.
About This Site
The original version of this site was also a one-pager, but it was a flashy, javascripty, and animated set of code. It was interactive and fun to put together (initially), but it fell stale, didn’t look very impressive, and well, grew tiresome. Plus, it didn’t true satisfy my primary goal for the site: to be the “single view roadmap” of my online interactions and creations.
This new version is completely static, but it better serves that one goal. Instead of having to interact and click through arrows to see different parts of my online footprint, it’s all there, in a much more beautiful design (relative to the older one, anyway). It kind of has that presentation slide feel to it, which in this case I really don’t mind. It also better illustrates where my interests are separated as far as my website work goes. Maui is obviously “No Ka Oi” in my world, and the rest just fell into their own places.
Behind the Browser
Aside from being a more cleaner design, it’s also more modern, too. Although there is no flashy JavaScript or jQuery to speak of, all the markup is of the newer HTML5 variety. Nothing really with CSS3 yet, but that can always change in the future, too. And by following the new schematic approach recommended with the new markup elements in HTML5, the hierarchy of content structures in the page make it perfectly viewable without a stylesheet. Kinda proud about that one, considering how customized the final version of the page looks.
Along those lines, the static nature of this site allowed me to focus a little more on optimization from a code perspective. In fact, the entire page only consists of four files (plus one include file).
- HTML page – obviously, the markup of the page itself.
- Sprite image file – all the graphics (minus the background image) are saved in a single PNG file and worked into the page via CSS.
- Background image – the only other image file for the site. It’s only a 20×20 pixel GIF file.
- CSS stylesheet – lastly the CSS stylesheet that pulls it altogether. Less than 100 lines of code, but it certainly could be minimized more.
The only other code to speak of (for those checking with View Source in your browser) is the HTML5 Shiv from Remy Sharp that makes the naughty IE browser think it’s cool enough to know what HTML5 tags are.
And really, that’s all there is. No CMS, no PHP or JavaScript to speak of. Just a simple, clean design that looks nice, that works across all major browsers and even works well on some of the mobile browsers I’ve tested. How cool is that?
The Design Elements
The color scheme and page layout are originals after sketching out a few designs on paper. The colors are loosely mapped to the designs of the sites they represent (I said loosely, which means mostly in my head). Some of the artwork might look familiar from some of my other sites and logos. Here’s the dish on those.
- Section Logos – I have grown rather fond of the image sets created by IMgenDesign and are sold on iStockphoto. Been using their work for close to two years now.
- Social Icons – These guys are available from Arbenting Freebies and can be downloaded here. The set covers most of what one would need and in a few different sizes, too. I made the extra step of throwing them into a single sprite file for my use here.
- Background Image – the background image/pattern was actually the last thing I considered adding, so I needed something that wouldn’t overpower the subtle color differences in the page content itself. Took me about 20 minutes of browsing sets online, but I found the one I liked from Kollermedia.at in this set.
So that’s how a pure coder like myself, with a limited amount of artistic talent when not holding a camera, can shell out a few bucks at iStockphoto and put something pleasing together that doesn’t look as hideous as my own original creations did 10 years ago. 🙂
Room to Expand
Finally, or not finally, the content on the site has a little room to grow, too. I don’t foresee adding another column at any point (4 would be the max anyway), but filling out more details and projects as they are completed and deemed noteworthy. Those would include additional mobile apps, getting back to finishing a few WordPress plugins, and things like that.
Because really, the tagline for this site is “my life online”, but it actually should read like “my life online…so far”.
Related Sites
- webnelly.com – My official development portfolio and blog
