How can I embed this on my site or save it as HTML file?

Question

I want to make a resume using this tool:

http://registry.jsonresume.org/

It only gives me a Json file to download, but I don't know how to use it!

Additionally, I copied the code directly and pasted in dreamweaver and saved as html but it's not displaying properly, how can I use this ressource?

Answer 1

The JSON file provided by that site contains the data that you'll need to use to render your resume. You still have to create your site and bind the data from each field to their corresponding elements.

Here is an example using AngularJS - You can check this JS Fiddle which shows some of the resume fields rendered.

HTML

<div id="myApp" ng-app="app">
  <div id="resume" ng-controller="ResumeController">
    <header id="header">
      <div class="container">
        <div class="row">
          <div class="col-sm-9 col-sm-push-3">
            <h1>
            {{resume.basics.name}}
            </h1>
            <h2>
            {{resume.basics.label}}
            </h2>
          </div>
        </div>
      </div>
    </header>
  <div id="content" class="container">
    <section id="contact" class="row">
      <aside class="col-sm-3">
        <h3>Contact</h3>
      </aside>
      <div class="col-sm-9">
        <div class="row">
          <div class="col-sm-6">
            <strong>Email</strong>
            <div class="email">{{resume.basics.email}}</div>
          </div>
          <div class="col-sm-6">
            <strong>Phone</strong>
            <div class="phone">{{resume.basics.phone}}</div>
          </div>
          <div class="col-sm-6">
            <strong>Website</strong>
            <div class="website">
              <a href="https://richardhendricks.com">{{resume.basics.website}}</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>

JavaScript

var app = angular.module('app', []);

app.controller('ResumeController', ['$scope', function($scope) {
    $scope.resume = {
  "basics": {
    "name": "Richard Hendriks",
    "label": "Programmer",
    "picture": "",
    "email": "richard.hendriks@gmail.com",
    "phone": "(912) 555-4321",
    "website": "https://richardhendricks.com",
    "summary": "Richard hails from Tulsa. He has earned degrees from the University of Oklahoma and Stanford. (Go Sooners and Cardinal!) Before starting Pied Piper, he worked for Hooli as a part time software developer. While his work focuses on applied information theory, mostly optimizing lossless compression schema of both the length-limited and adaptive variants, his non-work interests range widely, everything from quantum computing to chaos theory. He could tell you about it, but THAT would NOT be a “length-limited” conversation!",
    "location": {
      "address": "2712 Broadway St",
      "postalCode": "CA 94115",
      "city": "San Francisco",
      "countryCode": "US",
      "region": "California"
    },
    "profiles": [
      {
        "network": "Twitter",
        "username": "neutralthoughts",
        "url": ""
      },
      {
        "network": "SoundCloud",
        "username": "dandymusicnl",
        "url": "https://soundcloud.com/dandymusicnl"
      }
    ]
  },
  "work": [
    {
      "company": "Pied Piper",
      "position": "CEO/President",
      "website": "https://piedpiper.com",
      "startDate": "2013-12-01",
      "endDate": "2014-12-01",
      "summary": "Pied Piper is a multi-platform technology based on a proprietary universal compression algorithm that has consistently fielded high Weisman Scores™ that are not merely competitive, but approach the theoretical limit of lossless compression.",
      "highlights": [
        "Build an algorithm for artist to detect if their music was violating copy right infringement laws",
        "Successfully won Techcrunch Disrupt",
        "Optimized an algorithm that holds the current world record for Weisman Scores"
      ]
    }
  ],
  "volunteer": [
    {
      "organization": "CoderDojo",
      "position": "Teacher",
      "website": "https://coderdojo.com/",
      "startDate": "2012-01-01",
      "endDate": "2013-01-01",
      "summary": "Global movement of free coding clubs for young people.",
      "highlights": [
        "Awarded 'Teacher of the Month'"
      ]
    }
  ],
  "education": [
    {
      "institution": "University of Oklahoma",
      "area": "Information Technology",
      "studyType": "Bachelor",
      "startDate": "2011-06-01",
      "endDate": "2014-01-01",
      "gpa": "4.0",
      "courses": [
        "DB1101 - Basic SQL",
        "CS2011 - Java Introduction"
      ]
    }
  ],
  "awards": [
    {
      "title": "Digital Compression Pioneer Award",
      "date": "2014-11-01",
      "awarder": "Techcrunch",
      "summary": "There is no spoon."
    }
  ],
  "publications": [
    {
      "name": "Video compression for 3d media",
      "publisher": "Hooli",
      "releaseDate": "2014-10-01",
      "website": "https://en.wikipedia.org/wiki/Silicon_Valley_(TV_series)",
      "summary": "Innovative middle-out compression algorithm that changes the way we store data."
    }
  ],
  "skills": [
    {
      "name": "Web Development",
      "level": "Master",
      "keywords": [
        "HTML",
        "CSS",
        "Javascript"
      ]
    },
    {
      "name": "Compression",
      "level": "Master",
      "keywords": [
        "Mpeg",
        "MP4",
        "GIF"
      ]
    }
  ],
  "languages": [
    {
      "language": "English",
      "fluency": "Native speaker"
    }
  ],
  "interests": [
    {
      "name": "Wildlife",
      "keywords": [
        "Ferrets",
        "Unicorns"
      ]
    }
  ],
  "references": [
    {
      "name": "Erlich Bachman",
      "reference": "It is my pleasure to recommend Richard, his performance working as a consultant for Main St. Company proved that he will be a valuable addition to any company."
    }
  ]
};
}]);

---

Essentially, you'll need to put together your HTML page and then bind the data provided in that JSON file.