Behind the Scenes
This website has been programmed entirely with TextMate on a late 2009 Macbook. I used HTML5 for the audio/video elements and for the semantic tags
and CSS3 for animations, rounded corners, shadows, etc. jQuery is used to achieve the cool parallax scrolling of the background and pictures, and to
handle the navigation menu there on the right.
For faster developing and a less cluttered HTML i used Sass as my stylesheet language. The style.css you are seeing is generated from
this sass file. I also like to use guard livereload to keep an eye on what i'm doing without constantly hitting cmd+tab, cmd+R, cmd+tab to reload my browser.
Also, i used CoffeeScript to generate avoid the syntactical eye-bleeding of Javascript. If you are interested you can see the source .coffee file.
I hate the (Java|Coffee)script typecasting, i keep concateneting strings instead of adding numbers :(
I'm not sure i like using a table to display each of the subsections. While it *is* conceptually a table, i really don't like how you can't easily express
the semantics of the rows and columns. It was a good experiment, but I plan to change it to a list soon. Update: Heck, it was so ugly that it did not even pass the initial testing phase.
Is there still any decent way to use tables in html?
The parallax scrolling of the pictures and background is a rework of the Nike Better World website.
I found this SmashingMagazine a useful source to get a basic idea of the underlying concept.
Also, this article on color theory has been a great inspiration for all my works,
and helped me choosing the color to use here. Since in iOS Safari Mobile the window scrolling event is fired only when the finger is lifted, the effect was really ugly. I disabled the whole parallax thing in Safari Mobile using
the navigator.platform variable in Javascript. For now.
Also, the navigation is position:fixed, so it does not work in iOS4. Not a big deal, i'll just wait for iOS5 to support it, since i don't really like the
the javascript alternatives.
My main résumé is written in LaTeX (the source can be found on github). After
the first section of copy/pasting LaTeX into HTML i realized it was extremely boring and it scaled really bad with updates, so
i wrote a simple regular-expression-based script in Ruby to convert portions of my LaTeX résumé model into HTML structures.
I put the code in a TextMate bundle command for faster access. Update: and to get rid of tables, i did it again.
I experimented with a canvas element for the footer, but i ultimately dropped it for the sake of simplicity and cross-browser compatibility.
Speaking of cross-browser compatibility, the website use css media queries to serve a smartphone-specific css to make the mobile experience more
pleasant.