From 0d412d3a37f6317dd1a8b231444077fecbbf522c Mon Sep 17 00:00:00 2001
From: Alexander Bilz <mail@alexbilz.com>
Date: Mon, 13 Dec 2021 13:19:22 +0100
Subject: feat: added portfolio and projects page (#272)

Closes #221
---
 README.md                                       |  30 +++++-
 assets/css/style.css                            | 127 +++++++++++++++++++++++-
 exampleSite/config/_default/menus.en.toml       |  10 +-
 exampleSite/content/english/portfolio/_index.md |   5 +
 exampleSite/data/portfolio.yml                  |  53 ++++++++++
 exampleSite/static/images/portfolio/code.jpg    | Bin 0 -> 205007 bytes
 layouts/portfolio/list.html                     | 100 +++++++++++++++++++
 7 files changed, 320 insertions(+), 5 deletions(-)
 create mode 100644 exampleSite/content/english/portfolio/_index.md
 create mode 100644 exampleSite/data/portfolio.yml
 create mode 100644 exampleSite/static/images/portfolio/code.jpg
 create mode 100644 layouts/portfolio/list.html

diff --git a/README.md b/README.md
index ccc09af..69791f2 100644
--- a/README.md
+++ b/README.md
@@ -711,13 +711,40 @@ A duration of 0 disables the warning.
 
 By default, this warning only shows on posts. You can override this behavior by setting the `old_content_duration` parameter in the front matter of pages you want this warning to be displayed on.
 
+### Portfolio Page
+
+You can create an optional portfolio page that allows showcasing recent projects and publications. The entries within your portfolio are controlled by the `portfolio.yml` inside of your `data` folder. The `portfolio.yml` may look similar to the following structure:
+
+```yaml
+portfolioitems:
+  # portfolio category
+  - title: Coding Projects
+    # items within a category
+    portfolioitem:
+      - name: Project 1
+        image: '/images/portfolio/code.jpg'
+        link: https://gohugo.io/
+        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
+        tags:
+          - Tag 1
+          - Tag 2
+        status: 'Finished'
+        start: '2020'
+        end: '2021'
+        authors:
+          - Author 1
+          - Author 2
+```
+
+Please note that fields such as start, end, authors, and tags will only appear if they have been populated. The image path defined under `image` parameter is relative to the static folder, similarly to images included in the post.
+
 ## License
 
 Anatole is licensed under the [MIT license](https://github.com/lxndrblz/anatole/blob/master/LICENSE).
 
 ## Maintenance
 
-This theme is maintained by its author [Alexander Bilz](https://github.com/lxndrblz) and with the help from these awesome [contributors](https://github.com/lxndrblz/anatole/graphs/contributors). Please open an issue/pull request if you want to contribute to making this theme better and more feature-complete. For PRs, please make sure that they align with the theme's goals: minimalism, speed and elegance.
+This theme is maintained by its author [Alexander Bilz](https://github.com/lxndrblz) and with the help from these awesome [contributors](https://github.com/lxndrblz/anatole/graphs/contributors). Please open an issue/pull request if you want to contribute to making this theme better and more feature-complete. For PRs, please make sure that they align with the theme's goals: minimalism, speed, and elegance.
 
 ## Sponsoring
 
@@ -729,5 +756,6 @@ If you like this theme, give it a star on GitHub, and consider supporting its de
 
 - Go to [Cai Cai](https://github.com/hi-caicai), for the great Anatole [Farbox theme](https://github.com/hi-caicai/farbox-theme-Anatole) that formed the foundation for this theme.
 - Go to [Kareya Saleh](https://unsplash.com/photos/tLKOj6cNwe0) for providing the [profile picture](https://github.com/lxndrblz/anatole/blob/master/exampleSite/static/images/profile.jpg) used in the exampleSite.
+- Go to [Petri R](https://unsplash.com/photos/jLn20MzqfdE) for providing the [portfolio picture](https://github.com/lxndrblz/anatole/blob/master/exampleSite/static/images/portfolio/code.jpg) used in the exampleSite.
 - Go to [Ales Krivec](https://unsplash.com/photos/4miBe6zg5r0) for providing the thumbnail picture used in the exampleSite [image-test post](https://github.com/lxndrblz/anatole/blob/master/exampleSite/content/english/post/image-test.md).
 - Go to [Tobias Ahlin](https://github.com/tobiasahlin) for his [SpinKit](https://github.com/tobiasahlin/SpinKit) that is used in the exampleSite [redirect post](https://github.com/lxndrblz/anatole/blob/master/exampleSite/content/english/post/redirect.md).
diff --git a/assets/css/style.css b/assets/css/style.css
index 9aa19be..297ee06 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -474,13 +474,13 @@ Language Switch
 .post .post-content a {
   text-decoration: none;
   letter-spacing: 1px;
-  color: #2660ab;
+  color: var(--link-color);
   overflow-wrap: break-word;
   word-wrap: break-word;
 }
 
 .post .post-content a:hover {
-  color: #2f69b3;
+  color: var(--link-color);
 }
 
 .post .post-content h3 {
@@ -896,6 +896,7 @@ a.btn {
   font-weight: 400;
   font-style: normal;
   border-radius: 999em;
+  padding: 10px;
 }
 
 .btn:hover {
@@ -934,6 +935,55 @@ a.btn {
   padding: 6px 12px;
 }
 
+/* Portfolio */
+.cta {
+  padding-bottom: 1em;
+}
+
+.box-wrapper {
+  padding: 48px;
+  position: relative;
+  z-index: 0;
+}
+
+.box-image {
+  display: block;
+  background-color: #fff;
+  position: relative;
+  z-index: 1;
+  overflow: hidden;
+}
+
+.box-image img {
+  width: 100%;
+  box-shadow: #000;
+  overflow: hidden;
+  transition: box-shadow 0.3s ease;
+  object-fit: cover;
+  border-bottom: 0px;
+  display: block;
+}
+
+.box-image--right,
+.box-image--left {
+  margin-right: auto;
+  margin-left: auto;
+  width: calc(100% - 64px);
+  background-color: var(--bg-color);
+  max-width: 400px;
+  z-index: -1;
+}
+
+.box {
+  background-color: var(--bg-color);
+  padding: 32px;
+}
+
+.box--left,
+.box--right {
+  margin-top: -24px;
+}
+
 /* Menu */
 .menu {
   float: right;
@@ -1094,6 +1144,61 @@ a.btn {
   .footer--base {
     display: none;
   }
+
+  .box {
+    padding: 48px;
+    box-shadow: 0 0 48px var(--border-color);
+    background-color: #fff;
+    border-radius: 0.5em;
+  }
+
+  .box-wrapper::before {
+    border: 1px solid var(--border-color);
+    content: '';
+    z-index: -1;
+    position: absolute;
+    top: 10%;
+    left: 10%;
+    bottom: 10%;
+    right: 10%;
+    background: transparent;
+    border-radius: 0.5em;
+  }
+
+  .box-image--right,
+  .box-image--left {
+    width: 60%;
+    object-fit: contain;
+    max-width: none;
+  }
+
+  .box-image--right {
+    margin-right: 0;
+    margin-left: auto;
+    border-top-right-radius: 0.5em;
+    border-top-left-radius: 0.5em;
+    border-bottom-right-radius: 0.5em;
+  }
+
+  .box-image--left {
+    margin-right: auto;
+    margin-left: 0;
+    border-top-left-radius: 0.5em;
+    border-top-right-radius: 0.5em;
+    border-bottom-left-radius: 0.5em;
+  }
+
+  .box--left,
+  .box--right {
+    width: 60%;
+    margin-top: -48px;
+    z-index: 3;
+    background: var(--blockquote-border-color);
+  }
+
+  .box--right {
+    margin-left: auto;
+  }
 }
 
 @media screen and (max-width: 960px) {
@@ -1236,6 +1341,24 @@ a.btn {
     width: 80%;
   }
 
+  .box--right,
+  .box--left {
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  .box-image--left,
+  .box-image--right {
+    padding: 32px 32px 0px 32px;
+    max-width: inherit;
+  }
+
+  .box-wrapper {
+    padding-left: 48px;
+    padding-right: 48px;
+    padding-bottom: 0px;
+    padding-top: 48px;
+  }
+
   .triangle {
     display: none;
   }
diff --git a/exampleSite/config/_default/menus.en.toml b/exampleSite/config/_default/menus.en.toml
index 448a659..856ae35 100644
--- a/exampleSite/config/_default/menus.en.toml
+++ b/exampleSite/config/_default/menus.en.toml
@@ -11,14 +11,20 @@
   url = "/post/"
 
   [[main]]
-  name = "About"
+  name = "Portfolio"
   weight = 300
+  identifier = "portfolio"
+  url = "/portfolio/"
+
+  [[main]]
+  name = "About"
+  weight = 400
   identifier = "about"
   url = "/about/"
 
   [[main]]
   name = "Contact"
-  weight = 400
+  weight = 500
   identifier = "contact"
   url = "/contact/"
 
diff --git a/exampleSite/content/english/portfolio/_index.md b/exampleSite/content/english/portfolio/_index.md
new file mode 100644
index 0000000..754363e
--- /dev/null
+++ b/exampleSite/content/english/portfolio/_index.md
@@ -0,0 +1,5 @@
+---
+title: 'Portfolio'
+draft: false
+description: 'Welcome to my Portfolio!'
+---
diff --git a/exampleSite/data/portfolio.yml b/exampleSite/data/portfolio.yml
new file mode 100644
index 0000000..7070075
--- /dev/null
+++ b/exampleSite/data/portfolio.yml
@@ -0,0 +1,53 @@
+portfolioitems:
+  # portfolio category
+  - title: Coding Projects
+    portfolioitem:
+      - name: Project 1
+        image: '/images/portfolio/code.jpg'
+        link: https://gohugo.io/
+        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
+        tags:
+          - Tag 1
+          - Tag 2
+        status: 'Finished'
+        start: '2020'
+        end: '2021'
+      - name: Project 2
+        image: '/images/portfolio/code.jpg'
+        link: https://gohugo.io/
+        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
+        status: 'On Hold'
+        tags:
+          - Tag 1
+          - Tag 2
+      - name: Project 3
+        link: https://gohugo.io/
+        status: 'Finished'
+        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
+        tags:
+          - Tag 1
+          - Tag 2
+  # portfolio category
+  - title: Research
+    portfolioitem:
+      - name: Project 1
+        image: '/images/portfolio/code.jpg'
+        link: https://gohugo.io/
+        description: 'A description'
+        tags:
+          - Tag 1
+          - Tag 2
+      - name: Project 2
+        image: '/images/portfolio/code.jpg'
+        link: https://gohugo.io/
+        description: 'A description'
+        tags:
+          - Tag 1
+          - Tag 2
+      - name: Project 3
+        image: '/images/portfolio/code.jpg'
+        link: https://gohugo.io/
+        description: 'A description'
+        tags:
+          - Tag 1
+          - Tag 2
diff --git a/exampleSite/static/images/portfolio/code.jpg b/exampleSite/static/images/portfolio/code.jpg
new file mode 100644
index 0000000..427c8a2
Binary files /dev/null and b/exampleSite/static/images/portfolio/code.jpg differ
diff --git a/layouts/portfolio/list.html b/layouts/portfolio/list.html
new file mode 100644
index 0000000..27906e6
--- /dev/null
+++ b/layouts/portfolio/list.html
@@ -0,0 +1,100 @@
+{{ define "main" }}
+
+  {{ range $index, $elemen:= .Site.Data.portfolio.portfolioitems }}
+    <div
+      class="post {{ with .Site.Params.doNotLoadAnimations }}
+        .
+
+      {{ else }}
+        animated fadeInDown
+
+      {{ end }}"
+    >
+      <div class="post-content">
+        <div class="post-title">
+          <h2>{{ .title }}</h2>
+        </div>
+
+        {{ range $i, $p := .portfolioitem }}
+          <div class="box-wrapper">
+            {{ if .image }}
+              <div
+                class="box-image {{ if (modBool $i 2) }}
+                  box-image--right
+
+                {{ else }}
+                  box-image--left
+
+                {{ end }}"
+              >
+                <a href="{{ .link | safeURL }}" target="_blank" rel="noopener">
+                  <img src="{{ .image | relURL }}" alt="{{ .name | markdownify }}" />
+                </a>
+              </div>
+
+            {{ end }}
+            <div
+              class="box {{ if (modBool $i 2) }}
+                box--left
+
+              {{ else }}
+                box--right
+
+              {{ end }}"
+            >
+              <h2>{{ .name | markdownify }}</h2>
+              <div class="info">
+                {{ if .status }}
+                  <em class="fas fa-flag-checkered"></em>
+                  <span>{{ .status }}</span>
+
+                {{ end }}
+                {{ if .venue }}
+                  <em class="fas fa-map-marker-alt"></em>
+                  <span>{{ .venue }}</span>
+
+                {{ end }}
+                {{ if .start }}
+                  <span>Start:</span>
+                  <span>{{ .start }}</span>
+
+                {{ end }}
+                {{ if .end }}
+                  <span>End:</span>
+                  <span>{{ .end }}</span>
+
+                {{ end }}
+              </div>
+              {{ if .authors }}
+                <div class="info">
+                  {{ range .authors }}
+                    <span>{{ . }}</span>
+
+                  {{ end }}
+                </div>
+
+              {{ end }}
+              <p>{{ .description | markdownify }}</p>
+              {{ if .link }}
+                <div class="cta">
+                  <a class="btn" href="{{ .link | safeURL }}" target="_blank" rel="noopener">Visit Site</a>
+                </div>
+
+              {{ end }}
+              <div class="seperator">
+                {{ range .tags }}
+                  <p class="tag">{{ . }}</p>
+
+                {{ end }}
+              </div>
+            </div>
+          </div>
+
+        {{ end }}
+      </div>
+    </div>
+
+  {{ end }}
+
+
+{{ end }}
-- 
cgit v1.2.3