edit the layout handling and add cv download

2025-11-24 14:45:21 +07:00
parent fc5c7db221
commit bb65f04992
14 changed files with 351 additions and 253 deletions
--- a/views/experience.html
+++ b/views/experience.html
@@ -14,10 +14,10 @@
  >
    <!-- Experience Section -->
    <div id="content" class="flex-grow">
-      {{ template "experience-partial" .}}
+      {{ template "experience-partial" .Experience}}
    </div>
    <!-- Footer Section -->
-    {{ template "footer" }}
+    {{ template "footer" .TemplateStore.Footer}}
  </body>
  {{ template "script" }}
 </html>
--- a/views/header.html
+++ b/views/header.html
@@ -1,33 +0,0 @@
-{{ block "header" .}}
-<header class="bg-secondary dark:bg-darkSecondary shadow-md">
-  <nav class="container mx-auto flex justify-between items-center py-4 px-6">
-    <a href="#" class="text-xl font-bold text-blue-600">Dilanka Herath</a>
-    <div class="space-x-6">
-      <a
-        id="aboutNavLink"
-        hx-get="/"
-        hx-target="#content"
-        hx-push-url="true"
-        class="nav-link"
-        >About</a
-      >
-      <a
-        id="projectsNavLink"
-        hx-get="/projects"
-        hx-target="#content"
-        hx-push-url="true"
-        class="nav-link"
-        >Projects</a
-      >
-      <a
-        id="experiencesNavLink"
-        hx-get="/experience"
-        hx-target="#content"
-        hx-push-url="true"
-        class="nav-link"
-        >Experience</a
-      >
-    </div>
-  </nav>
-</header>
-{{ end }}
--- a/views/helper-blocks.html
+++ b/views/helper-blocks.html
@@ -11,4 +11,11 @@
          </svg>
       </span>
    </a>
-{{ end }}
+{{ end }}
+
+{{ block "scattered-words" .}}
+ <span
+   class="absolute {{.AxisY}} {{.AxisX}} text-purple-300/50 dark:text-gray-300/10 text-xl font-bold"
+   >{{.Word}}
+ </span>
+{{ end}}
--- a/views/index.html
+++ b/views/index.html
@@ -17,62 +17,14 @@
        id="scatteredWords"
        class="pointer-events-none absolute inset-0 overflow-hidden select-none hidden md:block"
      >
-        <span
-          class="absolute top-10 left-5 text-purple-300/50 dark:text-gray-300/10 text-xl font-bold"
-          >Golang</span
-        >
-        <span
-          class="absolute top-40 right-10 text-purple-300/50 dark:text-gray-300/10 text-xl font-bold"
-          >React</span
-        >
-        <span
-          class="absolute bottom-20 left-1/3 text-purple-300/50 dark:text-gray-300/10 text-xl font-bold"
-          >HTMX</span
-        >
-        <span
-          class="absolute top-1/2 right-1/4 text-purple-300/50 dark:text-gray-300/10 text-xl font-bold"
-          >Node</span
-        >
-        <span
-          class="absolute top-3/4 right-20 text-purple-300/50 dark:text-gray-300/10 text-xl font-bold"
-          >Kafka</span
-        >
-        <span
-          class="absolute top-3/4 left-20 text-purple-300/50 dark:text-gray-300/10 text-xl font-bold"
-          >Docker</span
-        >
-        <span
-          class="absolute top-20 left-100 text-purple-300/50 dark:text-gray-300/10 text-xl font-bold"
-          >Mongo</span
-        >
-        <span
-          class="absolute top-15 right-100 text-purple-300/50 dark:text-gray-300/10 text-xl font-bold"
-          >C++</span
-        >
-        <span
-          class="absolute bottom-20 right-1/3 text-purple-300/50 dark:text-gray-300/10 text-xl font-bold"
-          >Javascript</span
-        >
-        <span
-          class="absolute top-1/2 left-1/4 text-purple-300/50 dark:text-gray-300/10 text-xl font-bold"
-          >Nest</span
-        >
-        <span
-          class="absolute top-70 left-50 text-purple-300/50 dark:text-gray-300/10 text-xl font-bold"
-          >MySQL</span
-        >
-        <span
-          class="absolute top-70 right-50 text-purple-300/50 dark:text-gray-300/10 text-xl font-bold"
-          >Python</span
-        >
+        {{ range .TemplateStore.ScatterWord }}
+          {{ template "scattered-words" . }}
+        {{ end }}
      </div>
-      <!-- Header Section -->
-      <!-- {{ template "header" }} -->
-      <!-- About Section -->
-      <div id="content" class="flex-grow">{{ template "about-partial" . }}</div>
+      <div id="content" class="flex-grow">{{ template "about-partial" }}</div>
    </div>
    <!-- Footer Section -->
-    {{ template "footer" .}}
+    {{ template "footer" .TemplateStore.Footer}}
  </body>
  {{ template "script" }}
 </html>
--- a/views/partials/about-partial.html
+++ b/views/partials/about-partial.html
@@ -19,7 +19,7 @@
    hx-get="/projects"
    hx-target="#content"
    hx-push-url="true"
-    class="px-8 py-6 rounded-full bg-accent/5 dark:bg-darkaccent/40 backdrop-blur-xl border border-white/20 shadow-xl text-xl font-semibold hover:bg-accent/10 hover:dark:bg-darkaccent/30 transition"
+    class="cursor-pointer px-6 py-4 rounded-full bg-accent/5 dark:bg-darkaccent/40 backdrop-blur-xl border border-white/20 shadow-xl text-xl font-semibold hover:bg-accent/10 hover:dark:bg-darkaccent/30 transition"
  >
    Projects
  </a>
@@ -29,7 +29,7 @@
    hx-get="/experience"
    hx-target="#content"
    hx-push-url="true"
-    class="px-8 py-6 rounded-full bg-accent/5 dark:bg-darkaccent/40 backdrop-blur-xl border border-white/20 shadow-xl text-xl font-semibold hover:bg-accent/10 hover:dark:bg-darkaccent/30 transition"
+    class="cursor-pointer px-6 py-4 rounded-full bg-accent/5 dark:bg-darkaccent/40 backdrop-blur-xl border border-white/20 shadow-xl text-xl font-semibold hover:bg-accent/10 hover:dark:bg-darkaccent/30 transition"
  >
    Experience
  </a>
@@ -41,11 +41,22 @@
 >
  <h2 class="text-3xl font-bold mb-6">About Me</h2>
  <p class="text-lg leading-relaxed max-w-3xl">
-    I’m a [Your Profession] with experience in [key skills]. I enjoy solving
+    I'm a [Your Profession] with experience in [key skills]. I enjoy solving
    problems, learning new technologies, and building applications that make an
    impact. Currently exploring
    <span class="text-blue-600 font-semibold">Go</span>,
    <span class="text-blue-600 font-semibold">htmx</span>, and modern web tools.
  </p>
 </section>
+
+<div class="flex items-center justify-center">
+    <a
+      id="downloadCVButton"
+      hx-get="/download"
+      hx-swap="none"
+      class="underline cursor-pointer text-blue-600"
+    >
+      Download CV
+    </a>
+  </div>
 {{ end }}
--- a/views/partials/experience-partial.html
+++ b/views/partials/experience-partial.html
@@ -49,27 +49,19 @@
 </div>

 <div class="block lg:hidden">
-  <div class="flex flex-col space-y-2 font-semibold text-start text-sm p-4 rounded-lg border-2 border-secondary dark:border-darksecondary shadow-md">
+  <div class="flex flex-col space-y-2 font-semibold text-start text-sm p-4 mb-2 rounded-lg border-2 border-secondary dark:border-darksecondary shadow-md">

-    <!-- Dates -->
    <p>{{ .StartFrom }}</p>
-
-    <!-- Company + Type -->
    <p>
      {{ .Company }}
      <span> – {{ .EmployeeType }}</span>
    </p>
-
-    <!-- Position -->
    <p>{{ .Position }}</p>
-
-    <!-- Tasks -->
    <ul class="list-disc list-inside mt-2 space-y-1 font-normal">
      {{ range .Tasks }}
        <li class="leading-snug">{{ . }}</li>
      {{ end }}
    </ul>
-
  </div>
 </div>
 {{ end }}
--- a/views/partials/projects-partial.html
+++ b/views/partials/projects-partial.html
@@ -16,10 +16,11 @@
    </span>
    <span class="text-lg md:text-3xl font-bold underline"> Projects</span>
 </div>
-{{ range . }} {{ template "project-partial-range" . }} {{ end}} {{ end }} {{
-block "project-partial-range" . }}
+{{ range . }} {{ template "project" . }} {{ end}} {{ end }} 
+
+{{block "project" . }}
 <div class="m-4">
  <a href="{{ .Link }}" class="text-blue-600 hover:underline">{{ .Title }}</a> -
  {{ .Description }}
 </div>
-{{ end }}
+{{ end }}
--- a/views/projects.html
+++ b/views/projects.html
@@ -13,9 +13,9 @@
    class="bg-primary dark:bg-darkprimary text-bodytext dark:text-darkbodytext flex flex-col min-h-screen"
  >
    <!-- Projects Section -->
-    <div id="content" class="flex-grow">{{ template "projects-partial" .}}</div>
+    <div id="content" class="flex-grow">{{ template "projects-partial" .Project}}</div>
    <!-- Footer Section -->
-    {{ template "footer" }}
+    {{ template "footer" .TemplateStore.Footer}}
  </body>
  {{ template "script" }}
 </html>
--- a/views/script.html
+++ b/views/script.html
@@ -1,7 +1,6 @@
 {{ block "script" .}}
 <script>
  function clickBackButton() {
-    console.log('Back button clicked', window.history.state);
    if (window.history.state && window.history.state["htmx"]) {
      window.history.back();
    } else {
@@ -12,11 +11,9 @@
    const scatteredWords = document.getElementById('scatteredWords');
    if (!scatteredWords) return;
    const url = window.location.pathname;
-    console.log('Current URL:', url);
    if (url === '/' || url === '') {
      scatteredWords.classList.add('md:block');
    } else {
-      console.log('Hiding scattered words');
      scatteredWords.classList.remove('md:block');
    }
  }
@@ -25,11 +22,24 @@
    document.body.addEventListener('htmx:pushedIntoHistory', function (evt) {
      setScatteredWordsVisibility();
    });
-
    document.body.addEventListener('htmx:historyRestore', function (e) {
-      console.log('Restoring history state', e.detail);
      setScatteredWordsVisibility();
    });
+    document.body.addEventListener("htmx:afterRequest", (evt) => {
+        const trigger = evt.detail.xhr.getResponseHeader("Hx-Trigger");
+        if (trigger === "DownloadCVButton") {
+          if (evt.detail.xhr.status !== 200) {
+            alert("Failed to download CV. Please try again later.");  
+            return; 
+          }
+            const link = document.createElement('a');
+            link.href = '/download';
+            link.download = 'DilankaHerath-CV.pdf';
+            document.body.appendChild(link);
+            link.click();
+            link.remove();
+        }
+    });
  });
 </script>
 {{ end }}