update the layout completely and include tailwind standalone

.gitignore

@@ -36,4 +36,7 @@ go.work.sum
 *.toml
 /tmp
 
+#tailwind
+./tailwindcss
+/css/main.css
 

css/index.css

@@ -1,45 +0,0 @@
-.htmx-indicator {
-  opacity: 0;
-  transition: opacity 500ms ease-in;
-}
-.htmx-request .htmx-indicator {
-  opacity: 1;
-}
-.htmx-request.htmx-indicator {
-  opacity: 1;
-}
-
-.contact.htmx-swapping {
-  opacity: 0;
-  transition: opacity 500ms ease-in;
-}
-
-.nav-link {
-  padding-bottom: 2px;
-  border-bottom: 2px solid transparent;
-  transition: all 0.2s;
-}
-.nav-link.active {
-  color: #2563eb;
-  border-bottom-color: #2563eb;
-  font-weight: 600;
-}
-
-.table-th {
-  text-align: center;
-  font-size: large;
-  font-weight: bold;
-  color: #4b5563;
-  padding: 0.7rem 0.7rem 1rem 1rem;
-  border: 2px solid #4b5563;
-  border-radius: 6px;
-}
-
-.table-td {
-  text-align: center;
-  font-size: medium;
-  font-weight: 450;
-  color: #4b5563;
-  border: 2px solid #4b5563;
-  border-radius: 6px;
-}

css/tailwind.css

@@ -0,0 +1,2 @@
+@import 'tailwindcss';
+@config "../tailwind.config.js";

data/experience.json

@@ -1,19 +1,30 @@
 [
   {
-    "company": "AIS - Advanced Info Service Plc",
+    "company": "Idpassglobal",
-    "position": "Frontend web developer",
+    "position": "Java/C++ OpenCV Developer",
+    "employeeType": "Main",
+    "tasks": [
+      "develop a mobile application to scan documents using OpenCV",
+      "develop a flutter application to open a web view"
+    ],
+    "tools": "Android Studio, OpenCV, Java, Flutter",
+    "startFrom": "February 2019"
+  },
+  {
+    "company": "AIS (Advanced Info Service Plc)",
+    "position": "Frontend Web Developer",
     "employeeType": "Vendor",
     "tasks": [
-      "add new features to a web applicaton for AIS employees to process SIMs",
+      "add new features to a Web applicaton for AIS employees to process SIMs",
       "work on MongoDB queries",
       "develop functionality to recover sim process data during system failures"
     ],
     "tools": "Angular JS, MongoDB",
-    "timePeriod": "Nov 2019 - Jan 2021"
+    "startFrom": "November 2019"
   },
   {
     "company": "True Corporation",
-    "position": "Fullstack web developer",
+    "position": "Fullstack Web Developer",
     "employeeType": "Outsource",
     "tasks": [
       "develop frontend features using React JS",
@@ -22,11 +33,11 @@
       "performance tuning on MySQL queries by indexing and query optimization"
     ],
     "tools": "React JS, Golang, MySQL, Cassandra, MinIO, Elasticsearch",
-    "timePeriod": "Feb 2021 - June 2023"
+    "startFrom": "February 2021"
   },
   {
     "company": "True Corporation",
-    "position": "Backend web developer",
+    "position": "Backend Web Developer",
     "employeeType": "Vendor",
     "tasks": [
       "developing new APIs on Golang, utilizing goroutines and channels for concurrency to handle high throughput",
@@ -34,39 +45,39 @@
       "using db optimization/concurrency to bring down api response time from multiple seconds to under or just over a second with acceptable CPU and memory usage"
     ],
     "tools": "Golang, MongoDB",
-    "timePeriod": "July 2023 - February 2024"
+    "startFrom": "July 2023"
   },
     {
     "company": "AIS - Advanced Info Service Plc",
-    "position": "Backend web developer",
+    "position": "Backend Web Developer",
     "employeeType": "Vendor",
     "tasks": [
       "develop numerours APIs on a limited timeframe using Golang",
       "using kafka for producing and consuming messages"
     ],
     "tools": "NodeJS, MongoDB, Kafka",
-    "timePeriod": "March 2024 - February 2025"
+    "startFrom": "March 2024"
   },
   {
     "company": "Thai Watsadu Ltd",
-    "position": "Flutter mobile developer",
+    "position": "Flutter mobile Developer",
     "employeeType": "Outsource",
     "tasks": [
       "help integrate analytics SDKs(ga4, appsflyer and segment) into the present day TOPS mobile application to fire events for user behavior tracking",
       "closely work with the marketing team to plan out which events to track and how to implement them"
     ],
     "tools": "Flutter, GA4, Appsflyer, Segment",
-    "timePeriod": "March 2025 - August 2025"
+    "startFrom": "March 2025"
   },
   {
     "company": "AIS - Advanced Info Service Plc",
-    "position": "Backend web developer",
+    "position": "Backend Web Developer",
     "employeeType": "Vendor",
     "tasks": [
       "develop new APIs using Golang",
       "using kafka for producing and consuming messages"
     ],
     "tools": "NodeJS, MongoDB, Kafka",
-    "timePeriod": "September 2025 - Present"
+    "startFrom": "September 2025"
   }
 ]

internal/store/experience_store_json.go

@@ -14,7 +14,7 @@ type ExperienceJSON struct {
 	Position     string   `json:"position"`
 	Tasks        []string `json:"tasks"`
 	Tools        string   `json:"tools"`
-	TimePeriod   string   `json:"timePeriod"`
+	StartFrom    string   `json:"startFrom"`
 }
 
 func GetAllExperiencesJSON() ([]ExperienceJSON, error) {

tailwind.config.js

@@ -0,0 +1,19 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./views/**/*.html'],
+  theme: {
+    extend: {
+      colors: {
+        primary: '#e6ebf5', // light mode background
+        secondary: '#d3d9e6', // light mode footer
+        darkprimary: '#23243b', // dark mode background
+        darksecondary: '#2f314a', // dark mode footer
+        bodytext: '#111827', // light mode text
+        darkbodytext: '#f5f5f5', // dark mode text
+        accent: '#9333ea', // light mode accent
+        darkaccent: '#2563eb', // dark mode accent
+      },
+    },
+  },
+  plugins: [],
+};

views/experience.html

@@ -5,16 +5,17 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>My CV Website</title>
-    <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/htmx.org@1.9.2"></script>
-    <link rel="stylesheet" href="/css/index.css" />
+    <link rel="stylesheet" href="/css/main.css" />
   </head>
 
-  <body class="bg-gray-50 text-gray-900 flex flex-col min-h-screen">
+  <body
-    <!-- Header Section -->
+    class="bg-primary dark:bg-darkprimary text-bodytext dark:text-darkbodytext flex flex-col min-h-screen"
-    {{ template "header" }}
+  >
-    <!-- Projects Section -->
+    <!-- Experience Section -->
-    <div id="content" class="flex-grow">{{ template "experience-partial" .}}</div>
+    <div id="content" class="flex-grow">
+      {{ template "experience-partial" .}}
+    </div>
     <!-- Footer Section -->
     {{ template "footer" }}
   </body>

views/footer.html

@@ -1,5 +1,5 @@
 {{ block "footer" .}}
-<footer id="contact" class="bg-gray-100 mt-auto py-10">
+<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">

views/header.html

@@ -1,5 +1,5 @@
 {{ block "header" .}}
-<header class="bg-white shadow-md">
+<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">

views/index.html

@@ -5,16 +5,48 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>My CV Website</title>
-    <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/htmx.org@1.9.2"></script>
-    <link rel="stylesheet" href="/css/index.css" />
+    <link rel="stylesheet" href="/css/main.css" />
   </head>
 
-  <body class="bg-gray-50 text-gray-900 flex flex-col min-h-screen">
+  <body
+    class="bg-primary dark:bg-darkprimary text-bodytext dark:text-darkbodytext flex flex-col min-h-screen"
+  >
+    <div class="relative flex-grow">
+      <div
+        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
+        >
+      </div>
       <!-- Header Section -->
-    {{ template "header" }}
+      <!-- {{ template "header" }} -->
       <!-- About Section -->
       <div id="content" class="flex-grow">{{ template "about-partial" . }}</div>
+    </div>
     <!-- Footer Section -->
     {{ template "footer" }}
   </body>

views/partials/about-partial.html

@@ -1,34 +1,44 @@
 {{ block "about-partial" . }}
 <!-- Hero Section -->
 <section
-  class="flex flex-col items-center justify-center text-center flex-grow py-16 px-6 bg-gradient-to-b from-blue-50 to-white"
+  class="flex flex-col items-center justify-center text-center flex-grow py-16 px-6"
 >
   <h1 class="text-4xl md:text-6xl font-bold mb-4">
     Hi, I'm <span class="text-blue-600">Your Name</span>
   </h1>
-  <p class="text-lg md:text-xl mb-6 max-w-2xl">
+  <p class="text-lg md:text-xl mb-2 max-w-2xl">
     A <span class="font-semibold">[Your Role]</span> who loves building
     [something about what you do].
   </p>
-  <div class="flex gap-4">
+</section>
+
+<!-- 🌟 Glass Bubble Section -->
+<div class="flex flex-wrap justify-center gap-8 py-3">
   <a
     id="projectButton"
     hx-get="/projects"
     hx-target="#content"
     hx-push-url="true"
-      class="px-6 py-3 bg-blue-600 text-white rounded-lg shadow hover:bg-blue-700 transition cursor:pointer"
+    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"
-      >View Projects</a
   >
-    <a
+    Projects
-      href="#contact"
+  </a>
-      class="px-6 py-3 border border-blue-600 text-blue-600 rounded-lg shadow hover:bg-blue-50 transition"
-      >Contact Me</a
-    >
-  </div>
-</section>
 
-<!-- About Section -->
+  <a
-<section id="about" class="container mx-auto py-16 px-6">
+    id="experienceButton"
+    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"
+  >
+    Experience
+  </a>
+</div>
+
+<section
+  id="about"
+  class="flex flex-col items-center justify-center text-center flex-grow py-16 px-6"
+>
   <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

views/partials/experience-partial.html

@@ -1,38 +1,35 @@
 {{ block "experience-partial" . }}
 <h2 class="text-3xl font-bold m-6">Experience</h2>
-<div class="m-10 mb-6 overflow-x-auto rounded-lg shadow">
+<div class="flex flex-row m-10 mb-4">
-  <p class="mb-6 font-bold text-lg"> Parent Company - IdPassglobal</p>
+  <p class="font-bold text-lg">
-  <table class="min-w-full border border-gray-300 border-collapse">
+    For all jobs mentioned below I was an employee of
-    <thead class="bg-gray-100">
+  </p>
-      <tr class="border-b border-gray-300">
+  <p class="font-bold text-lg italic underline ml-1.5">Idpassglobal</p>
-        <th class="table-th">Company</th>
-        <th class="table-th">Position</th>
-        <th class="table-th">Employee Type</th>
-        <th class="table-th">Tasks</th>
-        <th class="table-th">Tools</th>
-        <th class="table-th">Time Period</th>
-      </tr>
-    </thead>
-{{ range . }} {{ template "experience-partial-range" . }} {{ end }} 
-  </table>
 </div>
-{{ end }}
+<div class="m-10 mb-6">
-
+  {{ range . }} {{ template "experience-partial-range" . }} {{ end }}
-{{ block "experience-partial-range" . }}
+</div>
-    <tbody>
+{{ end }} {{block "experience-partial-range" . }}
-      <tr class="hover:bg-blue-50 border-b border-gray-300">
+<div class="grid grid-cols-[7rem_1rem_auto]">
-        <td class="table-td">{{ .Company }}</td>
+  <!-- <div class="flex flex-row"> -->
-        <td class="table-td">{{ .Position }}</td>
+  <div class="text-right font-bold text-xs leading-none">{{.StartFrom}}</div>
-        <td class="table-td">{{ .EmployeeType }}</td>
+  <!-- <div class="grid grid-cols-[1rem_auto] ml-2"> -->
-        <td class="table-td text-start px-2">
+  <div class="flex flex-col items-center leading-none ml-2">
+    <span class="w-2.5 h-2.5 rounded-full bg-black"></span>
+    <span class="w-0.5 flex-grow bg-black"></span>
+  </div>
+  <div class="m-5">
+    <div class="flex flex-row">
+      <p class="font-bold">{{.Company}}</p>
+      <p class="ml-2 font-bold">{{.Position}}</p>
+      <p class="ml-2 font-bold">- {{.EmployeeType}}</p>
+    </div>
     <ul class="list-disc list-inside">
       {{ range .Tasks }}
-            <li class="m-2">{{ . }}</li>
+      <li class="m-2">{{.}}</li>
       {{ end }}
     </ul>
-        </td>
+    <!-- </div> -->
-        <td class="table-td">{{ .Tools }}</td>
+  </div>
-        <td class="table-td">{{ .TimePeriod }}</td>
+</div>
-      </tr>
-    </tbody>
 {{ end }}

views/projects.html

@@ -5,14 +5,13 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>My CV Website</title>
-    <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/htmx.org@1.9.2"></script>
-    <link rel="stylesheet" href="/css/index.css" />
+    <link rel="stylesheet" href="/css/main.css" />
   </head>
 
-  <body class="bg-gray-50 text-gray-900 flex flex-col min-h-screen">
+  <body
-    <!-- Header Section -->
+    class="bg-primary dark:bg-darkprimary text-bodytext dark:text-darkbodytext flex flex-col min-h-screen"
-    {{ template "header" }}
+  >
     <!-- Projects Section -->
     <div id="content" class="flex-grow">{{ template "projects-partial" .}}</div>
     <!-- Footer Section -->

views/script.html

@@ -1,34 +1,25 @@
 {{ block "script" .}}
 <script>
-  function updateActiveNav() {
+  function setScatteredWordsVisibility() {
+    const scatteredWords = document.getElementById('scatteredWords');
+    if (!scatteredWords) return;
     const url = window.location.pathname;
-    document.querySelectorAll('.nav-link').forEach((link) => {
+    console.log('Current URL:', url);
-      link.classList.remove('active');
+    if (url === '/' || url === '') {
-      if (link.getAttribute('hx-get') === url) {
+      scatteredWords.classList.add('md:block');
-        link.classList.add('active');
+    } else {
+      console.log('Hiding scattered words');
+      scatteredWords.classList.remove('md:block');
     }
-    });
   }
   document.addEventListener('DOMContentLoaded', (event) => {
-    updateActiveNav();
+    setScatteredWordsVisibility();
     document.body.addEventListener('htmx:pushedIntoHistory', function (evt) {
-      updateActiveNav();
+      setScatteredWordsVisibility();
     });
 
     document.body.addEventListener('htmx:historyRestore', function () {
-      updateActiveNav();
+      setScatteredWordsVisibility();
-    });
-
-    document.body.addEventListener('htmx:beforeRequest', function (evt) {
-      const elt = evt.target;
-      if (
-        elt.classList &&
-        elt.classList.contains('nav-link') &&
-        elt.classList.contains('active')
-      ) {
-        evt.preventDefault();
-        evt.stopPropagation();
-      }
     });
   });
 </script>