feat: layout improvements for portfolio

Layout improvements for portfolio
lxndrblz · Mar 27, 2022 · 3685a7d · 3685a7d
1 parent 5f822e3
commit 3685a7d
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 7 deletions.
diff --git a/exampleSite/data/portfolio.yml b/exampleSite/data/portfolio.yml
@@ -5,6 +5,7 @@ portfolioitems:
       - 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 @@ portfolioitems:
     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

diff --git a/layouts/portfolio/list.html b/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 @@ <h2 class="portfolio__title">{{ title .title }}</h2>
 
               {{ 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 @@ <h2>{{ .name | markdownify }}</h2>
             <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 }}