Skip to content

Commit

Permalink
preload project images, fade out between page transitions and early u…
Browse files Browse the repository at this point in the history 
…pdate of navigation selection
  • Loading branch information
Caolan McMahon committed Feb 15, 2012
1 parent ed1b12f commit 240257f
Show file tree
Hide file tree
Showing 5 changed files with 160 additions and 116 deletions.
32 changes: 30 additions & 2 deletions lib/events.js
View file
@@ -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});
}
});
10 changes: 10 additions & 0 deletions static/style.css
View file
Expand Up @@ -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;
}
196 changes: 99 additions & 97 deletions templates/about.html
View file
@@ -1,108 +1,110 @@
{{{include "navigation.html"}}}

<div id="about">
<!--
<h1>Ay-up</h1>
<h1>Ow-do</h1>
-->
<div class="row">
<div class="span4">
<!-- Note: this image is pre-loaded in base.html template, changes to src should be made there too -->
<img class="paper" id="avatar" alt="Me" src="http://www.gravatar.com/avatar/c911321821c4d7bd1b9bbadf91aa6f2e?size=160" />
<div id="main">
<div id="about">
<!--
<h1>Ay-up</h1>
<h1>Ow-do</h1>
-->
<div class="row">
<div class="span4">
<!-- Note: this image is pre-loaded in base.html template, changes to src should be made there too -->
<img class="paper" id="avatar" alt="Me" src="http://www.gravatar.com/avatar/c911321821c4d7bd1b9bbadf91aa6f2e?size=160" />
</div>
<div class="span6 aboutme">
<h1>Hello!</h1>
<p>
I'm a British software developer based in
<a href="http://maps.google.com/maps?q=Vancouver+BC&hnear=Vancouver,+Greater+Vancouver+Regional+District,+British+Columbia,+Canada&t=h&z=5">Vancouver, BC</a>.
I specialise in decentralised systems using
<a href="http://kan.so">CouchApps</a>. I also maintain a number
of open-source projects including
<a href="https://github.com/caolan/nodeunit">Nodeunit</a>,
<a href="https://github.com/caolan/async">Async</a> and
<a href="http://kan.so">Kanso</a>.
</p>
</div>
</div>
<div class="span6 aboutme">
<h1>Hello!</h1>
<p>
I'm a British software developer based in
<a href="http://maps.google.com/maps?q=Vancouver+BC&hnear=Vancouver,+Greater+Vancouver+Regional+District,+British+Columbia,+Canada&t=h&z=5">Vancouver, BC</a>.
I specialise in decentralised systems using
<a href="http://kan.so">CouchApps</a>. I also maintain a number
of open-source projects including
<a href="https://github.com/caolan/nodeunit">Nodeunit</a>,
<a href="https://github.com/caolan/async">Async</a> and
<a href="http://kan.so">Kanso</a>.
</p>
<div class="row contact">
<div class="span10">
<p>
You can get in touch with me via
<a href="http://twitter.com/caolan">Twitter</a> or on
<a href="https://github.com/caolan">GitHub</a>.
You can also email me at firstname dot lastname at gmail dot com.
</p>
</div>
</div>
</div>
<div class="row contact">
<div class="span10">
<p>
You can get in touch with me via
<a href="http://twitter.com/caolan">Twitter</a> or on
<a href="https://github.com/caolan">GitHub</a>.
You can also email me at firstname dot lastname at gmail dot com.
</p>
</div>
</div>
<div class="row project">
<div class="span4">
<a href="http://kan.so">
<img class="paper" src="{{baseURL}}/static/kan.so.png" />
</a>
<div class="row project">
<div class="span4">
<a href="http://kan.so">
<img class="paper" src="{{baseURL}}/static/kan.so.png" />
</a>
</div>
<div class="span6">
<h2><a href="http://kan.so">Kanso</a></h2>
<p>
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.
</p>
</div>
</div>
<div class="span6">
<h2><a href="http://kan.so">Kanso</a></h2>
<p>
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.
</p>
<div class="row project">
<div class="span4">
<a href="http://medicmobile.org">
<img class="paper" src="{{baseURL}}/static/medicmobile.png" />
</a>
</div>
<div class="span6">
<h2><a href="http://medicmobile.org">Medic Mobile</a></h2>
<p>
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.
</p>
</div>
</div>
</div>
<div class="row project">
<div class="span4">
<a href="http://medicmobile.org">
<img class="paper" src="{{baseURL}}/static/medicmobile.png" />
</a>
</div>
<div class="span6">
<h2><a href="http://medicmobile.org">Medic Mobile</a></h2>
<p>
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.
</p>
<div class="row project">
<div class="span4">
<a href="http://en.wikipedia.org/wiki/Northwest_Territories">
<img class="paper" src="{{baseURL}}/static/northwest.png" />
</a>
</div>
<div class="span6">
<h2><a href="http://en.wikipedia.org/wiki/Northwest_Territories">North-West Territories</a></h2>
<p>
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.
</p>
</div>
</div>
</div>
<div class="row project">
<div class="span4">
<a href="http://en.wikipedia.org/wiki/Northwest_Territories">
<img class="paper" src="{{baseURL}}/static/northwest.png" />
</a>
<div class="row project">
<div class="span4">
<a href="https://github.com/caolan">
<img class="paper" src="{{baseURL}}/static/githubprofile.png" />
</a>
</div>
<div class="span6">
<h2><a href="http://github.com/caolan">Node.js</a></h2>
<p>
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
<a href="https://github.com/caolan/async">Async</a> and
<a href="https://github.com/caolan/nodeunit">Nodeunit</a>.
</p>
</div>
</div>
<div class="span6">
<h2><a href="http://en.wikipedia.org/wiki/Northwest_Territories">North-West Territories</a></h2>
<p>
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.
</p>
</div>
</div>
<div class="row project">
<div class="span4">
<a href="https://github.com/caolan">
<img class="paper" src="{{baseURL}}/static/githubprofile.png" />
</a>
</div>
<div class="span6">
<h2><a href="http://github.com/caolan">Node.js</a></h2>
<p>
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
<a href="https://github.com/caolan/async">Async</a> and
<a href="https://github.com/caolan/nodeunit">Nodeunit</a>.
</p>
</div>
</div>
<div class="row findoutmore">
<div class="span10">
<p>
Find out more on <a href="https://github.com/caolan">GitHub</a>
</p>
<div class="row findoutmore">
<div class="span10">
<p>
Find out more on <a href="https://github.com/caolan">GitHub</a>
</p>
</div>
</div>
</div>
</div>
2 changes: 2 additions & 0 deletions templates/blogpost.html
View file
@@ -1,5 +1,6 @@
{{{include "navigation.html"}}}

<div id="main">
{{#with doc}}
<h1>{{title}}</h1>

Expand Down Expand Up @@ -39,3 +40,4 @@ <h1>{{title}}</h1>

<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript=caolanmcmahon">comments powered by Disqus.</a></noscript>
{{/with}}
</div>
36 changes: 19 additions & 17 deletions templates/blogposts.html
View file
@@ -1,21 +1,23 @@
{{{include "navigation.html"}}}

<h1>Caolan McMahon</h1>
<div id="main">
<h1>Caolan McMahon</h1>

<ul class="blogposts">
{{#each rows}}
{{#with value}}
<li class="{{#if published}}published{{else}}draft{{/if}}">
<h2><a href="{{baseURL}}/posts/{{slug}}">{{title}}</a></h2>
<div class="meta">
{{#if published}}<span class="date">{{pp_date}}</span>{{else}}<span class="warning">Draft</span>{{/if}}
<div class="extra">
<a href="{{baseURL}}/posts/{{slug}}#disqus_thread" class="comments">Comments and Reactions</a>
<ul class="blogposts">
{{#each rows}}
{{#with value}}
<li class="{{#if published}}published{{else}}draft{{/if}}">
<h2><a href="{{baseURL}}/posts/{{slug}}">{{title}}</a></h2>
<div class="meta">
{{#if published}}<span class="date">{{pp_date}}</span>{{else}}<span class="warning">Draft</span>{{/if}}
<div class="extra">
<a href="{{baseURL}}/posts/{{slug}}#disqus_thread" class="comments">Comments and Reactions</a>
</div>
</div>
</div>
{{{intro_html}}}
<p><a href="{{baseURL}}/posts/{{slug}}">Read more...</a></p>
</li>
{{/with}}
{{/each}}
</ul>
{{{intro_html}}}
<p><a href="{{baseURL}}/posts/{{slug}}">Read more...</a></p>
</li>
{{/with}}
{{/each}}
</ul>
</div>

0 comments on commit 240257f

Please sign in to comment.