@bluesialia/jsonresume-theme-bluetime
Version:
A modern, clean TypeScript-based theme for JSON Resume with responsive design and professional styling
1 lines • 12.1 kB
JavaScript
var e,t;!function(e){function t(e){return e.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")}function n(e){return e?t(e):""}function i(e,n="",i="",a={}){let s=`<${e}`;n&&(s+=` class="${t(n)}"`);for(const[e,n]of Object.entries(a))s+=` ${t(e)}="${t(n)}"`;return s+=`>${i}</${e}>`,s}e.escapeHtml=t,e.safeText=n,e.createElement=i,e.createSection=function(e){let t='<div class="section">';return e&&(t+=i("h2","",n(e))),t}}(e||(e={})),function(t){t.addContactInfo=function(t,n,i,a=[]){let s='<div class="contact-info">';t&&(s+=e.createElement("span","contact-item",`<i class="fas fa-envelope"></i> ${e.createElement("a","",e.safeText(t),{href:"mailto:"+t})}`)),n&&(s+=e.createElement("span","contact-item",`<i class="fas fa-phone"></i> ${e.createElement("a","",e.safeText(n),{href:"tel:"+n})}`)),i&&(s+=e.createElement("span","contact-item",`<i class="fas fa-globe"></i> ${e.createElement("a","",e.safeText(i.replace(/^https?:\/\//i,"")),{href:i})}`));for(const t of a)t.network&&t.url&&(s+=e.createElement("span","contact-item",`<i class="fa-brands fa-${e.escapeHtml(t.network.toLowerCase())}"></i> ${e.createElement("a","",e.safeText(t.url.replace(/^https?:\/\//i,"")),{href:t.url})}`));return s+="</div>",s},t.addLocation=function(t){let n='<div class="location">';const i=[];return t.address&&i.push(e.safeText(t.address)),t.city&&i.push(e.safeText(t.city)),t.region&&i.push(e.safeText(t.region)),t.postalCode&&i.push(e.safeText(t.postalCode)),t.countryCode&&i.push(e.safeText(t.countryCode)),n+=i.join(", "),n+="</div>",n},t.addChips=function(t){let n='<div class="chips">';for(const i of t)n+=e.createElement("span","chip",e.safeText(i));return n+="</div>",n},t.addHighlights=function(t){if(!t||!t.length)return"";let n='<ul class="highlights">';for(const i of t)n+=e.createElement("li","",e.safeText(i));return n+="</ul>",n}}(t||(t={}));var n;!function(n){n.createBasicsSection=function(n){if(!n)return"";const{name:i,label:a,image:s,email:r,phone:c,url:l,location:o={},profiles:f=[],summary:d}=n;let p=e.createSection();return s&&(p+=e.createElement("img","","",{class:"profile-picture",src:s,alt:"Profile Picture"})),i&&(p+=e.createElement("h1","resume-name",e.safeText(i))),a&&(p+=e.createElement("h2","job-title",e.safeText(a))),p+=t.addLocation(o),p+=t.addContactInfo(r,c,l,f),d&&(p+=e.createElement("p","",e.safeText(d))),p+="</div>",p},n.createLanguagesSection=function(t){if(!t||0===t.length)return"";let n=e.createSection("Languages");for(const i of t){const{language:t,fluency:a}=i;let s='<div class="section-item">';t&&(s+=e.createElement("h3","",e.safeText(t))),a&&(s+=e.createElement("h4","subtitle",e.safeText(a))),s+="</div>",n+=s}return n+="</div>",n},n.createSkillsSection=function(n){if(!n||0===n.length)return"";let i=e.createSection("Skills");for(const a of n){const{name:n,level:s,keywords:r}=a;let c='<div class="section-item">';n&&(c+=e.createElement("h3","",e.safeText(n))),s&&(c+=e.createElement("h4","subtitle",e.safeText(s))),r&&r.length>0&&(c+=t.addChips(r)),c+="</div>",i+=c}return i+="</div>",i},n.createInterestsSection=function(n){if(!n||0===n.length)return"";let i=e.createSection("Interests");for(const a of n){const{name:n,keywords:s}=a;let r='<div class="section-item">';n&&(r+=e.createElement("h3","",e.safeText(n))),s&&s.length>0&&(r+=t.addChips(s)),r+="</div>",i+=r}return i+="</div>",i},n.createReferencesSection=function(t){if(!t||0===t.length)return"";let n='<div class="section references">';n+=e.createElement("h2","","References");for(const i of t){const{name:t,reference:a}=i;let s='<div class="section-item">';if(t&&(s+=e.createElement("h3","",e.safeText(t))),a)try{new URL(a),s+=e.createElement("a","reference-link",e.safeText(a.replace(/^https?:\/\//i,"")),{href:a})}catch(t){s+=e.createElement("p","",e.safeText(a))}s+="</div>",n+=s}return n+="</div>",n},n.createExperienceSection=function(n){if(!n||0===n.length)return"";let i=e.createSection("Experience");for(const a of n){const{name:n,description:s,location:r,url:c,position:l,summary:o,highlights:f,startDate:d,endDate:p}=a;let m='<div class="timeline-section-item">';if(d||p){let t='<div class="timeline">';t+=p?e.createElement("span","date",e.safeText(p)):e.createElement("span","date","Present"),d&&(t+=" <br> ",t+=e.createElement("span","date",e.safeText(d))),t+="</div>",m+=t}if(m+='<div class="timeline-section-details">',n&&(m+=e.createElement("h3","",e.safeText(n))),s&&(m+=e.createElement("span","description",e.safeText(s))),r||c){let t='<div class="title-anex">';r&&(t+=e.createElement("span","",e.safeText(r))),c&&(t+=" • ",t+=e.createElement("a","url",e.safeText(c.replace(/^https?:\/\//i,"")),{href:c})),t+="</div>",m+=t}l&&(m+=e.createElement("h4","subtitle",e.safeText(l))),o&&(m+=e.createElement("p","",e.safeText(o))),f&&f.length>0&&(m+=t.addHighlights(f)),m+="</div>",m+="</div>",i+=m}return i+="</div>",i},n.createProjectsSection=function(n){if(!n||0===n.length)return"";let i='<div class="section">';i+=e.createElement("h2","","Projects");for(const a of n){const{name:n,url:s,description:r,highlights:c,keywords:l,startDate:o,endDate:f}=a;let d='<div class="timeline-section-item">';if(o||f){let t='<div class="timeline">';t+=f?e.createElement("span","date",e.safeText(f)):e.createElement("span","date","Present"),o&&(t+=" <br> ",t+=e.createElement("span","date",e.safeText(o))),t+="</div>",d+=t}if(d+='<div class="timeline-section-details">',n&&(d+=e.createElement("h3","",e.safeText(n))),s&&(d+=" • ",d+=e.createElement("a","description",e.safeText(s.replace(/^https?:\/\//i,"")),{href:s})),r&&(d+=e.createElement("p","",e.safeText(r))),c&&c.length>0){let t='<ul class="highlights">';for(const n of c)t+=e.createElement("li","",e.safeText(n));t+="</ul>",d+=t}l&&l.length>0&&(d+=t.addChips(l)),d+="</div>",d+="</div>",i+=d}return i+="</div>",i},n.createVolunteerSection=function(n){if(!n||0===n.length)return"";let i=e.createSection("Volunteer");for(const a of n){const{organization:n,url:s,position:r,summary:c,highlights:l,startDate:o,endDate:f}=a;let d='<div class="timeline-section-item">';if(o||f){let t='<div class="timeline">';t+=f?e.createElement("span","date",e.safeText(f)):e.createElement("span","date","Present"),o&&(t+=" <br> ",t+=e.createElement("span","date",e.safeText(o))),t+="</div>",d+=t}d+='<div class="timeline-section-details">',n&&(d+=e.createElement("h3","",e.safeText(n))),s&&(d+=e.createElement("a","description",e.safeText(s.replace(/^https?:\/\//i,"")),{href:s})),r&&(d+=e.createElement("div","title-anex",e.safeText(r))),c&&(d+=e.createElement("p","",e.safeText(c))),l&&l.length>0&&(d+=t.addHighlights(l)),d+="</div>",d+="</div>",i+=d}return i+="</div>",i},n.createEducationSection=function(t){if(!t||0===t.length)return"";let n=e.createSection("Education");for(const i of t){const{institution:t,url:a,area:s,studyType:r,courses:c,startDate:l,endDate:o}=i;let f='<div class="timeline-section-item">';if(l||o){let t='<div class="timeline">';t+=o?e.createElement("span","date",e.safeText(o)):e.createElement("span","date","Present"),l&&(t+=" <br> ",t+=e.createElement("span","date",e.safeText(l))),t+="</div>",f+=t}if(f+='<div class="timeline-section-details">',t&&(f+=e.createElement("h3","",e.safeText(t))),a&&(f+=e.createElement("a","description",e.safeText(a.replace(/^https?:\/\//i,"")),{href:a})),s||r){let t='<div class="title-anex">';s&&(t+=e.createElement("span","",e.safeText(s))),r&&(t+=e.createElement("span","description",e.safeText(r))),t+="</div>",f+=t}if(c&&c.length>0){let t='<ul class="courses">';for(const n of c)t+=e.createElement("li","",e.safeText(n));t+="</ul>",f+=t}f+="</div>",f+="</div>",n+=f}return n+="</div>",n}}(n||(n={}));export function render(e){let t='<div class="resume-container">';return t+='\n<style>\n @import url(\'https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap\');\n @import url(\'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css\');\n\n .resume-container {\n display: flex;\n padding: 20px;\n max-width: 1600px;\n margin: auto;\n font-family: "Lato", sans-serif;\n font-size: 14px;\n\n h1, h2, h3, h4 {\n margin-top: 0;\n margin-bottom: 10px;\n }\n\n p {\n margin: 5px 0 0 0;\n }\n\n .left-column {\n flex: 1;\n padding: 10px;\n background-color: #f4f4f9;\n border-radius: 12px;\n }\n\n .right-column {\n flex: 2;\n padding: 10px 10px 10px 0;\n }\n\n .section {\n position: relative;\n margin: 10px;\n break-inside: avoid;\n\n .section-item {\n margin: 5px;\n break-inside: avoid;\n\n h3 {\n display: inline-block;\n margin-right: 10px;\n }\n\n h4 {\n display: inline-block;\n color: #666;\n }\n }\n\n .timeline-section-item {\n position: relative;\n display: flex;\n align-items: flex-start;\n margin-top: 10px;\n break-inside: avoid;\n\n h3 {\n display: inline-block;\n margin: 0;\n }\n\n h4 {\n margin: 10px 0;\n }\n\n .timeline {\n position: absolute;\n width: 65px;\n text-align: right;\n font-size: 12px;\n }\n\n .timeline::before {\n content: "";\n position: absolute;\n left: 70px; /* Adjusted to align with the timeline */\n top: 5px;\n width: 16px;\n height: 16px;\n background-color: #007BFF;\n border-radius: 50%;\n }\n\n .timeline-section-details {\n position: relative;\n margin-left: 92px;\n }\n\n .description {\n color: #666;\n font-size: 12px;\n display: inline-block;\n margin-left: 5px;\n }\n\n .title-anex {\n color: #666;\n font-size: 12px;\n margin-top: 5px;\n }\n }\n\n .timeline-section-item::before {\n content: "";\n position: absolute;\n left: 75px; /* Adjusted to align with the timeline */\n top: 30px;\n width: 6px;\n height: calc(100% - 30px);\n background-color: #ccc;\n border-radius: 3px;\n }\n\n .highlights, .courses {\n padding-left: 15px;\n margin-top: 5px;\n margin-bottom: 5px;\n }\n\n .highlights li, .courses li {\n margin-bottom: 5px;\n }\n\n .chips {\n display: flex;\n flex-wrap: wrap;\n gap: 5px;\n margin-bottom: 10px;\n }\n\n .chip {\n background-color: #007BFF;\n color: white;\n padding: 4px 8px;\n border-radius: 20px;\n font-size: 12px;\n }\n }\n\n .profile-picture {\n float: left;\n margin-right: 20px;\n width: 100px;\n height: 100px;\n border-radius: 50%;\n object-fit: cover;\n }\n @media only screen and (max-width: 1000px) {\n .profile-picture {\n display: none;\n }\n }\n @media only print {\n .profile-picture {\n display: none;\n }\n }\n\n .contact-info {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n margin-top: 10px;\n }\n\n .contact-item {\n text-decoration: none;\n color: #007BFF;\n }\n }\n</style>\n',t+=function(e){let t='<div class="left-column">';return e.basics&&(t+=n.createBasicsSection(e.basics)),e.languages&&(t+=n.createLanguagesSection(e.languages)),e.skills&&(t+=n.createSkillsSection(e.skills)),e.interests&&(t+=n.createInterestsSection(e.interests)),e.references&&(t+=n.createReferencesSection(e.references)),t+="</div>",t}(e),t+=function(e){let t='<div class="right-column">';return e.work&&(t+=n.createExperienceSection(e.work)),e.projects&&(t+=n.createProjectsSection(e.projects)),e.volunteer&&(t+=n.createVolunteerSection(e.volunteer)),e.education&&(t+=n.createEducationSection(e.education)),t+="</div>",t}(e),t+="</div>",t}