Resume for Tumblr Customizations

ajax.html

<div id="restarget">Loading…</div>

<script id="restemplate" type="x-tmpl-mustache">
  <h1>{{ header.name }}
<h2>{{ header.title }}
  <h3> {{ header.email }}
<p>{{ overview.text }}
</script>

ajax.js

$(document).ready(function() {
  //$("#restarget").ready( function() {
  $.ajax({
    url: "https://api.github.com/gists/f66ab1397c9b45c7f694",
    dataType: "jsonp",
    success: function(returndata) {
      var template = $('#restemplate').html();
      var rendered = Mustache.render(template, JSON.parse(returndata.data.files.resumejson.content));
      $('#restarget').html(rendered);
    },
    error: function(error) {
      $('#restarget').html("Error getting data");
      console.log(error);
    }
  });
  //});
});

resume.js

<!-- Add the following tag to the top of the theme html, with the others. Under Edit Theme add full url to the data -->
<!-- http://full/url/path/to/raw/json -->
<meta name='text:Data URL' content=''/>

<!-- Insert reference to mustache and the mustache template. All script includes are at the bottom of the theme html -->
{block:IfDataURL}
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.1.2/mustache.min.js"></script>
<script id="template" type="x-tmpl-mustache">
        <h1>{{ header.name }}</h1>
        <h2>{{ header.title }}</h2>
        <div class="overview">
            <p> {{ overview.text }} </p>
            <div class="overview-left">
                <h3>Technology-focused Skills</h3>
                <ul>
                {{ #overview.technology-expertise }}
                    <li>{{ . }}</li>
                {{ /overview.technology-expertise }}
                </ul>
            </div>
            <div class="overview-right">
                <h3>Business-focused Skills</h3>
                <ul>
                {{ #overview.business-focused-expertise }}
                    <li>{{ . }}</li>
                {{ /overview.business-focused-expertise }}
                </ul>
            </div>
        </div>
        
        <div class="experience">
            <h2>Experience</h2>
            {{ #experience }}
                <div class="co-title">{{ company.title }}</div>
                <div class="co-name">{{ company.company }}</div>
                <div class="co-location">{{ company.location }}</div>
                <div class="co-overview">{{ company.overview }}</div>
                <div class="co-highlights">
                <ul>
                {{ #company.highlights }}
                    <li>{{ . }}</li>
                {{ /company.highlights }}
                </ul>
                </div>
            {{ /experience }}
        </div>
        
        <div class="education">
            <h2>Education</h2>
            <div class="ed-name">{{ education.college.name }}</div>
            <div class="ed-location">{{ education.college.location }}</div>
            <div class="ed-program">{{ education.college.program }}</div>
            
            <h2>Coursework</h2>
            <ul>
            {{ #education.coursework }}
                <li>{{ . }}
            {{ /education.coursework }}
            </ul>
            
            <h2>Certifications</h2>
            <ul>
            {{ #education.certifications }}
                <li>{{ . }}
            {{ /education.certifications }}
            </ul>
        </div>
    </script>
    {/block:IfDataURL}
    
    <!-- Add a target div to display the content on a new page -->
    <div id="target">Loading…</div>
    
    <!-- Add the JS to load the data and render the template. Add to the existing $(document).ready function -->
    {block:IfDataURL}
    $("#target").ready( function() {
            $.ajax({
              url: "{text: Data URL}",
              dataType: "text",
              success: function(returndata) {
                var template = $('#template').html();
                var rendered = Mustache.render(template, JSON.parse(returndata));
                $('#target').html(rendered);
              },
                error: function(error) {
                    console.log(error);
                    $('#target').html("Error fetching Data");
              }
            });
        });
    {/block:IfDataURL}