feat: added portfolio and projects page (#272)

Closes #221
lxndrblz · Dec 13, 2021 · 0d412d3 · 0d412d3
1 parent 488c3e9
commit 0d412d3
Show file tree

Hide file tree

Showing 7 changed files with 320 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git a/layouts/portfolio/list.html 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 }}