edit the htmls

2025-11-21 17:36:29 +07:00
parent 30a63f7433
commit fc5c7db221
10 changed files with 6684 additions and 64 deletions
--- a/views/footer.html
+++ b/views/footer.html
@@ -1,28 +1,8 @@
 {{ block "footer" .}}
 <footer id="contact" class="bg-secondary dark:bg-darksecondary mt-auto py-10">
  <div class="container mx-auto text-center">
-    <h2 class="text-2xl font-bold mb-4">Get in Touch</h2>
-    <p class="mb-6">
-      Feel free to reach out via email or connect on my socials.
-    </p>
    <div class="flex justify-center gap-6">
-      <a
-        href="mailto:dilankaherath14@gmail.com"
-        class="text-blue-600 hover:underline"
-        >Email</a
-      >
-      <a
-        href="https://www.linkedin.com/in/dilanka-herath"
-        target="_blank"
-        class="text-blue-600 hover:underline"
-        >LinkedIn</a
-      >
-      <a
-        href="https://github.com/DilankaHer"
-        target="_blank"
-        class="text-blue-600 hover:underline"
-        >GitHub</a
-      >
+      {{ range . }}{{ template "footer-contact" .}} {{ end }}
    </div>
    <p class="mt-6 text-gray-500 text-sm">© 2025 Dilanka Herath</p>
  </div>
--- a/views/helper-blocks.html
+++ b/views/helper-blocks.html
@@ -0,0 +1,14 @@
+{{ block "footer-contact" .}}
+    <a href="{{.Link}}"
+       target="_blank" 
+       class="text-blue-600">
+       <span class="[&>svg]:h-{{.Height}} [&>svg]:w-{{.Width}}">
+        <svg 
+          xmlns="http://www.w3.org/2000/svg"
+          fill="currentColor"
+          viewBox="0 0 512 512">
+          <path d="{{ .Path }}"/>
+          </svg>
+       </span>
+    </a>
+{{ end }}
--- a/views/index.html
+++ b/views/index.html
@@ -41,6 +41,30 @@
          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
+        >
      </div>
      <!-- Header Section -->
      <!-- {{ template "header" }} -->
@@ -48,7 +72,7 @@
      <div id="content" class="flex-grow">{{ template "about-partial" . }}</div>
    </div>
    <!-- Footer Section -->
-    {{ template "footer" }}
+    {{ template "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/10 backdrop-blur-xl border border-white/20 shadow-xl text-xl font-semibold hover:bg-accent/10 hover:dark:bg-darkaccent/20 transition"
+    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"
  >
    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/10 backdrop-blur-xl border border-white/20 shadow-xl text-xl font-semibold hover:bg-accent/10 hover:dark:bg-darkaccent/20 transition"
+    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"
  >
    Experience
  </a>
--- a/views/partials/experience-partial.html
+++ b/views/partials/experience-partial.html
@@ -1,5 +1,22 @@
-{{ block "experience-partial" . }}
-<h2 class="text-lg md:text-3xl font-bold m-6 mb-3">Experience</h2>
+<!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.<path d="M240 6.1c9.1-8.2 22.9-8.2 32 0l232 208c9.9 8.8 10.7 24 1.8 33.9s-24 10.7-33.9 1.8l-8-7.2 0 205.3c0 35.3-28.7 64-64 64l-288 0c-35.3 0-64-28.7-64-64l0-205.3-8 7.2c-9.9 8.8-25 8-33.9-1.8s-8-25 1.8-33.9L240 6.1zm16 50.1L96 199.7 96 448c0 8.8 7.2 16 16 16l48 0 0-104c0-39.8 32.2-72 72-72l48 0c39.8 0 72 32.2 72 72l0 104 48 0c8.8 0 16-7.2 16-16l0-248.3-160-143.4zM208 464l96 0 0-104c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24l0 104z"/></svg> -->
+{{ block "experience-partial" . }} 
+<div class="inline-flex flex-row m-10 mb-6 mt-16 items-center space-x-5">
+    <span class="text-lg md:text-3xl font-bold clickable
+         hover:scale-110 transition-transform duration-300
+         flex items-center gap-2 cursor-pointer
+         [&>svg]:h-5 [&>svg]:w-5 md:[&>svg]:h-8 md:[&>svg]:w-8
+         hover:[&>svg]:text-[#0088cc]
+         dark:hover:[&>svg]:text-[#7dd3fc] 
+         hover:[&>svg]:drop-shadow-[0_0_6px_rgba(35,36,59,0.5)] dark:hover:[&>svg]:drop-shadow-[0_0_6px_rgba(74,140,255,0.8)]
+         active:scale-95" onclick="clickBackButton()">
+      <svg xmlns="http://www.w3.org/2000/svg" 
+      fill="currentColor"
+      viewBox="0 0 512 512">
+      <path d="M240 6.1c9.1-8.2 22.9-8.2 32 0l232 208c9.9 8.8 10.7 24 1.8 33.9s-24 10.7-33.9 1.8l-8-7.2 0 205.3c0 35.3-28.7 64-64 64l-288 0c-35.3 0-64-28.7-64-64l0-205.3-8 7.2c-9.9 8.8-25 8-33.9-1.8s-8-25 1.8-33.9L240 6.1zm16 50.1L96 199.7 96 448c0 8.8 7.2 16 16 16l48 0 0-104c0-39.8 32.2-72 72-72l48 0c39.8 0 72 32.2 72 72l0 104 48 0c8.8 0 16-7.2 16-16l0-248.3-160-143.4zM208 464l96 0 0-104c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24l0 104z"/>
+    </svg> 
+    </span>
+    <span class="text-lg md:text-3xl font-bold underline"> Experience</span>
+</div>

 <div class="flex flex-row m-10 mb-2 mt-1 text-sm md:text-lg">
  <section class="font-bold">
--- a/views/partials/projects-partial.html
+++ b/views/partials/projects-partial.html
@@ -1,5 +1,21 @@
 {{ block "projects-partial" . }}
-<h2 class="text-3xl font-bold m-6">Projects</h2>
+<div class="inline-flex flex-row m-10 mb-6 mt-16 items-center space-x-5">
+    <span class="text-lg md:text-3xl font-bold clickable
+         hover:scale-110 transition-transform duration-300
+         flex items-center gap-2 cursor-pointer
+         [&>svg]:h-5 [&>svg]:w-5 md:[&>svg]:h-8 md:[&>svg]:w-8
+         hover:[&>svg]:text-[#0088cc]
+         dark:hover:[&>svg]:text-[#7dd3fc] 
+         hover:[&>svg]:drop-shadow-[0_0_6px_rgba(35,36,59,0.5)] dark:hover:[&>svg]:drop-shadow-[0_0_6px_rgba(74,140,255,0.8)]
+         active:scale-95" onclick="clickBackButton()">
+      <svg xmlns="http://www.w3.org/2000/svg" 
+      fill="currentColor"
+      viewBox="0 0 512 512">
+      <path d="M240 6.1c9.1-8.2 22.9-8.2 32 0l232 208c9.9 8.8 10.7 24 1.8 33.9s-24 10.7-33.9 1.8l-8-7.2 0 205.3c0 35.3-28.7 64-64 64l-288 0c-35.3 0-64-28.7-64-64l0-205.3-8 7.2c-9.9 8.8-25 8-33.9-1.8s-8-25 1.8-33.9L240 6.1zm16 50.1L96 199.7 96 448c0 8.8 7.2 16 16 16l48 0 0-104c0-39.8 32.2-72 72-72l48 0c39.8 0 72 32.2 72 72l0 104 48 0c8.8 0 16-7.2 16-16l0-248.3-160-143.4zM208 464l96 0 0-104c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24l0 104z"/>
+    </svg> 
+    </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" . }}
 <div class="m-4">
--- a/views/script.html
+++ b/views/script.html
@@ -1,5 +1,13 @@
 {{ 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 {
+      window.location.href = '/';
+    }
+  }
  function setScatteredWordsVisibility() {
    const scatteredWords = document.getElementById('scatteredWords');
    if (!scatteredWords) return;
@@ -18,7 +26,8 @@
      setScatteredWordsVisibility();
    });

-    document.body.addEventListener('htmx:historyRestore', function () {
+    document.body.addEventListener('htmx:historyRestore', function (e) {
+      console.log('Restoring history state', e.detail);
      setScatteredWordsVisibility();
    });
  });