complete (mostly) reorx theme
This commit is contained in:
Reorx
parent
3d24551c03
commit
c2724578f5
|
|
@ -28,7 +28,8 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
.page-unit {
|
||||
.page-unit,
|
||||
.section-item {
|
||||
page-break-inside: avoid;
|
||||
page-break-after: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,13 +7,17 @@ export function getRenderData(cvData) {
|
|||
fn: {
|
||||
reformatDate,
|
||||
getIconSVG,
|
||||
urlNoSchema,
|
||||
noSchemaURL,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* fn */
|
||||
|
||||
function urlNoSchema(url) {
|
||||
return url.replace(/https?:\/\//, '')
|
||||
function noSchemaURL(url) {
|
||||
url = url.replace(/https?:\/\//, '')
|
||||
if (url.endsWith('/')) {
|
||||
url = url.slice(0, -1)
|
||||
}
|
||||
return url
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,21 @@
|
|||
<%
|
||||
function linkInDiv(url) {
|
||||
if (!url) return ''
|
||||
return `<div class="url row"><a href="${url}">${fn.noSchemaURL(url)}</a></div>`
|
||||
}
|
||||
%>
|
||||
|
||||
<!-- Basics -->
|
||||
<section class="basics-section">
|
||||
<h1><%= cv.basics.name %></h1>
|
||||
<% if (cv.basics.label) { %>
|
||||
<div class="label"><%= cv.basics.label %></div>
|
||||
<% } %>
|
||||
<% if (cv.basics.url) { %>
|
||||
<div class="url">
|
||||
<a href="<%= cv.basics.url %>"><%= fn.urlNoSchema(cv.basics.url) %></a></div>
|
||||
<div class="label row"><%= cv.basics.label %></div>
|
||||
<% } %>
|
||||
<%- linkInDiv(cv.basics.url) %>
|
||||
<% if (cv.basics.summary) { %>
|
||||
<div class="summary"><%= cv.basics.summary %></div>
|
||||
<% } %>
|
||||
<div class="contact">
|
||||
<div class="contact row">
|
||||
<% if (cv.basics.email) { %>
|
||||
<div class="item">
|
||||
<%- fn.getIconSVG('mdi:email') %>
|
||||
|
|
@ -33,33 +37,43 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<%
|
||||
function dateRange(item, preserveDay) {
|
||||
let {startDate, endDate} = item
|
||||
if (!startDate && !endDate) return ''
|
||||
if (!preserveDay) {
|
||||
const format = 'YYYY-MM'
|
||||
const format = 'MMM YYYY'
|
||||
startDate = fn.reformatDate(startDate, format)
|
||||
endDate = fn.reformatDate(endDate, format)
|
||||
}
|
||||
return `<p>${startDate}~${endDate}</p>`
|
||||
return `<div class="date-range">${startDate} – ${endDate}</div>`
|
||||
}
|
||||
%>
|
||||
|
||||
<!-- Educations -->
|
||||
<% if (cv.education) { %>
|
||||
<section>
|
||||
<section class="education-section">
|
||||
<div class="section-title">
|
||||
<h2>Educations</h2>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<% for (const item of cv.education) { %>
|
||||
<div class="education page-unit">
|
||||
<h3><%= item.institution %></h3>
|
||||
<p><%= item.url %></p>
|
||||
<p><%= item.area %></p>
|
||||
<p><%= item.score %></p>
|
||||
<%- dateRange(item) %>
|
||||
<div class="education section-item">
|
||||
<div class="row space-between">
|
||||
<h3><%= item.institution %></h3>
|
||||
<%- dateRange(item) %>
|
||||
</div>
|
||||
<div class="study row fz-4">
|
||||
<%= item.studyType %>, <%= item.area %>
|
||||
</div>
|
||||
<div class="score row">Overall GPA: <%= item.score %></div>
|
||||
<% if (item.courses && item.courses.length > 0) { %>
|
||||
<div class="courses row">
|
||||
Courses: <%= item.courses.join('; ') %>
|
||||
</div>
|
||||
<% } %>
|
||||
<%- linkInDiv(item.url) %>
|
||||
</div>
|
||||
<% } %>
|
||||
</section>
|
||||
|
|
@ -67,23 +81,29 @@ function dateRange(item, preserveDay) {
|
|||
|
||||
<!-- Work -->
|
||||
<% if (cv.work) { %>
|
||||
<section>
|
||||
<section class="work-section">
|
||||
<div class="section-title">
|
||||
<h2>Work</h2>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<% for (const item of cv.work) { %>
|
||||
<div class="work page-unit">
|
||||
<h3><%= item.name %></h3>
|
||||
<p><%= item.url %></p>
|
||||
<%- dateRange(item) %>
|
||||
<p><%= item.position %></p>
|
||||
<div class="summary"><%= item.summary %></div>
|
||||
<div class="highlights">
|
||||
<% for (const hl of item.highlights) { %>
|
||||
<div class="item"><%= hl %></div>
|
||||
<% } %>
|
||||
<div class="work section-item">
|
||||
<div class="row space-between">
|
||||
<h3><%= item.name %></h3>
|
||||
<%- dateRange(item) %>
|
||||
</div>
|
||||
<div class="position row fz-4"><%= item.position %></div>
|
||||
<div class="summary row"><%= item.summary %></div>
|
||||
<% if (item.highlights && item.highlights.length > 0) { %>
|
||||
<div class="highlights row">
|
||||
<ul>
|
||||
<% for (const hl of item.highlights) { %>
|
||||
<li><%= hl %></li>
|
||||
<% } %>
|
||||
</ul>
|
||||
</div>
|
||||
<% } %>
|
||||
<%- linkInDiv(item.url) %>
|
||||
</div>
|
||||
<% } %>
|
||||
</section>
|
||||
|
|
@ -91,27 +111,33 @@ function dateRange(item, preserveDay) {
|
|||
|
||||
<!-- Projects -->
|
||||
<% if (cv.projects) { %>
|
||||
<section>
|
||||
<section class="projects-section">
|
||||
<div class="section-title">
|
||||
<h2>Projects</h2>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<% for (const item of cv.projects) { %>
|
||||
<div class="project page-unit">
|
||||
<h3><%= item.name %></h3>
|
||||
<p><%= item.url %></p>
|
||||
<p><%= item.description %></p>
|
||||
<%- dateRange(item) %>
|
||||
<div class="highlights">
|
||||
<% for (const hl of item.highlights) { %>
|
||||
<div class="item"><%= hl %></div>
|
||||
<% } %>
|
||||
<div class="project section-item">
|
||||
<div class="row space-between">
|
||||
<h3><%= item.name %></h3>
|
||||
<%- dateRange(item) %>
|
||||
</div>
|
||||
<div class="row lh-para"><%= item.description %></div>
|
||||
<% if (item.highlights && item.highlights.length > 0) { %>
|
||||
<div class="highlights row">
|
||||
<ul>
|
||||
<% for (const hl of item.highlights) { %>
|
||||
<li><%= hl %></li>
|
||||
<% } %>
|
||||
</ul>
|
||||
</div>
|
||||
<% } %>
|
||||
<div class="keywords">
|
||||
<% for (const kw of item.keywords) { %>
|
||||
<span class="item"><%= kw %></span>
|
||||
<% } %>
|
||||
</div>
|
||||
<%- linkInDiv(item.url) %>
|
||||
</div>
|
||||
<% } %>
|
||||
</section>
|
||||
|
|
@ -119,22 +145,26 @@ function dateRange(item, preserveDay) {
|
|||
|
||||
<!-- Side-projects -->
|
||||
<% if (cv.sideProjects) { %>
|
||||
<section>
|
||||
<section class="sideprojects-section">
|
||||
<div class="section-title">
|
||||
<h2>Side-projects</h2>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<% for (const item of cv.sideProjects) { %>
|
||||
<div class="sideproject page-unit">
|
||||
<div class="sideproject section-item">
|
||||
<h3><%= item.name %></h3>
|
||||
<p><%= item.url %></p>
|
||||
<p><%= item.description %></p>
|
||||
<%- dateRange(item) %>
|
||||
<div class="keywords">
|
||||
<% for (const kw of item.keywords) { %>
|
||||
<span class="item"><%= kw %></span>
|
||||
<% } %>
|
||||
</div>
|
||||
<% if (item.keywords && item.keywords.length > 0) { %>
|
||||
|
||||
<% } %>
|
||||
<div class="keywords">
|
||||
<% for (const kw of item.keywords) { %>
|
||||
<span class="item"><%= kw %></span>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% } %>
|
||||
</section>
|
||||
|
|
@ -142,36 +172,41 @@ function dateRange(item, preserveDay) {
|
|||
|
||||
<!-- Skills -->
|
||||
<% if (cv.skills) { %>
|
||||
<section>
|
||||
<section class="skills-section">
|
||||
<div class="section-title">
|
||||
<h2>Skills</h2>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<div class="two-columns">
|
||||
<% for (const item of cv.skills) { %>
|
||||
<div class="skill">
|
||||
<div class="skill section-item">
|
||||
<h3><%= item.name %></h3>
|
||||
<div class="level"><%= item.level %></div>
|
||||
<div class="keywords">
|
||||
<% for (const kw of item.keywords) { %>
|
||||
<span class="item"><%= kw %></span>
|
||||
<% } %>
|
||||
</div>
|
||||
<div class="level row"><%= item.level %></div>
|
||||
<% if (item.keywords && item.keywords.length > 0) { %>
|
||||
|
||||
<% } %>
|
||||
<div class="keywords">
|
||||
<% for (const kw of item.keywords) { %>
|
||||
<span class="item"><%= kw %></span>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
</section>
|
||||
<% } %>
|
||||
|
||||
<!-- Languages -->
|
||||
<% if (cv.languages) { %>
|
||||
<section class="page-unit">
|
||||
<section class="languages-section page-unit">
|
||||
<div class="section-title">
|
||||
<h2>Languages</h2>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<% for (const item of cv.languages) { %>
|
||||
<div class="language">
|
||||
<div class="language section-item">
|
||||
<h3><%= item.language %></h3>
|
||||
<div class="fluency"><%= item.fluency %></div>
|
||||
<div class="fluency row"><%= item.fluency %></div>
|
||||
</div>
|
||||
<% } %>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,10 @@
|
|||
$color-signature: #2A3FFB;
|
||||
$color-text-dim: #777;
|
||||
$fz-1: 36px;
|
||||
$fz-2: 22px;
|
||||
$fz-3: 18px;
|
||||
$fz-4: 16px;
|
||||
$lh-para: 1.4;
|
||||
|
||||
.cv-container {
|
||||
font-size: 14px;
|
||||
|
|
@ -15,23 +20,85 @@ $color-text-dim: #777;
|
|||
}
|
||||
}
|
||||
|
||||
section {
|
||||
.section-title {
|
||||
margin-top: 3em;
|
||||
display: flex;
|
||||
h2 {
|
||||
font-size: $fz-2;
|
||||
font-weight: 600;
|
||||
color: $color-signature;
|
||||
margin: 0;
|
||||
}
|
||||
.line {
|
||||
flex-grow: 1;
|
||||
margin: 14px 0 0 1em;
|
||||
height: 2px;
|
||||
background-color: $color-signature;
|
||||
}
|
||||
}
|
||||
|
||||
.section-item {
|
||||
margin-top: 1.5em;
|
||||
|
||||
h3 {
|
||||
font-size: $fz-3;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: .8em 0;
|
||||
padding-left: 16px;
|
||||
li {
|
||||
margin-bottom: .4em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
margin: .4em 0;
|
||||
}
|
||||
.space-between {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.lh-para {
|
||||
line-height: $lh-para;
|
||||
}
|
||||
.fz-4 {
|
||||
font-size: $fz-4;
|
||||
}
|
||||
|
||||
.keywords {
|
||||
display: flex;
|
||||
.item {
|
||||
font-size: 13px;
|
||||
color: $color-text-dim;
|
||||
margin-right: .8em;
|
||||
padding: 0 4px;
|
||||
height: 22px;
|
||||
line-height: 21px;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
}
|
||||
|
||||
.two-columns {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.basics-section {
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
font-size: $fz-1;
|
||||
font-weight: 600;
|
||||
margin: .2em 0 .2em 0;
|
||||
}
|
||||
.label {
|
||||
margin: .4em 0;
|
||||
}
|
||||
.url {
|
||||
margin: .4em 0;
|
||||
}
|
||||
.summary {
|
||||
margin: .4em 0;
|
||||
margin: .8em 0;
|
||||
line-height: $lh-para;
|
||||
}
|
||||
.contact {
|
||||
margin: .4em 0;
|
||||
color: $color-text-dim;
|
||||
|
||||
display: flex;
|
||||
|
|
@ -47,19 +114,14 @@ $color-text-dim: #777;
|
|||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin-top: 3em;
|
||||
display: flex;
|
||||
h2 {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: $color-signature;
|
||||
margin: 0;
|
||||
}
|
||||
.line {
|
||||
flex-grow: 1;
|
||||
margin: 14px 0 0 1em;
|
||||
height: 2px;
|
||||
background-color: $color-signature;
|
||||
.education-section {
|
||||
}
|
||||
|
||||
.work-section {
|
||||
}
|
||||
|
||||
.skills-section {
|
||||
.section-item {
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue