browser side rendering of json resume https://github.com/jsonresume
template: https://github.com/jsonresume/jsonresume-theme-boilerplate
based on example from: https://github.com/cultofmetatron/jquery-autobars
-
-
Save fraserxu/af7f2087c75bf21273f35e007f398c4c to your computer and use it in GitHub Desktop.
JSON Resume Browser Example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| background: #fff; | |
| font: 15px Arial, Helvetica, sans-serif; | |
| line-height: 1.4; | |
| margin: 50px 0; | |
| margin-bottom: 100px; | |
| } | |
| em { | |
| color: #999; | |
| } | |
| p { | |
| line-height: 1.4; | |
| } | |
| ul { | |
| margin-bottom: 0; | |
| } | |
| section { | |
| margin-bottom: 2em; | |
| } | |
| blockquote { | |
| margin: 0; | |
| margin-bottom: 1em; | |
| } | |
| .item { | |
| margin-bottom: 1em; | |
| } | |
| #resume { | |
| margin: 0 auto; | |
| max-width: 480px; | |
| padding: 0 20px; | |
| } | |
| #basics { | |
| margin-bottom: -10px; | |
| } | |
| #basics h3 { | |
| margin-top: 1.5em; | |
| } | |
| #basics .contact strong, | |
| #location strong { | |
| clear: both; | |
| float: left; | |
| line-height: 1.3; | |
| width: 120px; | |
| } | |
| #profiles, | |
| #skills { | |
| overflow: hidden; | |
| } | |
| #profiles .item, | |
| #skills .item { | |
| float: left; | |
| width: 50%; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <head> | |
| <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> | |
| <title>jQuery AutoBars Example</title> | |
| <link rel="stylesheet" href="boilerplate.css"> | |
| <script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js" type="text/javascript" charset="utf-8"></script> | |
| <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> | |
| <script src="jquery-autobars.js" type="text/javascript"></script> | |
| <script src="boilerplate.hbs" type="text/x-handlebars-template"></script> | |
| <script type="text/javascript"> | |
| $(document).ready(function() { | |
| $(document).autoBars(function() { | |
| $.getJSON("resume.json", function(json) { | |
| var data = { "resume" : json}; | |
| var $html = $.handlebarTemplates['boilerplate'](data); | |
| $('body').append($html); | |
| }) | |
| .fail(function(jqxhr, textStatus, error) { | |
| var err = textStatus + ", " + error; | |
| console.log( "Request Failed: " + err ); | |
| }); | |
| }); | |
| }) | |
| </script> | |
| </head> | |
| <body> | |
| </body> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*global Handlebars */ | |
| /*global jQuery */ | |
| /* | |
| * this file is a basic helper utility for people | |
| * using handlebars.js. it allowes you to store several | |
| * handlebars templates seperated with | |
| * | |
| * <!--#?templateid--> | |
| * | |
| * | |
| * <!--#?end--> | |
| * | |
| * Created by Peter de Croos (Cultofmetatron) | |
| * blog.peterdecroos.com | |
| */ | |
| (function($) { | |
| 'use strict'; | |
| var methods; | |
| methods = { | |
| initialize: function () {}, | |
| parseName: function (url) { | |
| var splitName, splitUrl, name; | |
| splitUrl = url.split('/'); | |
| //get everything past the last slash | |
| name = splitUrl[splitUrl.length - 1]; | |
| //strip querystring | |
| name = name.split('?')[0]; | |
| splitName = name.split('.'); | |
| if (splitName.length > 1) { | |
| //strip extension | |
| splitName = splitName.slice(0, -1); | |
| } | |
| return splitName.join('.'); | |
| }, | |
| parsePartials: function (data) { | |
| var endToken, separatorToken, END_TOKEN_SIZE, | |
| templates; | |
| //first we seperate the strings with a regular expression | |
| separatorToken = /<!--#\?[a-zA-Z]+-->/; //matches the headers | |
| endToken = /<!--#\?end-->/; | |
| END_TOKEN_SIZE = 12; | |
| templates = {}; | |
| // now we get the names of the partials | |
| // first remove all white space characters that are in groups > 2 | |
| data = data.split('\n').join('').split(/\s{2,}/).join(''); | |
| // now that we have a whitespace stripped version, | |
| // we loop through chunking them. | |
| // get the first token and extract the key | |
| while (data.match(separatorToken)) { | |
| var token = data.match(separatorToken)[0]; //gets the first token | |
| var name = token.match(/[a-zA-Z]+/)[0];//the name we get token | |
| data = data.slice(token.length); | |
| // feed in characters till you get to the end tag. | |
| var endIndex = data.search(endToken); | |
| var source = data.slice(0, endIndex); | |
| // increment to the next size; | |
| data = data.slice(endIndex + END_TOKEN_SIZE); | |
| templates[name] = Handlebars.compile(source); | |
| } | |
| // register partials for use within Handlebars templates | |
| // for usage, see https://github.com/wycats/handlebars.js/#partials | |
| for (var key in templates) { | |
| if (Object.prototype.hasOwnProperty.call(templates, key)) { | |
| methods.registerPartial(key, templates[key]); | |
| } | |
| } | |
| }, | |
| registerPartial: function (key, partial) { | |
| Handlebars.registerPartial(key, partial); | |
| }, | |
| mainTemplates: function (context) { | |
| var pipe = [];//promise objects | |
| context.find('[type="text/x-handlebars-template"]') | |
| .each(function (index, element) { | |
| var loadUrl = $(element).attr('src'); | |
| //var name = loadUrl.match(/([^\/]+)(?=\.\w+$)/)[0]; | |
| var name = methods.parseName(loadUrl); | |
| //here we gather all our promises | |
| pipe.push( | |
| $.ajax({ | |
| url: loadUrl, | |
| dataType: 'text' | |
| }).done(function (data) { | |
| jQuery.handlebarTemplates[name] = Handlebars.compile(data); | |
| }) | |
| ); | |
| }); | |
| return pipe; | |
| }, | |
| partials: function (context) { | |
| //we take the nodes and pull out partials | |
| var pipe = [];//promise objects | |
| context.find('[type="text/x-handlebars-partial"]') | |
| .each(function (index, element) { | |
| //handlebarTemplates = Handlebars.compile($(element).html()); | |
| var loadUrl = $(element).attr('src'); | |
| //gather the promises | |
| pipe.push( | |
| $.ajax({ | |
| url: loadUrl, | |
| dataType: 'text' | |
| }).done(function (data) { | |
| //each pageload is performed asynchronously and so the data exists only in this | |
| //context. here we scrub the input and use it; | |
| methods.parsePartials(data); | |
| }) | |
| ); | |
| }); | |
| return pipe; | |
| } | |
| }; | |
| $.fn.autoBars = function(options, callback) { | |
| var args = Array.prototype.slice.call(arguments, 0); | |
| if (args.length === 1 && typeof(args[0]) === 'function') { | |
| //checks if there's only one argument and sets the | |
| // callback to be the first | |
| callback = options; | |
| options = {}; | |
| } | |
| //so we don't overwrite it | |
| jQuery.handlebarTemplates = jQuery.handlebarTemplates || {}; | |
| jQuery.handlebarTemplates.partials = | |
| jQuery.handlebarTemplates.partials || {}; | |
| var settings = $.extend({ | |
| loadHandlebars : false, | |
| }, options); | |
| // gather all the promises from the multiple async calls | |
| var partialPromises = methods.partials(this); | |
| var templatesPromises = methods.mainTemplates(this); | |
| var promises = partialPromises.concat(templatesPromises); | |
| // we delay execution of the callback until all | |
| // the promises are fulfilled!! | |
| if (typeof(callback) === 'function') { | |
| $.when.apply(this, promises).done(callback); | |
| } | |
| // return the original jquery object | |
| return this; | |
| }; | |
| })(jQuery); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "basics": { | |
| "name": "Feng Xu", | |
| "label": "Web Developer", | |
| "picture": "", | |
| "email": "xvfeng123@gmail.com", | |
| "phone": "+61420860478", | |
| "website": "https://fraserxu.me", | |
| "summary": "A self-taught JavaScript Developer, major in English Language and Culture, currently work and live in Melbourne, Australia.", | |
| "profiles": [ | |
| { | |
| "network": "Twitter", | |
| "username": "fraserxu", | |
| "url": "https://twitter.com/fraserxu" | |
| }, | |
| { | |
| "network": "Github", | |
| "username": "fraserxu", | |
| "url": "https://github.com/fraserxu" | |
| } | |
| ] | |
| }, | |
| "work": [ | |
| { | |
| "company": "Envato", | |
| "position": "Front End Developer", | |
| "website": "https://envato.com", | |
| "startDate": "2016-11-25", | |
| "endDate": "", | |
| "summary": "Envato is the leading marketplace for creative assets and creative people. Millions of people around the world choose our marketplace, studio and courses to buy files, hire freelancers, or learn the skills needed to build websites, videos, apps, graphics and more.", | |
| "highlights": [ | |
| "Re-architecture the marketplace shopfront user experience with modern web technology" | |
| ] | |
| }, | |
| { | |
| "company": "Wiredcraft", | |
| "position": "Front End Developer", | |
| "website": "https://wiredcraft.com", | |
| "startDate": "2013-06-10", | |
| "endDate": "2016-10-10", | |
| "summary": "Wiredcraft is a group of design, data & technology nerds focused on creating amazing digital products.", | |
| "highlights": [ | |
| "Front end architecture for the voter registration system for Myanmar", | |
| "Build an open data map visualisation tool with React.js, D3 " | |
| ] | |
| } | |
| ], | |
| "volunteer": [], | |
| "education": [ | |
| { | |
| "institution": "Wenhua College", | |
| "area": "English Language and Culture", | |
| "studyType": "Bachelor", | |
| "startDate": "2009-09-10", | |
| "endDate": "2013-06-10", | |
| "gpa": "", | |
| "courses": [] | |
| } | |
| ], | |
| "awards": [], | |
| "publications": [], | |
| "skills": [], | |
| "languages": [ | |
| { | |
| "language": "English", | |
| "fluency": "IELTS competent user" | |
| }, | |
| { | |
| "language": "Chinese", | |
| "fluency": "Native speaker" | |
| } | |
| ], | |
| "interests": [], | |
| "references": [] | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment