use json files to store data/ get css to work

css/index.css

@@ -1,16 +1,16 @@
 .htmx-indicator {
-    opacity:0;
+  opacity: 0;
   transition: opacity 500ms ease-in;
 }
-.htmx-request .htmx-indicator{
+.htmx-request .htmx-indicator {
-    opacity:1
+  opacity: 1;
 }
-.htmx-request.htmx-indicator{
+.htmx-request.htmx-indicator {
-    opacity:1
+  opacity: 1;
 }
 
 .contact.htmx-swapping {
-    opacity:0;
+  opacity: 0;
   transition: opacity 500ms ease-in;
 }
 
@@ -20,7 +20,26 @@
   transition: all 0.2s;
 }
 .nav-link.active {
-    color: #2563eb; /* Tailwind blue-600 */
+  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: 1px solid #4b5563;
+  border-radius: 6px;
+}
+
+.table-td {
+  text-align: center;
+  font-size: medium;
+  font-weight: 300;
+  color: #4b5563;
+  border: 1px solid #4b5563;
+  border-radius: 6px;
+}

data/experience.json

@@ -0,0 +1,13 @@
+[
+  {
+    "company": "AIS",
+    "position": "Frontend web developer",
+    "employeeType": "Vendor",
+    "tasks": [
+      "add new features to a web applicaton for AIS employees to process SIMs",
+      "develop functionality to recover sim process data during system failures"
+    ],
+    "tools": "Angular JS, MongoDB",
+    "years": 1
+  }
+]

internal/api/project_handler.go

@@ -56,7 +56,8 @@ func (h *ApiHandler) ProjectsPage(w http.ResponseWriter, r *http.Request) {
 
 func (h *ApiHandler) ExperiencePage(w http.ResponseWriter, r *http.Request) {
 	var hxRequest = r.Header.Get("HX-Request")
-	experiences, err := h.ExperienceStore.GetAllExperiences()
+	// experiences, err := h.ExperienceStore.GetAllExperiences()
+	experiences, err := store.GetAllExperiencesJSON()
 	if err != nil {
 		http.Error(w, err.Error(), http.StatusInternalServerError)
 		return

internal/store/experience_store_json.go

@@ -0,0 +1,41 @@
+package store
+
+import (
+	"encoding/json"
+	"fmt"
+	"io"
+	"os"
+)
+
+type ExperienceJSON struct {
+	ID           int      `json:"id"`
+	Company      string   `json:"company"`
+	EmployeeType string   `json:"employeeType"`
+	Position     string   `json:"position"`
+	Tasks        []string `json:"tasks"`
+	Tools        string   `json:"tools"`
+	Years        int      `json:"years"`
+}
+
+func GetAllExperiencesJSON() ([]ExperienceJSON, error) {
+	jsonFile, err := os.Open("data/experience.json")
+	if err != nil {
+		fmt.Println("File not found; Error: ", err.Error())
+	}
+
+	defer jsonFile.Close()
+
+	byteValue, err := io.ReadAll(jsonFile)
+	if err != nil {
+		fmt.Println("Unable to read json file; Error: ", err.Error())
+	}
+
+	var experience []ExperienceJSON
+
+	err = json.Unmarshal(byteValue, &experience)
+	if err != nil {
+		fmt.Println("Unable to unmarshal; Error: ", err.Error())
+	}
+
+	return experience, nil
+}

views/footer.html

@@ -6,23 +6,25 @@
       Feel free to reach out via email or connect on my socials.
     </p>
     <div class="flex justify-center gap-6">
-      <a href="mailto:your@email.com" class="text-blue-600 hover:underline"
+      <a
+        href="mailto:dilankaherath14@gmail.com"
+        class="text-blue-600 hover:underline"
         >Email</a
       >
       <a
-        href="https://linkedin.com/in/yourprofile"
+        href="https://www.linkedin.com/in/dilanka-herath"
         target="_blank"
         class="text-blue-600 hover:underline"
         >LinkedIn</a
       >
       <a
-        href="https://github.com/yourusername"
+        href="https://github.com/DilankaHer"
         target="_blank"
         class="text-blue-600 hover:underline"
         >GitHub</a
       >
     </div>
-    <p class="mt-6 text-gray-500 text-sm">© 2025 Your Name</p>
+    <p class="mt-6 text-gray-500 text-sm">© 2025 Dilanka Herath</p>
   </div>
 </footer>
 {{ end }}

views/header.html

@@ -1,14 +1,14 @@
 {{ block "header" .}}
 <header class="bg-white 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">Your Name</a>
+    <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 active"
+        class="nav-link"
         >About</a
       >
       <a

views/partials/experience-partial.html

@@ -1,34 +1,34 @@
 {{ block "experience-partial" . }}
-<h2 class="text-3xl font-bold mb-6">Experience</h2>
+<h2 class="text-3xl font-bold m-6">Experience</h2>
 {{ range . }} {{ template "experience-partial-range" . }} {{ end}} {{ end }} {{
 block "experience-partial-range" . }}
 <div class="m-10 mb-6 overflow-x-auto rounded-lg shadow">
   <table class="min-w-full border border-gray-300 border-collapse">
     <thead class="bg-gray-100">
       <tr class="border-b border-gray-300">
-        <th class="px-4 py-3 text-center text-sm font-semibold text-gray-700 border-r border-gray-300">Company</th>
+        <th class="table-th">Company</th>
-        <th class="px-4 py-3 text-center text-sm font-semibold text-gray-700 border-r border-gray-300">Position</th>
+        <th class="table-th">Position</th>
-        <th class="px-4 py-3 text-center text-sm font-semibold text-gray-700 border-r border-gray-300">Employee Type</th>
+        <th class="table-th">Employee Type</th>
-        <th class="px-4 py-3 text-center text-sm font-semibold text-gray-700 border-r border-gray-300">Tasks</th>
+        <th class="table-th">Tasks</th>
-        <th class="px-4 py-3 text-center text-sm font-semibold text-gray-700 border-r border-gray-300">Tools</th>
+        <th class="table-th">Tools</th>
-        <th class="px-4 py-3 text-center text-sm font-semibold text-gray-700">Years</th>
+        <th class="table-th border-r-0">Years</th>
       </tr>
     </thead>
 
     <tbody>
-      <tr class="hover:bg-gray-50 border-b border-gray-300">
+      <tr class="hover:bg-blue-50 border-b border-gray-300">
-        <td class="px-4 py-3 text-center text-gray-600 border-r border-gray-300">{{ .Company }}</td>
+        <td class="table-td">{{ .Company }}</td>
-        <td class="px-4 py-3 text-center text-gray-600 border-r border-gray-300">{{ .Position }}</td>
+        <td class="table-td">{{ .Position }}</td>
-        <td class="px-4 py-3 text-center text-gray-600 border-r border-gray-300">{{ .EmployeeType }}</td>
+        <td class="table-td">{{ .EmployeeType }}</td>
-        <td class="px-4 py-3 text-center text-gray-600 border-r border-gray-300">
+        <td class="table-td">
           <ul class="list-disc list-inside">
             {{ range .Tasks }}
-                    <li>{{ . }}</li>
+            <li class="m-2">{{ . }}</li>
             {{ end }}
           </ul>
         </td>
-        <td class="px-4 py-3 text-center text-gray-600 border-r border-gray-300">{{ .Tools }}</td>
+        <td class="table-td">{{ .Tools }}</td>
-        <td class="px-4 py-3 text-center text-gray-600">{{ .Years }}</td>
+        <td class="table-td border-r-0">{{ .Years }}</td>
       </tr>
     </tbody>
   </table>

views/partials/projects-partial.html

@@ -1,8 +1,8 @@
 {{ block "projects-partial" . }}
-<h2 class="text-3xl font-bold mb-6">Projects</h2>
+<h2 class="text-3xl font-bold m-6">Projects</h2>
 {{ range . }} {{ template "project-partial-range" . }} {{ end}} {{ end }} {{
 block "project-partial-range" . }}
-<div class="mb-4">
+<div class="m-4">
   <a href="{{ .Link }}" class="text-blue-600 hover:underline">{{ .Title }}</a> -
   {{ .Description }}
 </div>