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>

_includes/cv/list_groups.html

@@ -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>

_includes/cv/map.html

@@ -1,8 +1,27 @@
-<table class="table table-sm table-borderless table-responsive table-cv-map">
+<table class="table table-cv table-sm table-borderless table-responsive">
-  {% for content in entry.contents %}
+    {% for content in entry.contents %}
-    <tr>
+      <tr>
-      <td class="p-1 pr-2 font-weight-bold"><b>{{ content.name }}</b></td>
+        <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>
+        {% if content.value %}
-    </tr>
+        <td class="p-1 pl-2 font-weight-light text">{{ content.value }}</td>
-  {% endfor %}
+        {% 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>

_includes/cv/time_table.html

@@ -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;">
+              <table class="table-cv">
-                {{ content.year }}
+                <tbody>
-              </span>
+                  <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 %}
+            {% if content.department or content.institution %}
-            <h6 class="ml-1 ml-md-4" style="font-size: 0.95rem;">{{content.institution}}</h6>
+            <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>

_layouts/cv.html

@@ -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 %}

_pages/cv.md

@@ -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.
 ---

_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);
+}
+*/

assets/css/main.scss

@@ -11,5 +11,6 @@ $max-content-width: {{ site.max_width }};
   "themes",
   "layout",
   "base",
-  "distill"
+  "distill",
+  "cv"
 ;