Interactive Resume

index.html

<div class="jumbotron">
  <div class="circle-image">
    <img src="http://54chi.com/assets/img/svg/accountant.svg" />
  </div>
  <h2>Sachihiko "Sachi" Shirasaka <small>resume</small></h2>
</div>

<main>
  <div class="page-header">
    <h3>Project Experience by Client's Sector</h3>
    <small><b>Instructions:</b> Left click to drill down, right click to drill up. Mouse over the project names for details</small>
  </div>
  <div id="chart_div"></div>

  <div class="page-header">
    <h3>Cover</h3>
  </div>
  <div id="cover_div"></div>

  <div class="page-header">
    <h3>Education</h3>
    <small>Sachi considered getting an MBA earlier in my life, but life taught him better. FWIW, his college GPA equivalent was 4.0.</small>
  </div>
  <div id="education_div"></div>

  <div class="page-header">
    <h3>Languages Spoken</h3>
    <span>Not counting duolingo lessons, or weird languages like Sindarin, Al Bhed, Klingon or Esperanto</span>
  </div>
  <div id="languages_div">
    <ul></ul>
  </div>

  <div class="page-header">
    <h3>List of Projects</h3>
    <small>Warning: this is a long list. Sachi may have made more projects in his life than the average IT company out there. Then again, he has been doing this before the internet became a thing, so there is probably an edge in that.</small>
  </div>
  <div id="projects_div">
    <ol></ol>
  </div>

  <hr/>

  <footer>Pen made by <a href="https://twitter.com/54chi"> 54chi</a> - Full metadata available in my <a href="https://docs.google.com/spreadsheets/d/141KnwXpUUELuRZPF8lr70Yach92iWq3vmO4SIy2M5cs/pubhtml">Google Sheets</a><br/>Avatar image made by <a href=" http://www.flaticon.com/authors/hand-drawn-goods">Hand Drawn Goods</a></footer>
</main>

Interactive Resume.markdown

Interactive Resume

A pen built with Google Spreadsheets, Google Charts, TableTop (for non-chart data) and Bootstrap 3

The resume lives in google sheets at this address: https://docs.google.com/spreadsheets/d/141KnwXpUUELuRZPF8lr70Yach92iWq3vmO4SIy2M5cs

A live demo (and latest updates) are in this Pen by 54chi 5. on CodePen.

License.

script.js

var data;
var chart;

// Google Sheets Resume URL
// Follow the same structure, or adapt accordingly
var sheetUrl = "https://docs.google.com/spreadsheets/d/141KnwXpUUELuRZPF8lr70Yach92iWq3vmO4SIy2M5cs";

//https://docs.google.com/spreadsheets/d/141KnwXpUUELuRZPF8lr70Yach92iWq3vmO4SIy2M5cs/pubhtml

window.onload = function() {
  init()
};

var public_spreadsheet_url = sheetUrl + '/pubhtml';

function init() {
  Tabletop.init({
    key: public_spreadsheet_url,
    callback: showInfo,
    simpleSheet: false
  })
}

function showInfo(data, tabletop) {
  var retrieveInfo = function(sheetName, div, formatting, tabletop) {
    $.each(tabletop.sheets(sheetName).toArray(), function(i, fact) {
      console.log(i + ":" + fact);

      var html = "";
      switch (formatting) {
        case "langs":
          /* foreign languages sheet columns:
            0=language
            1=skill level
          */
          html = $('<li>').append(fact[0] + ': ' + fact[1]);
          break;
        case "edu":
          /* education sheet columns:
            0=degree
            1=concentration
            2=school
          */
          html = $('<p>').append(fact[0] + ' - ' + fact[1] + ' - ' + fact[2]);
          break;
        case "projects":
          /* experience sheet columns:
            0=id
            1=project
            2=year
            3=client
            4=sector
            5=keywords
            6=working_at
            7=role
            8=technologies
            9=description
            10=comments
          */
          if (fact[0]!="")
            html = $('<li>')
              .append(
                $('<h4>').append(fact[1])
                .append(
                  $('<small>').append(' ('+fact[2]+')')))
              .append(
                $('<b>').append(fact[7] + '@'+ fact[6]))
              .append(
                $('<p>').append(fact[9])
                .append(
                  $('<small>').append('<b>Keywords</b>: ' + fact[5]+ ' <b>&lt;Done with:</b> ' + fact[8]+'&gt;')));
          break;
        default:
          html = $('<p>').append(fact);
      }

      $(div).append(html);
    });
  }

  retrieveInfo("cover_page", "#cover_div", "p", tabletop);
  retrieveInfo("education", "#education_div", "edu", tabletop);
  retrieveInfo("experience","#projects_div ol","projects",tabletop);
  retrieveInfo("foreign languages", "#languages_div ul", "langs", tabletop);
}

// Load the Visualization API and the Treemap package.
google.charts.load('current', {
  'packages': ['treemap']
});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawSheetName);

//main callback function
function drawSheetName() {
  var queryString = encodeURIComponent('SELECT B, E, L, C, H, J, K');
  console.log(sheetUrl + '/gviz/tq?sheet=experience&headers=1&tq=' + queryString);
  var query = new google.visualization.Query(
    sheetUrl + '/gviz/tq?sheet=experience&headers=1&tq=' + queryString);
  query.send(handleSampleDataQueryResponse);
}

//rendering function
//this was done before adding jQuery, so consider making the tooltips using append objects 
var handleSampleDataQueryResponse = function(response) {
  //anonymous function to display the mouse over tooltip if applicable (e.g. when the Year is not empty)
  var showFullTooltip = function(row, size, value) {
    var tooltip = ""
    if (data.getValue(row, 3) === null) {
      tooltip = '<div class="popup"><h4>' + data.getValue(row, 0) +
        ' <small>(' + size + ' projects)</small></h4>' +
        ' </div>';
    } else {
      tooltip = '<div class="popup"><h4>' + data.getValue(row, 0) +
        ' <small>(' + data.getValue(row, 3) + ')</small></h4>' +
        ((data.getValue(row, 4) === null) ? "" : "<b>" + data.getValue(row, 4)) + "</b><br/>" +
        ((data.getValue(row, 5) === null) ? "" : data.getValue(row, 5)) +
        ((data.getValue(row, 6) === null) ? "" : '<footer>' + data.getValue(row, 6) + '</footer>') +
        ' </div>';
    }
    return tooltip
  }

  if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }

  var data = response.getDataTable();

  //bunch of treeview options. For a full list, check https://developers.google.com/chart/interactive/docs/gallery/treemap#configuration--options
  var options = {
    highlightOnMouseOver: true,
    maxDepth: 1,
    maxPostDepth: 2,
    minHighlightColor: '#8c6bb1',
    midHighlightColor: '#9ebcda',
    maxHighlightColor: '#edf8fb',
    minColor: '#009688',
    midColor: '#f7f7f7',
    maxColor: '#ee8100',
    headerHeight: 15,
    showScale: true,
    height: 500,
    useWeightedAverageForAggregation: true,
    generateTooltip: showFullTooltip
  };

  tree = new google.visualization.TreeMap(document.getElementById('chart_div'));
  tree.draw(data, options);
}

scripts

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.4.3/tabletop.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

style.scss

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400);
$mainFont: "Open Sans";

@mixin border-radius($radius) {
  border-radius: $radius;
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  -o-border-radius: $radius;
}

main{
  padding:0 1em;
  font-family: $mainFont;
  footer{
    font-size: 80%;
    text-align:right;
  }
}

p{
  &::first-letter { 
    font-size: 130%;
    margin-left:1em;
  }
}

.jumbotron{
  padding: 1em 1em;
  font-size: 1.1em;
  border-bottom: solid 5px #ccc;
  text-align:center;
}

.circle-image{
  text-align:center;
  top:20px;
  width:95%;
  margin:1.3em;
/*  position:absolute;*/
  img{
    height:140px;
    width:140px;
    border-radius:50%;
    border: solid 3px black;
    background-color: white;
  }
}

.page-header{
  h3{
    color:black;
    letter-spacing:3px;
  }
}

.popup{
  background: #fd9; 
  padding: 10px; 
  border-style: solid;
  border-radius:8px; 
  b {
    background-color: #aF0;
    padding:3px;
  }
  footer{
    text-align: left;
    color: #777;
    &:before{
      content: '\2014 \00A0';
    }    
  }
}

#chart_div{
  width: 100%;
  height: 500px;
}

#projects_div{
  h4{
    /*text-transform:uppercase;*/
    margin-bottom:0;
    +b{
      font-weight:200;
      background-color: #eee;
      padding:2px 10px;
      font-size:90%;
      line-height:2em;
    }
  }
  p{
    font-size: 0.9em;
    &::first-letter { 
      font-size: 100%;
      margin-left:0em;
    }
    small{
      color: #777;
      font-style: oblique;
      display: block;
      font-size:100%;
      text-transform: lowercase;
      b{
        font-style: normal;
        font-weight:100;
      }
    }
  }
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />