gitadmin
/
jsoncv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

theme reorx: enhance styles, reorg space-between elements 

the left-right layout should be used after h3, for example, in educations, it should be [study<--->dates] rather than [institution<--->dates].

this change also applied to works and projects
This commit is contained in:
Reorx 2023-02-11 02:53:01 +08:00
parent 08bb8c6c43
commit 27da04fed0
3 changed files with 72 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
sample.resume.json
View File

@ -142,10 +142,15 @@
{ {
"name": "Web Development", "name": "Web Development",
"level": "Master", "level": "Master",
"summary": "Experience with Matlab, Blender, Solidworks, Unity, Python, Java, C, C++, CSS, Javascript, HTML, Adobe Premiere for VR film, Adobe Photoshop; with eagerness to keep improving and learning new technologies",
"keywords": [ "keywords": [
"HTML", "HTML",
"CSS", "CSS",
"Javascript" "Javascript",
"Python",
"PHP",
"MySQL",
"PostgreSQL"
] ]
}, },
{ {
@ -170,11 +175,12 @@
"languages": [ "languages": [
{ {
"language": "English", "language": "English",
"fluency": "Native speaker" "fluency": "Advanced",
"summary": "Proficient in English with a pretty good level of speaking, writing and comprehension abilities. Able to effectively communicate ideas and understand complex information in both personal and professional settings. Demonstrates strong grammar skills and a broad vocabulary."
}, },
{ {
"language": "Elvish", "language": "French",
"fluency": "Fluent speaker" "fluency": "Elementary"
} }
], ],

44
src/themes/reorx/index.ejs
View File

@ -13,7 +13,7 @@ function linkInDiv(url) {
<% } %> <% } %>
<%- linkInDiv(cv.basics.url) %> <%- linkInDiv(cv.basics.url) %>
<% if (cv.basics.summary) { %> <% if (cv.basics.summary) { %>
<div class="summary"><%- fn.renderMarkdown(cv.basics.summary) %></div> <div class="summary p"><%- fn.renderMarkdown(cv.basics.summary) %></div>
<% } %> <% } %>
<div class="contact row"> <div class="contact row">
<% if (cv.basics.email) { %> <% if (cv.basics.email) { %>
@ -79,10 +79,13 @@ function dateRange(item, level) {
<div class="education section-item"> <div class="education section-item">
<div class="row space-between"> <div class="row space-between">
<h3><%= item.institution %></h3> <h3><%= item.institution %></h3>
<%- dateRange(item, 2) %> <%- linkInDiv(item.url) %>
</div> </div>
<div class="study row fz-4"> <div class="row space-between">
<%= item.studyType %>, <%= item.area %> <div class="study _ul _fz-4">
<%= item.studyType %>, <%= item.area %>
</div>
<%- dateRange(item, 2) %>
</div> </div>
<div class="score row">Overall GPA: <%= item.score %></div> <div class="score row">Overall GPA: <%= item.score %></div>
<% if (item.courses && item.courses.length > 0) { %> <% if (item.courses && item.courses.length > 0) { %>
@ -90,7 +93,6 @@ function dateRange(item, level) {
Courses: <%= item.courses.join('; ') %> Courses: <%= item.courses.join('; ') %>
</div> </div>
<% } %> <% } %>
<%- linkInDiv(item.url) %>
</div> </div>
<% } %> <% } %>
</section> </section>
@ -107,9 +109,12 @@ function dateRange(item, level) {
<div class="work section-item"> <div class="work section-item">
<div class="row space-between"> <div class="row space-between">
<h3><%= item.name %></h3> <h3><%= item.name %></h3>
<%- linkInDiv(item.url) %>
</div>
<div class="row space-between">
<div class="position _ul _fz-4"><%= item.position %></div>
<%- dateRange(item, 2) %> <%- dateRange(item, 2) %>
</div> </div>
<div class="position row fz-4"><%= item.position %></div>
<div class="summary row"><%- fn.renderMarkdown(item.summary) %></div> <div class="summary row"><%- fn.renderMarkdown(item.summary) %></div>
<% if (item.highlights && item.highlights.length > 0) { %> <% if (item.highlights && item.highlights.length > 0) { %>
<div class="highlights row"> <div class="highlights row">
@ -120,7 +125,6 @@ function dateRange(item, level) {
</ul> </ul>
</div> </div>
<% } %> <% } %>
<%- linkInDiv(item.url) %>
</div> </div>
<% } %> <% } %>
</section> </section>
@ -137,9 +141,13 @@ function dateRange(item, level) {
<div class="project section-item"> <div class="project section-item">
<div class="row space-between"> <div class="row space-between">
<h3><%= item.name %></h3> <h3><%= item.name %></h3>
<%- linkInDiv(item.url) %>
</div>
<div class="row space-between">
<div class="roles _fz-4"><%= item.roles.join(', ') %></div>
<%- dateRange(item, 2) %> <%- dateRange(item, 2) %>
</div> </div>
<div class="row lh-para"><%- fn.renderMarkdown(item.description) %></div> <div class="p"><%- fn.renderMarkdown(item.description) %></div>
<% if (item.highlights && item.highlights.length > 0) { %> <% if (item.highlights && item.highlights.length > 0) { %>
<div class="highlights row"> <div class="highlights row">
<ul> <ul>
@ -154,7 +162,6 @@ function dateRange(item, level) {
<span class="item"><%= kw %></span> <span class="item"><%= kw %></span>
<% } %> <% } %>
</div> </div>
<%- linkInDiv(item.url) %>
</div> </div>
<% } %> <% } %>
</section> </section>
@ -173,7 +180,13 @@ function dateRange(item, level) {
<h3><%= item.name %></h3> <h3><%= item.name %></h3>
<%- dateRange(item, 1) %> <%- dateRange(item, 1) %>
</div> </div>
<div class="description row lh-para"><%- fn.renderMarkdown(item.description) %></div> <% if (item.url) { %>
<div class="url row">
<%- fn.getIconSVG('mdi:link-variant') %>
<a href="<%= item.url %>"><%= fn.noSchemaURL(item.url) %></a>
</div>
<% } %>
<div class="description p"><%- fn.renderMarkdown(item.description) %></div>
<% if (item.keywords && item.keywords.length > 0) { %> <% if (item.keywords && item.keywords.length > 0) { %>
<div class="keywords row"> <div class="keywords row">
<% for (const kw of item.keywords) { %> <% for (const kw of item.keywords) { %>
@ -181,7 +194,6 @@ function dateRange(item, level) {
<% } %> <% } %>
</div> </div>
<% } %> <% } %>
<%- linkInDiv(item.url) %>
</div> </div>
<% } %> <% } %>
</section> </section>
@ -198,7 +210,10 @@ function dateRange(item, level) {
<% for (const item of cv.skills) { %> <% for (const item of cv.skills) { %>
<div class="skill section-item"> <div class="skill section-item">
<h3><%= item.name %></h3> <h3><%= item.name %></h3>
<div class="level row"><%= item.level %></div> <div class="level row _fz-4"><%= item.level %></div>
<% if (item.summary) { %>
<div class="summary p"><%- fn.renderMarkdown(item.summary) %></div>
<% } %>
<% if (item.keywords && item.keywords.length > 0) { %> <% if (item.keywords && item.keywords.length > 0) { %>
<div class="keywords"> <div class="keywords">
<% for (const kw of item.keywords) { %> <% for (const kw of item.keywords) { %>
@ -222,7 +237,10 @@ function dateRange(item, level) {
<% for (const item of cv.languages) { %> <% for (const item of cv.languages) { %>
<div class="language section-item"> <div class="language section-item">
<h3><%= item.language %></h3> <h3><%= item.language %></h3>
<div class="fluency row lh-para"><%= item.fluency %></div> <div class="fluency row _fz-4"><%= item.fluency %></div>
<% if (item.summary) { %>
<div class="summary p"><%- fn.renderMarkdown(item.summary) %></div>
<% } %>
</div> </div>
<% } %> <% } %>
</section> </section>

47
src/themes/reorx/index.scss
View File

@ -7,7 +7,7 @@ $fz-1: 36px;
$fz-2: 22px; $fz-2: 22px;
$fz-3: 18px; $fz-3: 18px;
$fz-4: 16px; $fz-4: 16px;
$lh-para: 1.4; $lh-p: 1.4;
.cv-container { .cv-container {
font-size: 14px; font-size: 14px;
@ -42,7 +42,7 @@ section {
} }
.section-item { .section-item {
margin-top: 1.5em; margin-top: 2em;
h3 { h3 {
font-size: $fz-3; font-size: $fz-3;
@ -58,36 +58,54 @@ section {
} }
} }
svg {
vertical-align: bottom;
position: relative;
bottom: 1px;
}
.row { .row {
margin: .4em 0; margin: .4em 0;
} }
.p, p {
line-height: $lh-p;
margin: .8em 0;
}
.space-between { .space-between {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
}
.lh-para { a {
line-height: $lh-para; color: $color-text-dim;
} }
.fz-4 {
font-size: $fz-4;
} }
.keywords { .keywords {
display: flex; display: flex;
flex-wrap: wrap;
gap: 6px 8px;
.item { .item {
font-size: 13px; font-size: 13px;
color: $color-text-dim; color: #555;
margin-right: .8em;
padding: 0 4px; padding: 0 4px;
height: 22px; height: 22px;
line-height: 21px; line-height: 21px;
background: #f4f4f4; background: #f1f1f1;
} }
} }
.two-columns { .two-columns {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 1.5em;
}
/* helpers */
._fz-4 {
font-size: $fz-4;
}
._ul {
text-decoration: underline;
} }
} }
@ -99,7 +117,7 @@ section {
} }
.summary { .summary {
margin: .8em 0; margin: .8em 0;
line-height: $lh-para; line-height: $lh-p;
} }
.contact { .contact {
color: $color-text-dim; color: $color-text-dim;
@ -110,9 +128,6 @@ section {
a { a {
color: $color-text-dim; color: $color-text-dim;
} }
svg {
vertical-align: bottom;
}
} }
} }
} }