JSFiddle - React, Tailwind, and code Playground

Career Timeline

by Jennifer Perrin

HTML

<!-- Throw in a nice looking font just for the fun of it -->
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700,300,200"/>

<div id="career">
  <h1>Career Path</h1>
  <div id="experience" class="header">
    Experience
  </div>
  <div id="education" class="header">
    Education
  </div>
  <ul id="years"></ul>
  <ul id="jobs"></ul>
</div>

CSS

body{
  background: #2a2a2a url("http://jenniferperrin.com/image/background.gif") 0 0 repeat;
  font-family: 'Yanone Kaffeesatz';
}

#career {
  width: 500px;
  margin: 90px auto;
  border: 10px solid #B7AFA3;
  position: relative;
  border-radius: 3px;
  color: #444;
  box-shadow: 0px 0px 0 rgb(201,206,206),
              1px 1px 0 rgb(158,163,163),
              2px 2px 0 rgb(114,119,119), 
              3px 3px 0 rgb(70,75,75),
              4px 4px 3px rgba(0,0,0,0),
              4px 4px 1px rgba(0,0,0,0.5),
              0px 0px 3px rgba(0,0,0,.2);
}

#career h1{
  font-size: 80px;
  top: -100px;
  width: 100%;
  position: absolute;
  text-align: center;
  color: rgba(255,255,255,0.3);rgba(255,255,255,0.2);
  font-weight: bold;
}
#career h1:hover {
    color: rgba(255,255,255,0.2);
}

#career .header {
  font-weigt: bold;
  font-size: 25px;
  padding-top: 10px;
}

#career #experience {
  float: left;
  margin-left: 10px;
}

#career #education {
  float: right;
  padding-right: 20px;
}

#career #years li {
  font-size: 80px;
  line-height: 120px;
  text-align: center;
  font-weight: bold;
}

#career #years li:nth-child(even) {
  background: #F5FAFA;
  color: #C1DAD6;
  text-shadow: 0px 2px 1px #bbbaba;
}

#career #years li:nth-child(odd) {
  background: #C1DAD6;
  color: #F5FAFA;
  text-shadow: 0px 2px 1px #bbbaba;
}

#career #jobs li {
  background: rgba(255,255,255,0.5);
  text-align: center;
  line-height: 21px;
  border: 2px solid #B7AFA3;
  position: absolute;
  -webkit-transform: rotate(-90deg);
  -webkit-transform-origin: 0 0;
  border-radius: 15px;
  box-shadow: 0px 0px 0 rgb(201,206,206),
              -1px 1px 0 rgb(158,163,163),
              -2px 2px 0 rgb(114,119,119),
              -3px 3px 0 rgb(70,75,75),
              -4px 4px 3px rgba(0,0,0,0),
              -4px 4px 1px rgba(0,0,0,0.5),
              0px 0px 3px rgba(0,0,0,.2);
}

JavaScript

/*
  Career
  An impressive number ray with your career
  Just change the var "jobs" with your data
*/

var jobs = [
  {
    description:"Bob",
    position: "Eat at Bobs",
    startYear:2010,
    startMonth:1,
    endYear:2012,
    endMonth:12,
    type: 'exp'
  },
  {
    description:"My own company",
    position: "Manager",
    startYear:2011,
    startMonth:3,
    endYear:2012,
    endMonth:9,
    type: 'exp'
  },
  {
    description:"Fast Food Restaurant",
    position: "Cashier",
    startYear:2009,
    startMonth:1,
    endYear:2010,
    endMonth:10,
    type: 'exp'
  },
  {
    description:"HTML High",
    position: "Grade: HTML Level 2",
    startYear:2007,
    startMonth:8,
    endYear:2008,
    endMonth:6,
    type: 'edu'
  },
];

var maxYear = function(jobs){
  var maxYear = 0;
  $.each(jobs, function(index, value){
    if (value.endYear > maxYear) {
      maxYear = value.endYear;
    }
  });
  return maxYear+1;
};

var minYear = function(jobs){
  var minYear = 3000;
  $.each(jobs, function(index, value){
    if (minYear > value.startYear) {
      minYear = value.startYear;
    }
  });
  return minYear-1;
};

var addYears = function(){
  for (var i=minYear(jobs); i<=maxYear(jobs); i++) {
    $('#career #years').prepend('<li>'+i+'</li>');
  }
};

var monthsInJob = function(job){
  return (job.endMonth - job.startMonth + 1) + ((job.endYear - job.startYear) * 12);
};

var monthsToMove = function(job, maxYear) {
  return (12 - job.endMonth) + ((maxYear - job.endYear) * 12);
};

var addJobs = function(jobs, maxYear){
  $.each(jobs, function(index, value){
    var months = monthsInJob(value);
    $('#jobs').append('<li id="job'+index+'">'+value.description+'<br>'+months+' (Months)<br>'+value.position+'</li>');
    var move = monthsToMove(value, maxYear);
    var side = (value.type == 'exp') ? 20 : 405;
    $('#job'+index).css('width', (months * 10)+'px').css('top', (months*10+move*10)+'px').css('left', side+'px');
  });
};

addYears();
addJobs(jobs,...