From 240257f67db767ef11e239e733b73b9340a977ed Mon Sep 17 00:00:00 2001 From: Caolan McMahon Date: Wed, 15 Feb 2012 11:02:37 -0800 Subject: [PATCH] preload project images, fade out between page transitions and early update of navigation selection --- lib/events.js | 32 ++++++- static/style.css | 10 ++ templates/about.html | 196 ++++++++++++++++++++------------------- templates/blogpost.html | 2 + templates/blogposts.html | 36 +++---- 5 files changed, 160 insertions(+), 116 deletions(-) diff --git a/lib/events.js b/lib/events.js index cd26afc..c940e49 100644 --- a/lib/events.js +++ b/lib/events.js @@ -1,15 +1,43 @@ var events = require('duality/events'), + dutils = require('duality/utils'), utils = require('./utils'); +function preload(url) { + var img = new Image(); + img.src = url; + return img; +} + events.on('init', function () { // preload avatar for about page - var avatar_image = new Image(); var md5 = 'c911321821c4d7bd1b9bbadf91aa6f2e'; - avatar_image.src = "http://www.gravatar.com/avatar/" + md5 + "?size=92"; + preload("http://www.gravatar.com/avatar/" + md5 + "?size=92"); + + // preload project images + var baseURL = dutils.getBaseURL(); + preload(baseURL + "/static/kan.so.png"); + preload(baseURL + "/static/medicmobile.png"); + preload(baseURL + "/static/northwest.png"); + preload(baseURL + "/static/githubprofile.png"); }); events.on('afterResponse', function (info, req, res) { utils.highlightPage(); utils.disqus_num_replies(); }); + +events.on('beforeResource', function (info, req) { + if (!req.initial_hit) { + if (req.type === 'show' && req.name === 'about') { + $('#navigation li').removeClass('selected'); + $('#nav_about').addClass('selected'); + } + else { + $('#navigation li').removeClass('selected'); + $('#nav_blog').addClass('selected'); + } + //$('#main').css({visibility: 'hidden'}); + $('#main').css({opacity: 0}); + } +}); diff --git a/static/style.css b/static/style.css index b1953ad..2d4b70e 100644 --- a/static/style.css +++ b/static/style.css @@ -358,3 +358,13 @@ ul.blogposts li .meta .extra { #disqus_thread h3 { font-family: 'Lucida Grande', 'Lucida Sans Unicode', verdana, geneva, sans-serif; } + + +#main { + opacity: 1; + -webkit-transition: opacity .25s linear; + -moz-transition: opacity .25s linear; + -o-transition: opacity .25s linear; + -ms-transition: opacity .25s linear; + transition: opacity .25s linear; +} diff --git a/templates/about.html b/templates/about.html index fa0727a..71839c4 100644 --- a/templates/about.html +++ b/templates/about.html @@ -1,108 +1,110 @@ {{{include "navigation.html"}}} -
- -
-
- - Me +
+
+ +
+
+ + Me +
+
+

Hello!

+

+ I'm a British software developer based in + Vancouver, BC. + I specialise in decentralised systems using + CouchApps. I also maintain a number + of open-source projects including + Nodeunit, + Async and + Kanso. +

+
-
-

Hello!

-

- I'm a British software developer based in - Vancouver, BC. - I specialise in decentralised systems using - CouchApps. I also maintain a number - of open-source projects including - Nodeunit, - Async and - Kanso. -

+
+
+

+ You can get in touch with me via + Twitter or on + GitHub. + You can also email me at firstname dot lastname at gmail dot com. +

+
-
-
-
-

- You can get in touch with me via - Twitter or on - GitHub. - You can also email me at firstname dot lastname at gmail dot com. -

-
-
-
-
- - - +
+
+ + + +
+
+

Kanso

+

+ I'm the creator of Kanso, a developer platform for writing CouchApps. + It includes advanced build-tools and encourages people to share code and + applications. For me, this is all about user sovereignty and data ownership. +

+
-
-

Kanso

-

- I'm the creator of Kanso, a developer platform for writing CouchApps. - It includes advanced build-tools and encourages people to share code and - applications. For me, this is all about user sovereignty and data ownership. -

+
+
+ + + +
+
+

Medic Mobile

+

+ I also work with Medic Mobile, a nonprofit organisation using open-source + to create connected, coordinated health systems in the developing world. + Medic Mobile have found a natural fit with Kanso and helped nurture the + project from an early stage. +

+
-
-
-
- - - -
-
-

Medic Mobile

-

- I also work with Medic Mobile, a nonprofit organisation using open-source - to create connected, coordinated health systems in the developing world. - Medic Mobile have found a natural fit with Kanso and helped nurture the - project from an early stage. -

+
+
+ + + +
+
+

North-West Territories

+

+ Kanso has also found a natural home among remote communities in the North. + Collaborating with First Nations and the Government we've worked on projects + to overcome unreliable and slow connections in order to make the most of + traditional knowledge. +

+
-
-
-
- - - +
+
+ + + +
+
+

Node.js

+

+ Alongside my work on Kanso and projects wishing to implement decentralised + systems, I also maintain a number of other open-source libraries including + some well-known Node.js modules. Perhaps the most popular being + Async and + Nodeunit. +

+
-
-

North-West Territories

-

- Kanso has also found a natural home among remote communities in the North. - Collaborating with First Nations and the Government we've worked on projects - to overcome unreliable and slow connections in order to make the most of - traditional knowledge. -

-
-
-
-
- - - -
-
-

Node.js

-

- Alongside my work on Kanso and projects wishing to implement decentralised - systems, I also maintain a number of other open-source libraries including - some well-known Node.js modules. Perhaps the most popular being - Async and - Nodeunit. -

-
-
-
-
-

- Find out more on GitHub -

+
+
+

+ Find out more on GitHub +

+
diff --git a/templates/blogpost.html b/templates/blogpost.html index 1914347..c57da6d 100644 --- a/templates/blogpost.html +++ b/templates/blogpost.html @@ -1,5 +1,6 @@ {{{include "navigation.html"}}} +
{{#with doc}}

{{title}}

@@ -39,3 +40,4 @@

{{title}}

{{/with}} +
diff --git a/templates/blogposts.html b/templates/blogposts.html index d342af0..ad1bafc 100644 --- a/templates/blogposts.html +++ b/templates/blogposts.html @@ -1,21 +1,23 @@ {{{include "navigation.html"}}} -

Caolan McMahon

+
+

Caolan McMahon

- + {{{intro_html}}} +

Read more...

+ + {{/with}} + {{/each}} + +