MVP

layouts/_default/_markup/render-image.html

@@ -0,0 +1,3 @@
+{{ $img := .Page.Resources.GetMatch .Destination }}
+
+{{ partial "components/image.html" (dict "img" $img "destination" .Destination "alt" .Text "caption" .Title) }}

layouts/_default/home.html

@@ -1,7 +1,60 @@
 {{ define "main" }}
-  {{ .Content }}
-  {{ range site.RegularPages }}
-    <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
-    {{ .Summary }}
+<div class="scroller">
+  <section>
+    <div class="profile card">
+      {{ if .Params.image }}
+      <div class="image">
+        {{ partial "components/image.html" .Params.image }}
+      </div>
+      {{ else }}
+      <div class="image placeholder"></div>
+      {{ end }}
+      <div class="content">
+        <h1>{{ .Title }}</h1>
+        {{ .Content }}
+        {{ if .Params.social }}
+          <div class="social">
+          {{ range .Params.social }}
+            {{ partial "components/icon.html" . }}
+          {{ end }}
+          </div>
+        {{ end }}
+      </div>
+    </div>
+    <div class="scroll-indicator">
+      <a href="#">
+        <i class="icon-angle-down"></i>
+      </a>
+    </div>
+  </section>
+  {{ range where .Site.RegularPages "Section" "projects"}}
+  <section>
+    <div class="card">
+      {{ if .Params.image }}
+      <div class="image">
+        {{ partial "components/image.html" .Params.image }}
+      </div>
+      {{ end }}
+      <div class="content">
+        <div class="tags">
+          {{ range .Params.tags }}
+          <a class="tag" href="{{ "tags" | absURL }}/{{ . | urlize }}/">{{ . }}</a>
+          {{ end }}
+        </div>
+        <h1><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h1>
+        <div class="more">
+          <a class="button filled" href="{{ .RelPermalink }}">
+            View Case
+          </a>
+        </div>
+      </div>
+    </div>
+    <div class="scroll-indicator">
+      <a href="#">
+        <i class="icon-angle-down"></i>
+      </a>
+    </div>
+  </section>
   {{ end }}
+</div>
 {{ end }}

layouts/_default/list.html

@@ -1,8 +1,11 @@
 {{ define "main" }}
-  <h1>{{ .Title }}</h1>
+<article class="content">
+  <div class="title">
+    <h1>{{ .Title }}</h1>
+  </div>
   {{ .Content }}
   {{ range .Pages }}
-    <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
-    {{ .Summary }}
+    {{ .Render "summary" }}
   {{ end }}
+</article>
 {{ end }}

layouts/_default/single.html

@@ -1,10 +1,15 @@
 {{ define "main" }}
-  <h1>{{ .Title }}</h1>
+<article class="content">
+  <div class="title">
+    <h1>{{ .Title }}</h1>
+  </div>
 
+  {{ if .Date }}
   {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
   {{ $dateHuman := .Date | time.Format ":date_long" }}
   <time datetime="{{ $dateMachine }}">{{ $dateHuman }}</time>
+  {{ end }}
 
   {{ .Content }}
-  {{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }}
+</article>
 {{ end }}

layouts/_default/summary.html

@@ -0,0 +1,4 @@
+<article>
+  <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
+  {{ .Summary }}
+</article>

layouts/partials/components/button.html

@@ -0,0 +1,13 @@
+<!--
+type: string - default filled
+text: string
+icon: string (optional)
+url: string
+-->
+{{ $outlined := "outlined"}}
+<a class="{{if eq .type $outlined}} button-outlined {{else}} button-filled {{end}}" href="{{ .url }}">
+  {{ with .icon }}
+    <i class="icon-{{ . }}"></i>
+  {{ end }}
+  {{ .text }}
+</a>

layouts/partials/components/icon.html

@@ -0,0 +1,9 @@
+<!--
+type: string - default: link
+text: string (optional)
+url: string
+-->
+<a href="{{ .url }}" rel="{{ .rel }}">
+  <i class="{{ if .type }} icon-{{ .type }} {{ else }} icon-link {{ end }}"></i>
+  {{ if .text }} {{ .text }}{{ end }}
+</a>

layouts/partials/components/image.html

@@ -0,0 +1,56 @@
+<!--
+type: string - default empty
+img: image
+url: string
+alt: string
+caption: string
+-->
+{{ $img := .img }}
+{{ if not $img }}
+{{ $img = resources.Get .url }}
+{{ if not $img }}
+{{ $img := resources.GetRemote .url | resources.Copy (path.Join "images" (path.Base .url )) }}
+{{ end }}
+{{ end }}
+
+{{ if $img }}
+{{ $url := $img.RelPermalink }}
+{{ $width := $img.Width }}
+{{ $height := $img.Height }}
+{{ $sizes := slice "320" "640" "960" "1280" }}
+{{ $ext := path.Ext $url }}
+{{ $name := path.Base (replace $url $ext "") }}
+{{ $dir := path.Dir $url }}
+{{ $mediaWidthControl := "(min-width: 1240px) 50px, 70vw" }}
+
+<picture>
+  {{- if eq hugo.Environment "development" }}
+  <img class="{{ .type }}" width="{{ $width }}" height="{{ $height }}" src="{{ $url }}" alt="{{ .alt }}" loading="lazy"
+    decoding="async">
+  {{ else }}
+  <source type="image/avif" srcset="
+      {{ range $i, $size := $sizes }}
+        {{ $dir }}/{{ $name }}-{{ $size }}{{ $ext }}.avif {{ $size }}w, 
+      {{ end }}
+      {{ $url }}.avif {{ $width }}w
+    " sizes="{{ $mediaWidthControl }}" />
+  <source type="image/webp" srcset="
+      {{ range $i, $size := $sizes }}
+        {{ $dir }}/{{ $name }}-{{ $size }}{{ $ext }}.webp {{ $size }}w, 
+      {{ end }}
+      {{ $url }}.webp {{ $width }}w
+    " sizes="{{ $mediaWidthControl }}" />
+  <img class="{{ .type }}" width="{{ $width }}" height="{{ $height }}" srcset="
+      {{ range $i, $size := $sizes }}
+        {{ $dir }}/{{ $name }}-{{ $size }}{{ $ext }} {{ $size }}w, 
+      {{ end }}
+      {{ $url }} {{ $width }}w
+    " src="{{ $url }}" alt="{{ .alt }}" loading="lazy" decoding="async">
+  {{ end }}
+</picture>
+{{ if .caption }}
+<p class="caption">{{ .caption }}</p>
+{{ end }}
+{{ end }}
+
+{{/* https://www.brycewray.com/posts/2023/05/better-code-image-processing-hugo-render-hook-edition/ */}}

layouts/partials/footer.html

@@ -1 +0,0 @@
-<p>Copyright {{ now.Year }}. All rights reserved.</p>

layouts/partials/head.html

@@ -1,5 +1,7 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
-<title>{{ if .IsHome }}{{ site.Title }}{{ else }}{{ printf "%s | %s" .Title site.Title }}{{ end }}</title>
+<meta name="color-scheme" content="dark">
+{{ template "_internal/opengraph.html" . }}
+<title>{{ if .Title }}{{ .Title }}{{ else }}{{ .Site.Title }}{{ end }}</title>
 {{ partialCached "head/css.html" . }}
 {{ partialCached "head/js.html" . }}

layouts/partials/head/css.html

@@ -1,9 +1,4 @@
-{{- with resources.Get "css/main.css" }}
-  {{- if eq hugo.Environment "development" }}
-    <link rel="stylesheet" href="{{ .RelPermalink }}">
-  {{- else }}
-    {{- with . | minify | fingerprint }}
-      <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
-    {{- end }}
-  {{- end }}
+{{- with resources.Get "scss/main.scss" | resources.ExecuteAsTemplate "css/main.css" . | resources.ToCSS (dict "outputStyle" "compressed") | minify | fingerprint }}
+  <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
 {{- end }}
+<link rel="stylesheet" type="text/css" href="/icons/fontawesome.css">

layouts/partials/header.html

@@ -1,2 +1,6 @@
-<h1>{{ site.Title }}</h1>
-{{ partial "menu.html" (dict "menuID" "main" "page" .) }}
+<h2><a href="/">{{ .Site.Title }}</a></h2>
+{{ range .Site.Pages }}
+{{ if .Params.nav }}
+<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
+{{ end }}
+{{ end }}

layouts/partials/terms.html

@@ -1,23 +0,0 @@
-{{- /*
-For a given taxonomy, renders a list of terms assigned to the page.
-
-@context {page} page The current page.
-@context {string} taxonomy The taxonony.
-
-@example: {{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }}
-*/}}
-
-{{- $page := .page }}
-{{- $taxonomy := .taxonomy }}
-
-{{- with $page.GetTerms $taxonomy }}
-  {{- $label := (index . 0).Parent.LinkTitle }}
-  <div>
-    <div>{{ $label }}:</div>
-    <ul>
-      {{- range . }}
-        <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
-      {{- end }}
-    </ul>
-  </div>
-{{- end }}

layouts/projects/single.html

@@ -0,0 +1,19 @@
+{{ define "main" }}
+<article class="content">
+  <div class="title">
+    <h1>{{ .Title }}</h1>
+  </div>
+  <div class="card">
+    {{ if .Params.image }}
+    <div class="image">
+      {{ partial "components/image.html" .Params.image }}
+    </div>
+    {{ end }}
+    <div class="content">
+      <h1>Project Overview</h1>
+      <p>{{ .Params.overview }}</p>
+    </div>
+  </div>
+  {{ .Content }}
+</article>
+{{ end }}

layouts/projects/summary.html

@@ -0,0 +1,8 @@
+<article>
+  <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
+  {{ if .Params.overview }}
+  {{ .Params.overview }}
+  {{ else }}
+  {{ .Summary }}
+  {{ end }}
+</article>