From 0fe7cfa463ee2abb74fa7dcc59ea99089f88b21f Mon Sep 17 00:00:00 2001
From: michivonah <info@michivonah.ch>
Date: Sat, 5 Apr 2025 17:51:53 +0200
Subject: [PATCH] change projects section philosophy + fix bug with load more
 btn

---
 content/de/projects.md         |  6 ++++++
 content/en/projects.md         |  6 ++++++
 layouts/partials/projects.html | 10 ++++++++--
 static/main.js                 | 18 +++++++++++++++---
 static/style.css               | 14 ++++++++++++--
 5 files changed, 47 insertions(+), 7 deletions(-)
 create mode 100644 content/de/projects.md
 create mode 100644 content/en/projects.md

diff --git a/content/de/projects.md b/content/de/projects.md
new file mode 100644
index 0000000..0dd777d
--- /dev/null
+++ b/content/de/projects.md
@@ -0,0 +1,6 @@
+---
+title: "Projekte"
+slug: "projects"
+---
+
+Hier siehst du einige meiner Projekte (Blogposts, GitHub Repos, Tools & YouTube Videos).
\ No newline at end of file
diff --git a/content/en/projects.md b/content/en/projects.md
new file mode 100644
index 0000000..b99edea
--- /dev/null
+++ b/content/en/projects.md
@@ -0,0 +1,6 @@
+---
+title: "Projects"
+slug: "projects"
+---
+
+Here you can find some of my projects (blog posts, GitHub repos, tools & YouTube videos).
\ No newline at end of file
diff --git a/layouts/partials/projects.html b/layouts/partials/projects.html
index 29e08c1..035f767 100644
--- a/layouts/partials/projects.html
+++ b/layouts/partials/projects.html
@@ -1,6 +1,12 @@
 <div id="projects" class="projects">
-    <h1 class="fade-up">{{ T "projects" }}</h1>
-    <div class="tag-filter fade-up">
+    {{ with .Site.GetPage "projects" }}
+    <div class="projects-intro fade-up">
+        <h1>{{ .Title }}</h1>
+        <p>{{ .Content }}</p>
+    </div>
+    {{ end }}
+
+    <div class="tag-filter fade-up hidden">
         {{ range .Site.Data.tags }}
         <label class="tag" for="tag-{{ .slug }}" >
             <input class="tag-checkbox" id="tag-{{ .slug }}" value="{{ .slug }}" type="checkbox" {{ if .checked }} checked {{ end }}>
diff --git a/static/main.js b/static/main.js
index 6cacc3e..38edcda 100644
--- a/static/main.js
+++ b/static/main.js
@@ -228,15 +228,27 @@ async function loadMoreContent(wrapperSelector, amount, endpoint = "https://api.
     // just for debugging purposes
     //console.log(`children: ${wrapper.childElementCount} limit: ${amount} page: ${page}`);
 
+    const hideLoadMoreButton = () => {
+        document.querySelector(btnSelector).classList.add('hidden');
+    };
+
     // error validation -> only load more content when page num is valid
     if (page % 1 == 0){
         loader.classList.remove('hidden');
-        await showProjects('.project-list', await loadContent(endpoint, amount, page));
+        const content = await loadContent(endpoint, amount, page);
+        if(Array.isArray(content) && content.length === 0){
+            console.log("No more projects available");
+            // hide button if no more content is available
+            hideLoadMoreButton();
+        }
+        else{
+            // show projects
+            await showProjects('.project-list', content);
+        }
         loader.classList.add('hidden');
     }
     else{
         // hide button if no more content is available
-        document.querySelector(btnSelector).classList.add('hidden');
+        hideLoadMoreButton();
     }
-    
 }
\ No newline at end of file
diff --git a/static/style.css b/static/style.css
index 61c1bf8..a419eda 100644
--- a/static/style.css
+++ b/static/style.css
@@ -411,8 +411,14 @@ nav.small .nav-links a:last-child:focus{
 
 /* PROJECTS */
 .projects{
+    margin-top: 30px;
     text-align: center;
-    scroll-margin-top: calc(var(--navSmallHeight) + 20px);
+    scroll-margin-top: calc(var(--navSmallHeight) + 10px);
+}
+
+.projects-intro{
+    padding: 0 10px;
+    box-sizing: border-box;
 }
 
 .tag-filter{
@@ -427,6 +433,10 @@ nav.small .nav-links a:last-child:focus{
     
 }
 
+.tag-filter.hidden{
+    display: none;
+}
+
 .tag{
     background: var(--color);
     color: var(--primary);
@@ -457,7 +467,7 @@ nav.small .nav-links a:last-child:focus{
 }
 
 .project-list{
-    padding: 20px 0;
+    padding: 10px 0 20px 0;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;