feat: added portfolio and projects page (#272)

Alexander Bilz

13.19.2021 0d412d3a37f6317dd1a8b231444077fecbbf522c

feat: added portfolio and projects page (#272)

Closes #221 

 README.md

@@ -711,13 +711,40 @@

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

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

 assets/css/style.css

@@ -474,13 +474,13 @@
.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 @@
  font-weight: 400;
  font-style: normal;
  border-radius: 999em;
  padding: 10px;
}

.btn:hover {
@@ -934,6 +935,55 @@
  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 @@
  .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 @@
    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;
  }

 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/"


 exampleSite/content/english/portfolio/_index.md

New file
@@ -0,0 +1,5 @@
---
title: 'Portfolio'
draft: false
description: 'Welcome to my Portfolio!'
---

 exampleSite/data/portfolio.yml

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

 exampleSite/static/images/portfolio/code.jpg

 layouts/portfolio/list.html

New file
@@ -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 }}