CV Restyled (#1339)
I have redesigned the CV to have some options that I have in my pdf CV.
I'm not too inspired to include more example data, if anyone wants to
add data, go ahead.
With my data the CV looks like this:
[https://jmrplens.github.io/cv/](https://jmrplens.github.io/cv/ ).
My data: [VIEW
FILE](ce8b5b67db/_data/cv.yml)
Some screenshots:
<img width="45%" alt="Screenshot of Google Chrome (19-4-23, 23-09-51)"
src="https://user-images.githubusercontent.com/28966312/233200752-e49afa44-1c07-42eb-b38c-337f81b60406.png"><img
width="45%" alt="Screenshot of Google Chrome (19-4-23, 23-10-22)"
src="https://user-images.githubusercontent.com/28966312/233200844-0201d061-df3e-4e80-8107-3b6f7c72faa3.png">
<img width="45%" alt="Screenshot of Google Chrome (19-4-23, 23-10-37)"
src="https://user-images.githubusercontent.com/28966312/233200898-77040d1a-bf9a-47f1-a46d-3008f7331020.png"><img
width="45%" alt="Screenshot of Google Chrome (19-4-23, 23-10-54)"
src="https://user-images.githubusercontent.com/28966312/233200949-055fe27e-ce06-4929-91e8-cab2983b4850.png">
Mobile:
<img width="45%" alt="Screenshot of Google Chrome (19-4-23, 23-21-36)"
src="https://user-images.githubusercontent.com/28966312/233203168-8b5cc777-e3f8-4387-96d4-a5d405d7032b.png"><img
width="45%" alt="Screenshot of Google Chrome (19-4-23, 23-21-48)"
src="https://user-images.githubusercontent.com/28966312/233203238-5ccc424e-b0e3-41a1-bd2b-2c64e01cfc85.png">
<img width="45%" alt="Screenshot of Google Chrome (19-4-23, 23-22-00)"
src="https://user-images.githubusercontent.com/28966312/233203297-7174be99-08a1-427a-a414-5bded2d6c2d8.png"><img
width="45%" alt="Screenshot of Google Chrome (19-4-23, 23-22-14)"
src="https://user-images.githubusercontent.com/28966312/233203312-f5067ce7-134f-4a39-bb5b-aaa3d247b3e7.png">
---------
Co-authored-by: George <31376482+george-gca@users.noreply.github.com>
This commit is contained in:
José M. Requena Plens
GitHub
parent
84b6dfabbe
commit
cd5138b9c6
|
|
@ -0,0 +1,43 @@
|
|||
<div class="list-groups">
|
||||
{% for content in entry.contents %}
|
||||
<div class="list-group col-md-6">
|
||||
<table class="table-cv list-group-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
{% if content.icon %}
|
||||
<td class="list-group-category-icon"><i class="{{ content.icon }}"></i></td>
|
||||
{% else %}
|
||||
<td class="list-group-category-icon"></td>
|
||||
{% endif %}
|
||||
<!-- Calculate colspan number for category title -->
|
||||
{% assign i = 1 %}
|
||||
{% for item in content.items %}
|
||||
{% assign i = i | plus:1 %}
|
||||
{% endfor %}
|
||||
<td colspan="{{ i }}" class="list-group-category">{{ content.category }}</td>
|
||||
</tr>
|
||||
{% for item in content.items %}
|
||||
<tr>
|
||||
<td></td>
|
||||
<td class="list-group-name"><b>{{ item.name }}</b></td>
|
||||
{% if item.level %}
|
||||
<td class="list-group-level">{{ item.level }}</td>
|
||||
{% endif %}
|
||||
{% if item.school %}
|
||||
<td class="list-group-school">{{ item.school }}
|
||||
{% endif %}
|
||||
{% if item.time %}
|
||||
<br><span class="list-group-time">{{ item.time }}</span></td>
|
||||
{% else %}
|
||||
</td>
|
||||
{% endif %}
|
||||
{% if item.link %}
|
||||
<td class="list-group-link"><a href="{{ item.link }}" target="_blank" class="btncv z-depth-0">{% if item.linkname %}{{ item.linkname }}{% else %}DOC{% endif %}</a></td>
|
||||
{% endif %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
|
@ -1,8 +1,27 @@
|
|||
<table class="table table-sm table-borderless table-responsive table-cv-map">
|
||||
{% for content in entry.contents %}
|
||||
<tr>
|
||||
<td class="p-1 pr-2 font-weight-bold"><b>{{ content.name }}</b></td>
|
||||
<td class="p-1 pl-2 font-weight-light text">{{ content.value }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
<table class="table table-cv table-sm table-borderless table-responsive">
|
||||
{% for content in entry.contents %}
|
||||
<tr>
|
||||
<td class="p-1 pr-2 font-weight-bold"><b>{{ content.name }}</b></td>
|
||||
{% if content.value %}
|
||||
<td class="p-1 pl-2 font-weight-light text">{{ content.value }}</td>
|
||||
{% endif %}
|
||||
{% if content.links %}
|
||||
<td class="p-1 pl-2 font-weight-light text">
|
||||
<div class="container-pdf">
|
||||
{% for item in content.links %}
|
||||
{% if item.link %}
|
||||
<div class="container-link-button">
|
||||
{% if item.name %}
|
||||
<a href="{{ item.link }}" target="_blank" class="btncv z-depth-0">{{ item.name}}</a>
|
||||
{% else %}
|
||||
<a href="{{ item.link }}" target="_blank" class="btncv z-depth-0">doc</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</td>
|
||||
{% endif %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
|
|
|
|||
|
|
@ -4,17 +4,49 @@
|
|||
<div class="row">
|
||||
{% if content.year %}
|
||||
<div class="col-xs-2 cl-sm-2 col-md-2 text-center" style="width: 75px;">
|
||||
<span class="badge font-weight-bold danger-color-dark text-uppercase align-middle" style="min-width: 75px;">
|
||||
{{ content.year }}
|
||||
</span>
|
||||
<table class="table-cv">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="badge font-weight-bold danger-color-dark text-uppercase align-middle" style="min-width: 75px;">{{ content.year }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
{% if content.location %}
|
||||
<tr>
|
||||
<td>
|
||||
<p class="location"><i class="fas fa-map-marker-alt iconlocation"></i> {{ content.location }}</p>
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="col-xs-10 cl-sm-10 col-md-10 mt-2 mt-md-0">
|
||||
{% if content.title %}
|
||||
<h6 class="title font-weight-bold ml-1 ml-md-4">{{content.title}}</h6>
|
||||
{% endif %}
|
||||
{% if content.institution %}
|
||||
<h6 class="ml-1 ml-md-4" style="font-size: 0.95rem;">{{content.institution}}</h6>
|
||||
{% if content.department or content.institution %}
|
||||
<table class="table-cv ml-1 ml-md-4 institution">
|
||||
<tbody>
|
||||
{% if content.institution %}
|
||||
<tr>
|
||||
<td style="vertical-align: top; text-align: center;" class="institution"><i class="fas fa-university iconinstitution"></i></td>
|
||||
<td class="institution">{{content.institution}}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% if content.department %}
|
||||
<tr>
|
||||
<td style="vertical-align: top; text-align: center;" class="department"><i class="far fa-dot-circle icondepartment"></i></td>
|
||||
<td class="department">{{content.department}}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% endif %}
|
||||
{% if content.maindescription %}
|
||||
<div class="ml-1 ml-md-4 ">{{ content.maindescription }}</div>
|
||||
{% endif %}
|
||||
{% if content.description %}
|
||||
<ul class="items">
|
||||
|
|
@ -52,6 +84,21 @@
|
|||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
{% if content.linkitems %}
|
||||
<div class="container-links ml-1 ml-md-4">
|
||||
{% for item in content.linkitems %}
|
||||
{% if item.link %}
|
||||
<div class="container-link-button">
|
||||
{% if item.linkname %}
|
||||
<a href="{{ item.link }}" target="_blank" class="btncv z-depth-0">{{ item.linkname}}</a>
|
||||
{% else %}
|
||||
<a href="{{ item.link }}" target="_blank" class="btncv z-depth-0">doc</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -6,12 +6,20 @@ layout: default
|
|||
|
||||
<header class="post-header">
|
||||
<h1 class="post-title">{{ page.title }} {% if page.cv_pdf %}<a href="{{ page.cv_pdf | prepend: 'assets/pdf/' | relative_url}}" target="_blank" rel="noopener noreferrer" class="float-right"><i class="fas fa-file-pdf"></i></a>{% endif %}</h1>
|
||||
<p class="post-description">{{ page.description }}</p>
|
||||
{% if page.description %}<p class="post-description">{{ page.description }}</p>{% endif %}
|
||||
</header>
|
||||
|
||||
<h4>Table of contents</h4>
|
||||
<ul class="timeline">
|
||||
{% for entry in site.data.cv %}
|
||||
<li><a href="#{{ entry.title }}"><span class="badge-toc">{{ entry.title }}</span></a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
<article>
|
||||
<div class="cv">
|
||||
{% for entry in site.data.cv %}
|
||||
<a class="anchor" id="{{ entry.title }}"></a>
|
||||
<div class="card mt-3 p-3">
|
||||
<h3 class="card-title font-weight-medium">{{ entry.title }}</h3>
|
||||
<div>
|
||||
|
|
@ -23,6 +31,8 @@ layout: default
|
|||
{% include cv/nested_list.html %}
|
||||
{% elsif entry.type == "time_table" %}
|
||||
{% include cv/time_table.html %}
|
||||
{% elsif entry.type == "list_groups" %}
|
||||
{% include cv/list_groups.html %}
|
||||
{% else %}
|
||||
{{ entry.contents }}
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -5,4 +5,5 @@ title: cv
|
|||
nav: true
|
||||
nav_order: 4
|
||||
cv_pdf: example_pdf.pdf
|
||||
description: This is a description of the page. You can modify it in 'pages/_cv.md'. You can also change or remove the top pdf download button.
|
||||
---
|
||||
|
|
|
|||
|
|
@ -0,0 +1,215 @@
|
|||
/*****************************
|
||||
* CV shared styles
|
||||
*****************************/
|
||||
|
||||
div.container-link-button {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
table.table-cv {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
a.btncv {
|
||||
color: var(--global-text-color) !important;
|
||||
border: 1px solid var(--global-text-color) !important;
|
||||
border-radius: 0.125rem;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
text-decoration: none;
|
||||
font-weight: 400;
|
||||
font-size: .7rem;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
a.btncv:hover {
|
||||
color: var(--global-theme-color) !important;
|
||||
border-color: var(--global-theme-color) !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
/*****************************
|
||||
* CV TIME_TABLE styles
|
||||
*****************************/
|
||||
|
||||
p.location {
|
||||
font-size: 0.7rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
i.iconlocation {
|
||||
color: var(--global-theme-color);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
i.iconinstitution {
|
||||
color: var(--global-theme-color);
|
||||
font-size: 0.95rem;
|
||||
margin-right: 0.3rem;
|
||||
}
|
||||
|
||||
i.icondepartment {
|
||||
color: var(--global-theme-color);
|
||||
font-size: 0.8rem;
|
||||
margin-right: 0.3rem;
|
||||
}
|
||||
|
||||
table.institution {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
td.department {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
div.container-links {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/*****************************
|
||||
* CV MAP styles
|
||||
*****************************/
|
||||
|
||||
div.container-pdf {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
/*****************************
|
||||
* CV LIST_GROUPS styles
|
||||
*****************************/
|
||||
|
||||
div.list-groups {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
flex-direction: row;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
div.list-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
td.list-group-category {
|
||||
color: var(--global-theme-color);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
td.list-group-category-icon {
|
||||
font-size: 0.8rem;
|
||||
color: var(--global-theme-color);
|
||||
width: 1.4rem;
|
||||
padding-right: 0.4rem;
|
||||
}
|
||||
|
||||
td.list-group-name {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
td.list-group-level {
|
||||
font-size: 0.8rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
td.list-group-school {
|
||||
font-size: 0.7rem;
|
||||
padding-left: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p.list-group-time {
|
||||
font-size: 0.7rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
td.list-group-link {
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
/*****************************
|
||||
* CV TOC styles
|
||||
*****************************/
|
||||
|
||||
a.anchor {
|
||||
display: block;
|
||||
position: relative;
|
||||
top: -50px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
ul.timeline {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
ul.timeline li {
|
||||
position: relative;
|
||||
min-height: 2.2rem;
|
||||
color: var(--global-text-color);
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
span.badge-toc {
|
||||
color: var(--global-bg-color);
|
||||
background-color: var(--global-theme-color);
|
||||
border-radius: 0.125rem;
|
||||
padding: 0.125rem 0.5rem 0.125rem 0.5rem;
|
||||
font-weight: 700 !important;
|
||||
display: inline-block;
|
||||
inline-size: fit-content;
|
||||
}
|
||||
|
||||
ul.timeline li::before {
|
||||
content: "";
|
||||
min-height: 2.5rem;
|
||||
width: 1px;
|
||||
background: var(--global-text-color);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
top: -0.5rem;
|
||||
}
|
||||
|
||||
/*ul.timeline::before {
|
||||
content: "●";
|
||||
font-size: 1em;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
left: -2px;
|
||||
top: 0.4rem;
|
||||
color: var(--global-text-color);
|
||||
}
|
||||
ul.timeline::after {
|
||||
content: "●";
|
||||
font-size: 1em;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
left: -2px;
|
||||
top: -1rem;
|
||||
color: var(--global-text-color);
|
||||
}
|
||||
*/
|
||||
|
|
@ -11,5 +11,6 @@ $max-content-width: {{ site.max_width }};
|
|||
"themes",
|
||||
"layout",
|
||||
"base",
|
||||
"distill"
|
||||
"distill",
|
||||
"cv"
|
||||
;
|
||||
|
|
|
|||
Loading…
Reference in New Issue