From 27da04fed0cebbfa4f42bc985fdd3e029abd9ab6 Mon Sep 17 00:00:00 2001 From: Reorx Date: Sat, 11 Feb 2023 02:53:01 +0800 Subject: [PATCH] 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 --- sample.resume.json | 14 +++++++---- src/themes/reorx/index.ejs | 44 ++++++++++++++++++++++++---------- src/themes/reorx/index.scss | 47 ++++++++++++++++++++++++------------- 3 files changed, 72 insertions(+), 33 deletions(-) diff --git a/sample.resume.json b/sample.resume.json index 8d08517..dc8ebde 100644 --- a/sample.resume.json +++ b/sample.resume.json @@ -142,10 +142,15 @@ { "name": "Web Development", "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": [ "HTML", "CSS", - "Javascript" + "Javascript", + "Python", + "PHP", + "MySQL", + "PostgreSQL" ] }, { @@ -170,11 +175,12 @@ "languages": [ { "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", - "fluency": "Fluent speaker" + "language": "French", + "fluency": "Elementary" } ], diff --git a/src/themes/reorx/index.ejs b/src/themes/reorx/index.ejs index d7adc73..7b7c058 100644 --- a/src/themes/reorx/index.ejs +++ b/src/themes/reorx/index.ejs @@ -13,7 +13,7 @@ function linkInDiv(url) { <% } %> <%- linkInDiv(cv.basics.url) %> <% if (cv.basics.summary) { %> -
<%- fn.renderMarkdown(cv.basics.summary) %>
+
<%- fn.renderMarkdown(cv.basics.summary) %>
<% } %>
<% if (cv.basics.email) { %> @@ -79,10 +79,13 @@ function dateRange(item, level) {

<%= item.institution %>

- <%- dateRange(item, 2) %> + <%- linkInDiv(item.url) %>
-
- <%= item.studyType %>, <%= item.area %> +
+
+ <%= item.studyType %>, <%= item.area %> +
+ <%- dateRange(item, 2) %>
Overall GPA: <%= item.score %>
<% if (item.courses && item.courses.length > 0) { %> @@ -90,7 +93,6 @@ function dateRange(item, level) { Courses: <%= item.courses.join('; ') %>
<% } %> - <%- linkInDiv(item.url) %>
<% } %> @@ -107,9 +109,12 @@ function dateRange(item, level) {

<%= item.name %>

+ <%- linkInDiv(item.url) %> +
+
+
<%= item.position %>
<%- dateRange(item, 2) %>
-
<%= item.position %>
<%- fn.renderMarkdown(item.summary) %>
<% if (item.highlights && item.highlights.length > 0) { %>
@@ -120,7 +125,6 @@ function dateRange(item, level) {
<% } %> - <%- linkInDiv(item.url) %>
<% } %> @@ -137,9 +141,13 @@ function dateRange(item, level) {

<%= item.name %>

+ <%- linkInDiv(item.url) %> +
+
+
<%= item.roles.join(', ') %>
<%- dateRange(item, 2) %>
-
<%- fn.renderMarkdown(item.description) %>
+
<%- fn.renderMarkdown(item.description) %>
<% if (item.highlights && item.highlights.length > 0) { %>
    @@ -154,7 +162,6 @@ function dateRange(item, level) { <%= kw %> <% } %>
- <%- linkInDiv(item.url) %>
<% } %> @@ -173,7 +180,13 @@ function dateRange(item, level) {

<%= item.name %>

<%- dateRange(item, 1) %>
-
<%- fn.renderMarkdown(item.description) %>
+ <% if (item.url) { %> +
+ <%- fn.getIconSVG('mdi:link-variant') %> + <%= fn.noSchemaURL(item.url) %> +
+ <% } %> +
<%- fn.renderMarkdown(item.description) %>
<% if (item.keywords && item.keywords.length > 0) { %>
<% for (const kw of item.keywords) { %> @@ -181,7 +194,6 @@ function dateRange(item, level) { <% } %>
<% } %> - <%- linkInDiv(item.url) %> <% } %> @@ -198,7 +210,10 @@ function dateRange(item, level) { <% for (const item of cv.skills) { %>

<%= item.name %>

-
<%= item.level %>
+
<%= item.level %>
+ <% if (item.summary) { %> +
<%- fn.renderMarkdown(item.summary) %>
+ <% } %> <% if (item.keywords && item.keywords.length > 0) { %>
<% for (const kw of item.keywords) { %> @@ -222,7 +237,10 @@ function dateRange(item, level) { <% for (const item of cv.languages) { %>

<%= item.language %>

-
<%= item.fluency %>
+
<%= item.fluency %>
+ <% if (item.summary) { %> +
<%- fn.renderMarkdown(item.summary) %>
+ <% } %>
<% } %> diff --git a/src/themes/reorx/index.scss b/src/themes/reorx/index.scss index 258a2ff..c3abb31 100644 --- a/src/themes/reorx/index.scss +++ b/src/themes/reorx/index.scss @@ -7,7 +7,7 @@ $fz-1: 36px; $fz-2: 22px; $fz-3: 18px; $fz-4: 16px; -$lh-para: 1.4; +$lh-p: 1.4; .cv-container { font-size: 14px; @@ -42,7 +42,7 @@ section { } .section-item { - margin-top: 1.5em; + margin-top: 2em; h3 { font-size: $fz-3; @@ -58,36 +58,54 @@ section { } } + svg { + vertical-align: bottom; + position: relative; + bottom: 1px; + } .row { margin: .4em 0; } + .p, p { + line-height: $lh-p; + margin: .8em 0; + } + .space-between { display: flex; justify-content: space-between; - } - .lh-para { - line-height: $lh-para; - } - .fz-4 { - font-size: $fz-4; + + a { + color: $color-text-dim; + } } .keywords { display: flex; + flex-wrap: wrap; + gap: 6px 8px; .item { font-size: 13px; - color: $color-text-dim; - margin-right: .8em; + color: #555; padding: 0 4px; height: 22px; line-height: 21px; - background: #f4f4f4; + background: #f1f1f1; } } .two-columns { 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 { margin: .8em 0; - line-height: $lh-para; + line-height: $lh-p; } .contact { color: $color-text-dim; @@ -110,9 +128,6 @@ section { a { color: $color-text-dim; } - svg { - vertical-align: bottom; - } } } }