feat: improved design of portfolio

Alexander Bilz

25.44.2021 f82c58c555e314329157f64f2e20465d129d9452

feat: improved design of portfolio

 README.md

@@ -629,5 +629,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 [Shahadat Rahman](https://unsplash.com/photos/BfrQnKBulYQ) 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

@@ -806,7 +806,7 @@
  font-weight: 400;
  font-style: normal;
  border-radius: 999em;
  padding: 5px;
  padding: 10px;
}

.btn:hover {
@@ -845,10 +845,56 @@
  padding: 6px 12px;
}

/* Portfolio */
.cta {
  padding-bottom: 1em;
}

.box-wrapper {
  padding: 48px;
  position: relative;
  z-index: 0;
}

.box-image {
  box-shadow: 0 0 16px rgb(0 0 0 / 25%);
  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;
}

.box {
  box-shadow: 0 0 48px rgb(0 0 0 / 25%);
  background-color: var(--bg-color);
  padding: 32px;
}

.box--left,
.box--right {
  margin-top: -24px;
}

/* Menu */
.menu {
  float: right;
@@ -962,6 +1008,62 @@
  .footer--base {
    display: none;
  }

  .box {
    padding: 64px;
    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;
    z-index: 2;
  }

  .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) {
@@ -1099,6 +1201,23 @@
  .list-with-title .listing .listing-post a {
    width: 80%;
  }

  .box--right,
  .box--left {
    border-bottom: 1px solid var(--border-color);
  }

  .box-image--left,
  .box-image--right {
    padding: 0px;
  }

  .box-wrapper {
    padding-left: 48px;
    padding-right: 48px;
    padding-bottom: 0px;
    padding-top: 0px;
  }
}

/* Medium zoom */

 exampleSite/data/portfolio.yml

@@ -5,6 +5,30 @@
      - 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
      - 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.'
        tags:
          - Tag 1
          - Tag 2
      - name: Project 3
        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
  # portfolio category
  - title: Research
    portfolioitem:
      - name: Project 1
        image: '/images/portfolio/code.jpg'
        link: https://gohugo.io/
        description: 'A description'
        tags:
          - Tag 1

 exampleSite/static/images/portfolio/code.jpg

 layouts/portfolio/list.html

@@ -10,42 +10,52 @@

      {{ end }}"
    >
      <div class="post-title post-content">
        <h2>{{ .title }}</h2>
      <div class="post-content">
        <div class="post-title">
          <h2>{{ .title }}</h2>
        </div>

        {{ range $i, $p := .portfolioitem }}
          <div class="box-wrapper">
            <div
              class="box-image {{ if not (modBool $i 2) }}
                box-image--right

              {{ else }}
                box-image--left

              {{ end }}"
            >
              <a href="{{ .link }}">
                <img src="{{ .image | relURL }}" alt="{{ .name | markdownify }}" />
              </a>
            </div>
            <div
              class="box {{ if not (modBool $i 2) }}
                box--left

              {{ else }}
                box--right

              {{ end }}"
            >
              <h2>{{ .name | markdownify }}</h2>
              <div class="seperator">
                {{ range .tags }}
                  <p class="tag">{{ . }}</p>

                {{ end }}
              </div>
              <p>{{ .description | markdownify }}</p>
              <div class="cta">
                <a class="btn" href="{{ .link | safeURL }}" target="_blank">Visit Site</a>
              </div>
            </div>
          </div>

        {{ end }}
      </div>
    </div>
    {{ range .portfolioitem }}
      <div
        class="post {{ with .Site.Params.doNotLoadAnimations }}
          .

        {{ else }}
          animated fadeInDown

        {{ end }}"
      >
        <div class="post-title">
          <h3><a href="{{ .link | safeURL }}">{{ .name | markdownify }}</a></h3>
        </div>
        <div class="post-thumbnail">
          <img src="{{ .image | relURL }}" alt="{{ .name | markdownify }}" />
        </div>
        <div class="post-content">
          <div class="p_part">
            <p>{{ .description | markdownify }}</p>
          </div>
        </div>
        <div class="cta">
          <a class="btn" href="{{ .link | safeURL }}" target="_blank">Visit Site</a>
        </div>
        <div class="post-footer">
          <div class="meta">
            {{ partial "taxonomy/template.html" (dict "items" .tags "linkClass" "tag" "linkBase" "tags") }}
          </div>
        </div>
      </div>

    {{ end }}

  {{ end }}