feat: layout improvements for portfolio

Ondřej Morávek

27.48.2022 3685a7dfa6d3f62670f0d2cd57cc80dbfcca00fe

feat: layout improvements for portfolio

Layout improvements for portfolio

 exampleSite/data/portfolio.yml

@@ -5,6 +5,7 @@
      - name: Project 1
        image: '/images/portfolio/code.jpg'
        link: https://gohugo.io/
        linktext: 'Visit project website'
        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
@@ -35,15 +36,14 @@
    portfolioitem:
      - name: Project 1
        image: '/images/portfolio/code.jpg'
        link: https://gohugo.io/
        description: 'A description'
        description: 'This project does not have a link attribute'
        tags:
          - Tag 1
          - Tag 2
      - name: Project 2
        image: '/images/portfolio/code.jpg'
        link: https://gohugo.io/
        description: 'A description'
        description: 'You can click on [**this link**](#codingprojects) to scroll to my Coding Projects portfolio'
        tags:
          - Tag 1
          - Tag 2

 layouts/portfolio/list.html

@@ -9,7 +9,8 @@

      {{ end }}"
    >
      <h2 class="portfolio__title">{{ title .title }}</h2>
      {{ $anchorTitle := delimit (split .title " ") "" }}
      <h2 class="portfolio__title" id="{{ $anchorTitle | lower }}">{{ title .title }}</h2>
      {{ range $i, $p := .portfolioitem }}
        <div class="portfolio">
          {{ if .image }}
@@ -22,9 +23,15 @@

              {{ end }}"
            >
              <a href="{{ .link | safeURL }}" target="_blank" rel="noopener">
              {{ if .link }}
                <a href="{{ .link | safeURL }}" target="_blank" rel="noopener">
                  <img class="portfolio__image" src="{{ .image | relURL }}" alt="{{ .name | markdownify }}" />
                </a>

              {{ else }}
                <img class="portfolio__image" src="{{ .image | relURL }}" alt="{{ .name | markdownify }}" />
              </a>

              {{ end }}
            </div>

          {{ end }}
@@ -82,7 +89,15 @@
            <p>{{ .description | markdownify }}</p>
            {{ if .link }}
              <div class="portfolio__button-wrapper">
                <a class="portfolio__button" href="{{ .link | safeURL }}" target="_blank" rel="noopener">Visit Site</a>
                <a class="portfolio__button" href="{{ .link | safeURL }}" target="_blank" rel="noopener">
                  {{- if .linktext -}}
                    {{ .linktext | markdownify }}

                  {{- else -}}
                    Visit Site

                  {{- end -}}
                </a>
              </div>

            {{ end }}