From 8cfd1fc1ea30e6a4afdbf5bcc086bee5aaad2bd4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20M=2E=20Requena=20Plens?= Date: Wed, 12 Jul 2023 03:53:53 +0200 Subject: [PATCH] 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](https://github.com/jmrplens/jmrplens.github.io/blob/ce8b5b67dbc5a37dafe9083681b92a6746640b13/_data/cv.yml) Some screenshots: Screenshot of Google Chrome (19-4-23, 23-09-51)Screenshot of Google Chrome (19-4-23, 23-10-22) Screenshot of Google Chrome (19-4-23, 23-10-37)Screenshot of Google Chrome (19-4-23, 23-10-54) Mobile: Screenshot of Google Chrome (19-4-23, 23-21-36)Screenshot of Google Chrome (19-4-23, 23-21-48) Screenshot of Google Chrome (19-4-23, 23-22-00)Screenshot of Google Chrome (19-4-23, 23-22-14) --------- Co-authored-by: George <31376482+george-gca@users.noreply.github.com> --- _includes/cv/list_groups.html | 43 +++++++ _includes/cv/map.html | 33 ++++-- _includes/cv/time_table.html | 57 ++++++++- _layouts/cv.html | 15 ++- _pages/cv.md | 1 + _sass/_cv.scss | 215 ++++++++++++++++++++++++++++++++++ assets/css/main.scss | 3 +- 7 files changed, 351 insertions(+), 16 deletions(-) create mode 100644 _includes/cv/list_groups.html create mode 100644 _sass/_cv.scss diff --git a/_includes/cv/list_groups.html b/_includes/cv/list_groups.html new file mode 100644 index 000000000000..e2eda0ca8793 --- /dev/null +++ b/_includes/cv/list_groups.html @@ -0,0 +1,43 @@ +
+ {% for content in entry.contents %} +
+ + + + {% if content.icon %} + + {% else %} + + {% endif %} + + {% assign i = 1 %} + {% for item in content.items %} + {% assign i = i | plus:1 %} + {% endfor %} + + + {% for item in content.items %} + + + + {% if item.level %} + + {% endif %} + {% if item.school %} + + {% else %} + + {% endif %} + {% if item.link %} + + {% endif %} + + {% endfor %} + +
{{ content.category }}
{{ item.name }}{{ item.level }}{{ item.school }} + {% endif %} + {% if item.time %} +
{{ item.time }}		{% if item.linkname %}{{ item.linkname }}{% else %}DOC{% endif %}
+
+ {% endfor %} +
diff --git a/_includes/cv/map.html b/_includes/cv/map.html index 83908dafd6e6..5f53a9062a15 100644 --- a/_includes/cv/map.html +++ b/_includes/cv/map.html @@ -1,8 +1,27 @@ - - {% for content in entry.contents %} - - - - - {% endfor %} +
{{ content.name }}{{ content.value }}
+ {% for content in entry.contents %} + + + {% if content.value %} + + {% endif %} + {% if content.links %} + + {% endif %} + + {% endfor %}
{{ content.name }}{{ content.value }} +
+ {% for item in content.links %} + {% if item.link %} +
+ {% if item.name %} + {{ item.name}} + {% else %} + doc + {% endif %} +
+ {% endif %} + {% endfor %} +
+
diff --git a/_includes/cv/time_table.html b/_includes/cv/time_table.html index 123b9d099fde..957fc4bf351c 100644 --- a/_includes/cv/time_table.html +++ b/_includes/cv/time_table.html @@ -4,17 +4,49 @@
{% if content.year %}
- - {{ content.year }} - + + + + + + {% if content.location %} + + + + {% endif %} + +
+ {{ content.year }} +
+

{{ content.location }}

+
+
{% endif %}
{% if content.title %}
{{content.title}}
{% endif %} - {% if content.institution %} -
{{content.institution}}
+ {% if content.department or content.institution %} + + + {% if content.institution %} + + + + + {% endif %} + {% if content.department %} + + + + + {% endif %} + +
{{content.institution}}
{{content.department}}
+ {% endif %} + {% if content.maindescription %} +
{{ content.maindescription }}
{% endif %} {% if content.description %}
    @@ -52,6 +84,21 @@
    {{content.institution}}
    {% endif %} + {% if content.linkitems %} +
    + {% for item in content.linkitems %} + {% if item.link %} +
    + {% if item.linkname %} + {{ item.linkname}} + {% else %} + doc + {% endif %} +
    + {% endif %} + {% endfor %} +
    + {% endif %}
diff --git a/_layouts/cv.html b/_layouts/cv.html index 0eb3025827b1..09031078a605 100644 --- a/_layouts/cv.html +++ b/_layouts/cv.html @@ -6,13 +6,20 @@

{{ page.title }} {% if page.cv_pdf %}{% endif %}

-

{{ page.description }}

+ {% if page.description %}

{{ page.description }}

{% endif %}
- Full CV available as a pdf. - + +

Table of contents

+ +
{% for entry in site.data.cv %} +

{{ entry.title }}

@@ -24,6 +31,8 @@

{{ entry.title }}

{% 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 %} diff --git a/_pages/cv.md b/_pages/cv.md index 835e0ac01c4b..1db0dfcf356f 100644 --- a/_pages/cv.md +++ b/_pages/cv.md @@ -5,4 +5,5 @@ title: cv nav: true nav_order: 4 cv_pdf: cv.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. --- diff --git a/_sass/_cv.scss b/_sass/_cv.scss new file mode 100644 index 000000000000..cce8002bad82 --- /dev/null +++ b/_sass/_cv.scss @@ -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); +} +*/ \ No newline at end of file diff --git a/assets/css/main.scss b/assets/css/main.scss index fd8c311c32cb..fb82fa3f8562 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -11,5 +11,6 @@ $max-content-width: {{ site.max_width }}; "themes", "layout", "base", - "distill" + "distill", + "cv" ;