Implementing preview. Refactoring.
This commit is contained in:
parent
90d2d79978
commit
66214579fc
272
app/app.js
272
app/app.js
|
|
@ -74,7 +74,7 @@ var app = new Vue({
|
|||
|
||||
created()
|
||||
{
|
||||
this.sections = this.getDefaultSections();
|
||||
this.sections = sections.getDefaultSections();
|
||||
|
||||
//-- Register all components
|
||||
components.registerComponents();
|
||||
|
|
@ -166,6 +166,75 @@ var app = new Vue({
|
|||
},
|
||||
|
||||
|
||||
displayLocation: function()
|
||||
{
|
||||
/*
|
||||
<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>
|
||||
*/
|
||||
|
||||
return this.sections.basics.location.city + ", " + this.sections.basics.location.countryCode;
|
||||
},
|
||||
|
||||
|
||||
skillLevelAsPercent: function(index)
|
||||
{
|
||||
var level = this.$root.sections.skills[index].level;
|
||||
|
||||
if (level.toLowerCase() == "master" || level.toLowerCase() == "expert")
|
||||
{
|
||||
return 100;
|
||||
}
|
||||
else if (level.toLowerCase() == "proficient")
|
||||
{
|
||||
return 75;
|
||||
}
|
||||
else if (level.toLowerCase() == "basic" || level.toLowerCase() == "beginner")
|
||||
{
|
||||
return 25;
|
||||
}
|
||||
else
|
||||
{
|
||||
return 50;
|
||||
}
|
||||
},
|
||||
|
||||
languageFluencyAsPercent: function(index)
|
||||
{
|
||||
var fluency = this.$root.sections.skills[index].level;
|
||||
|
||||
if (fluency.toLowerCase() == "master" || fluency.toLowerCase() == "expert")
|
||||
{
|
||||
return 100;
|
||||
}
|
||||
else if (fluency.toLowerCase() == "proficient")
|
||||
{
|
||||
return 75;
|
||||
}
|
||||
else if (fluency.toLowerCase() == "basic" || fluency.toLowerCase() == "beginner")
|
||||
{
|
||||
return 25;
|
||||
}
|
||||
else
|
||||
{
|
||||
return 50;
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
workEndDate: function(index)
|
||||
{
|
||||
var endDate = this.$root.sections.work[index].endDate;
|
||||
|
||||
if (endDate == "") return "Current";
|
||||
|
||||
return endDate;
|
||||
},
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Clear save data and reset the sections structure.
|
||||
|
|
@ -176,7 +245,7 @@ var app = new Vue({
|
|||
|
||||
if (response == true)
|
||||
{
|
||||
this.sections = this.getDefaultSections();
|
||||
this.sections = sections.getDefaultSections();
|
||||
alert("Your resume has been cleared.");
|
||||
}
|
||||
|
||||
|
|
@ -303,192 +372,6 @@ var app = new Vue({
|
|||
element.classList.add("w3-blue");
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
|
||||
getDefaultSections: function()
|
||||
{
|
||||
var structure = {
|
||||
basics: {},
|
||||
work: [],
|
||||
volunteer: [],
|
||||
education: [],
|
||||
awards: [],
|
||||
publications: [],
|
||||
skills: [],
|
||||
languages: [],
|
||||
interests: [],
|
||||
references: []
|
||||
};
|
||||
|
||||
structure.basics = this.getDefaultBasic();
|
||||
structure.work.push(this.getDefaultWork());
|
||||
structure.volunteer.push(this.getDefaultVolunteer());
|
||||
structure.education.push(this.getDefaultEducation());
|
||||
structure.awards.push(this.getDefaultAward());
|
||||
structure.publications.push(this.getDefaultPublication());
|
||||
structure.skills.push(this.getDefaultSkill());
|
||||
structure.languages.push(this.getDefaultLanguage());
|
||||
structure.interests.push(this.getDefaultInterest());
|
||||
structure.references.push(this.getDefaultReference());
|
||||
|
||||
|
||||
return structure;
|
||||
},
|
||||
|
||||
getDefaultBasic: function()
|
||||
{
|
||||
return {
|
||||
name: "",
|
||||
label: "",
|
||||
picture: "",
|
||||
email: "",
|
||||
phone: "",
|
||||
website: "",
|
||||
summary: "",
|
||||
location: {
|
||||
address: "",
|
||||
postalCode: "",
|
||||
city: "",
|
||||
countryCode: "",
|
||||
region: "",
|
||||
},
|
||||
profiles: [
|
||||
{
|
||||
network: "",
|
||||
username: "",
|
||||
url: "",
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
getDefaultBasicProfile: function()
|
||||
{
|
||||
return {
|
||||
network: "",
|
||||
username: "",
|
||||
url: "",
|
||||
};
|
||||
},
|
||||
|
||||
getDefaultWork: function()
|
||||
{
|
||||
return {
|
||||
company: "",
|
||||
position: "",
|
||||
website: "",
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
summary: "",
|
||||
highlights: [""]
|
||||
};
|
||||
},
|
||||
|
||||
getDefaultWorkHighlight: function()
|
||||
{
|
||||
return "";
|
||||
},
|
||||
|
||||
getDefaultVolunteer: function()
|
||||
{
|
||||
return {
|
||||
organization: "",
|
||||
position: "",
|
||||
website: "",
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
summary: "",
|
||||
highlights: [""]
|
||||
};
|
||||
},
|
||||
|
||||
getDefaulVolunteerHighlight: function()
|
||||
{
|
||||
return "";
|
||||
},
|
||||
|
||||
getDefaultEducation: function()
|
||||
{
|
||||
return {
|
||||
institution: "",
|
||||
area: "",
|
||||
studyType: "",
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
gpa: "",
|
||||
courses: [""]
|
||||
};
|
||||
},
|
||||
|
||||
getDefaultEducationCourse: function()
|
||||
{
|
||||
return "";
|
||||
},
|
||||
|
||||
getDefaultAward: function()
|
||||
{
|
||||
return {
|
||||
title: "",
|
||||
date: "",
|
||||
awarder: "",
|
||||
summary: ""
|
||||
};
|
||||
},
|
||||
|
||||
getDefaultPublication: function()
|
||||
{
|
||||
return {
|
||||
name: "",
|
||||
publisher: "",
|
||||
releaseDate: "",
|
||||
website: "",
|
||||
summary: ""
|
||||
};
|
||||
},
|
||||
|
||||
getDefaultSkill: function()
|
||||
{
|
||||
return {
|
||||
name: "",
|
||||
level: "",
|
||||
keywords: [""]
|
||||
};
|
||||
},
|
||||
|
||||
getDefaultSkillKeywoard: function()
|
||||
{
|
||||
return "";
|
||||
},
|
||||
|
||||
getDefaultLanguage: function()
|
||||
{
|
||||
return {
|
||||
language: "",
|
||||
fluency: ""
|
||||
};
|
||||
},
|
||||
|
||||
getDefaultInterest: function()
|
||||
{
|
||||
return {
|
||||
name: "",
|
||||
keywords: [""]
|
||||
};
|
||||
},
|
||||
|
||||
getDefaultInterestKeywoard: function()
|
||||
{
|
||||
return "";
|
||||
},
|
||||
|
||||
getDefaultReference: function()
|
||||
{
|
||||
return {
|
||||
name: "",
|
||||
reference: ""
|
||||
};
|
||||
}
|
||||
|
||||
},
|
||||
|
|
@ -515,18 +398,19 @@ var app = new Vue({
|
|||
},
|
||||
|
||||
|
||||
$data: {
|
||||
handler: function(val, oldVal)
|
||||
{
|
||||
//TODO: Disbled
|
||||
// $data: {
|
||||
// handler: function(val, oldVal)
|
||||
// {
|
||||
|
||||
// // Save the data to localStorage
|
||||
// //NOTE: I'm initially not concerned about performance here.
|
||||
// if (val.status == "loaded")
|
||||
// {
|
||||
// helpers.setLocalStorage("sections", val.sections);
|
||||
// }
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
// },
|
||||
// deep: true
|
||||
// }
|
||||
}
|
||||
});
|
||||
|
|
@ -73,7 +73,7 @@ var sectionBasicsComponent = {
|
|||
methods: {
|
||||
addProfile: function()
|
||||
{
|
||||
var item = this.$root.getDefaultBasicProfile();
|
||||
var item = sections.getDefaultBasicProfile();
|
||||
this.$root.sections.basics.profiles.push(item);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,13 +29,13 @@ var sectionEducationComponent = {
|
|||
methods: {
|
||||
addEducation: function()
|
||||
{
|
||||
var item = this.$root.getDefaultEducation();
|
||||
var item = sections.getDefaultEducation();
|
||||
this.$root.sections.education.push(item);
|
||||
},
|
||||
|
||||
addCourse: function(index)
|
||||
{
|
||||
var item = this.$root.getDefaultEducationCourse();
|
||||
var item = sections.getDefaultEducationCourse();
|
||||
this.$root.sections.education[index].courses.push(item);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,13 +29,13 @@ var sectionInterestsComponent = {
|
|||
methods: {
|
||||
addInterest: function()
|
||||
{
|
||||
var item = this.$root.getDefaultInterest();
|
||||
var item = sections.getDefaultInterest();
|
||||
this.$root.sections.interests.push(item);
|
||||
},
|
||||
|
||||
addKeyword: function(index)
|
||||
{
|
||||
var item = this.$root.getDefaultInterestKeywoard();
|
||||
var item = sections.getDefaultInterestKeywoard();
|
||||
//console.log("addHighlight(" + index + ")", this.$root.sections.interests[index]);
|
||||
this.$root.sections.interests[index].keywords.push(item);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ var sectionLanguagesComponent = {
|
|||
methods: {
|
||||
addLanguage: function()
|
||||
{
|
||||
var item = this.$root.getDefaultInterest();
|
||||
var item = sections.getDefaultInterest();
|
||||
this.$root.sections.languages.push(item);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ var sectionPublicationsComponent = {
|
|||
methods: {
|
||||
addPublication: function()
|
||||
{
|
||||
var item = this.$root.getDefaultWork();
|
||||
var item = sections.getDefaultWork();
|
||||
this.$root.sections.publications.push(item);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ var sectionReferencesComponent = {
|
|||
methods: {
|
||||
addReference: function()
|
||||
{
|
||||
var item = this.$root.getDefaultReference();
|
||||
var item = sections.getDefaultReference();
|
||||
this.$root.sections.references.push(item);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ var sectionSkillsComponent = {
|
|||
|
||||
addKeyword: function(index)
|
||||
{
|
||||
var item = this.$root.getDefaultSkillKeywoard();
|
||||
var item = sections.getDefaultSkillKeywoard();
|
||||
//console.log("addHighlight(" + index + ")", this.$root.sections.volunteer[index]);
|
||||
this.$root.sections.skills[index].keywords.push(item);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,13 +29,13 @@ var sectionVolunteerComponent = {
|
|||
methods: {
|
||||
addPosition: function()
|
||||
{
|
||||
var item = this.$root.getDefaultVolunteer();
|
||||
var item = sections.getDefaultVolunteer();
|
||||
this.$root.sections.volunteer.push(item);
|
||||
},
|
||||
|
||||
addHighlight: function(index)
|
||||
{
|
||||
var item = this.$root.getDefaulVolunteerHighlight();
|
||||
var item = sections.getDefaulVolunteerHighlight();
|
||||
//console.log("addHighlight(" + index + ")", this.$root.sections.volunteer[index]);
|
||||
this.$root.sections.volunteer[index].highlights.push(item);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,13 +29,13 @@ var sectionWorkComponent = {
|
|||
methods: {
|
||||
addPosition: function()
|
||||
{
|
||||
var item = this.$root.getDefaultWork();
|
||||
var item = sections.getDefaultWork();
|
||||
this.$root.sections.work.push(item);
|
||||
},
|
||||
|
||||
addHighlight: function(index)
|
||||
{
|
||||
var item = this.$root.getDefaultWorkHighlight();
|
||||
var item = sections.getDefaultWorkHighlight();
|
||||
this.$root.sections.work[index].highlights.push(item);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
263
index.html
263
index.html
|
|
@ -766,53 +766,36 @@
|
|||
|
||||
<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>
|
||||
<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><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>
|
||||
<p><i class="fa fa-briefcase fa-fw w3-margin-right w3-large w3-text-teal"></i>{{$root.sections.basics.label}}</p>
|
||||
<p><i class="fa fa-home fa-fw w3-margin-right w3-large w3-text-teal"></i>{{$root.displayLocation()}}</p>
|
||||
<p><i class="fa fa-envelope fa-fw w3-margin-right w3-large w3-text-teal"></i>{{$root.sections.basics.email}}</p>
|
||||
<p><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>
|
||||
<p>Adobe Photoshop</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 class="w3-container w3-center w3-round-xlarge w3-teal" style="width:90%">90%</div>
|
||||
<div class="w3-container w3-center w3-round-xlarge w3-teal" v-bind:style="{ width: $root.skillLevelAsPercent(index) + '%' }">{{skill.level}}</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>
|
||||
<!-- Languages -->
|
||||
<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-if="$root.sections.languages.length > 0" 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" style="height:24px;width:100%"></div>
|
||||
<div class="w3-round-xlarge w3-teal w3-center" v-bind:style="{ height: '24px', width: $root.languageFluencyAsPercent(index) + '%' }">{{language.fluency}}</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>
|
||||
|
|
@ -823,67 +806,177 @@
|
|||
|
||||
<!-- 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 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
|
||||
<div class="w3-container" v-for="(work, w_index) in $root.sections.work">
|
||||
<h5 class="w3-opacity"><b>{{work.position}}</b></h5>
|
||||
<a v-bind:href="work.website" target="_blank">{{work.company}}</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>
|
||||
<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 v-html="work.summary"></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>
|
||||
<h5 class="margin-top-32">Highlights</h5>
|
||||
<ol>
|
||||
<li v-for="(highlight, h_index) in work.highlights">
|
||||
{{highlight}}
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<!-- End Right Column -->
|
||||
<hr v-if="w_index < $root.sections.work.length - 1">
|
||||
</div>
|
||||
</div>
|
||||
<!-- /Work -->
|
||||
|
||||
<!-- End Grid -->
|
||||
</div>
|
||||
<!-- 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>
|
||||
|
||||
<!-- End Page Container -->
|
||||
<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><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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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 -->
|
||||
|
||||
</div>
|
||||
<!-- /Right Column -->
|
||||
|
||||
</div>
|
||||
<!-- /Grid -->
|
||||
|
||||
</div>
|
||||
<!-- /Page Container -->
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
|
|
|||
189
scripts.js
189
scripts.js
|
|
@ -33,3 +33,192 @@ var helpers = {
|
|||
localStorage.removeItem(key);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
var sections = {
|
||||
getDefaultSections: function()
|
||||
{
|
||||
var structure = {
|
||||
basics: {},
|
||||
work: [],
|
||||
volunteer: [],
|
||||
education: [],
|
||||
awards: [],
|
||||
publications: [],
|
||||
skills: [],
|
||||
languages: [],
|
||||
interests: [],
|
||||
references: []
|
||||
};
|
||||
|
||||
structure.basics = this.getDefaultBasic();
|
||||
structure.work.push(this.getDefaultWork());
|
||||
structure.volunteer.push(this.getDefaultVolunteer());
|
||||
structure.education.push(this.getDefaultEducation());
|
||||
structure.awards.push(this.getDefaultAward());
|
||||
structure.publications.push(this.getDefaultPublication());
|
||||
structure.skills.push(this.getDefaultSkill());
|
||||
structure.languages.push(this.getDefaultLanguage());
|
||||
structure.interests.push(this.getDefaultInterest());
|
||||
structure.references.push(this.getDefaultReference());
|
||||
|
||||
return structure;
|
||||
},
|
||||
|
||||
getDefaultBasic: function()
|
||||
{
|
||||
return {
|
||||
name: "",
|
||||
label: "",
|
||||
picture: "",
|
||||
email: "",
|
||||
phone: "",
|
||||
website: "",
|
||||
summary: "",
|
||||
location: {
|
||||
address: "",
|
||||
postalCode: "",
|
||||
city: "",
|
||||
countryCode: "",
|
||||
region: "",
|
||||
},
|
||||
profiles: [
|
||||
{
|
||||
network: "",
|
||||
username: "",
|
||||
url: "",
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
getDefaultBasicProfile: function()
|
||||
{
|
||||
return {
|
||||
network: "",
|
||||
username: "",
|
||||
url: "",
|
||||
};
|
||||
},
|
||||
|
||||
getDefaultWork: function()
|
||||
{
|
||||
return {
|
||||
company: "",
|
||||
position: "",
|
||||
website: "",
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
summary: "",
|
||||
highlights: [""]
|
||||
};
|
||||
},
|
||||
|
||||
getDefaultWorkHighlight: function()
|
||||
{
|
||||
return "";
|
||||
},
|
||||
|
||||
getDefaultVolunteer: function()
|
||||
{
|
||||
return {
|
||||
organization: "",
|
||||
position: "",
|
||||
website: "",
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
summary: "",
|
||||
highlights: [""]
|
||||
};
|
||||
},
|
||||
|
||||
getDefaulVolunteerHighlight: function()
|
||||
{
|
||||
return "";
|
||||
},
|
||||
|
||||
getDefaultEducation: function()
|
||||
{
|
||||
return {
|
||||
institution: "",
|
||||
area: "",
|
||||
studyType: "",
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
gpa: "",
|
||||
courses: [""]
|
||||
};
|
||||
},
|
||||
|
||||
getDefaultEducationCourse: function()
|
||||
{
|
||||
return "";
|
||||
},
|
||||
|
||||
getDefaultAward: function()
|
||||
{
|
||||
return {
|
||||
title: "",
|
||||
date: "",
|
||||
awarder: "",
|
||||
summary: ""
|
||||
};
|
||||
},
|
||||
|
||||
getDefaultPublication: function()
|
||||
{
|
||||
return {
|
||||
name: "",
|
||||
publisher: "",
|
||||
releaseDate: "",
|
||||
website: "",
|
||||
summary: ""
|
||||
};
|
||||
},
|
||||
|
||||
getDefaultSkill: function()
|
||||
{
|
||||
return {
|
||||
name: "",
|
||||
level: "",
|
||||
keywords: [""]
|
||||
};
|
||||
},
|
||||
|
||||
getDefaultSkillKeywoard: function()
|
||||
{
|
||||
return "";
|
||||
},
|
||||
|
||||
getDefaultLanguage: function()
|
||||
{
|
||||
return {
|
||||
language: "",
|
||||
fluency: ""
|
||||
};
|
||||
},
|
||||
|
||||
getDefaultInterest: function()
|
||||
{
|
||||
return {
|
||||
name: "",
|
||||
keywords: [""]
|
||||
};
|
||||
},
|
||||
|
||||
getDefaultInterestKeywoard: function()
|
||||
{
|
||||
return "";
|
||||
},
|
||||
|
||||
getDefaultReference: function()
|
||||
{
|
||||
return {
|
||||
name: "",
|
||||
reference: ""
|
||||
};
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue