gitadmin
/
profile-studio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Implementing preview. Refactoring.

This commit is contained in:
Jason Snelders 2019-11-16 15:18:41 +11:00
parent 90d2d79978
commit 66214579fc
12 changed files with 465 additions and 299 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

272
app/app.js
View File

@ -74,7 +74,7 @@ var app = new Vue({
created() created()
{ {
this.sections = this.getDefaultSections(); this.sections = sections.getDefaultSections();
//-- Register all components //-- Register all components
components.registerComponents(); 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. * Clear save data and reset the sections structure.
@ -176,7 +245,7 @@ var app = new Vue({
if (response == true) if (response == true)
{ {
this.sections = this.getDefaultSections(); this.sections = sections.getDefaultSections();
alert("Your resume has been cleared."); alert("Your resume has been cleared.");
} }
@ -303,192 +372,6 @@ var app = new Vue({
element.classList.add("w3-blue"); 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 //TODO: Disbled
// $data: {
// handler: function(val, oldVal)
// {
// // Save the data to localStorage // // Save the data to localStorage
// //NOTE: I'm initially not concerned about performance here. // //NOTE: I'm initially not concerned about performance here.
// if (val.status == "loaded") // if (val.status == "loaded")
// { // {
// helpers.setLocalStorage("sections", val.sections); // helpers.setLocalStorage("sections", val.sections);
// } // }
}, // },
deep: true // deep: true
} // }
} }
}); });

2
components/section_basics.js
View File

@ -73,7 +73,7 @@ var sectionBasicsComponent = {
methods: { methods: {
addProfile: function() addProfile: function()
{ {
var item = this.$root.getDefaultBasicProfile(); var item = sections.getDefaultBasicProfile();
this.$root.sections.basics.profiles.push(item); this.$root.sections.basics.profiles.push(item);
} }
} }

4
components/section_education.js
View File

@ -29,13 +29,13 @@ var sectionEducationComponent = {
methods: { methods: {
addEducation: function() addEducation: function()
{ {
var item = this.$root.getDefaultEducation(); var item = sections.getDefaultEducation();
this.$root.sections.education.push(item); this.$root.sections.education.push(item);
}, },
addCourse: function(index) addCourse: function(index)
{ {
var item = this.$root.getDefaultEducationCourse(); var item = sections.getDefaultEducationCourse();
this.$root.sections.education[index].courses.push(item); this.$root.sections.education[index].courses.push(item);
} }
} }

4
components/section_interests.js
View File

@ -29,13 +29,13 @@ var sectionInterestsComponent = {
methods: { methods: {
addInterest: function() addInterest: function()
{ {
var item = this.$root.getDefaultInterest(); var item = sections.getDefaultInterest();
this.$root.sections.interests.push(item); this.$root.sections.interests.push(item);
}, },
addKeyword: function(index) addKeyword: function(index)
{ {
var item = this.$root.getDefaultInterestKeywoard(); var item = sections.getDefaultInterestKeywoard();
//console.log("addHighlight(" + index + ")", this.$root.sections.interests[index]); //console.log("addHighlight(" + index + ")", this.$root.sections.interests[index]);
this.$root.sections.interests[index].keywords.push(item); this.$root.sections.interests[index].keywords.push(item);
} }

2
components/section_languages.js
View File

@ -29,7 +29,7 @@ var sectionLanguagesComponent = {
methods: { methods: {
addLanguage: function() addLanguage: function()
{ {
var item = this.$root.getDefaultInterest(); var item = sections.getDefaultInterest();
this.$root.sections.languages.push(item); this.$root.sections.languages.push(item);
} }
} }

2
components/section_publications.js
View File

@ -29,7 +29,7 @@ var sectionPublicationsComponent = {
methods: { methods: {
addPublication: function() addPublication: function()
{ {
var item = this.$root.getDefaultWork(); var item = sections.getDefaultWork();
this.$root.sections.publications.push(item); this.$root.sections.publications.push(item);
} }
} }

2
components/section_references.js
View File

@ -29,7 +29,7 @@ var sectionReferencesComponent = {
methods: { methods: {
addReference: function() addReference: function()
{ {
var item = this.$root.getDefaultReference(); var item = sections.getDefaultReference();
this.$root.sections.references.push(item); this.$root.sections.references.push(item);
} }
} }

2
components/section_skills.js
View File

@ -35,7 +35,7 @@ var sectionSkillsComponent = {
addKeyword: function(index) addKeyword: function(index)
{ {
var item = this.$root.getDefaultSkillKeywoard(); var item = sections.getDefaultSkillKeywoard();
//console.log("addHighlight(" + index + ")", this.$root.sections.volunteer[index]); //console.log("addHighlight(" + index + ")", this.$root.sections.volunteer[index]);
this.$root.sections.skills[index].keywords.push(item); this.$root.sections.skills[index].keywords.push(item);
} }

4
components/section_volunteer.js
View File

@ -29,13 +29,13 @@ var sectionVolunteerComponent = {
methods: { methods: {
addPosition: function() addPosition: function()
{ {
var item = this.$root.getDefaultVolunteer(); var item = sections.getDefaultVolunteer();
this.$root.sections.volunteer.push(item); this.$root.sections.volunteer.push(item);
}, },
addHighlight: function(index) addHighlight: function(index)
{ {
var item = this.$root.getDefaulVolunteerHighlight(); var item = sections.getDefaulVolunteerHighlight();
//console.log("addHighlight(" + index + ")", this.$root.sections.volunteer[index]); //console.log("addHighlight(" + index + ")", this.$root.sections.volunteer[index]);
this.$root.sections.volunteer[index].highlights.push(item); this.$root.sections.volunteer[index].highlights.push(item);
} }

4
components/section_work.js
View File

@ -29,13 +29,13 @@ var sectionWorkComponent = {
methods: { methods: {
addPosition: function() addPosition: function()
{ {
var item = this.$root.getDefaultWork(); var item = sections.getDefaultWork();
this.$root.sections.work.push(item); this.$root.sections.work.push(item);
}, },
addHighlight: function(index) addHighlight: function(index)
{ {
var item = this.$root.getDefaultWorkHighlight(); var item = sections.getDefaultWorkHighlight();
this.$root.sections.work[index].highlights.push(item); this.$root.sections.work[index].highlights.push(item);
} }
} }

263
index.html
View File

@ -766,53 +766,36 @@
<div class="w3-white w3-text-grey w3-card-4"> <div class="w3-white w3-text-grey w3-card-4">
<div class="w3-display-container"> <div class="w3-display-container">
<img src="https://www.w3schools.com/w3images/avatar_hat.jpg" style="width:100%" alt="Avatar"> <img v-bind:src="$root.sections.basics.picture" style="width:100%" alt="Avatar">
<div class="w3-display-bottomleft w3-container w3-text-black"> <div class="w3-display-bottomleft w3-container w3-text-white">
<h2>Jane Doe</h2> <h2>{{$root.sections.basics.name}}</h2>
</div> </div>
</div> </div>
<div class="w3-container"> <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-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>London, UK</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>ex@mail.com</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>1224435534</p> <p><i class="fa fa-phone fa-fw w3-margin-right w3-large w3-text-teal"></i>{{$root.sections.basics.phone}}</p>
<hr> <hr>
<!-- Skills -->
<p class="w3-large"><b><i class="fa fa-asterisk fa-fw w3-margin-right w3-text-teal"></i>Skills</b> <p class="w3-large"><b><i class="fa fa-asterisk fa-fw w3-margin-right w3-text-teal"></i>Skills</b>
</p> </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-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> </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> </div>
<br> <br>
<p class="w3-large w3-text-theme"><b><i <!-- Languages -->
class="fa fa-globe fa-fw w3-margin-right w3-text-teal"></i>Languages</b></p> <p class="w3-large w3-text-theme"><b><i class="fa fa-globe fa-fw w3-margin-right w3-text-teal"></i>Languages</b></p>
<p>English</p> <div 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-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> </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> </div>
<br> <br>
</div> </div>
@ -823,67 +806,177 @@
<!-- Right Column --> <!-- Right Column -->
<div class="w3-twothird"> <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"> <div class="w3-container" v-for="(work, w_index) in $root.sections.work">
<h2 class="w3-text-grey w3-padding-16"><i <h5 class="w3-opacity"><b>{{work.position}}</b></h5>
class="fa fa-suitcase fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>Work Experience</h2> <a v-bind:href="work.website" target="_blank">{{work.company}}</a>
<div class="w3-container"> <h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>
<h5 class="w3-opacity"><b>Front End Developer / w3schools.com</b></h5> {{work.startDate}} -
<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>Jan 2015 - <span <span class="w3-tag w3-teal w3-round" v-if="$root.workEndDate(w_index) == 'Current'">{{$root.workEndDate(w_index)}}</span>
class="w3-tag w3-teal w3-round">Current</span></h6> <span v-if="$root.workEndDate(w_index) != 'Current'">{{$root.workEndDate(w_index)}}</span>
<p>Lorem ipsum dolor sit amet. Praesentium magnam consectetur vel in deserunt aspernatur est
reprehenderit sunt hic. Nulla tempora soluta ea et odio, unde doloremque repellendus iure, iste.
</p>
<hr>
</div>
<div class="w3-container">
<h5 class="w3-opacity"><b>Web Developer / something.com</b></h5>
<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>Mar 2012 - Dec 2014
</h6> </h6>
<p>Consectetur adipisicing elit. Praesentium magnam consectetur vel in deserunt aspernatur est <div v-html="work.summary"></div>
reprehenderit sunt hic. Nulla tempora soluta ea et odio, unde doloremque repellendus iure, iste.
</p>
<hr>
</div>
<div class="w3-container">
<h5 class="w3-opacity"><b>Graphic Designer / designsomething.com</b></h5>
<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>Jun 2010 - Mar 2012
</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p><br>
</div>
</div>
<div class="w3-container w3-card w3-white"> <h5 class="margin-top-32">Highlights</h5>
<h2 class="w3-text-grey w3-padding-16"><i <ol>
class="fa fa-certificate fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>Education</h2> <li v-for="(highlight, h_index) in work.highlights">
<div class="w3-container"> {{highlight}}
<h5 class="w3-opacity"><b>W3Schools.com</b></h5> </li>
<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>Forever</h6> </ol>
<p>Web Development! All I need to know in one place</p>
<hr>
</div>
<div class="w3-container">
<h5 class="w3-opacity"><b>London Business School</b></h5>
<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>2013 - 2015</h6>
<p>Master Degree</p>
<hr>
</div>
<div class="w3-container">
<h5 class="w3-opacity"><b>School of Coding</b></h5>
<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>2010 - 2013</h6>
<p>Bachelor Degree</p><br>
</div>
</div>
<!-- End Right Column --> <hr v-if="w_index < $root.sections.work.length - 1">
</div> </div>
</div>
<!-- /Work -->
<!-- End Grid --> <!-- Volunteering -->
</div> <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> </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> </template>

189
scripts.js
View File

@ -33,3 +33,192 @@ var helpers = {
localStorage.removeItem(key); 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: ""
};
}
}