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
parent
08bb8c6c43
commit
27da04fed0
|
|
@ -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"
|
||||
}
|
||||
|
||||
],
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ function linkInDiv(url) {
|
|||
<% } %>
|
||||
<%- linkInDiv(cv.basics.url) %>
|
||||
<% 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">
|
||||
<% if (cv.basics.email) { %>
|
||||
|
|
@ -79,10 +79,13 @@ function dateRange(item, level) {
|
|||
<div class="education section-item">
|
||||
<div class="row space-between">
|
||||
<h3><%= item.institution %></h3>
|
||||
<%- dateRange(item, 2) %>
|
||||
<%- linkInDiv(item.url) %>
|
||||
</div>
|
||||
<div class="study row fz-4">
|
||||
<%= item.studyType %>, <%= item.area %>
|
||||
<div class="row space-between">
|
||||
<div class="study _ul _fz-4">
|
||||
<%= item.studyType %>, <%= item.area %>
|
||||
</div>
|
||||
<%- dateRange(item, 2) %>
|
||||
</div>
|
||||
<div class="score row">Overall GPA: <%= item.score %></div>
|
||||
<% if (item.courses && item.courses.length > 0) { %>
|
||||
|
|
@ -90,7 +93,6 @@ function dateRange(item, level) {
|
|||
Courses: <%= item.courses.join('; ') %>
|
||||
</div>
|
||||
<% } %>
|
||||
<%- linkInDiv(item.url) %>
|
||||
</div>
|
||||
<% } %>
|
||||
</section>
|
||||
|
|
@ -107,9 +109,12 @@ function dateRange(item, level) {
|
|||
<div class="work section-item">
|
||||
<div class="row space-between">
|
||||
<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) %>
|
||||
</div>
|
||||
<div class="position row fz-4"><%= item.position %></div>
|
||||
<div class="summary row"><%- fn.renderMarkdown(item.summary) %></div>
|
||||
<% if (item.highlights && item.highlights.length > 0) { %>
|
||||
<div class="highlights row">
|
||||
|
|
@ -120,7 +125,6 @@ function dateRange(item, level) {
|
|||
</ul>
|
||||
</div>
|
||||
<% } %>
|
||||
<%- linkInDiv(item.url) %>
|
||||
</div>
|
||||
<% } %>
|
||||
</section>
|
||||
|
|
@ -137,9 +141,13 @@ function dateRange(item, level) {
|
|||
<div class="project section-item">
|
||||
<div class="row space-between">
|
||||
<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) %>
|
||||
</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) { %>
|
||||
<div class="highlights row">
|
||||
<ul>
|
||||
|
|
@ -154,7 +162,6 @@ function dateRange(item, level) {
|
|||
<span class="item"><%= kw %></span>
|
||||
<% } %>
|
||||
</div>
|
||||
<%- linkInDiv(item.url) %>
|
||||
</div>
|
||||
<% } %>
|
||||
</section>
|
||||
|
|
@ -173,7 +180,13 @@ function dateRange(item, level) {
|
|||
<h3><%= item.name %></h3>
|
||||
<%- dateRange(item, 1) %>
|
||||
</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) { %>
|
||||
<div class="keywords row">
|
||||
<% for (const kw of item.keywords) { %>
|
||||
|
|
@ -181,7 +194,6 @@ function dateRange(item, level) {
|
|||
<% } %>
|
||||
</div>
|
||||
<% } %>
|
||||
<%- linkInDiv(item.url) %>
|
||||
</div>
|
||||
<% } %>
|
||||
</section>
|
||||
|
|
@ -198,7 +210,10 @@ function dateRange(item, level) {
|
|||
<% for (const item of cv.skills) { %>
|
||||
<div class="skill section-item">
|
||||
<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) { %>
|
||||
<div class="keywords">
|
||||
<% for (const kw of item.keywords) { %>
|
||||
|
|
@ -222,7 +237,10 @@ function dateRange(item, level) {
|
|||
<% for (const item of cv.languages) { %>
|
||||
<div class="language section-item">
|
||||
<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>
|
||||
<% } %>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue