Timeline is a jQuery plugin specialized in showing a chronological series of events. You can embed all kinds of media including tweets, videos and maps, and associate them with a date. With some design tweaks, this will make it perfect for a portfolio in which you showcase your work and interests.
The HTML
Timeline comes with a light colored theme by default. It is perfectly usable and in most cases would be exactly what you need. However, for our portfolio, a dark design would be a better fit, so we will customize it to our liking.
First, let’s look at the basic layout of the page:
index.html
Timeline Portfolio );</pre>
<p>The init method takes single argument – the data source. It can either be a json file like above, or a Google spreadsheet (reminiscent of our <a title="Dynamic FAQ Section w/ jQuery, YQL & Google Docs" href="http://tutorialzine.com/2010/08/dynamic-faq-jquery-yql-google-docs/">Spredsheet Powered FAQ Tutorial</a>).</p>
<blockquote class="note"><p>For more information on the supported data sources, see the <a href="http://timeline.verite.co/#fileformat" target="_blank">documentation on the plugin’s site</a>, or browse the data.json file in the zip download for this tutorial.</p>
</blockquote>
<h3>The CSS</h3>
<p>I used Firebug’s HTML Inspector to get the right selectors for the elements that we are about to customize. In the HTML tab, it is easy to see what rules have been applied to each element by <em>timeline.css</em>. To override them, I copied the same selectors to <em>styles.css</em> which is where our modifications will take place. On several occurrences, however, I have used the <strong>!important</strong> flag to make my work easier.</p>
<p>All the customizations you see below override only a handful of CSS styles. The rest are inherited by the default stylesheet.<strong> Let’s begin!</strong></p>
<p>The first thing we will do in <strong>styles.css</strong>, after styling the page itself, is to change the backgrounds of the timeline:</p>
<pre class="brush:css">#timeline
background:none;
/* The individual events in the slider */
.slider .slider-container-mask .slider-container
background:none;
/* Setting a custom background image */
#timeline div.navigation
background: url('../img/timeline_bg.jpg') repeat;
border-top:none;
</pre>
<div id="attachment_1932" class="wp-caption alignnone" style="width: 630px"><a href="http://demo.tutorialzine.com/2012/04/timeline-portfolio/"><img class="size-full wp-image-1932" title="Timeline Navigation with a CSS 3D Effect" src="http://developersarena.com/wp-content/uploads/2012/04/29c1a-css-3d-effect.jpg" alt="Timeline Navigation with a CSS 3D Effect" width="620" height="260" /></a>
<p class="wp-caption-text">Timeline Navigation with a CSS 3D Effect</p>
</div>
<p>To create the 3D effect of the timeline navigation, we will need to use additional elements. But the Timeline plugin doesn’t include such in its markup. An easy solution is to use <strong>:before</strong> / <strong>:after</strong> pseudo elements. The :after element is the darker top part and it uses a linear gradient to enhance the effect.</p>
<pre class="brush:css">#timeline div.navigation:before
position:absolute;
content:'';
height:40px;
width:100%;
left:0;
top:-40px;
background: url('../img/timeline_bg.jpg') repeat;
#timeline div.navigation:after
position:absolute;
content:'';
height:10px;
width:100%;
left:0;
top:-40px;
background:repeat-x;
background-image: linear-gradient(bottom, #434446 0%, #363839 100%);
background-image: -o-linear-gradient(bottom, #434446 0%, #363839 100%);
background-image: -moz-linear-gradient(bottom, #434446 0%, #363839 100%);
background-image: -webkit-linear-gradient(bottom, #434446 0%, #363839 100%);
background-image: -ms-linear-gradient(bottom, #434446 0%, #363839 100%);
</pre>
<p>Then we add a dark background to the timeline navigation (the section with the small clickable tooltips that represent the events):</p>
<pre class="brush:css">#timeline div.timenav-background
background-color:rgba(0,0,0,0.4) !important;
#timeline .navigation .timenav-background .timenav-interval-background
background:none;
#timeline .top-highlight
background-color:transparent !important;
</pre>
<p>Later we style the zoom-in / zoom-out buttons and toolbar:</p>
<pre class="brush:css">#timeline .toolbar
border:none !important;
background-color: #202222 !important;
#timeline .toolbar div
border:none !important;
</pre>
<p>The numeric scale at the bottom comes next:</p>
<pre class="brush:css">#timeline .navigation .timenav .time .time-interval-minor .minor
margin-left:-1px;
#timeline .navigation .timenav .time .time-interval div
color: #CCCCCC;
</pre>
<p>The previous and next arrows:</p>
<pre class="brush:css">.slider .nav-previous .icon
background: url("timeline.png") no-repeat scroll 0 -293px transparent;
.slider .nav-previous,.slider .nav-next
font-family:'Segoe UI',sans-serif;
.slider .nav-next .icon
background: url("timeline.png") no-repeat scroll 72px -221px transparent;
width: 70px !important;
.slider .nav-next:hover .icon
position:relative;
right:-5px;
.slider .nav-previous:hover, .slider .nav-next:hover
color: #666;
cursor: pointer;
#timeline .thumbnail
border: medium none;
</pre>
<p>The loading screen:</p>
<pre class="brush:css">#timeline .feedback
background-color: #222222;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2) inset;
border:none;
#timeline .feedback div
color: #AAAAAA;
font-size: 14px !important;
font-weight: normal;
</pre>
<p>Then we move on to the slides:</p>
<pre class="brush:css">#timeline .slider-item h2,
#timeline .slider-item h3
font-family:'Antic Slab','Segoe UI',sans-serif;
#timeline .slider-item h2
color:#fff;
#timeline .slider-item p
font-family:'Segoe UI',sans-serif;
#timeline .slider-item img,
#timeline .slider-item iframe
border:none;
</pre>
<p>Finally, we will customize the appearance of the front page. I am using <strong>nth-child(1)</strong> to target only the first slider-item, which contains the name and description of the timeline which have been defined in the JSON data source.</p>
<pre class="brush:css">/* Customizing the first slide - the cover */
#timeline .slider-item:nth-child(1) h2
font:normal 70px/1 'Antic Slab','Segoe UI',sans-serif;
background:rgba(0,0,0,0.3);
white-space: nowrap;
padding:10px 5px 5px 20px;
position:relative;
right:-60px;
z-index:10;
#timeline .slider-item:nth-child(1) p i
font:normal normal 40px 'Dancing Script','Segoe UI',sans-serif;
background:rgba(0,0,0,0.3);
white-space: nowrap;
padding:5px 20px;
position:relative;
right:-60px;
z-index:10;
#timeline .slider-item:nth-child(1) p .c1
color:#1bdff0;
#timeline .slider-item:nth-child(1) p .c2
color:#c92fe6;
#timeline .slider-item:nth-child(1) .media-container
left: -30px;
position: relative;
z-index: 1;
#timeline .slider-item:nth-child(1) .credit
text-align: center;
</pre>
<p>The only thing left is to open up <em>timeline.psd</em> that is bundled with the download of the plugin, and change the color of some of the icons in photoshop. I have included the necessary files in the zip download for this tutorial. With this our timeline portfolio is complete!</p>
<h3>Done!</h3>
<p>You can use this portfolio to display not only your recent projects, but also interests and important moments of your career. Share your thoughts and suggestions in the comment section.</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/Tutorialzine?a=qvnuiMAbgB8:v0WEJKa3yIs:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/Tutorialzine?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Tutorialzine?a=qvnuiMAbgB8:v0WEJKa3yIs:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/Tutorialzine?i=qvnuiMAbgB8:v0WEJKa3yIs:D7DqB2pKExk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Tutorialzine?a=qvnuiMAbgB8:v0WEJKa3yIs:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/Tutorialzine?i=qvnuiMAbgB8:v0WEJKa3yIs:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Tutorialzine?a=qvnuiMAbgB8:v0WEJKa3yIs:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/Tutorialzine?i=qvnuiMAbgB8:v0WEJKa3yIs:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Tutorialzine?a=qvnuiMAbgB8:v0WEJKa3yIs:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/Tutorialzine?i=qvnuiMAbgB8:v0WEJKa3yIs:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Tutorialzine?a=qvnuiMAbgB8:v0WEJKa3yIs:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/Tutorialzine?d=qj6IDK7rITs" border="0"></img></a>
</div>
<p><img src="http://feeds.feedburner.com/~r/Tutorialzine/~4/qvnuiMAbgB8" height="1" width="1" />|
<div><a href="http://tutorialzine.com/2012/04/timeline-portfolio/"><img src="http://cdn.tutorialzine.com/img/featured/1920.jpg" /></a></div>
<p> This time we will be using the Timeline jQuery plugin as a dark themed portfolio in which you can showcase projects and important events in your career.}</p>
<p>Read more : <a target="_blank" href="http://feedproxy.google.com/~r/Tutorialzine/~3/qvnuiMAbgB8/" title="Timeline Portfolio">Timeline Portfolio</a></p>
<div class="clear"></div>
</div><!-- .entry-content-->
<p class="filed categories alt-font tight">Posted in <a href="http://developersarena.com/category/android/" rel="category tag">Android</a>, <a href="http://developersarena.com/category/editorial/" rel="category tag">Editorial Pick</a>, <a href="http://developersarena.com/category/general/" rel="category tag">General</a>, <a href="http://developersarena.com/category/inspiration/" rel="category tag">Inspiration</a>, <a href="http://developersarena.com/category/podcasts/" rel="category tag">Podcasts</a>, <a href="http://developersarena.com/category/world/" rel="category tag">World</a>.</p>
<p class="filed tags alt-font tight">Tagged with <a href="http://developersarena.com/tag/backgrounds/" rel="tag">backgrounds</a>, <a href="http://developersarena.com/tag/events/" rel="tag">Events</a>, <a href="http://developersarena.com/tag/icons/" rel="tag">icons</a>, <a href="http://developersarena.com/tag/jquery/" rel="tag">jquery</a>, <a href="http://developersarena.com/tag/king/" rel="tag">king</a>, <a href="http://developersarena.com/tag/plugin/" rel="tag">plugin</a>, <a href="http://developersarena.com/tag/timeline/" rel="tag">timeline</a>, <a href="http://developersarena.com/tag/tutorial/" rel="tag">tutorial</a>, <a href="http://developersarena.com/tag/work/" rel="tag">work</a>.</p>
<p class="comments-link"><a href="http://developersarena.com/podcasts/2012/04/timeline-portfolio/#respond" rev="post-8945" >No comments</a></p>
<p class="by-line">
<span class="author vcard full-author">
<span class="by alt-font">By</span> <a class="url fn" href="http://developersarena.com/author/Martin Angelov/" title="View all posts by Martin Angelov">Martin Angelov</a> </span>
<span class="date full-date"><span class="ndash alt-font">–</span> <abbr class="published" title="2012-04-02T08:16">April 2, 2012</abbr></span>
</p><!--/by-line-->
<div id="post-comments-8945-target"></div>
<div class="clear"></div>
</div><!-- .post --> <div id="comments">
<div class="rule-major"><hr /></div>
<h2 class="h1 comments-title">0 Responses</h2>
<p>Stay in touch with the conversation, subscribe to the <a class="feed" rel="alternate" href="http://developersarena.com/podcasts/2012/04/timeline-portfolio/feed/"><acronym title="Really Simple Syndication">RSS</acronym> feed for comments on this post</a>.</p>
<div id="respond-p8945">
<form action="http://developersarena.com/wp-comments-post.php" method="post" class="comment-form">
<p class="comment-form-comment tight">
<label class="h3" for="comment-p8945">Leave a Reply <em id="cancel-comment-reply"><a rel="nofollow" id="cancel-comment-reply-link-p8945" href="/podcasts/2012/04/timeline-portfolio/#respond-p8945" style="display:none;">Cancel</a></em></label>
<br class="lofi" />
<span class="comment-form-comment-area">
<textarea id="comment-p8945" name="comment" rows="8" cols="40"></textarea><br />
<em class="some-html-is-ok"><abbr title="You can use: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> ">Some HTML is OK</abbr></em>
</span>
</p>
<p class="comment-form-user-info tight">
<input type="text" id="author-p8945" name="author" value="" size="22" />
<label for="author-p8945">Name <em>(required)</em></label>
</p><!--/name-->
<p class="comment-form-user-info tight">
<input type="text" id="email-p8945" name="email" value="" size="22" />
<label for="email-p8945">Email <em>(required, but never shared)</em></label>
</p><!--/email-->
<p class="comment-form-user-info tight">
<input type="text" id="url-p8945" name="url" value="" size="22" />
<label title="Your website address" for="url-p8945">Web</label>
</p><!--/url-->
<p class="tight">
<input name="submit" type="submit" value="Post comment" />
<span class="comment-form-trackback">or, reply to this post via <a rel="trackback" href="http://developersarena.com/podcasts/2012/04/timeline-portfolio/trackback/">trackback</a>.</span>
</p>
<input type='hidden' name='comment_post_ID' value='8945' id='comment_post_ID_p8945' />
<input type='hidden' name='comment_parent' id='comment_parent_p8945' value='0' />
</form>
</div>
</div><!--#comments-->
<div class="pagination-single">
<span class="previous">« <a href="http://developersarena.com/web/2012/03/curious-about-phpcloud-com-grab-a-bowl-of-popcorn-and-watch-this-video/" rel="prev">Curious about phpcloud.com? Grab a bowl of popcorn and watch this video</a></span>
<span class="next"><a href="http://developersarena.com/web/2012/04/mike-wilbanks-posts-his-slide-deck-on-leveraging-zend-framework-sending-push-notifications/" rel="next">Mike Wilbanks posts his slide deck on “Leveraging Zend Framework Sending Push Notifications”</a> »</span>
</div>
</div><!--#content-->
<hr class="lofi" />
<div id="sidebar">
<div id="carrington-subscribe" class="widget">
<h2 class="widget-title">Subscribe</h2>
<a class="feed alignright" title="RSS 2.0 feed for posts" rel="alternate" href="http://developersarena.com/feed/">
<img src="http://developersarena.com/wp-content/themes/carrington-blog/img/rss-button.gif" alt="Developers Arena latest posts" title="Developers Arena latest posts" />
</a>
</div><!--.widget-->
<div id="carrington-about" class="widget">
<div class="about">
<h2 class="widget-title">About Developers Arena</h2>
Developersarena.com is a place where we share our knowledge, thoughts. DA handles topics such as web technologies, mobile applications, technology, tips etc.<a class="more" href="http://developersarena.com/about/">more →</a> </div>
</div><!--.widget-->
<div id="primary-sidebar">
<div id="recent-posts-3" class="widget widget_recent_entries"> <h2 class="widget-title">Recent Posts</h2> <ul>
<li>
<a href="http://developersarena.com/web/2019/09/danville-metropolis-council-works-with-casino-12/">Danville Metropolis Council Works with Casino Legalization Effort</a>
</li>
<li>
<a href="http://developersarena.com/web/2019/09/sign-up-for-the-actual-sat-knowing-you-re-in-a-5/">Sign up for the actual SAT knowing you’re in a position to register for taking the test.</a>
</li>
<li>
<a href="http://developersarena.com/web/2019/09/coming-to-america-our-best-pupil-podcasts-around-3/">Coming To America: Our Best Pupil Podcasts Around Immigration</a>
</li>
<li>
<a href="http://developersarena.com/web/2019/09/fine-martial-arts-styles-portfolio-suggestions-11/">Fine Martial arts styles Portfolio Suggestions Applicants may perhaps submit their very own portfolio 1 of 2 ways</a>
</li>
<li>
<a href="http://developersarena.com/web/2019/09/when-must-my-scholar-take-the-posed/">When Must My Scholar Take the POSED?</a>
</li>
</ul>
<div class="clear"></div></div><div id="search-3" class="widget widget_search"><form role="search" method="get" id="searchform" class="searchform" action="http://developersarena.com/">
<div>
<label class="screen-reader-text" for="s">Search for:</label>
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form><div class="clear"></div></div> </div><!--#primary-sidebar-->
<div id="secondary-sidebar">
<div id="categories-3" class="widget widget_categories"><h2 class="widget-title">Categories</h2> <ul>
<li class="cat-item cat-item-220"><a href="http://developersarena.com/category/android/" >Android</a> (751)
</li>
<li class="cat-item cat-item-35"><a href="http://developersarena.com/category/apple/" >Apple</a> (1,516)
</li>
<li class="cat-item cat-item-36"><a href="http://developersarena.com/category/business/" >Business</a> (1,894)
</li>
<li class="cat-item cat-item-115"><a href="http://developersarena.com/category/editorial/" >Editorial Pick</a> (377)
</li>
<li class="cat-item cat-item-30"><a href="http://developersarena.com/category/elgg/" >Elgg</a> (289)
</li>
<li class="cat-item cat-item-146"><a href="http://developersarena.com/category/freelancing/" >Freelancing</a> (635)
</li>
<li class="cat-item cat-item-11"><a href="http://developersarena.com/category/general/" >General</a> (5,835)
</li>
<li class="cat-item cat-item-22"><a href="http://developersarena.com/category/inspiration/" >Inspiration</a> (328)
</li>
<li class="cat-item cat-item-793"><a href="http://developersarena.com/category/javascript/" >JavaScript</a> (297)
</li>
<li class="cat-item cat-item-5"><a href="http://developersarena.com/category/podcasts/" >Podcasts</a> (298)
</li>
<li class="cat-item cat-item-42"><a href="http://developersarena.com/category/popular/" >Popular</a> (304)
</li>
<li class="cat-item cat-item-38"><a href="http://developersarena.com/category/social-media/" >Social Media</a> (938)
</li>
<li class="cat-item cat-item-265"><a href="http://developersarena.com/category/startups/" >Startups</a> (3,078)
</li>
<li class="cat-item cat-item-39"><a href="http://developersarena.com/category/technology/" >Technology</a> (5,809)
</li>
<li class="cat-item cat-item-1"><a href="http://developersarena.com/category/web/" >Web</a> (28,726)
</li>
<li class="cat-item cat-item-37"><a href="http://developersarena.com/category/web-design/" >Web Design</a> (714)
</li>
<li class="cat-item cat-item-367"><a href="http://developersarena.com/category/world/" >World</a> (836)
</li>
</ul>
<div class="clear"></div></div><div id="tag_cloud-3" class="widget widget_tag_cloud"><h2 class="widget-title">Tags</h2><div class="tagcloud"><a href='http://developersarena.com/tag/amazon/' class='tag-link-206' title='673 topics' style='font-size: 9.4141414141414pt;'>Amazon</a>
<a href='http://developersarena.com/tag/apple-2/' class='tag-link-819' title='4,725 topics' style='font-size: 21.292929292929pt;'>apple</a>
<a href='http://developersarena.com/tag/apps/' class='tag-link-118' title='648 topics' style='font-size: 9.1313131313131pt;'>apps</a>
<a href='http://developersarena.com/tag/business-2/' class='tag-link-922' title='3,310 topics' style='font-size: 19.171717171717pt;'>business</a>
<a href='http://developersarena.com/tag/company/' class='tag-link-818' title='2,923 topics' style='font-size: 18.464646464646pt;'>company</a>
<a href='http://developersarena.com/tag/count/' class='tag-link-897' title='730 topics' style='font-size: 9.8383838383838pt;'>count</a>
<a href='http://developersarena.com/tag/entertainment/' class='tag-link-1270' title='945 topics' style='font-size: 11.535353535354pt;'>entertainment</a>
<a href='http://developersarena.com/tag/europe/' class='tag-link-939' title='646 topics' style='font-size: 9.1313131313131pt;'>europe</a>
<a href='http://developersarena.com/tag/facebook/' class='tag-link-82' title='2,062 topics' style='font-size: 16.20202020202pt;'>Facebook</a>
<a href='http://developersarena.com/tag/flickr/' class='tag-link-1088' title='829 topics' style='font-size: 10.686868686869pt;'>flickr</a>
<a href='http://developersarena.com/tag/francisco/' class='tag-link-1039' title='625 topics' style='font-size: 8.989898989899pt;'>francisco</a>
<a href='http://developersarena.com/tag/gadgets/' class='tag-link-1497' title='994 topics' style='font-size: 11.818181818182pt;'>gadgets</a>
<a href='http://developersarena.com/tag/image/' class='tag-link-4069' title='750 topics' style='font-size: 10.121212121212pt;'>image</a>
<a href='http://developersarena.com/tag/images/' class='tag-link-1387' title='893 topics' style='font-size: 11.111111111111pt;'>images</a>
<a href='http://developersarena.com/tag/internet/' class='tag-link-834' title='1,244 topics' style='font-size: 13.232323232323pt;'>internet</a>
<a href='http://developersarena.com/tag/iphone/' class='tag-link-197' title='1,083 topics' style='font-size: 12.383838383838pt;'>iPhone</a>
<a href='http://developersarena.com/tag/javascript/' class='tag-link-28936' title='3,557 topics' style='font-size: 19.59595959596pt;'>JavaScript</a>
<a href='http://developersarena.com/tag/king/' class='tag-link-830' title='5,250 topics' style='font-size: 22pt;'>king</a>
<a href='http://developersarena.com/tag/major/' class='tag-link-853' title='999 topics' style='font-size: 11.818181818182pt;'>major</a>
<a href='http://developersarena.com/tag/media/' class='tag-link-1272' title='918 topics' style='font-size: 11.252525252525pt;'>media</a>
<a href='http://developersarena.com/tag/microsoft/' class='tag-link-194' title='964 topics' style='font-size: 11.535353535354pt;'>Microsoft</a>
<a href='http://developersarena.com/tag/mobile/' class='tag-link-76' title='2,543 topics' style='font-size: 17.616161616162pt;'>Mobile</a>
<a href='http://developersarena.com/tag/music/' class='tag-link-274' title='564 topics' style='font-size: 8.2828282828283pt;'>Music</a>
<a href='http://developersarena.com/tag/news/' class='tag-link-84' title='1,162 topics' style='font-size: 12.808080808081pt;'>News</a>
<a href='http://developersarena.com/tag/people/' class='tag-link-959' title='814 topics' style='font-size: 10.545454545455pt;'>people</a>
<a href='http://developersarena.com/tag/popular-2/' class='tag-link-821' title='3,733 topics' style='font-size: 19.878787878788pt;'>popular</a>
<a href='http://developersarena.com/tag/president/' class='tag-link-920' title='677 topics' style='font-size: 9.4141414141414pt;'>president</a>
<a href='http://developersarena.com/tag/product/' class='tag-link-820' title='534 topics' style='font-size: 8pt;'>product</a>
<a href='http://developersarena.com/tag/share/' class='tag-link-3302' title='1,408 topics' style='font-size: 13.939393939394pt;'>share</a>
<a href='http://developersarena.com/tag/social/' class='tag-link-917' title='1,330 topics' style='font-size: 13.515151515152pt;'>social</a>
<a href='http://developersarena.com/tag/social-media-2/' class='tag-link-836' title='2,278 topics' style='font-size: 16.909090909091pt;'>social media</a>
<a href='http://developersarena.com/tag/software/' class='tag-link-157' title='686 topics' style='font-size: 9.5555555555556pt;'>software</a>
<a href='http://developersarena.com/tag/startups/' class='tag-link-28935' title='3,817 topics' style='font-size: 20.020202020202pt;'>Startups</a>
<a href='http://developersarena.com/tag/story/' class='tag-link-1258' title='995 topics' style='font-size: 11.818181818182pt;'>story</a>
<a href='http://developersarena.com/tag/tech/' class='tag-link-2144' title='608 topics' style='font-size: 8.7070707070707pt;'>tech</a>
<a href='http://developersarena.com/tag/technology-2/' class='tag-link-822' title='4,098 topics' style='font-size: 20.444444444444pt;'>technology</a>
<a href='http://developersarena.com/tag/twitter/' class='tag-link-111' title='978 topics' style='font-size: 11.676767676768pt;'>Twitter</a>
<a href='http://developersarena.com/tag/video/' class='tag-link-632' title='1,190 topics' style='font-size: 12.949494949495pt;'>video</a>
<a href='http://developersarena.com/tag/videos/' class='tag-link-766' title='619 topics' style='font-size: 8.8484848484848pt;'>videos</a>
<a href='http://developersarena.com/tag/watercooler/' class='tag-link-10602' title='576 topics' style='font-size: 8.4242424242424pt;'>watercooler</a>
<a href='http://developersarena.com/tag/web-2/' class='tag-link-825' title='3,546 topics' style='font-size: 19.59595959596pt;'>web</a>
<a href='http://developersarena.com/tag/web-design-2/' class='tag-link-827' title='1,703 topics' style='font-size: 15.070707070707pt;'>web design</a>
<a href='http://developersarena.com/tag/windows/' class='tag-link-848' title='566 topics' style='font-size: 8.2828282828283pt;'>windows</a>
<a href='http://developersarena.com/tag/world-2/' class='tag-link-877' title='3,686 topics' style='font-size: 19.878787878788pt;'>world</a>
<a href='http://developersarena.com/tag/year/' class='tag-link-899' title='793 topics' style='font-size: 10.40404040404pt;'>year</a></div>
<div class="clear"></div></div><div id="recent-comments-3" class="widget widget_recent_comments"><h2 class="widget-title">Recent Comments</h2><ul id="recentcomments"></ul><div class="clear"></div></div> </div><!--#secondary-sidebar-->
<div class="clear"></div>
</div><!--#sidebar--> <div class="clear"></div>
</div><!-- .wrapper -->
</div><!-- #main -->
<hr class="lofi" />
<div id="footer" class="section">
<div class="wrapper">
<p id="generator-link">Proudly powered by <a href="http://wordpress.org/" rel="generator">WordPress</a> and <a href="http://carringtontheme.com" title="Carrington theme for WordPress">Carrington</a>.</p>
<p id="developer-link"><a href="http://crowdfavorite.com" title="Custom WordPress development, design and backup services." rel="developer designer">Carrington Theme by Crowd Favorite</a></p>
</div><!--.wrapper-->
</div><!--#footer -->
</div><!--#page-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-19328731-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>