
**TLDR;** [https://github.com/vraa/css-timeline](https://github.com/vraa/css-timeline)

Just finished updating/redesigning (or messing up) [my online resume](https://veerasundar.com/resume/). For the new design, I needed a timeline like UI component to show my work history. The componenent need not to be a perfect timeline, with actual scaling and all. But it should look like one and should respond to the screen width.

Here's a screenshot of the timeline component from my resume's work history section.

<a
  href="http://www.flickr.com/photos/94921037@N05/12284453065/"
  title="timeline by v33ra, on Flickr"
>
  <img
    src="http://farm4.staticflickr.com/3786/12284453065_87e377c0e9_c.jpg"
    width="800"
    height="557"
    alt="timeline"
  />
</a>

And, here's the responsive layout of the timeline in smaller screens.

<a
  href="http://www.flickr.com/photos/94921037@N05/12284483625/"
  title="timeline-responsive by v33ra, on Flickr"
>
  <img
    src="http://farm8.staticflickr.com/7391/12284483625_0f187a5924_c.jpg"
    width="501"
    height="800"
    alt="timeline-responsive"
  />
</a>

After implementing the design, I thought of separating the timeline code alone as a re-usable component. Hence the new github repo: [https://github.com/vraa/css-timeline](https://github.com/vraa/css-timeline).

If you have a need to use something similar in your code, feel free to fork and use. Customize the variables in timeline.less file to your taste and compile it with less.js.

Fair warning: There are few limitations with the current implementation, which I'll fix in near future. If you happened to patch any bugs, please send me a pull request. TIA.


Responsive timeline with CSS and HTML


Recently I decided to redesign my online resume. Though the [old design][1] was quite satisfactory to me, I thought I could give it a makeover. So, here's the [new resume][2].

[1]: https://www.dropbox.com/s/giavg7k0vmqkdt5/old-resume.png "Old resume design"
[2]: https://veerasundar.com/resume/ "Veera Sundar - Resume"

If the redesign was just a bunch of HTML CSS changes, I wouldn't be blogging about it here. But, it isn't. There's much more than just the code change. I thought the tricks I used could help you in someway when you sit out to design your online resume. So decided to blog it.

## 1. Using hResume and Microformats

[Microformats][3] specifies a set of semantic markup to be used in the web pages so that the page can be easily understood by the machine (such as Google, Bing or other engines that eats the web pages). It also specifies a structure for marking up a resume page - the specification is [hResume][4]. I have used it in my [resume markup][5].

[3]: http://microformats.org/ "microformats are a set of simple, open data formats built upon existing and widely adopted standards."
[4]: http://microformats.org/wiki/hresume "hResume is a microformat for publishing resumes and CVs"
[5]: https://github.com/vraa/resume/blob/master/index.htm "Resume markup"

Advantage!? If my page is displayed in a device which can parse these microformats, then it can present my information is more meaningful way - for example it can pull up my contact information from the page and ask the user to add me to his/her contact list.

## 2. Pulling up favicons from web pages

![][6]

[6]: https://veerasundar.com/img/2012/06/skills.png "skills"

If you see the Skills section, you can notice that some skill pills(!) has an icon with it. This image is not served from my server, instead it is being dynamically pulled from the web pages itself, using **Google Favicon service**.

The sample code to illustrate this:

```css
    .skill.appengine{
     background:url(http://www.google.com/s2/u/0/favicons?domain=appengine.google.com);
    }
    .skill.java{
     background:url(http://www.google.com/s2/u/0/favicons?domain=java.com);
    }
```

There, pass the appropriate domain value and you'll get back the favicon of that domain. One point to note is that this will not work if the domain has the favicon in *ico *format.

## 3. HTML CSS Ruler

![][9]

[9]: https://veerasundar.com/img/2012/06/html5-css3-ruler.png

The highlighted part in the above image is done using pure HTML and CSS (including the arrows at both end). No images used. Here's the code.

#### HTML Markup:

```html
      <div class='scale'>
        <span class='left-end'/>
        <span class='line'>
          <label class='lbl-left'>Recent</label>
          <label class='lbl-right'>Older</label>
        </span>
        <span class='right-end'/>
      </div>
```

#### CSS:

```css
    .scale{
    	position: relative;
    	margin:20px 0 5px 0;
    }
    	.scale > span{
    		display: inline-block;
    	}
    	.scale .left-end{
    		width: 0;
    		height: 0;
    		border-top: 10px solid transparent;
    		border-right: 20px solid #ddd;
    		border-bottom: 10px solid transparent;
    		border-radius:5px;
    		position: absolute;
    		top:-10px;
    		left:0;
    	}
    	.scale .right-end{
    		width: 0;
    		height: 0;
    		border-top: 10px solid transparent;
    		border-left: 20px solid #ddd;
    		border-bottom: 10px solid transparent;
    		border-radius:5px;
    		position: absolute;
    		top:-10px;
    		right:0;
    	}
    	.scale .line{
    		width:100%;
    		border-top:1px dashed #ddd;
    	}
    		.scale .line label{
    			font-size:.8em;
    			color:#ddd;
    		}
    		.scale .line .lbl-left{
    			float:left;
    			margin-left:30px;
    		}
    		.scale .line .lbl-right{
    			float:right;
    			margin-right:30px;
    		}
```

So, what do you think about the redesign? If you are interested you can [fork this code @ github][8] and make it your own version. If you do so, don't forget to leave me a note so that I can also check it out.

[8]: https://github.com/vraa/resume "Resume source at GitHub"


Redesigning my resume with HTML5, CSS3 and hResume


Last Saturday, I was bored. So, thought of writing a game in JavaScript using HTML5 and CSS3 techniques. And thats how *[Rock Paper Scissors and Bombs][1] *came to life.

[1]: https://veerasundar.com/rock-paper-scissors/ "Rock Paper Scissors and Bombs - Online game"

[![][3]][3]
Rock Paper Scissor and Bombs

It's a simple game that is played in many parts of the world (though with different names). To play, you and the other player should choose a hand gesture (either *rock, paper or scissor) *at the same time. The gesture which has higher power than the other one is decided as the winner.

[]: https://veerasundar.com/rock-paper-scissors/ "Rock Paper Scissor and Bombs"

Initially, when I started coding this game, I didn't have any intention to add *Bombs* to it. But, finally when I completed the game UI, I'd the little idea of tilting the score panel based on the score weight. i.e. the bigger the score, the higher the score's side goes up.

And then, I thought it would be nice to place a bomb over the score panel so that when the lower score side tilts more, the bomb will fell down on that side thereby killing that player.

It took around 10 hours to complete this game. In one week, it has generated 500 Unique visitors and 1K page views till now. Not bad for a hobby project, I would say!

Please [play this game][3] and I hope you'll like it. And of course, your feedback is always appreciated.

[3]: https://veerasundar.com/rock-paper-scissors/


#css3 (3)