Redesigned.

index.html

@@ -2,85 +2,135 @@
 <title>cheeaungit</title>
 <style>
 body {
-	color: #000;
+	color: #666;
 	background-color: #fff;
 	font-family: helvetica, arial, sans-serif;
-	font-size: 80%;
-	text-align: center;
-}
-#container{
-	margin: 0 auto;
+	font-size: 13px;
+	margin: 0;
+	padding: 0;
 }
 h1{
-	font-size: 3em;
+	font-size: 13px;
+	margin: 0;
+	padding: 0;
+}
+h1 a{
+	display: block;
+	padding: 0 20px;
+	line-height: 32px;
+	min-height: 32px;
+	border-bottom: 1px solid #ddd;
+}
+#projects-count{
+	font-weight: normal;
+	color: #ccc;
+	display: inline-block;
+	line-height: 1.3em;
 }
-h1 a,
-dt a{
-	color: #000;
+a{
+	color: #666;
 	background-color: transparent;
 	text-decoration: none;
-	border-bottom: 2px solid #fafafa;
+	-webkit-transition: all .2s;
+	-moz-transition: all .2s;
+	-ms-transition: all .2s;
+	-o-transition: all .2s;
+	transition: all .2s;
 }
-h1 a:hover,
-dt a:hover{
-	border-color: #000;
+a:hover{
+	color: #fff;
+	background-color: #666;
 }
-dt{
-	font-size: 1.62em;
-	font-weight: bold;
-	white-space: nowrap;
+#repos-list{
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+#repos-list li{
+	display: inline;
 }
-dd{
+#repos-list li a{
+	position: relative;
+	display: block;
+	line-height: 32px;
+	min-height: 32px;
+	padding: 0 20px;
+	overflow: hidden;
+}
+#repos-list li:nth-child(odd) a{
+	background-color: #fafafa;
+}
+#repos-list li a:hover{
+	color: #fff;
+	background-color: #666;
+}
+#repos-list li.fork a{
+	background-repeat: no-repeat;
+	background-position: left center;
+	background-image: url(fork.png);
+}
+#repos-list li a .desc{
 	color: #ccc;
-	background-color: transparent;
+	display: inline-block;
+	line-height: 1.3em;
 }
-dt, dd{
-	display: inline;
-	line-height: 1.5em;
-	margin: 1em;
-	padding: 0;
+#projects-info,
+#repos-list li a .info{
+	float: right;
+	clear: right;
 }
-#repos-list{
-	text-align: center;
-	margin: 2em 0;
+#projects-info b,
+#repos-list li a .info b{
+	font-weight: bold;
+	display: inline-block;
+	padding-left: 20px;
+	background-repeat: no-repeat;
+	background-position: left center;
+}
+#projects-info b.watchers,
+#repos-list li a .info b.watchers{
+	background-image: url(watchers.png);
+}
+#projects-info b.forks,
+#repos-list li a .info b.forks{
+	background-image: url(forks.png);
 }
 </style>
-<script src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools-yui-compressed.js"></script>
-<script src="http://github.com/cheeaun/moohub/raw/master/JsonP.js"></script>
-<script src="http://github.com/cheeaun/shuffletext.js/raw/master/shuffleText.js"></script>
-<script src="http://github.com/cheeaun/moohub/raw/master/moohub.js"></script>
+<h1><a href="http://github.com/cheeaun"><span id="projects-info"></span>cheeaungit <span id="projects-count"></span> </a></h1>
+<ul id="repos-list"></ul>
 <script>
-	window.addEvent('domready', function(){
-		var reposList = $('repos-list');
-		var mh = new MooHub();
-		mh.grabUserInfo('cheeaun', function(d){
-//			console.log(d);
-			var repos = d.user.repositories;
-			var html = '<dl>';
-			repos.each(function(repo){
-				if (repo.private) return;
-				html += '<dt><a href="{url}">{name}</a></dt><dd>{description} &middot; ({forks}f/{watchers}w)</dd>'.substitute(repo);
-			});
-			html += '</dl>';
-			reposList.set('html', html);
-			reposList.getElements('a').each(function(el){
-				var shuffle = new shuffleText(el);
-				var dd = el.getParent('dt').getNext('dd');
-				el.addEvents({
-					mouseenter: function(){
-						shuffle.start();
-						dd.tween('color', '#000');
-					},
-					mouseleave: function(){
-						dd.tween('color', '#ccc');
-					}
-				});
-			});
+var reposList = document.getElementById('repos-list'),
+	projectsCount = document.getElementById('projects-count'),
+	projectsInfo = document.getElementById('projects-info'),
+	load = function(data){
+		if (!data || !data.repositories || !data.repositories.length) return;
+		var repositories = data.repositories,
+			html = '';
+		repositories.sort(function(a, b){
+			var aFork = a.fork, bFork = b.fork;
+			if (aFork && !bFork) return 1;
+			if (!aFork && bFork) return -1;
+			return new Date(b.pushed_at) - new Date(a.pushed_at);
 		});
-	});
+		var l = repositories.length, lp = 0, lf = 0, w = 0, f = 0;
+		for (var i=0; i<l; i++){
+			var r = repositories[i],
+				fork = r.fork ? ' class="fork"' : '',
+				watchers = r.watchers,
+				forks = r.forks;
+			w += r.watchers;
+			f += r.forks;
+			fork ? lf++ : lp++;
+			html += '<li' + fork + '>'
+				+ '<a href="' + r.url + '">'
+				+ '<span class="info"><b class="language">' + (r.language || '') + '</b> <b class="watchers">' + watchers + '</b> <b class="forks">' + forks + '</b></span>'
+				+ '<b>' + r.name + '</b> '
+				+ '<span class="desc">' + r.description + '</span>'
+				+ '</a>';
+		}
+		reposList.innerHTML = html;
+		projectsCount.innerHTML = l + ' repositories; ' + lp + ' public, ' + lf + ' forks';
+		projectsInfo.innerHTML = '<b class="watchers">' + w + '</b> <b class="forks">' + f + '</b>';
+	};
 </script>
-<div id="container">
-<h1><a href="http://github.com/cheeaun">cheeaun</a>git</h1>
-<div id="repos-list"></div>
-<p>This is definitely <strong>NOT</strong> a tag cloud.</p>
-</div>
+<script src="http://github.com/api/v2/json/repos/show/cheeaun?callback=load"></script>