1348 lines
90 KiB
HTML
1348 lines
90 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-AU">
|
|
<head>
|
|
<title>Profile Studio</title>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
|
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
|
|
<link rel="manifest" href="favicon/site.webmanifest">
|
|
|
|
<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">
|
|
|
|
<div id="full-page-overlay">
|
|
<div id="full-page-overlay-text">
|
|
<h1>
|
|
<img src="favicon_black/android-chrome-192x192.png">
|
|
<br>
|
|
Profile Studio
|
|
</h1>
|
|
<div class="margin-top-64">
|
|
Please wait while we load the goodness.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 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">
|
|
<!-- <i class="far fa-user"></i> -->
|
|
<img src="favicon_black/favicon-32x32.png" style="height: 28px" class="w3-margin-right">Profile Studio
|
|
</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-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 w3-margin-top">
|
|
<h5>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>
|
|
<a href="#/section/projects" class="w3-bar-item w3-button w3-padding"><i class="fas fa-project-diagram"></i> Projects</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>
|
|
</div>
|
|
<hr>
|
|
<div class="w3-bar-block">
|
|
<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="saveResume"><i class="fas fa-save"></i> Save</span>
|
|
<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">
|
|
|
|
<!-- 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></router-view>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- /End Page Content -->
|
|
|
|
|
|
</div>
|
|
<!-- /VueJS App -->
|
|
|
|
<!-- Component Templates -->
|
|
<template type="text/x-template" id="home-template" lang="html">
|
|
<div id="home-root">
|
|
<p class="margin-bottom-64">
|
|
<b style="color: maroon">Status: Working & Under Development (26 Nov 2019)</b>
|
|
</p>
|
|
<p>
|
|
Welcome to Profile Studio - a generator and editor for <a href="https://jsonresume.org/">JSON Resume</a> files.
|
|
</p>
|
|
<p>
|
|
No registration required. No data stored.
|
|
</p>
|
|
<p>
|
|
To create a JSON resume file:
|
|
<ol>
|
|
<li>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 text 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 filename "resume.json".<br>
|
|
(See an <a href="https://gist.github.com/jsnelders/cab89beb9bc0e677ef3f5ec30ef4260b">example here</a>.)
|
|
</li>
|
|
<li>
|
|
Save your resume in your browser. You can close your browser and come back to the site any time - your saved resume will re-load automatically for you to keep working.
|
|
</li>
|
|
<li>
|
|
View your live resume on jsonresume.org by browsing to https://registry.jsonresume.org/{your_github_username}.<br>
|
|
(see an <a href="https://registry.jsonresume.org/jsnelders">example here</a>.)
|
|
</li>
|
|
</ol>
|
|
</p>
|
|
<p>
|
|
See it in action now. Copy a resume from <a href="https://gist.github.com/jsnelders/cab89beb9bc0e677ef3f5ec30ef4260b">https://gist.github.com/jsnelders/cab89beb9bc0e677ef3f5ec30ef4260b</a>.
|
|
</p>
|
|
<p>
|
|
Currently developed to use the schema defined at <a href="https://jsonresume.org/schema/">https://jsonresume.org/schema/</a>,
|
|
with additional attributes found at <a href="https://github.com/jsonresume/resume-schema/blob/v1.0.0/schema.json">https://github.com/jsonresume/resume-schema/blob/v1.0.0/schema.json</a>.<br>
|
|
"url" attributes are current identified as "website" per the published shema at jsonresume.org.
|
|
</p>
|
|
<p>Enjoy!</p>
|
|
<p><a href="https://jsnelders.com">Jason Snelders</a></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>Professional Title</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">e.g. software developer, IT manager, graphic designer.</small>
|
|
</p>
|
|
<p>
|
|
<label for="picture" class="w3-text-blue"><b>Profile 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 do you primarily live or work from?<br>
|
|
All field are optional but City and/or Country are recommended.
|
|
</small>
|
|
<p>
|
|
<label for="location.address" class="w3-text-blue"><b>Street 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.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.postalCode" class="w3-text-blue"><b>Postal/Zip 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">Postal or Zip code</small> -->
|
|
</p>
|
|
<p>
|
|
<label for="location.region" class="w3-text-blue"><b>Region/State/Province</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">e.g. a state or province.</small> -->
|
|
</p>
|
|
<p>
|
|
<label for="location.countryCode" class="w3-text-blue"><b>Country</b></label>
|
|
<!-- <input id="location.countryCode" class="w3-input w3-border" type="text" v-model="$root.sections.basics.location.countryCode"> -->
|
|
<select class="w3-select" v-model="$root.sections.basics.location.countryCode">
|
|
<option v-for="countryCode in $root.countryCodes" v-bind:value="countryCode.code">{{countryCode.name}}</option>
|
|
</select>
|
|
<!-- <small id="countryCodeHelp" class="form-help text-muted">Country</small> -->
|
|
</p>
|
|
</form>
|
|
|
|
<h5 class="margin-top-32">Social Network Profiles</h5>
|
|
Any 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="Professional Title" v-bind:value="$root.sections.basics.label"></preview-field>
|
|
<preview-field label="Profile Picture" v-bind:value="$root.sections.basics.picture" format="url"></preview-field>
|
|
<preview-field label="" v-bind:value="$root.sections.basics.picture" format="image"></preview-field>
|
|
|
|
<preview-field label="Email" v-bind:value="$root.sections.basics.email" format="email"></preview-field>
|
|
<preview-field label="Phone" v-bind:value="$root.sections.basics.phone" format="phone"></preview-field>
|
|
<preview-field label="Website" v-bind:value="$root.sections.basics.website" format="url"></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.getCountryName($root.sections.basics.location.countryCode)"></preview-field>
|
|
<preview-field label="Region/State/Province" 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" format="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 margin-top-32">
|
|
<div class="w3-col m6">
|
|
<form class="w3-card-4 margin-top-32" v-for="(work, w_index) in $root.sections.work">
|
|
<card-header v-bind:label="work.company + ' - ' + work.position + ' (' + $root.dateMonthYear(work.startDate) + ')'" v-bind:id="w_index" v-on:delete-clicked="deleteClicked" v-on:move-up-clicked="moveUpClicked" v-on:move-down-clicked="moveDownClicked"></card-header>
|
|
|
|
<div class="w3-container w3-hide" v-bind:id="'content' + w_index">
|
|
<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>
|
|
</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="(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-card-4 margin-top-32" v-for="(vol, v_index) in $root.sections.volunteer">
|
|
<card-header v-bind:label="vol.organization" v-bind:id="v_index" v-on:delete-clicked="deleteClicked" v-on:move-up-clicked="moveUpClicked" v-on:move-down-clicked="moveDownClicked"></card-header>
|
|
|
|
<div class="w3-container w3-hide" v-bind:id="'content' + v_index">
|
|
<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-card-4 margin-top-32" v-for="(edu, e_index) in $root.sections.education">
|
|
<card-header v-bind:label="edu.institution" v-bind:id="e_index" v-on:delete-clicked="deleteClicked" v-on:move-up-clicked="moveUpClicked" v-on:move-down-clicked="moveDownClicked"></card-header>
|
|
|
|
<div class="w3-container w3-hide" v-bind:id="'content' + e_index">
|
|
<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>
|
|
</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="(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">
|
|
<p>
|
|
Specify any awards you have received throughout your professional career.
|
|
</p>
|
|
<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-card-4 margin-top-32" v-for="(award, a_index) in $root.sections.awards">
|
|
<card-header v-bind:label="award.title" v-bind:id="a_index" v-on:delete-clicked="deleteClicked" v-on:move-up-clicked="moveUpClicked" v-on:move-down-clicked="moveDownClicked"></card-header>
|
|
|
|
<div class="w3-container w3-hide" v-bind:id="'content' + a_index">
|
|
<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>
|
|
</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="(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">
|
|
<p>
|
|
Where have you published articles or work?
|
|
</p>
|
|
<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 margin-top-32">
|
|
<div class="w3-col m6">
|
|
<form class="w3-card-4" v-for="(publication, p_index) in $root.sections.publications">
|
|
<card-header v-bind:label="publication.name" v-bind:id="p_index" v-on:delete-clicked="deleteClicked" v-on:move-up-clicked="moveUpClicked" v-on:move-down-clicked="moveDownClicked"></card-header>
|
|
|
|
<div class="w3-container w3-hide" v-bind:id="'content' + p_index">
|
|
<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>
|
|
</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="(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-card-4 margin-top-32" v-for="(skill, s_index) in $root.sections.skills">
|
|
<card-header v-bind:label="skill.name" v-bind:id="s_index" v-on:delete-clicked="deleteClicked" v-on:move-up-clicked="moveUpClicked" v-on:move-down-clicked="moveDownClicked"></card-header>
|
|
|
|
<div class="w3-container w3-hide" v-bind:id="'content' + s_index">
|
|
<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>
|
|
</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="(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">
|
|
<div id="section-languages-root">
|
|
<p>
|
|
List any other languages you speak.
|
|
</p>
|
|
<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-card-4 margin-top-32" v-for="(language, l_index) in $root.sections.languages">
|
|
<card-header v-bind:label="language.language" v-bind:id="l_index" v-on:delete-clicked="deleteClicked" v-on:move-up-clicked="moveUpClicked" v-on:move-down-clicked="moveDownClicked"></card-header>
|
|
|
|
<div class="w3-container w3-hide" v-bind:id="'content' + l_index">
|
|
<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>
|
|
</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="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-card-4 margin-top-32" v-for="(interest, i_index) in $root.sections.interests">
|
|
<card-header v-bind:label="interest.name" v-bind:id="i_index" v-on:delete-clicked="deleteClicked" v-on:move-up-clicked="moveUpClicked" v-on:move-down-clicked="moveDownClicked"></card-header>
|
|
|
|
<div class="w3-container w3-hide" v-bind:id="'content' + i_index">
|
|
<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>
|
|
</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="(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">
|
|
<p>
|
|
List references you have received.
|
|
</p>
|
|
<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-card-4 margin-top-32" v-for="(reference, r_index) in $root.sections.references">
|
|
<card-header v-bind:label="reference.name" v-bind:id="r_index" v-on:delete-clicked="deleteClicked" v-on:move-up-clicked="moveUpClicked" v-on:move-down-clicked="moveDownClicked"></card-header>
|
|
|
|
<div class="w3-container w3-hide" v-bind:id="'content' + r_index">
|
|
<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>
|
|
</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="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="section-projects-template" lang="html">
|
|
<div id="section-projects-root">
|
|
<button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addProject">+ Add Project</button>
|
|
|
|
<div class="w3-row margin-top-32">
|
|
<div class="w3-col m6">
|
|
<form class="w3-card-4 margin-top-32" v-for="(project, p_index) in $root.sections.projects">
|
|
<card-header v-bind:label="project.name + ' (' + $root.dateMonthYear(project.startDate) + ')'" v-bind:id="p_index" v-on:delete-clicked="deleteClicked" v-on:move-up-clicked="moveUpClicked" v-on:move-down-clicked="moveDownClicked"></card-header>
|
|
|
|
<div class="w3-container w3-hide" v-bind:id="'content' + p_index">
|
|
<p>
|
|
<label for="company" class="w3-text-blue required-field"><b>Name</b></label>
|
|
<input id="company" class="w3-input w3-border" type="text" v-model="project.name" 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>Description</b></label>
|
|
<input id="position" class="w3-input w3-border" type="text" v-model="project.description" 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="project.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="project.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="project.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>
|
|
|
|
|
|
<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(p_index)">+ Add Highlight</button>
|
|
<span v-if="project.highlights">X: {{project.highlights.length}}</span>
|
|
<ol>
|
|
<li v-for="(highlight, h_index) in project.highlights">
|
|
<input class="w3-input w3-border" type="text" v-model="$root.sections.projects[p_index].highlights[h_index]">
|
|
</li>
|
|
</ol>
|
|
|
|
|
|
<h5 class="margin-top-32">Keywords</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="addKeyword(p_index)">+ Add Keyword</button>
|
|
<ol>
|
|
<li v-for="(keyword, k_index) in project.keywords">
|
|
<input class="w3-input w3-border" type="text" v-model="$root.sections.projects[p_index].keywords[k_index]">
|
|
</li>
|
|
</ol>
|
|
|
|
|
|
<h5 class="margin-top-32">Roles</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="addRole(p_index)">+ Add Role</button>
|
|
<ol>
|
|
<li v-for="(role, r_index) in project.roles">
|
|
<input class="w3-input w3-border" type="text" v-model="$root.sections.projects[p_index].roles[r_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="(project, p_index) in $root.sections.projects">
|
|
<preview-field label="Name" v-bind:value="project.name"></preview-field>
|
|
<preview-field label="Description" v-bind:value="project.description"></preview-field>
|
|
<preview-field label="Website" v-bind:value="project.website" format="url"></preview-field>
|
|
<preview-field label="Start Date" v-bind:value="project.startDate" format="date"></preview-field>
|
|
<preview-field label="End Date" v-bind:value="project.endDate" format="date"></preview-field>
|
|
|
|
<h5 class="margin-top-32">Highlights</h5>
|
|
<ol>
|
|
<li v-for="(highlight, h_index) in project.highlights">
|
|
<preview-field label="" v-bind:value="$root.sections.projects[p_index].highlights[h_index]" format="list-item"></preview-field>
|
|
</li>
|
|
</ol>
|
|
|
|
<h5 class="margin-top-32">Keywords</h5>
|
|
<ol>
|
|
<li v-for="(keyword, k_index) in project.keywords">
|
|
<preview-field label="" v-bind:value="$root.sections.projects[p_index].keywords[k_index]" format="list-item"></preview-field>
|
|
</li>
|
|
</ol>
|
|
|
|
<h5 class="margin-top-32">Roles</h5>
|
|
<ol>
|
|
<li v-for="(role, r_index) in project.roles">
|
|
<preview-field label="" v-bind:value="$root.sections.projects[p_index].roles[r_index]" format="list-item"></preview-field>
|
|
</li>
|
|
</ol>
|
|
</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 v-bind:src="$root.sections.basics.picture" style="width:100%" alt="Avatar">
|
|
<div class="w3-display-bottomleft w3-container w3-text-white">
|
|
<h2>{{$root.sections.basics.name}}</h2>
|
|
</div>
|
|
</div>
|
|
<div class="w3-container">
|
|
<p title="Professional Title"><i class="fa fa-briefcase fa-fw w3-margin-right w3-large w3-text-teal"></i>{{$root.sections.basics.label}}</p>
|
|
<p title="Location"><i class="fa fa-home fa-fw w3-margin-right w3-large w3-text-teal"></i>{{$root.displayLocation()}}</p>
|
|
<p title="Email" v-if="$root.sections.basics.email"><i class="fa fa-envelope fa-fw w3-margin-right w3-large w3-text-teal"></i>{{$root.sections.basics.email}}</p>
|
|
<p title="Phone" v-if="$root.sections.basics.phone"><i class="fa fa-phone fa-fw w3-margin-right w3-large w3-text-teal"></i>{{$root.sections.basics.phone}}</p>
|
|
<hr>
|
|
|
|
<!-- Skills -->
|
|
<p class="w3-large"><b><i class="fa fa-asterisk fa-fw w3-margin-right w3-text-teal"></i>Skills</b>
|
|
</p>
|
|
<div v-if="$root.sections.skills.length > 0" v-for="(skill, index) in $root.sections.skills">
|
|
<p>{{skill.name}}</p>
|
|
<div class="w3-light-grey w3-round-xlarge w3-small">
|
|
</div>
|
|
</div>
|
|
<br>
|
|
|
|
<!-- Languages -->
|
|
<div v-if="$root.sections.languages && $root.sections.languages.length > 0" >
|
|
<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>
|
|
<div v-for="(language, index) in $root.sections.languages">
|
|
<p>{{language.language}}</p>
|
|
<div class="w3-light-grey w3-round-xlarge">
|
|
<div class="w3-round-xlarge w3-teal w3-center" v-bind:style="{ height: '24px', width: $root.languageFluencyAsPercent(index) + '%' }">{{language.fluency}}</div>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
</div>
|
|
</div>
|
|
</div><br>
|
|
|
|
<!-- End Left Column -->
|
|
</div>
|
|
|
|
<!-- Right Column -->
|
|
<div class="w3-twothird">
|
|
<!-- Work -->
|
|
<div class="w3-container w3-card w3-white w3-margin-bottom w3-padding-32" v-if="$root.sections.work.length > 0">
|
|
<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</h2>
|
|
|
|
<div class="w3-container" v-for="(work, w_index) in $root.sections.work">
|
|
<h5 class="w3-opacity"><b>{{work.position}}</b></h5>
|
|
<b>{{work.company}}</b>
|
|
<a v-if="work.website" v-bind:href="work.website" target="_blank" class="w3-margin-left"><i class="fas fa-globe"></i></a>
|
|
<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>
|
|
{{work.startDate}} -
|
|
<span class="w3-tag w3-teal w3-round" v-if="$root.workEndDate(w_index) == 'Current'">{{$root.workEndDate(w_index)}}</span>
|
|
<span v-if="$root.workEndDate(w_index) != 'Current'">{{$root.workEndDate(w_index)}}</span>
|
|
</h6>
|
|
<div v-html="work.summary"></div>
|
|
|
|
<h5 class="margin-top-32">Highlights</h5>
|
|
<ol>
|
|
<li v-for="(highlight, h_index) in work.highlights">
|
|
{{highlight}}
|
|
</li>
|
|
</ol>
|
|
|
|
<hr v-if="w_index < $root.sections.work.length - 1">
|
|
</div>
|
|
</div>
|
|
<!-- /Work -->
|
|
|
|
<!-- Volunteering -->
|
|
<div class="w3-container w3-card w3-white w3-margin-bottom w3-padding-32" v-if="$root.sections.volunteer.length > 0">
|
|
<h2 class="w3-text-grey w3-padding-16"><i class="fa fa-certificate fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>Volunteering</h2>
|
|
|
|
<div class="w3-container" v-for="(vol, v_index) in $root.sections.volunteer">
|
|
<div class="w3-container">
|
|
<h5 class="w3-opacity"><b>{{vol.organization}}</b></h5>
|
|
<p>{{vol.position}}</p>
|
|
<p v-if="vol.website"><a v-bind:href="vol.website">{{vol.website}}</a></p>
|
|
<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>{{vol.startDate}} - {{vol.endDate}}</h6>
|
|
<div v-html="vol.summary"></div>
|
|
|
|
<h5 class="margin-top-32">Highlights</h5>
|
|
<ol>
|
|
<li v-for="(highlight, h_index) in vol.highlights">
|
|
{{highlight}}
|
|
</li>
|
|
</ol>
|
|
<hr v-if="v_index < $root.sections.volunteer.length - 1">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /Volunteering -->
|
|
|
|
<!-- Education -->
|
|
<div class="w3-container w3-card w3-white w3-margin-bottom w3-padding-32" v-if="$root.sections.education.length > 0">
|
|
<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" v-for="(edu, e_index) in $root.sections.education">
|
|
<div class="w3-container">
|
|
<h5 class="w3-opacity"><b>{{edu.institution}}</b></h5>
|
|
<p>{{edu.area}}, {{edu.studyType}}</p>
|
|
<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>{{edu.startDate}} - {{edu.endDate}}</h6>
|
|
<p v-if="edu.gpa != ''">GPA: {{edu.gpa}}</p>
|
|
<div v-html="edu.summary"></div>
|
|
|
|
<h5 class="margin-top-32">Courses</h5>
|
|
<ol>
|
|
<li v-for="(course, c_index) in edu.courses">
|
|
{{course}}
|
|
</li>
|
|
</ol>
|
|
<hr v-if="e_index < $root.sections.education.length - 1">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /Education -->
|
|
|
|
<!-- Awards -->
|
|
<div class="w3-container w3-card w3-white w3-margin-bottom w3-padding-32" v-if="$root.sections.awards.length > 0">
|
|
<h2 class="w3-text-grey w3-padding-16"><i class="fa fa-certificate fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>Awards</h2>
|
|
|
|
<div class="w3-container" v-for="(award, a_index) in $root.sections.awards">
|
|
<div class="w3-container">
|
|
<h5 class="w3-opacity"><b>{{award.title}}</b></h5>
|
|
<p>{{award.awarder}}</p>
|
|
<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>{{award.date}}</h6>
|
|
<div v-html="award.summary"></div>
|
|
|
|
<hr v-if="a_index < $root.sections.awards.length - 1">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /Awards -->
|
|
|
|
<!-- Publications -->
|
|
<div class="w3-container w3-card w3-white w3-margin-bottom w3-padding-32" v-if="$root.sections.publications.length > 0">
|
|
<h2 class="w3-text-grey w3-padding-16"><i class="fa fa-certificate fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>Publications</h2>
|
|
|
|
<div class="w3-container" v-for="(publication, p_index) in $root.sections.publications">
|
|
<div class="w3-container">
|
|
<h5 class="w3-opacity"><b>{{publication.name}}</b></h5>
|
|
<p><a v-bind:href="publication.website">{{publication.publisher}}</a></p>
|
|
<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>{{publication.releaseDate}}</h6>
|
|
<div v-html="publication.summary"></div>
|
|
<hr v-if="p_index < $root.sections.publications.length - 1">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /Publications -->
|
|
|
|
<!-- Skills -->
|
|
<div class="w3-container w3-card w3-white w3-margin-bottom w3-padding-32" v-if="$root.sections.skills.length > 0">
|
|
<h2 class="w3-text-grey w3-padding-16"><i class="fa fa-certificate fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>Skills</h2>
|
|
|
|
<div class="w3-container" v-for="(skill, s_index) in $root.sections.skills">
|
|
<div class="w3-container">
|
|
<h5 class="w3-opacity"><b>{{skill.name}}</b></h5>
|
|
<p>{{skill.level}}</p>
|
|
|
|
<ol>
|
|
<li v-for="(keyword, k_index) in skill.keywords">
|
|
{{keyword}}
|
|
</li>
|
|
</ol>
|
|
<hr v-if="s_index < $root.sections.skills.length - 1">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /Skills -->
|
|
|
|
<!-- Interests -->
|
|
<div class="w3-container w3-card w3-white w3-margin-bottom w3-padding-32" v-if="$root.sections.interests.length > 0">
|
|
<h2 class="w3-text-grey w3-padding-16"><i class="fa fa-certificate fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>Interests</h2>
|
|
|
|
<div class="w3-container" v-for="(interest, i_index) in $root.sections.interests">
|
|
<div class="w3-container">
|
|
<h5 class="w3-opacity"><b>{{interest.name}}</b></h5>
|
|
|
|
<ol>
|
|
<li v-for="(keyword, k_index) in interest.keywords">
|
|
{{keyword}}
|
|
</li>
|
|
</ol>
|
|
<hr v-if="i_index < $root.sections.education.length - 1">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /Interests -->
|
|
|
|
<!-- References -->
|
|
<div class="w3-container w3-card w3-white w3-margin-bottom w3-padding-32" v-if="$root.sections.references.length > 0">
|
|
<h2 class="w3-text-grey w3-padding-16"><i class="fa fa-certificate fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>References</h2>
|
|
|
|
<div class="w3-container" v-for="(reference, index) in $root.sections.references">
|
|
<div class="w3-container">
|
|
<h5 class="w3-opacity"><b>{{reference.name}}</b></h5>
|
|
<div v-html="reference.reference"></div>
|
|
|
|
<hr v-if="index < $root.sections.references.length - 1">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /References -->
|
|
|
|
<!-- Projects -->
|
|
<div class="w3-container w3-card w3-white w3-margin-bottom w3-padding-32" v-if="$root.sections.projects.length > 0">
|
|
<h2 class="w3-text-grey w3-padding-16"><i class="fas fa-project-diagram fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>Projects</h2>
|
|
|
|
<div class="w3-container" v-for="(project, p_index) in $root.sections.projects">
|
|
<h5 class="w3-opacity"><b>{{project.name}}</b></h5>
|
|
<p>{{project.description}}</p>
|
|
<a v-if="project.website" v-bind:href="project.website" target="_blank" class="w3-margin-left"><i class="fas fa-globe"></i></a>
|
|
<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>
|
|
{{project.startDate}} -
|
|
<span class="w3-tag w3-teal w3-round" v-if="$root.projectEndDate(p_index) == 'Current'">{{$root.projectEndDate(p_index)}}</span>
|
|
<span v-if="$root.projectEndDate(p_index) != 'Current'">{{$root.projectEndDate(p_index)}}</span>
|
|
</h6>
|
|
|
|
|
|
<div v-if="project.highlights && project.highlights.length > 0">
|
|
<h5 class="margin-top-32">Highlights</h5>
|
|
<ol>
|
|
<li v-for="(highlight, h_index) in project.highlights">
|
|
{{highlight}}
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
|
|
|
|
<div v-if="project.keywords && project.keywords.length > 0">
|
|
<h5 class="margin-top-32">Keywords</h5>
|
|
<ol>
|
|
<li v-for="(keyword, k_index) in project.keywords">
|
|
{{keyword}}
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
|
|
|
|
<div v-if="project.roles && project.roles.length ">
|
|
<h5 class="margin-top-32">Roles</h5>
|
|
<ol>
|
|
<li v-for="(role, r_index) in project.roles">
|
|
{{role}}
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
|
|
|
|
<hr v-if="p_index < $root.sections.projects.length - 1">
|
|
</div>
|
|
</div>
|
|
<!-- /Projects -->
|
|
|
|
</div>
|
|
<!-- /Right Column -->
|
|
|
|
</div>
|
|
<!-- /Grid -->
|
|
|
|
</div>
|
|
<!-- /Page Container -->
|
|
|
|
</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="displayFormat == '' || displayFormat == 'url' || displayFormat == 'multi-line' || displayFormat == 'email' || displayFormat == 'phone' || displayFormat == 'date'">
|
|
<div class="w3-col m3">
|
|
<span v-html="getLabel()"></span>
|
|
</div>
|
|
<div class="w3-col m9">
|
|
<span v-html="getValue()"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<span class="w3-margin-bottom" v-if="displayFormat == 'list-item'">
|
|
<span v-html="getValue()"></span>
|
|
</span>
|
|
|
|
<div class="w3-row w3-margin-bottom" v-if="displayFormat == 'image'">
|
|
<div class="w3-col m3">
|
|
<span v-html="getLabel()"></span>
|
|
</div>
|
|
<div class="w3-col m9"v-html="getValue()">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
|
|
<template type="text/x-template" id="card-header-template" lang="html">
|
|
<div id="card-header-root">
|
|
<header class="w3-container w3-dark-grey w3-padding-16" v-bind:id="'header' + id">
|
|
<div class="w3-row">
|
|
<div class="w3-col s9" v-on:click="$root.invertCollapse('content' + id)" style="cursor: pointer;">
|
|
<div style="width: 100%;" v-html="getLabel()"></div>
|
|
</div>
|
|
<div class="w3-col s3 w3-right-align">
|
|
<i class="fas fa-times w3-margin-right" style="cursor: pointer;" v-on:click="deleteClick"></i>
|
|
<i class="fas fa-chevron-up" style="cursor: pointer;" v-on:click="moveUpClick"></i>
|
|
<i class="fas fa-chevron-down" style="cursor: pointer;" v-on:click="moveDownClick"></i>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
|
|
<template type="text/x-template" id="sorted-input-item-template" lang="html">
|
|
<div id="sorted-input-item-root">
|
|
<div class="" v-bind:id="'item' + id">
|
|
<div class="w3-row">
|
|
<div class="w3-col s9" style="cursor: pointer;">
|
|
<input id="keywords[0]" class="w3-input w3-border" type="text" v-model="$root.sections.skills[s_index].keywords[k_index]">
|
|
</div>
|
|
<div class="w3-col s3 w3-right-align">
|
|
<i class="fas fa-times w3-margin-right" style="cursor: pointer;" v-on:click="deleteClick"></i>
|
|
<i class="fas fa-chevron-up" style="cursor: pointer;" v-on:click="moveUpClick"></i>
|
|
<i class="fas fa-chevron-down" style="cursor: pointer;" v-on:click="moveDownClick"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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 extension ".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">
|
|
<p>
|
|
<h4 class="margin-top-32">What is it?</h4>
|
|
An editor for creating and updating <a href="https://jsonresume.org/">JSON Resume</a> files.
|
|
|
|
<h4 class="margin-top-32">Why?</h4>
|
|
<ol>
|
|
<li>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 class="margin-top-32">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 class="margin-top-64">
|
|
Developed by <a href="https://jsnelders.com" target="_blank">Jason Snelders</a>.<br>
|
|
Source code at <a href="https://github.com/jsnelders/profile-studio" target="_blank">https://github.com/jsnelders/profile-studio</a>.
|
|
</p>
|
|
</p>
|
|
</div>
|
|
</template>
|
|
<!-- /Component Templates -->
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Scripts -->
|
|
<script type="text/javascript" src="data/data.js"></script>
|
|
|
|
<script type="text/javascript" src="scripts/storage.js"></script>
|
|
<script type="text/javascript" src="scripts/models.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="vendor/markdown-it-10.0.0.js"></script>
|
|
|
|
<script type="text/javascript" src="app/page_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/section_projects.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/card_header.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>
|