|
@@ -36,8 +36,8 @@
|
|
|
font-size: 18px;
|
|
font-size: 18px;
|
|
|
font-weight: normal;
|
|
font-weight: normal;
|
|
|
|
|
|
|
|
- margin-top: 12px;
|
|
|
|
|
- margin-bottom: 28px;
|
|
|
|
|
|
|
+ margin-top: 5px;
|
|
|
|
|
+ margin-bottom: 20px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
hr {
|
|
hr {
|
|
@@ -66,16 +66,30 @@
|
|
|
|
|
|
|
|
width: 140px;
|
|
width: 140px;
|
|
|
|
|
|
|
|
- padding: 20px 20px 0px 20px;
|
|
|
|
|
|
|
+ padding: 20px 20px 0 20px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
#content {
|
|
#content {
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
left: 180px;
|
|
left: 180px;
|
|
|
- top: 30px;
|
|
|
|
|
- line-height: 0px;
|
|
|
|
|
|
|
+ top: 0px;
|
|
|
|
|
+ padding: 28px 0 0 0;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ #content .project {
|
|
|
|
|
+ width: 200px;
|
|
|
|
|
+ height: 150px;
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ margin: 0 1px 1px 0;
|
|
|
|
|
+ float: left;
|
|
|
|
|
+ -webkit-transition: -webkit-transform 0.2s;
|
|
|
|
|
+ transition: transform 0.2s;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ #content .project:hover {
|
|
|
|
|
+ -webkit-transform: translate( -5px, -5px );
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
</style>
|
|
</style>
|
|
|
</head>
|
|
</head>
|
|
|
<body>
|
|
<body>
|
|
@@ -128,72 +142,55 @@
|
|
|
<div id="content">
|
|
<div id="content">
|
|
|
|
|
|
|
|
<h2>featured projects</h2>
|
|
<h2>featured projects</h2>
|
|
|
- <div id="featured"></div>
|
|
|
|
|
- <script>
|
|
|
|
|
-
|
|
|
|
|
- var files = [
|
|
|
|
|
-
|
|
|
|
|
- [ "georgeandjonathan", "http://www.georgeandjonathan.com/" ],
|
|
|
|
|
- [ "genealogyofthefree", "http://www.nike.com/xp/b/genealogyofthefree/zoetrope.html" ],
|
|
|
|
|
- [ "ogreen", "http://ogreen.special-t.com/en/" ],
|
|
|
|
|
- [ "racer-s", "http://helloracer.com/racer-s/" ],
|
|
|
|
|
- [ "christmasexperiments", "http://christmasexperiments.com/" ],
|
|
|
|
|
- [ "thehobbit", "http://middle-earth.thehobbit.com/" ],
|
|
|
|
|
- [ "kiddisco", "http://asmallgame.com/kiddisco/" ],
|
|
|
|
|
- [ "gravity", "http://gravitymovie.warnerbros.com/" ],
|
|
|
|
|
- [ "reflektor", "https://www.justareflektor.com/" ],
|
|
|
|
|
- [ "hellorun", "http://hellorun.helloenjoy.com" ],
|
|
|
|
|
- [ "acko", "http://acko.net/" ],
|
|
|
|
|
- [ "cubeslam", "http://cubeslam.com/" ],
|
|
|
|
|
- [ "hyperlapse", "http://hyperlapse.tllabs.io/" ],
|
|
|
|
|
- [ "wwmaze", "http://chrome.com/maze/" ],
|
|
|
|
|
- [ "paleodictyon", "http://antivj.com/paleodictyon_app/" ],
|
|
|
|
|
- [ "findyourwaytooz", "http://www.findyourwaytooz.com/" ],
|
|
|
|
|
- [ "voxeljs", "http://voxeljs.com/" ],
|
|
|
|
|
- [ "neverseenthesky", "http://christmasexperiments.com/2012/23/" ],
|
|
|
|
|
- [ "zeitgeist2012", "http://www.google.com/zeitgeist/2012/#explore" ],
|
|
|
|
|
- [ "zoetrope", "http://lab.sehsucht.de/" ],
|
|
|
|
|
- [ "mvsw", "http://www.pillandpillow.com/mvsw/site/" ],
|
|
|
|
|
- [ "thecarpandtheseagull", "http://thecarpandtheseagull.thecreatorsproject.com/" ],
|
|
|
|
|
- [ "100000stars", "http://workshop.chromeexperiments.com/stars/" ],
|
|
|
|
|
- [ "theywilleatyou", "http://theywilleatyou.com/" ],
|
|
|
|
|
- [ "blast", "http://blast.hellohikimori.com/" ],
|
|
|
|
|
- [ "hexgl", "http://hexgl.bkcore.com/" ],
|
|
|
|
|
- [ "armsglobe", "http://workshop.chromeexperiments.com/projects/armsglobe/" ],
|
|
|
|
|
- [ "carvisualizer", "http://carvisualizer.plus360degrees.com/threejs/" ],
|
|
|
|
|
- [ "chromeweblab", "http://www.chromeweblab.com/" ],
|
|
|
|
|
- [ "lightgraffiti", "http://lightgraffiti.littlesun.com/" ],
|
|
|
|
|
- [ "tntfortwo", "http://www.pajamaclubmusic.com/3d/" ],
|
|
|
|
|
- [ "chaostoperfection", "http://www.chaostoperfection.com/" ],
|
|
|
|
|
- [ "livecodelab", "http://www.sketchpatch.net/labs/livecodelabIntro.html" ],
|
|
|
|
|
- [ "kaiopua", "http://collinhover.github.com/kaiopua/" ],
|
|
|
|
|
- [ "physijs", "http://chandlerprall.github.com/Physijs/" ],
|
|
|
|
|
- [ "googlecube", "http://www.playmapscube.com/" ],
|
|
|
|
|
- [ "triggerrally", "http://triggerrally.com/" ],
|
|
|
|
|
- // [ "zombiesvscow", "http://yagiz.me/zombiesvscow/" ],
|
|
|
|
|
- [ "threefab", "http://blackjk3.github.com/threefab/" ],
|
|
|
|
|
- [ "nyancat", "http://dl.dropbox.com/u/6213850/WebGL/nyanCat/nyan.html" ],
|
|
|
|
|
- [ "threenodes", "http://idflood.github.com/ThreeNodes.js/public/index.html" ],
|
|
|
|
|
- // [ "f50", "http://www.adidas.com/football/uk/pages/f50/" ],
|
|
|
|
|
- [ "lights", "http://lights.elliegoulding.com/" ],
|
|
|
|
|
- [ "beanstalk", "http://inear.se/beanstalk/" ],
|
|
|
|
|
- // [ "missioncontrol", "http://superfad.com/missioncontrol/" ],
|
|
|
|
|
- [ "rome", "http://ro.me/" ],
|
|
|
|
|
- [ "globe", "http://data-arts.appspot.com/globe" ],
|
|
|
|
|
- [ "helloracer", "http://helloracer.com/webgl/" ]
|
|
|
|
|
-
|
|
|
|
|
- ];
|
|
|
|
|
-
|
|
|
|
|
- var element = document.getElementById( 'featured' );
|
|
|
|
|
-
|
|
|
|
|
- for ( var i = 0; i < files.length; i ++ ) {
|
|
|
|
|
-
|
|
|
|
|
- var file = files[ i ];
|
|
|
|
|
- element.innerHTML += '<a href="' + file[ 1 ] + '" target="_blank"><img src="files/projects/' + file[ 0 ] + '.jpg" width="200" height="150"></a>';
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
|
|
|
|
|
- </script>
|
|
|
|
|
|
|
+ <a href="http://www.georgeandjonathan.com/" target="_blank"><img src="files/projects/georgeandjonathan.jpg" class="project"></a>
|
|
|
|
|
+ <a href="http://www.nike.com/xp/b/genealogyofthefree/zoetrope.html" target="_blank"><img src="files/projects/genealogyofthefree.jpg" class="project"></a>
|
|
|
|
|
+ <a href="http://ogreen.special-t.com/en/" target="_blank"><img src="files/projects/ogreen.jpg" class="project"></a>
|
|
|
|
|
+ <a href="http://helloracer.com/racer-s/" target="_blank"><img src="files/projects/racer-s.jpg" class="project"></a>
|
|
|
|
|
+ <a href="http://christmasexperiments.com/" target="_blank"><img src="files/projects/christmasexperiments.jpg" class="project"></a>
|
|
|
|
|
+ <a href="http://middle-earth.thehobbit.com/" target="_blank"><img src="files/projects/thehobbit.jpg" class="project"></a>
|
|
|
|
|
+ <a href="http://asmallgame.com/kiddisco/" target="_blank"><img src="files/projects/kiddisco.jpg" class="project"></a>
|
|
|
|
|
+ <a href="http://gravitymovie.warnerbros.com/" target="_blank"><img src="files/projects/gravity.jpg" class="project"></a>
|
|
|
|
|
+ <a href="https://www.justareflektor.com/" target="_blank"><img src="files/projects/reflektor.jpg" class="project"></a>
|
|
|
|
|
+ <a href="http://hellorun.helloenjoy.com" target="_blank"><img src="files/projects/hellorun.jpg" class="project"></a>
|
|
|
|
|
+ <a href="http://acko.net/" target="_blank"><img src="files/projects/acko.jpg" class="project"></a>
|
|
|
|
|
+ <a href="http://cubeslam.com/" target="_blank"><img src="files/projects/cubeslam.jpg" class="project"></a>
|
|
|
|
|
+ <a href="http://hyperlapse.tllabs.io/" target="_blank"><img src="files/projects/hyperlapse.jpg" class="project"></a>
|
|
|
|
|
+ <a href="http://chrome.com/maze/" target="_blank"><img src="files/projects/wwmaze.jpg" class="project"></a>
|
|
|
|
|
+ <a href="http://antivj.com/paleodictyon_app/" target="_blank"><img src="files/projects/paleodictyon.jpg" class="project"></a>
|
|
|
|
|
+ <a href="http://www.findyourwaytooz.com/" target="_blank"><img src="files/projects/findyourwaytooz.jpg" class="project"></a>
|
|
|
|
|
+ <a href="http://voxeljs.com/" target="_blank"><img src="files/projects/voxeljs.jpg" class="project"></a>
|
|
|
|
|
+ <a href="http://christmasexperiments.com/2012/23/" target="_blank"><img src="files/projects/neverseenthesky.jpg" class="project"></a>
|
|
|
|
|
+ <a href="http://www.google.com/zeitgeist/2012/#explore" target="_blank"><img src="files/projects/zeitgeist2012.jpg" class="project"></a>
|
|
|
|
|
+ <a href="http://lab.sehsucht.de/" target="_blank"><img src="files/projects/zoetrope.jpg" class="project"></a>
|
|
|
|
|
+ <a href="http://www.pillandpillow.com/mvsw/site/" target="_blank"><img src="files/projects/mvsw.jpg" class="project"></a>
|
|
|
|
|
+ <a href="http://thecarpandtheseagull.thecreatorsproject.com/" target="_blank"><img src="files/projects/thecarpandtheseagull.jpg" class="project"></a>
|
|
|
|
|
+ <a href="http://workshop.chromeexperiments.com/stars/" target="_blank"><img src="files/projects/100000stars.jpg" class="project"></a>
|
|
|
|
|
+ <a href="http://theywilleatyou.com/" target="_blank"><img src="files/projects/theywilleatyou.jpg" class="project"></a>
|
|
|
|
|
+ <a href="http://blast.hellohikimori.com/" target="_blank"><img src="files/projects/blast.jpg" class="project"></a>
|
|
|
|
|
+ <a href="http://hexgl.bkcore.com/" target="_blank"><img src="files/projects/hexgl.jpg" class="project"></a>
|
|
|
|
|
+ <a href="http://workshop.chromeexperiments.com/projects/armsglobe/" target="_blank"><img src="files/projects/armsglobe.jpg" class="project"></a>
|
|
|
|
|
+ <a href="http://carvisualizer.plus360degrees.com/threejs/" target="_blank"><img src="files/projects/carvisualizer.jpg" class="project"></a>
|
|
|
|
|
+ <a href="http://www.chromeweblab.com/" target="_blank"><img src="files/projects/chromeweblab.jpg" class="project"></a>
|
|
|
|
|
+ <a href="http://lightgraffiti.littlesun.com/" target="_blank"><img src="files/projects/lightgraffiti.jpg" class="project"></a>
|
|
|
|
|
+ <a href="http://www.pajamaclubmusic.com/3d/" target="_blank"><img src="files/projects/tntfortwo.jpg" class="project"></a>
|
|
|
|
|
+ <a href="http://www.chaostoperfection.com/" target="_blank"><img src="files/projects/chaostoperfection.jpg" class="project"></a>
|
|
|
|
|
+ <a href="http://www.sketchpatch.net/labs/livecodelabIntro.html" target="_blank"><img src="files/projects/livecodelab.jpg" class="project"></a>
|
|
|
|
|
+ <a href="http://collinhover.github.com/kaiopua/" target="_blank"><img src="files/projects/kaiopua.jpg" class="project"></a>
|
|
|
|
|
+ <a href="http://chandlerprall.github.com/Physijs/" target="_blank"><img src="files/projects/physijs.jpg" class="project"></a>
|
|
|
|
|
+ <a href="http://www.playmapscube.com/" target="_blank"><img src="files/projects/googlecube.jpg" class="project"></a>
|
|
|
|
|
+ <a href="http://triggerrally.com/" target="_blank"><img src="files/projects/triggerrally.jpg" class="project"></a>
|
|
|
|
|
+ <!-- <a href="http://yagiz.me/zombiesvscow/" target="_blank"><img src="files/projects/zombiesvscow.jpg" class="project"></a> -->
|
|
|
|
|
+ <a href="http://blackjk3.github.com/threefab/" target="_blank"><img src="files/projects/threefab.jpg" class="project"></a>
|
|
|
|
|
+ <a href="http://dl.dropbox.com/u/6213850/WebGL/nyanCat/nyan.html" target="_blank"><img src="files/projects/nyancat.jpg" class="project"></a>
|
|
|
|
|
+ <a href="http://idflood.github.com/ThreeNodes.js/public/index.html" target="_blank"><img src="files/projects/threenodes.jpg" class="project"></a>
|
|
|
|
|
+ <!-- <a href="http://www.adidas.com/football/uk/pages/f50/" target="_blank"><img src="files/projects/f50.jpg" class="project"></a> -->
|
|
|
|
|
+ <a href="http://lights.elliegoulding.com/" target="_blank"><img src="files/projects/lights.jpg" class="project"></a>
|
|
|
|
|
+ <a href="http://inear.se/beanstalk/" target="_blank"><img src="files/projects/beanstalk.jpg" class="project"></a>
|
|
|
|
|
+ <!-- <a href="http://superfad.com/missioncontrol/" target="_blank"><img src="files/projects/missioncontrol.jpg" class="project"></a> -->
|
|
|
|
|
+ <a href="http://ro.me/" target="_blank"><img src="files/projects/rome.jpg" class="project"></a>
|
|
|
|
|
+ <a href="http://data-arts.appspot.com/globe" target="_blank"><img src="files/projects/globe.jpg" class="project"></a>
|
|
|
|
|
+ <a href="http://helloracer.com/webgl/" target="_blank"><img src="files/projects/helloracer.jpg" class="project"></a>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
Mr.doob