984 lines
63 KiB
HTML
984 lines
63 KiB
HTML
<html>
|
|
<head>
|
|
<title>JSON Resume Editor</title>
|
|
|
|
<link rel="stylesheet" href="vendor/w3.4.13.css">
|
|
<link rel="stylesheet" href="vendor/fontawesome-free-5.11.2-web/css/all.min.css" type="text/css" media="all" />
|
|
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body class="w3-light-grey">
|
|
|
|
|
|
<!-- VueJS App -->
|
|
<div id="app">
|
|
|
|
|
|
<!-- Top container -->
|
|
<div class="w3-bar w3-top w3-black w3-large" style="z-index:4">
|
|
<button class="w3-bar-item w3-button w3-hide-large w3-hover-none w3-hover-text-light-grey" v-on:click="w3_open"><i class="fa fa-bars"></i> Menu</button>
|
|
<span class="w3-bar-item w3-right">JSON Resume Editor</span>
|
|
</div>
|
|
|
|
<!-- Sidebar/menu -->
|
|
<nav class="w3-sidebar w3-collapse w3-white w3-animate-left" style="z-index:3;width:300px;" id="mySidebar">
|
|
<!-- <div class="w3-container w3-row">
|
|
<div class="w3-col s4">
|
|
<img src="/w3images/avatar2.png" class="w3-circle w3-margin-right" style="width:46px">
|
|
</div>
|
|
<div class="w3-col s8 w3-bar">
|
|
<span>Welcome, <strong>Mike</strong></span><br>
|
|
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-envelope"></i></a>
|
|
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-user"></i></a>
|
|
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-cog"></i></a>
|
|
</div>
|
|
</div>
|
|
<hr> -->
|
|
<div class="w3-bar-block">
|
|
<a href="#/" class="w3-bar-item w3-button w3-padding w3-blue"><i class="fas fa-home"></i> Home</a>
|
|
</div>
|
|
<div class="w3-container">
|
|
<h5>Resume Sections</h5>
|
|
</div>
|
|
<div class="w3-bar-block">
|
|
<a href="#/" class="w3-bar-item w3-button w3-padding-16 w3-hide-large w3-dark-grey w3-hover-black" v-on:click="w3_close" title="close menu"><i class="fas fa-times"></i> Close Menu</a>
|
|
<a href="#/section/basics" class="w3-bar-item w3-button w3-padding"><i class="far fa-address-card"></i> Basics</a>
|
|
<a href="#/section/work" class="w3-bar-item w3-button w3-padding"><i class="fas fa-building"></i> Work</a>
|
|
<a href="#/section/volunteer" class="w3-bar-item w3-button w3-padding"><i class="fas fa-hands-helping"></i> Volunteer</a>
|
|
<a href="#/section/education" class="w3-bar-item w3-button w3-padding"><i class="fas fa-graduation-cap"></i> Education</a>
|
|
<a href="#/section/awards" class="w3-bar-item w3-button w3-padding"><i class="fas fa-award"></i> Awards</a>
|
|
<a href="#/section/publications" class="w3-bar-item w3-button w3-padding"><i class="fas fa-book"></i> Publications</a>
|
|
<a href="#/section/skills" class="w3-bar-item w3-button w3-padding"><i class="fas fa-tools"></i> Skills</a>
|
|
<a href="#/section/languages" class="w3-bar-item w3-button w3-padding"><i class="fas fa-heart"></i> Languages</a>
|
|
<a href="#/section/interests" class="w3-bar-item w3-button w3-padding"><i class="fas fa-map"></i> Interests</a>
|
|
<a href="#/section/references" class="w3-bar-item w3-button w3-padding"><i class="fas fa-list"></i> References</a>
|
|
</div>
|
|
<hr>
|
|
<div class="w3-bar-block">
|
|
<a href="#/preview" class="w3-bar-item w3-button w3-padding"><i class="fas fa-print"></i> Preview</a>
|
|
<a href="#/import" class="w3-bar-item w3-button w3-padding"><i class="fas fa-file-upload"></i> Import</a>
|
|
<a href="#/export" class="w3-bar-item w3-button w3-padding"><i class="fas fa-file-download"></i> Export</a>
|
|
<span class="w3-bar-item w3-button w3-padding" v-on:click="resetResume"><i class="fas fa-sync-alt"></i> Reset Resume</span>
|
|
</div>
|
|
<hr>
|
|
<div class="w3-bar-block">
|
|
<a href="#/about" class="w3-bar-item w3-button w3-padding"><i class="fas fa-info-circle"></i> About</a>
|
|
</div>
|
|
<br><br>
|
|
</nav>
|
|
|
|
|
|
<!-- Overlay effect when opening sidebar on small screens -->
|
|
<div class="w3-overlay w3-hide-large w3-animate-opacity" v-on:click="w3_close" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
|
|
|
|
|
|
<!-- End Page Content -->
|
|
<div class="w3-main w3-padding-16">
|
|
|
|
<div id="full-page-overlay">
|
|
<div id="full-page-overlay-text">Please wait while we load the goodness.</div>
|
|
</div>
|
|
|
|
<!-- Header -->
|
|
<header class="w3-container">
|
|
<h5 v-if="activePage.title != ''"><b><i class='page-title' style="margin-right: 20px;" v-if="activePage.fontAwesomeIconCss != ''" v-bind:class="activePage.fontAwesomeIconCss"></i> {{activePage.title}}</b></h5>
|
|
</header>
|
|
|
|
<div class="w3-container">
|
|
<router-view>Loading...</router-view>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Footer -->
|
|
<!-- <footer class="w3-container w3-padding-16 w3-dark-grey w3-margin-top">
|
|
|
|
</footer> -->
|
|
</div>
|
|
<!-- /End Page Content -->
|
|
|
|
|
|
</div>
|
|
<!-- /VueJS App -->
|
|
|
|
<!-- Component Templates -->
|
|
<template type="text/x-template" id="home-template" lang="html">
|
|
<div id="home-root">
|
|
<p>
|
|
Welcome to the <a href="https://jsonresume.org/">JSON Resume</a> editor.
|
|
</p>
|
|
<p>
|
|
No registratioon required. No data stored.
|
|
</p>
|
|
<p>
|
|
<ol>
|
|
<li>To create your JSON resume, fill in the details under each section.</li>
|
|
<li>At any time <a href="#/preview">Preview</a> how your resume could look.</li>
|
|
<li>When you're finished <a href="">export</a> your resume by copying the JSON output into a texdt file.</li>
|
|
<li>
|
|
Create a public Gist in your <a href="https://github.com/">GitHub</a> account (create a new account for free) with a filenane "resume.json".<br>
|
|
(See an <a href="https://gist.github.com/jsnelders/cab89beb9bc0e677ef3f5ec30ef4260b">example here</a>.)
|
|
</li>
|
|
<li>
|
|
View your live resume on jsonresume.org by browsing to https://registry.jsonresume.org/{your_github_profile}.<br>
|
|
(see an <a href="https://registry.jsonresume.org/jsnelders">example here</a>.)
|
|
</li>
|
|
</ol>
|
|
</p>
|
|
<p>
|
|
Don't worry about saving. All information is automatically saved in your browser, which means you can close your browser, come back tomorrow and everything will be as you left it.
|
|
</p>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
|
|
<template type="text/x-template" id="section-basics-template" lang="html">
|
|
<div id="section-basics-root">
|
|
<div class="w3-row">
|
|
<div class="w3-col m6">
|
|
<form class="w3-container w3-card-4">
|
|
<p>
|
|
<label for="name" class="w3-text-blue required-field"><b>Full Name</b></label>
|
|
<input id="name" class="w3-input w3-border" type="text" v-model="$root.sections.basics.name" required>
|
|
<small id="nameHelp" class="form-help text-muted">Your full name.</small>
|
|
</p>
|
|
<p>
|
|
<label for="label" class="w3-text-blue required-field"><b>Label</b></label>
|
|
<input id="label" class="w3-input w3-border" type="text" v-model="$root.sections.basics.label" required>
|
|
<small id="labelHelp" class="form-help text-muted">Job or professional title (e.g. software developer, IT manager, graphic designer).</small>
|
|
</p>
|
|
<p>
|
|
<label for="picture" class="w3-text-blue"><b>Picture</b></label>
|
|
<input id="picture" class="w3-input w3-border" type="text" v-model="$root.sections.basics.picture">
|
|
<small id="pictureHelp" class="form-help text-muted">URL (as per RFC 3986) to a image in JPEG or PNG format of your profile photo.</small>
|
|
</p>
|
|
<p>
|
|
<label for="email" class="w3-text-blue"><b>Email</b></label>
|
|
<input id="email" class="w3-input w3-border" type="text" v-model="$root.sections.basics.email" required>
|
|
<small id="emailHelp" class="form-help text-muted">Email address (e.g. person@domain.com)</small>
|
|
</p>
|
|
<p>
|
|
<label for="phone" class="w3-text-blue"><b>Phone</b></label>
|
|
<input id="phone" class="w3-input w3-border" type="text" v-model="$root.sections.basics.phone">
|
|
<small id="phoneHelp" class="form-help text-muted">Phone numbers are stored as strings so use any format you like, e.g. 712-117-2923.</small>
|
|
</p>
|
|
<p>
|
|
<label for="website" class="w3-text-blue"><b>Website</b></label>
|
|
<input id="website" class="w3-input w3-border" type="text" v-model="$root.sections.basics.website">
|
|
<small id="websiteHelp" class="form-help text-muted">URL (as per RFC 3986) to your website, e.g. personal homepage.</small>
|
|
</p>
|
|
<p>
|
|
<label for="summary" class="w3-text-blue"><b>Summary</b></label>
|
|
<textarea id="summary" rows="8" class="w3-input w3-border" type="text" v-model="$root.sections.basics.summary"></textarea>
|
|
<small id="summaryHelp" class="form-help text-muted">About yourself - what your do, who you are, what you are looking for in your career.</small>
|
|
</p>
|
|
|
|
|
|
<h5 class="margin-top-32">Location</h5>
|
|
<small id="locationHelp" class="form-help text-muted">Where are you located?</small>
|
|
<p>
|
|
<label for="location.address" class="w3-text-blue"><b>Address</b></label>
|
|
<input id="location.address" class="w3-input w3-border" type="text" v-model="$root.sections.basics.location.address">
|
|
<small id="addressHelp" class="form-help text-muted">Your street address</small>
|
|
</p>
|
|
<p>
|
|
<label for="location.postalCode" class="w3-text-blue"><b>Postal Code</b></label>
|
|
<input id="location.postalCode" class="w3-input w3-border" type="text" v-model="$root.sections.basics.location.postalCode">
|
|
<small id="postalCodeHelp" class="form-help text-muted">Post or Zip cod</small>
|
|
</p>
|
|
<p>
|
|
<label for="location.city" class="w3-text-blue"><b>City</b></label>
|
|
<input id="location.city" class="w3-input w3-border" type="text" v-model="$root.sections.basics.location.city">
|
|
<small id="cityHelp" class="form-help text-muted">City or town</small>
|
|
</p>
|
|
<p>
|
|
<label for="location.countryCode" class="w3-text-blue"><b>Country Code</b></label>
|
|
<input id="location.countryCode" class="w3-input w3-border" type="text" v-model="$root.sections.basics.location.countryCode">
|
|
<small id="countryCodeHelp" class="form-help text-muted">The 2-character country code per ISO-3166-1 ALPHA-2, e.g. US, AU, IN (https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes)</small>
|
|
</p>
|
|
<p>
|
|
<label for="location.region" class="w3-text-blue"><b>Region</b></label>
|
|
<input id="location.region" class="w3-input w3-border" type="text" v-model="$root.sections.basics.location.region">
|
|
<small id="regionHelp" class="form-help text-muted">The general region or status where you live - e.g. a US state, or a province, for instance.</small>
|
|
</p>
|
|
</form>
|
|
|
|
<h5 class="margin-top-32">Social Network Profiles</h5>
|
|
Specify any number of social networks that you participate in.
|
|
<button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addProfile">+ Add Profile</button>
|
|
|
|
<form class="w3-container w3-card-4 w3-margin-top" v-for="profile in $root.sections.basics.profiles">
|
|
<p>
|
|
<label for="profiles.network" class="w3-text-blue"><b>Network</b></label>
|
|
<input id="profiles.network" class="w3-input w3-border" type="text" v-model="profile.network">
|
|
<small id="networkHelp" class="form-help text-muted">Name of the network (e.g. LinkedIn, Facebook, Twitter)</small>
|
|
</p>
|
|
<p>
|
|
<label for="profiles.username" class="w3-text-blue"><b>Username</b></label>
|
|
<input id="profiles.username" class="w3-input w3-border" type="text" v-model="profile.username">
|
|
<small id="usernameHelp" class="form-help text-muted">Your username in the network (e.g. "neutralthoughts")</small>
|
|
</p>
|
|
<p>
|
|
<label for="profiles.url" class="w3-text-blue"><b>URL</b></label>
|
|
<input id="profiles.url" class="w3-input w3-border" type="text" v-model="profile.url">
|
|
<small id="urlHelp" class="form-help text-muted">URL to your profile in the network (e.g. http://twitter.example.com/neutralthoughts)</small>
|
|
</p>
|
|
</form>
|
|
</div>
|
|
<div class="w3-col m6">
|
|
<div class="preview w3-container w3-card-4 w3-padding-16 w3-margin-left">
|
|
<preview-field label="Full Name" v-bind:value="$root.sections.basics.name"></preview-field>
|
|
<preview-field label="Label" v-bind:value="$root.sections.basics.label"></preview-field>
|
|
<preview-field label="Picture" v-bind:value="$root.sections.basics.picture" format="url"></preview-field>
|
|
|
|
<preview-field label="Email" v-bind:value="$root.sections.basics.email"></preview-field>
|
|
<preview-field label="Phone" v-bind:value="$root.sections.basics.phone"></preview-field>
|
|
<preview-field label="Website" v-bind:value="$root.sections.basics.website"></preview-field>
|
|
|
|
<preview-field label="Summary" v-bind:value="$root.sections.basics.summary" format="multi-line"></preview-field>
|
|
|
|
<h5 class="margin-top-32">Location</h5>
|
|
<preview-field label="Address" v-bind:value="$root.sections.basics.location.address"></preview-field>
|
|
<preview-field label="Postal/Zip Code" v-bind:value="$root.sections.basics.location.postalCode"></preview-field>
|
|
<preview-field label="City" v-bind:value="$root.sections.basics.location.city"></preview-field>
|
|
<preview-field label="Country Code" v-bind:value="$root.sections.basics.location.countryCode"></preview-field>
|
|
<preview-field label="Region" v-bind:value="$root.sections.basics.location.region"></preview-field>
|
|
</div>
|
|
<div class="w3-container">
|
|
<h5 class="margin-top-32">Social Network Profiles</h5>
|
|
</div>
|
|
<div class="preview w3-container w3-card-4 w3-padding-16 w3-margin-left w3-margin-top" v-for="profile in $root.sections.basics.profiles">
|
|
<preview-field label="Network" v-bind:value="profile.network"></preview-field>
|
|
<preview-field label="Username" v-bind:value="profile.username"></preview-field>
|
|
<preview-field label="URL" v-bind:value="profile.url"></preview-field>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
|
|
|
|
<template type="text/x-template" id="section-work-template" lang="html">
|
|
<div id="section-work-root">
|
|
<button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addPosition">+ Add Position</button>
|
|
|
|
<div class="w3-row">
|
|
<div class="w3-col m6">
|
|
<form class="w3-container w3-card-4 margin-top-32" v-for="(work, w_index) in $root.sections.work">
|
|
<p>
|
|
<label for="company" class="w3-text-blue required-field"><b>Company</b></label>
|
|
<input id="company" class="w3-input w3-border" type="text" v-model="work.company" required>
|
|
<small id="companyHelp" class="form-help text-muted">Name of the company or organisation where you worked.</small>
|
|
</p>
|
|
<p>
|
|
<label for="position" class="w3-text-blue required-field"><b>Position</b></label>
|
|
<input id="position" class="w3-input w3-border" type="text" v-model="work.position" required>
|
|
<small id="positionHelp" class="form-help text-muted">Your role or position title.</small>
|
|
</p>
|
|
<p>
|
|
<label for="website" class="w3-text-blue"><b>Website</b></label>
|
|
<input id="website" class="w3-input w3-border" type="url" v-model="work.website">
|
|
<small id="websiteHelp" class="form-help text-muted">Company website.</small>
|
|
</p>
|
|
<p>
|
|
<label for="startDate" class="w3-text-blue"><b>Start Date</b></label>
|
|
<input id="startDate" class="w3-input w3-border" type="month" v-model="work.startDate" required>
|
|
<small id="startDateHelp" class="form-help text-muted">Date you started in the position.</small>
|
|
</p>
|
|
<p>
|
|
<label for="endDate" class="w3-text-blue"><b>End Date</b></label>
|
|
<input id="endDate" class="w3-input w3-border" type="month" v-model="work.endDate">
|
|
<small id="endDateHelp" class="form-help text-muted">Date you finished in the position (leave blank if you are still currently in it).</small>
|
|
</p>
|
|
<p>
|
|
<label for="summary" class="w3-text-blue"><b>Summary</b></label>
|
|
<textarea id="summary" rows="8" class="w3-input w3-border" type="text" v-model="work.summary"></textarea>
|
|
<small id="summaryHelp" class="form-help text-muted">Details of your work, responsibilities and achievements. And a little about the company.</small>
|
|
</p>
|
|
|
|
|
|
<h5 class="margin-top-32">Highlights</h5>
|
|
<small id="highlightsHelp" class="form-help text-muted">Briefly describe successes and outcomes (e.g. Increased profits by 20% from 2011-2012 through viral advertising).</small>
|
|
|
|
<button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addHighlight(w_index)">+ Add Highlight</button>
|
|
<ol>
|
|
<li v-for="(highlight, h_index) in work.highlights">
|
|
<input class="w3-input w3-border" type="text" v-model="$root.sections.work[w_index].highlights[h_index]">
|
|
</li>
|
|
</ol>
|
|
</form>
|
|
</div>
|
|
<div class="w3-col m6">
|
|
<div class="preview w3-container w3-card-4 w3-padding-16 w3-margin-left margin-top-32" v-for="(work, w_index) in $root.sections.work">
|
|
<preview-field label="Company" v-bind:value="work.company"></preview-field>
|
|
<preview-field label="Position" v-bind:value="work.position"></preview-field>
|
|
<preview-field label="Website" v-bind:value="work.website" format="url"></preview-field>
|
|
<preview-field label="Start Date" v-bind:value="work.startDate" format="date"></preview-field>
|
|
<preview-field label="End Date" v-bind:value="work.endDate" format="date"></preview-field>
|
|
<preview-field label="Summary" v-bind:value="work.summary" format="multi-line"></preview-field>
|
|
|
|
<h5 class="margin-top-32">Highlights</h5>
|
|
<ol>
|
|
<li v-for="(highlight, h_index) in work.highlights">
|
|
<preview-field label="" v-bind:value="$root.sections.work[w_index].highlights[h_index]" format="list-item"></preview-field>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
|
|
<template type="text/x-template" id="section-volunteer-template" lang="html">
|
|
<div id="section-volunteer-root">
|
|
<button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addPosition">+ Add Position</button>
|
|
|
|
<div class="w3-row">
|
|
<div class="w3-col m6">
|
|
<form class="w3-container w3-card-4 margin-top-32" v-for="(vol, v_index) in $root.sections.volunteer">
|
|
<div>
|
|
<p>
|
|
<label for="organization" class="w3-text-blue required-field"><b>Organisation</b></label>
|
|
<input id="organization" class="w3-input w3-border" type="text" v-model="vol.organization" required>
|
|
<small id="organizationHelp" class="form-help text-muted">Name of the organisation you volunteered for.</small>
|
|
</p>
|
|
<p>
|
|
<label for="position" class="w3-text-blue required-field"><b>Position</b></label>
|
|
<input id="position" class="w3-input w3-border" type="text" v-model="vol.position" required>
|
|
<small id="positionHelp" class="form-help text-muted">Role or position title.</small>
|
|
</p>
|
|
<p>
|
|
<label for="website" class="w3-text-blue"><b>Website</b></label>
|
|
<input id="website" class="w3-input w3-border" type="url" v-model="vol.website">
|
|
<small id="websiteHelp" class="form-help text-muted">Company website.</small>
|
|
</p>
|
|
<p>
|
|
<label for="startDate" class="w3-text-blue"><b>Start Date</b></label>
|
|
<input id="startDate" class="w3-input w3-border" type="month" v-model="vol.startDate" required>
|
|
<small id="startDateHelp" class="form-help text-muted">Date you started work (full date or month and year)</small>
|
|
</p>
|
|
<p>
|
|
<label for="endDate" class="w3-text-blue"><b>End Date</b></label>
|
|
<input id="endDate" class="w3-input w3-border" type="month" v-model="vol.endDate">
|
|
<small id="endDateHelp" class="form-help text-muted">End date (if not current).</small>
|
|
</p>
|
|
<p>
|
|
<label for="summary" class="w3-text-blue"><b>Summary</b></label>
|
|
<textarea id="summary" rows="8" class="w3-input w3-border" type="text" v-model="vol.summary"></textarea>
|
|
<small id="summaryHelp" class="form-help text-muted">Details of your work, responsibilities and achievements. And a little about the company.</small>
|
|
</p>
|
|
|
|
|
|
<h5 class="margin-top-32">Highlights</h5>
|
|
<small id="highlightsHelp" class="form-help text-muted">Briefly describe successes and outcomes (e.g. Increased profits by 20% from 2011-2012 through viral advertising).</small>
|
|
|
|
<button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addHighlight(v_index)">+ Add Highlight</button>
|
|
<ol>
|
|
<li v-for="(highlight, h_index) in vol.highlights">
|
|
<input class="w3-input w3-border" type="text" v-model="$root.sections.volunteer[v_index].highlights[h_index]">
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="w3-col m6">
|
|
<div class="preview w3-container w3-card-4 w3-padding-16 w3-margin-left margin-top-32" v-for="(vol, v_index) in $root.sections.volunteer">
|
|
<preview-field label="Organisation" v-bind:value="vol.organization"></preview-field>
|
|
<preview-field label="Position" v-bind:value="vol.position"></preview-field>
|
|
<preview-field label="Website" v-bind:value="vol.website" format="url"></preview-field>
|
|
<preview-field label="Start Date" v-bind:value="vol.startDate"></preview-field>
|
|
<preview-field label="End Date" v-bind:value="vol.endDate"></preview-field>
|
|
<preview-field label="Summary" v-bind:value="vol.summary" format="multi-line"></preview-field>
|
|
|
|
<h5 class="margin-top-32">Highlights</h5>
|
|
<ol>
|
|
<li v-for="(highlight, h_index) in vol.highlights">
|
|
<preview-field label="" v-bind:value="$root.sections.volunteer[v_index].highlights[h_index]" format="list-item"></preview-field>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
|
|
<template type="text/x-template" id="section-education-template" lang="html">
|
|
<div id="section-education-root">
|
|
<button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addEducation">+ Add Education</button>
|
|
|
|
<div class="w3-row">
|
|
<div class="w3-col m6">
|
|
<form class="w3-container w3-card-4 margin-top-32" v-for="(edu, e_index) in $root.sections.education">
|
|
<p>
|
|
<label for="institution" class="w3-text-blue required-field"><b>Institution</b></label>
|
|
<input id="institution" class="w3-input w3-border" type="text" v-model="edu.institution" required>
|
|
<small id="institutionHelp" class="form-help text-muted">Name of the institution (e.g. Massachusetts Institute of Technology).</small>
|
|
</p>
|
|
<p>
|
|
<label for="area" class="w3-text-blue required-field"><b>Area</b></label>
|
|
<input id="area" class="w3-input w3-border" type="text" v-model="edu.area" required>
|
|
<small id="areaHelp" class="form-help text-muted">Discipline or area of interest (e.g. Arts).</small>
|
|
</p>
|
|
<p>
|
|
<label for="studyType" class="w3-text-blue"><b>Study Type</b></label>
|
|
<input id="studyType" class="w3-input w3-border" type="text" v-model="edu.studyType">
|
|
<small id="studyTypeeHelp" class="form-help text-muted">Type of study (e.g. Bachelor, Masters, PhD).</small>
|
|
</p>
|
|
<p>
|
|
<label for="startDate" class="w3-text-blue"><b>Start Date</b></label>
|
|
<input id="startDate" class="w3-input w3-border" type="month" v-model="edu.startDate" required>
|
|
<small id="startDateHelp" class="form-help text-muted">Date you started</small>
|
|
</p>
|
|
<p>
|
|
<label for="endDate" class="w3-text-blue"><b>End Date</b></label>
|
|
<input id="endDate" class="w3-input w3-border" type="month" v-model="edu.endDate">
|
|
<small id="endDateHelp" class="form-help text-muted">Date completed study.</small>
|
|
</p>
|
|
<p>
|
|
<label for="gpa" class="w3-text-blue"><b>GPA</b></label>
|
|
<input id="gpa" class="w3-input w3-border" type="text" v-model="edu.gpa">
|
|
<small id="gpaHelp" class="form-help text-muted">Grade Point Average (e.g. 3.67/4.0).</small>
|
|
</p>
|
|
|
|
<h5 class="margin-top-32">Courses</h5>
|
|
<small id="highlightsHelp" class="form-help text-muted">List notable courses/subjects (e.g. H1302 - Introduction to American history).</small>
|
|
|
|
<button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addCourse(e_index)">+ Add Course</button>
|
|
<ol>
|
|
<li v-for="(course, c_index) in edu.courses">
|
|
<input class="w3-input w3-border" type="text" v-model="$root.sections.education[e_index].courses[c_index]">
|
|
</li>
|
|
</ol>
|
|
</form>
|
|
</div>
|
|
<div class="w3-col m6">
|
|
<div class="preview w3-container w3-card-4 w3-padding-16 w3-margin-left margin-top-32" v-for="(edu, e_index) in $root.sections.education">
|
|
<preview-field label="Institution" v-bind:value="edu.institution"></preview-field>
|
|
<preview-field label="Area" v-bind:value="edu.area"></preview-field>
|
|
<preview-field label="Study Type" v-bind:value="edu.studyType"></preview-field>
|
|
<preview-field label="Start Date" v-bind:value="edu.startDate" format="date"></preview-field>
|
|
<preview-field label="End Date" v-bind:value="edu.endDate" format="date"></preview-field>
|
|
<preview-field label="GPA" v-bind:value="edu.gpa"></preview-field>
|
|
|
|
<h5 class="margin-top-32">Courses</h5>
|
|
<ol>
|
|
<li v-for="(course, c_index) in edu.courses">
|
|
<preview-field label="" v-bind:value="$root.sections.education[e_index].courses[c_index]" format="list-item"></preview-field>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
|
|
<template type="text/x-template" id="section-awards-template" lang="html">
|
|
<div id="section-awards-root">
|
|
Specify any awards you have received throughout your professional career.
|
|
<button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addAward">+ Add Award</button>
|
|
|
|
<div class="w3-row">
|
|
<div class="w3-col m6">
|
|
<form class="w3-container w3-card-4 margin-top-32" v-for="(award, a_index) in $root.sections.awards">
|
|
<p>
|
|
<label for="title" class="w3-text-blue required-field"><b>Title</b></label>
|
|
<input id="title" class="w3-input w3-border" type="text" v-model="award.title" required>
|
|
<small id="titleHelp" class="form-help text-muted">Name of the award (e.g. One of the 100 greatest minds of the century).</small>
|
|
</p>
|
|
<p>
|
|
<label for="date" class="w3-text-blue required-field"><b>Date</b></label>
|
|
<input id="date" class="w3-input w3-border" type="month" v-model="award.date" required>
|
|
<small id="dateHelp" class="form-help text-muted">When the award was received</small>
|
|
</p>
|
|
<p>
|
|
<label for="awarder" class="w3-text-blue"><b>Awarder</b></label>
|
|
<input id="awarder" class="w3-input w3-border" type="text" v-model="award.awarder">
|
|
<small id="awarderHelp" class="form-help text-muted">Who gave the award (e.g. Time Magazine).</small>
|
|
</p>
|
|
<p>
|
|
<label for="summary" class="w3-text-blue"><b>Summary</b></label>
|
|
<textarea id="summary" rows="8" class="w3-input w3-border" type="text" v-model="award.summary"></textarea>
|
|
<small id="summaryHelp" class="form-help text-muted">Describe the award and circumstances (e.g. Received for my work with Quantum Physics).</small>
|
|
</p>
|
|
</form>
|
|
</div>
|
|
<div class="w3-col m6">
|
|
<div class="preview w3-container w3-card-4 w3-padding-16 w3-margin-left margin-top-32" v-for="(award, a_index) in $root.sections.awards">
|
|
<preview-field label="Title" v-bind:value="award.title"></preview-field>
|
|
<preview-field label="Date" v-bind:value="award.date"></preview-field>
|
|
<preview-field label="Awarder" v-bind:value="award.awarder"></preview-field>
|
|
<preview-field label="Summary" v-bind:value="award.summary" format="multi-line"></preview-field>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
|
|
<template type="text/x-template" id="section-publications-template" lang="html">
|
|
<div id="section-publications-root">
|
|
Specify your publications through your career.
|
|
|
|
<button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addPublication">+ Add Publication</button>
|
|
|
|
<div class="w3-row">
|
|
<div class="w3-col m6">
|
|
<form class="w3-container w3-card-4 margin-top-32" v-for="(publication, p_index) in $root.sections.publications">
|
|
<p>
|
|
<label for="name" class="w3-text-blue required-field"><b>Name</b></label>
|
|
<input id="name" class="w3-input w3-border" type="text" v-model="publication.name" required>
|
|
<small id="nameHelp" class="form-help text-muted">Name of the article (e.g. The World Wide Web).</small>
|
|
</p>
|
|
<p>
|
|
<label for="publisher" class="w3-text-blue required-field"><b>Publisher</b></label>
|
|
<input id="publisher" class="w3-input w3-border" type="text" v-model="publication.publisher" required>
|
|
<small id="publisherHelp" class="form-help text-muted">Name of the publication (e.g. IEEE, Computer Magazine).</small>
|
|
</p>
|
|
<p>
|
|
<label for="releaseDate" class="w3-text-blue"><b>Release Date</b></label>
|
|
<input id="releaseDate" class="w3-input w3-border" type="month" v-model="publication.releaseDate" required>
|
|
<small id="releaseDateDateHelp" class="form-help text-muted">When it was published.</small>
|
|
</p>
|
|
<p>
|
|
<label for="website" class="w3-text-blue"><b>Website</b></label>
|
|
<input id="website" class="w3-input w3-border" type="url" v-model="publication.website">
|
|
<small id="websiteHelp" class="form-help text-muted">URL of the publisher or the actual publication.</small>
|
|
</p>
|
|
<p>
|
|
<label for="summary" class="w3-text-blue"><b>Summary</b></label>
|
|
<textarea id="summary" rows="8" class="w3-input w3-border" type="text" v-model="publication.summary"></textarea>
|
|
<small id="summaryHelp" class="form-help text-muted">Details of the article (e.g. Discussion of the World Wide Web, HTTP, HTML.).</small>
|
|
</p>
|
|
</form>
|
|
</div>
|
|
<div class="w3-col m6">
|
|
<div class="preview w3-container w3-card-4 w3-padding-16 w3-margin-left margin-top-32" v-for="(publication, p_index) in $root.sections.publications">
|
|
<preview-field label="Name" v-bind:value="publication.name"></preview-field>
|
|
<preview-field label="Publisher" v-bind:value="publication.publisher"></preview-field>
|
|
<preview-field label="Release Date" v-bind:value="publication.releaseDate"></preview-field>
|
|
<preview-field label="Website" v-bind:value="publication.website" format="url"></preview-field>
|
|
<preview-field label="Summary" v-bind:value="publication.summary" format="multi-line"></preview-field>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
|
|
<template type="text/x-template" id="section-skills-template" lang="html">
|
|
<div id="section-skills-root">
|
|
<p>
|
|
List out your professional skill-set.
|
|
</p>
|
|
<button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addSkill">+ Add Skill</button>
|
|
|
|
<div class="w3-row">
|
|
<div class="w3-col m6">
|
|
<form class="w3-container w3-card-4 margin-top-32" v-for="(skill, s_index) in $root.sections.skills">
|
|
<p>
|
|
<label for="name" class="w3-text-blue required-field"><b>Name</b></label>
|
|
<input id="name" class="w3-input w3-border" type="text" v-model="skill.name" required>
|
|
<small id="nameHelp" class="form-help text-muted">Name of a particular skill or a group of skills (e.g. Web Development).</small>
|
|
</p>
|
|
<p>
|
|
<label for="level" class="w3-text-blue required-field"><b>Level</b></label>
|
|
<input id="level" class="w3-input w3-border" type="text" v-model="skill.level" required>
|
|
<small id="levelHelp" class="form-help text-muted">Your level of experience (e.g. Master).</small>
|
|
</p>
|
|
|
|
<h5 class="margin-top-32">Keywords</h5>
|
|
<small id="keywordsHelp" class="form-help text-muted">Keywords (e.g. HTML, CSS, JavaScript).</small>
|
|
|
|
<button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addKeyword(s_index)">+ Add Keyword</button>
|
|
<ol>
|
|
<li v-for="(keyword, k_index) in skill.keywords">
|
|
<input id="keywords[0]" class="w3-input w3-border" type="text" v-model="$root.sections.skills[s_index].keywords[k_index]">
|
|
</li>
|
|
</ol>
|
|
</form>
|
|
</div>
|
|
<div class="w3-col m6">
|
|
<div class="preview w3-container w3-card-4 w3-padding-16 w3-margin-left margin-top-32" v-for="(skill, s_index) in $root.sections.skills">
|
|
<preview-field label="Name" v-bind:value="skill.name"></preview-field>
|
|
<preview-field label="Level" v-bind:value="skill.level"></preview-field>
|
|
|
|
<h5 class="margin-top-32">Keywords</h5>
|
|
<ol>
|
|
<li v-for="(keyword, k_index) in skill.keywords">
|
|
<preview-field label="" v-bind:value="$root.sections.skills[s_index].keywords[k_index]" format="list-item"></preview-field>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
|
|
<template type="text/x-template" id="section-languages-template" lang="html">
|
|
<p>
|
|
List any other languages you speak.
|
|
</p>
|
|
<div id="section-languages-root">
|
|
<button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addLanguage">+ Add Language</button>
|
|
|
|
<div class="w3-row">
|
|
<div class="w3-col m6">
|
|
<form class="w3-container w3-card-4 margin-top-32" v-for="language in $root.sections.languages">
|
|
<p>
|
|
<label for="language" class="w3-text-blue required-field"><b>Language</b></label>
|
|
<input id="language" class="w3-input w3-border" type="text" v-model="language.language" required>
|
|
<small id="languageHelp" class="form-help text-muted">Name of the language (e.g. English, Spanish).</small>
|
|
</p>
|
|
<p>
|
|
<label for="fluency" class="w3-text-blue required-field"><b>Fluency</b></label>
|
|
<input id="fluency" class="w3-input w3-border" type="text" v-model="language.fluency" required>
|
|
<small id="fluencyHelp" class="form-help text-muted">Fluency in the language (e.g. Fluent, Beginner).</small>
|
|
</p>
|
|
</form>
|
|
</div>
|
|
<div class="w3-col m6">
|
|
<div class="preview w3-container w3-card-4 w3-padding-16 w3-margin-left margin-top-32" v-for="language in $root.sections.languages">
|
|
<preview-field label="Language" v-bind:value="language.language"></preview-field>
|
|
<preview-field label="Fluency" v-bind:value="language.fluency"></preview-field>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
|
|
<template type="text/x-template" id="section-interests-template" lang="html">
|
|
<div id="section-interests-root">
|
|
|
|
<button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addInterest">+ Add Interest</button>
|
|
|
|
<div class="w3-row">
|
|
<div class="w3-col m6">
|
|
<form class="w3-container w3-card-4 margin-top-32" v-for="(interest, i_index) in $root.sections.interests">
|
|
<p>
|
|
<label for="name" class="w3-text-blue required-field"><b>Name</b></label>
|
|
<input id="name" class="w3-input w3-border" type="text" v-model="interest.name" required>
|
|
<small id="nameHelp" class="form-help text-muted">Name of the intest (e.g. Philosophy).</small>
|
|
</p>
|
|
|
|
|
|
<h5 class="margin-top-32">Keywords (e.g. Friedrich Nietzsche)</h5>
|
|
<small id="keywordsHelp" class="form-help text-muted">Keywords relating to the interest.</small>
|
|
|
|
<button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addKeyword(i_index)">+ Add Keyword</button>
|
|
<ol>
|
|
<li v-for="(keyword, k_index) in interest.keywords">
|
|
<input id="keywords[0]" class="w3-input w3-border" type="text" v-model="$root.sections.interests[i_index].keywords[k_index]">
|
|
</li>
|
|
</ol>
|
|
</form>
|
|
</div>
|
|
<div class="w3-col m6">
|
|
<div class="preview w3-container w3-card-4 w3-padding-16 w3-margin-left margin-top-32" v-for="(interest, i_index) in $root.sections.interests">
|
|
<preview-field label="Name" v-bind:value="interest.name"></preview-field>
|
|
|
|
<h5 class="margin-top-32">Keywords</h5>
|
|
<ol>
|
|
<li v-for="(keyword, k_index) in interest.keywords">
|
|
<preview-field label="" v-bind:value="$root.sections.interests[i_index].keywords[k_index]" format="list-item"></preview-field>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
|
|
<template type="text/x-template" id="section-references-template" lang="html">
|
|
<div id="section-references-root">
|
|
List references you have received.
|
|
<button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addReference">+ Add Reference</button>
|
|
|
|
<div class="w3-row">
|
|
<div class="w3-col m6">
|
|
<form class="w3-container w3-card-4 margin-top-32" v-for="reference in $root.sections.references">
|
|
<p>
|
|
<label for="name" class="w3-text-blue required-field"><b>Name</b></label>
|
|
<input id="name" class="w3-input w3-border" type="text" v-model="reference.name" required>
|
|
<small id="nameHelp" class="form-help text-muted">Name of the person (e.g. Don Long).</small>
|
|
</p>
|
|
<p>
|
|
<label for="reference" class="w3-text-blue required-field"><b>Reference</b></label>
|
|
<textarea id="reference" rows="8" class="w3-input w3-border" type="text" v-model="reference.reference"></textarea>
|
|
<small id="referenceHelp" class="form-help text-muted">The reference given by the person (e.g. Joe blogs was a great employee, who turned up to work at least once a week. He exceeded my expectations when it came to doing nothing.).</small>
|
|
</p>
|
|
</form>
|
|
</div>
|
|
<div class="w3-col m6">
|
|
<div class="preview w3-container w3-card-4 w3-padding-16 w3-margin-left margin-top-32" v-for="reference in $root.sections.references">
|
|
<preview-field label="Name" v-bind:value="reference.name"></preview-field>
|
|
<preview-field label="Reference" v-bind:value="reference.reference" format="multi-line"></preview-field>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
|
|
<template type="text/x-template" id="preview-resume-template" lang="html">
|
|
<div id="preview-resume-root">
|
|
<!-- Page Container -->
|
|
<div class="w3-content w3-margin-top" style="max-width:1400px;">
|
|
|
|
<!-- The Grid -->
|
|
<div class="w3-row-padding">
|
|
|
|
<!-- Left Column -->
|
|
<div class="w3-third">
|
|
|
|
<div class="w3-white w3-text-grey w3-card-4">
|
|
<div class="w3-display-container">
|
|
<img src="https://www.w3schools.com/w3images/avatar_hat.jpg" style="width:100%" alt="Avatar">
|
|
<div class="w3-display-bottomleft w3-container w3-text-black">
|
|
<h2>Jane Doe</h2>
|
|
</div>
|
|
</div>
|
|
<div class="w3-container">
|
|
<p><i class="fa fa-briefcase fa-fw w3-margin-right w3-large w3-text-teal"></i>Designer</p>
|
|
<p><i class="fa fa-home fa-fw w3-margin-right w3-large w3-text-teal"></i>London, UK</p>
|
|
<p><i class="fa fa-envelope fa-fw w3-margin-right w3-large w3-text-teal"></i>ex@mail.com</p>
|
|
<p><i class="fa fa-phone fa-fw w3-margin-right w3-large w3-text-teal"></i>1224435534</p>
|
|
<hr>
|
|
|
|
<p class="w3-large"><b><i class="fa fa-asterisk fa-fw w3-margin-right w3-text-teal"></i>Skills</b>
|
|
</p>
|
|
<p>Adobe Photoshop</p>
|
|
<div class="w3-light-grey w3-round-xlarge w3-small">
|
|
<div class="w3-container w3-center w3-round-xlarge w3-teal" style="width:90%">90%</div>
|
|
</div>
|
|
<p>Photography</p>
|
|
<div class="w3-light-grey w3-round-xlarge w3-small">
|
|
<div class="w3-container w3-center w3-round-xlarge w3-teal" style="width:80%">
|
|
<div class="w3-center w3-text-white">80%</div>
|
|
</div>
|
|
</div>
|
|
<p>Illustrator</p>
|
|
<div class="w3-light-grey w3-round-xlarge w3-small">
|
|
<div class="w3-container w3-center w3-round-xlarge w3-teal" style="width:75%">75%</div>
|
|
</div>
|
|
<p>Media</p>
|
|
<div class="w3-light-grey w3-round-xlarge w3-small">
|
|
<div class="w3-container w3-center w3-round-xlarge w3-teal" style="width:50%">50%</div>
|
|
</div>
|
|
<br>
|
|
|
|
<p class="w3-large w3-text-theme"><b><i
|
|
class="fa fa-globe fa-fw w3-margin-right w3-text-teal"></i>Languages</b></p>
|
|
<p>English</p>
|
|
<div class="w3-light-grey w3-round-xlarge">
|
|
<div class="w3-round-xlarge w3-teal" style="height:24px;width:100%"></div>
|
|
</div>
|
|
<p>Spanish</p>
|
|
<div class="w3-light-grey w3-round-xlarge">
|
|
<div class="w3-round-xlarge w3-teal" style="height:24px;width:55%"></div>
|
|
</div>
|
|
<p>German</p>
|
|
<div class="w3-light-grey w3-round-xlarge">
|
|
<div class="w3-round-xlarge w3-teal" style="height:24px;width:25%"></div>
|
|
</div>
|
|
<br>
|
|
</div>
|
|
</div><br>
|
|
|
|
<!-- End Left Column -->
|
|
</div>
|
|
|
|
<!-- Right Column -->
|
|
<div class="w3-twothird">
|
|
|
|
<div class="w3-container w3-card w3-white w3-margin-bottom">
|
|
<h2 class="w3-text-grey w3-padding-16"><i
|
|
class="fa fa-suitcase fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>Work Experience</h2>
|
|
<div class="w3-container">
|
|
<h5 class="w3-opacity"><b>Front End Developer / w3schools.com</b></h5>
|
|
<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>Jan 2015 - <span
|
|
class="w3-tag w3-teal w3-round">Current</span></h6>
|
|
<p>Lorem ipsum dolor sit amet. Praesentium magnam consectetur vel in deserunt aspernatur est
|
|
reprehenderit sunt hic. Nulla tempora soluta ea et odio, unde doloremque repellendus iure, iste.
|
|
</p>
|
|
<hr>
|
|
</div>
|
|
<div class="w3-container">
|
|
<h5 class="w3-opacity"><b>Web Developer / something.com</b></h5>
|
|
<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>Mar 2012 - Dec 2014
|
|
</h6>
|
|
<p>Consectetur adipisicing elit. Praesentium magnam consectetur vel in deserunt aspernatur est
|
|
reprehenderit sunt hic. Nulla tempora soluta ea et odio, unde doloremque repellendus iure, iste.
|
|
</p>
|
|
<hr>
|
|
</div>
|
|
<div class="w3-container">
|
|
<h5 class="w3-opacity"><b>Graphic Designer / designsomething.com</b></h5>
|
|
<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>Jun 2010 - Mar 2012
|
|
</h6>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p><br>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w3-container w3-card w3-white">
|
|
<h2 class="w3-text-grey w3-padding-16"><i
|
|
class="fa fa-certificate fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>Education</h2>
|
|
<div class="w3-container">
|
|
<h5 class="w3-opacity"><b>W3Schools.com</b></h5>
|
|
<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>Forever</h6>
|
|
<p>Web Development! All I need to know in one place</p>
|
|
<hr>
|
|
</div>
|
|
<div class="w3-container">
|
|
<h5 class="w3-opacity"><b>London Business School</b></h5>
|
|
<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>2013 - 2015</h6>
|
|
<p>Master Degree</p>
|
|
<hr>
|
|
</div>
|
|
<div class="w3-container">
|
|
<h5 class="w3-opacity"><b>School of Coding</b></h5>
|
|
<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>2010 - 2013</h6>
|
|
<p>Bachelor Degree</p><br>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- End Right Column -->
|
|
</div>
|
|
|
|
<!-- End Grid -->
|
|
</div>
|
|
|
|
<!-- End Page Container -->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
|
|
<template type="text/x-template" id="preview-single-field-template" lang="html">
|
|
<div id="preview-single-field-root">
|
|
<div class="w3-row w3-margin-bottom" v-if="format != 'list-item'">
|
|
<div class="w3-col m3">
|
|
<span>{{label}}</span>
|
|
</div>
|
|
<div class="w3-col m9">
|
|
<span v-html="getValue()"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<span v-if="format == 'list-item'">
|
|
<span v-html="getValue()"></span>
|
|
</span>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
|
|
<template type="text/x-template" id="import-template" lang="html">
|
|
<div id="import-root">
|
|
<p>
|
|
Past existing resume JSON and import to continue editing.
|
|
</p>
|
|
<textarea rows="20" class="w3-input w3-border" type="text" v-model="json"></textarea>
|
|
<button class="w3-btn w3-white w3-border w3-border-blue w3-round" v-on:click="importJson">Import</button>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
|
|
<template type="text/x-template" id="export-template" lang="html">
|
|
<div id="export-root">
|
|
<p>
|
|
Copy the following text in a text file and save it with the exctension ".json" (.e.g resume.json).
|
|
</p>
|
|
<textarea rows="20" class="w3-input w3-border" type="text" v-model="json"></textarea>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
|
|
<template type="text/x-template" id="about-template" lang="html">
|
|
<div id="export-root">
|
|
<h5 class="w3-bottombar w3-border-green">JSON Resume Editor</h5>
|
|
<p>
|
|
<h4>What is it?</h4>
|
|
An editor for creating and updating <a href="https://jsonresume.org/">JSON Resume</a> files.
|
|
|
|
<h4>Why?</h4>
|
|
<p>
|
|
For 2 reasons:
|
|
</p>
|
|
<ol>
|
|
<li>To provide an easy interface to creating and updating JSON Resume files. Working with raw JSON files is not difficult, but it's also not fun. This editor makes life easy.</li>
|
|
<li>To act as sample application for creating VueJS training articles.</li>
|
|
</ol>
|
|
|
|
<h4>Technologies used</h4>
|
|
<ul>
|
|
<li><a href="https://www.w3schools.com/w3css/">W3CSS (v4.13)</a></li>
|
|
<li><a href="https://vuejs.org/">VueJS (v2.6.10)</a></li>
|
|
<li><a href="https://router.vuejs.org/">Vue Router (v3.1.3)</a></li>
|
|
</ul>
|
|
</p>
|
|
|
|
<div class="w3-container w3-padding-16 w3-dark-grey w3-margin-top">
|
|
|
|
<p>Developed by <a href="https://jsnelders.com" target="_blank">Jason Snelders</a></p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<!-- /Component Templates -->
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Scripts -->
|
|
<script type="text/javascript" src="scripts.js"></script>
|
|
|
|
<script type="text/javascript" src="vendor/vue.2.6.10.js"></script>
|
|
<script type="text/javascript" src="vendor/vue-router.3.1.3.js"></script>
|
|
|
|
<script type="text/javascript" src="app/component_registration.js"></script>
|
|
<script type="text/javascript" src="components/home.js"></script>
|
|
<script type="text/javascript" src="components/section_basics.js"></script>
|
|
<script type="text/javascript" src="components/section_work.js"></script>
|
|
<script type="text/javascript" src="components/section_volunteer.js"></script>
|
|
<script type="text/javascript" src="components/section_education.js"></script>
|
|
<script type="text/javascript" src="components/section_awards.js"></script>
|
|
<script type="text/javascript" src="components/section_publications.js"></script>
|
|
<script type="text/javascript" src="components/section_skills.js"></script>
|
|
<script type="text/javascript" src="components/section_languages.js"></script>
|
|
<script type="text/javascript" src="components/section_interests.js"></script>
|
|
<script type="text/javascript" src="components/section_references.js"></script>
|
|
<script type="text/javascript" src="components/preview_resume.js"></script>
|
|
<script type="text/javascript" src="components/preview_single_field.js"></script>
|
|
<script type="text/javascript" src="components/import.js"></script>
|
|
<script type="text/javascript" src="components/export.js"></script>
|
|
<script type="text/javascript" src="components/about.js"></script>
|
|
<script type="text/javascript" src="app/app.js"></script>
|
|
|
|
<!-- /Scripts -->
|
|
</body>
|
|
</html> |