Resonance

3 May 2011 • 11:36am

"Resonance" reflects more of my personality. It refers to a concept in chemistry in which carbon atoms share electrons along bonds in the p orbital to increase the stability of the overall molecule. As the carbon atoms strive for harmony amongst its chemical bonds, so too do I strive for such harmony with human bonds.

Whoa man, deep. :)

This current version, 13, was put together early 2011 while I had some spare moments in business school. It now runs on Pressflow, based on Drupal 6.x, an open-source content management system that runs on Linux, Apache, MySQL, and PHP. The theme is a customization of Boron (an HTML5 framework) and Less Framework, a flexible CSS framework that uses media queries for mobile, tablet, and large-screen tablets. I tested the website on iPhone and Android's stock browsers. CSS3 was used for special effects, like drop-shadows, animations, and rotations, but styles degrade gracefully onto Internet Explorer 7. I also now use a bunch of contrib modules, including imagecache_profiles, imagecache_ui, imagefield, jquery_update, math_captcha, nodereference, optionwidgets, text, token, views, views_ui, advanced_help, dblog, image_captcha, imce, token_actions, trigger, update, pngfix, sections, stringoverrides, filefield, recaptcha, transliteration, comment_notify, nodereference_url, vertical_tabs, views_attach, views_bulk_operations, boron, rubik, resonance, ctools, admin, bueditor, markdown, markdowneditor, typogrify, feeds, feeds_news, feeds_ui, job_scheduler, imagecrop, and jquery_ui.

(Originally posted 2005-10-29 14:14:40 -0800)

The Evolution of Resonance

Version 1 (1996)

Sprite's Aquarium had been the name of my personal website since 1996 up to 2005. This was my first homepage. I used frames at the time, automatically-playing music, and broke every web design rule in existence. Give me some credit though: at least I didn't have dancing hamsters or neon-pink backgrounds. This page was last used in 8 January 1997.

Version 2 (1997)

My first foray into table-based layouts involved a unified navigation bar on the side and ... oh, who am I kidding. And who cares about form and function? Give me those animated GIFs! Still anachronistic Web 1.0 chicken scratch. Last used 3 June 1997.

Version 3 (1997)

Last used 20 December 1997.

Version 4 (1998)

Fourth time around, I added some graphics with a strictly black-and-white color scheme. Wonderfully mirrors the old CNN Interactive design. Last used 14 August 1998.

Version 5 (1999)

My interests in anime began around this time, and I meticulously picked apart the layout from EX online zine to achieve a complex table-based layout on my own. Decommissioned 22 October 1999.

Version 6 (2000)

Taken offline on 5 September 2000. My aim was to divide my interests onto the right-hand side of the page, and provide a central image art to draw in visitors. At the time, my artistic skills were still developing.

Version 7 (2001)

This was the first time I used a solid, real WYSIWYG editor; for all previous versions, I had been using Notepad or text editing derivatives. I used Macromedia Dreamweaver 4 trial to make Aquarium 7. It was more personable and organized my information much more effectively, but the pages began to be cluttered with extraneous writing and overly descriptive paragraphs. Navigation could also have been improved. And I used mystery meat icons! Web design sins, all of them.

Version 8 (2001)

This website was released right before my first semester at UC Berkeley started. It was the first time I had an official blog set-up. I continued using Dreamweaver. Used through 2002.

Version 9 (2002)

Over the summer, I had the grand idea of automating my website with PHP scripts and making my own content-management system from scratch. Though it was a wonderful experience, my lack of software engineering know-how at the time made it difficult to maintain the website's code-base. I now know better. I also switched back to hand-editing my code. Used through 2003.

Version 10 (2003)

I employed a much more minimalist design, aiming to use entirely CSS and standards compliance. I took out much of the verbiage from previous designs and simply let my work speak for itself. The PHP scripts simply extracted data from database records. My graphic design, even as an amateur hobby, has certainly become more mature (after ten versions, one should hope so!). Used through fall 2005.

Version 11 (2005)

Technical details: The current form of the website has a custom theme developed with XHTML and CSS, tested in Internet Explorer for Windows, Safari, Opera, and Firefox. To make the site quick-loading on slow connections, I made sure not to use too many graphics (under 50 kb). The back-end ran on PHP and MySQL using a customized version of the open-source Drupal content management system (version 4.7) with the blog, image, flexinode, front_page, customerror, and webform modules. To unify the pages, a consistent interface had been used with strong branding in the top-left corner. Each section had its own color scheme to give the user indication as to their location in the website. The front page took the most work to give the user a value proposition (a sense of what the website can offer them), and to give it a more human feel with a photograph of an actual person. To prioritize information, the most important section of the website (the body) had a white background and clear contrast to draw the viewer's eye, wrapped with the title of the content. The surrounding navigation bars have less contrast to de-emphasize its importance.

Version 12 (2008)

In 2008, I upgraded the software to Drupal version 6, running these contrib modules: advanced_help, captcha, captcha_pack, cck, custom_breadcrumbs, date, ed_readmore, fckeditor, freelinking, image, imce, link, pathauto, pngfix, sections, stringoverrides, token, views, zen. I made some moderate customizations of the Zen theme.