Add layout to show background images

jnonino · jnonino · commit fc5607a7114e · 2026-03-10T11:17:35.000Z
diff --git a/config/_default/hugo.yaml b/config/_default/hugo.yaml
@@ -43,6 +43,14 @@ menu:
       pageRef: /ai
       parent: paths
       weight: 3
+    # - identifier: devops
+    #   pageRef: /devops
+    #   parent: paths
+    #   weight: 4
+    # - identifier: quantum
+    #   pageRef: /quantum
+    #   parent: paths
+    #   weight: 5
     - identifier: blog
       pageRef: /blog
       weight: 2
diff --git a/content/ai/_index.en.md b/content/ai/_index.en.md
@@ -7,4 +7,6 @@ sidebar:
   open: true
 ---
 
+{{< page-bg image="img/cards/ai.jpeg" opacity="0.2" >}}
+
 {{< sectioncards >}}
diff --git a/content/ai/_index.es.md b/content/ai/_index.es.md
@@ -7,4 +7,6 @@ sidebar:
   open: true
 ---
 
+{{< page-bg image="img/cards/ai.jpeg" opacity="0.2" >}}
+
 {{< sectioncards >}}
diff --git a/content/blog/_index.en.md b/content/blog/_index.en.md
@@ -1,3 +1,5 @@
 ---
 title: Blog
 ---
+
+{{< page-bg image="img/cards/blog.jpeg" opacity="0.2" >}}
diff --git a/content/blog/_index.es.md b/content/blog/_index.es.md
@@ -1,3 +1,5 @@
 ---
 title: Blog
 ---
+
+{{< page-bg image="img/cards/blog.jpeg" opacity="0.2" >}}
diff --git a/content/devops/_index.en.md b/content/devops/_index.en.md
@@ -0,0 +1,11 @@
+---
+title: DevOps
+cascade:
+  type: docs
+sidebar:
+  open: true
+---
+
+{{< page-bg image="img/cards/devops.jpeg" opacity="0.2" >}}
+
+{{< sectioncards >}}
diff --git a/content/devops/_index.es.md b/content/devops/_index.es.md
@@ -0,0 +1,11 @@
+---
+title: DevOps
+cascade:
+  type: docs
+sidebar:
+  open: true
+---
+
+{{< page-bg image="img/cards/devops.jpeg" opacity="0.2" >}}
+
+{{< sectioncards >}}
diff --git a/content/programming/_index.en.md b/content/programming/_index.en.md
@@ -6,4 +6,6 @@ sidebar:
   open: true
 ---
 
+{{< page-bg image="img/cards/programming.jpeg" opacity="0.2" >}}
+
 {{< sectioncards >}}
diff --git a/content/programming/_index.es.md b/content/programming/_index.es.md
@@ -6,4 +6,6 @@ sidebar:
   open: true
 ---
 
+{{< page-bg image="img/cards/programming.jpeg" opacity="0.2" >}}
+
 {{< sectioncards >}}
diff --git a/content/quantum/_index.en.md b/content/quantum/_index.en.md
@@ -0,0 +1,11 @@
+---
+title: Quantum Computing
+cascade:
+  type: docs
+sidebar:
+  open: true
+---
+
+{{< page-bg image="img/cards/quantum.jpeg" opacity="0.2" >}}
+
+{{< sectioncards >}}
diff --git a/content/quantum/_index.es.md b/content/quantum/_index.es.md
@@ -0,0 +1,11 @@
+---
+title: Computación Cuántica
+cascade:
+  type: docs
+sidebar:
+  open: true
+---
+
+{{< page-bg image="img/cards/quantum.jpeg" opacity="0.2" >}}
+
+{{< sectioncards >}}
diff --git a/content/software-engineering/_index.en.md b/content/software-engineering/_index.en.md
@@ -6,4 +6,6 @@ sidebar:
   open: true
 ---
 
+{{< page-bg image="img/cards/software-engineering.jpeg" opacity="0.2" >}}
+
 {{< sectioncards >}}
diff --git a/content/software-engineering/_index.es.md b/content/software-engineering/_index.es.md
@@ -6,4 +6,6 @@ sidebar:
   open: true
 ---
 
+{{< page-bg image="img/cards/software-engineering.jpeg" opacity="0.2" >}}
+
 {{< sectioncards >}}
diff --git a/i18n/en.yaml b/i18n/en.yaml
@@ -2,9 +2,11 @@ about: "About"
 artificialIntelligence: "Artificial Intelligence"
 blog: "Blog"
 copyright: "© 2022-2026 Julian Nonino. All Rights Reserved."
+devops: DevOps and SRE
 languageSwitcher: "Language switcher"
 paths: "Learning Paths"
 programming: "Programming"
+quantum: Quantum Computing
 search: "Search"
 softwareEngineering: "Software Engineering"
 themeToggle: "Theme toggle"
diff --git a/i18n/es.yaml b/i18n/es.yaml
@@ -2,9 +2,11 @@ about: "Acerca de"
 artificialIntelligence: "Inteligencia Artificial"
 blog: "Blog"
 copyright: "© 2022-2026 Julian Nonino. Todos los derechos reservados."
+devops: DevOps y SRE
 languageSwitcher: "Cambiar idioma"
 paths: "Recorridos de aprendizaje"
 programming: "Programación"
+quantum: Computación Cuántica
 search: "Buscar"
 softwareEngineering: "Ingeniería de Software"
 themeToggle: "Cambiar tema"
diff --git a/layouts/shortcodes/page-bg.html b/layouts/shortcodes/page-bg.html
@@ -0,0 +1,6 @@
+{{ $imgPath := .Get "image" | default "home-background.jpeg" }}
+{{ $img := resources.Get $imgPath }}
+{{ if $img }}
+  {{ $img = $img.Resize "1920x webp" }}
+  <div style="position: fixed; inset: 0; z-index: -1; background-image: url('{{ $img.RelPermalink }}'); background-size: cover; background-position: center; opacity: {{ .Get "opacity" | default "0.2" }}; pointer-events: none;"></div>
+{{ end }}

-Original file line number
+Diff line change
@@ @@ -1,3 +1,5 @@ @@
 ---
 title: Blog
 ---
++
 +{{< page-bg image="img/cards/blog.jpeg" opacity="0.2" >}}