use json files to store data/ get css to work

css/index.css

@@ -1,26 +1,45 @@
 .htmx-indicator {
-    opacity:0;
+  opacity: 0;
-    transition: opacity 500ms ease-in;
+  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;
+  transition: opacity 500ms ease-in;
 }
 
 .nav-link {
-    padding-bottom: 2px;
+  padding-bottom: 2px;
-    border-bottom: 2px solid transparent;
+  border-bottom: 2px solid transparent;
-    transition: all 0.2s;
+  transition: all 0.2s;
 }
 .nav-link.active {
-    color: #2563eb; /* Tailwind blue-600 */
+  color: #2563eb;
-    border-bottom-color: #2563eb;
+  border-bottom-color: #2563eb;
-    font-weight: 600;
+  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

@@ -8,8 +8,8 @@ import (
 )
 
 type ApiHandler struct {
-	Templates    *template.Template
+	Templates       *template.Template
-	ProjectStore *store.SQLiteProjectStore
+	ProjectStore    *store.SQLiteProjectStore
 	ExperienceStore *store.SQLiteExperienceStore
 }
 
@@ -25,8 +25,8 @@ func NewApiHandler(db *sql.DB) *ApiHandler {
 	template.Must(tmpl.ParseGlob("views/partials/*.html"))
 
 	return &ApiHandler{
-		Templates:    tmpl,
+		Templates:       tmpl,
-		ProjectStore: store.NewSQLiteProjectStore(db),
+		ProjectStore:    store.NewSQLiteProjectStore(db),
 		ExperienceStore: store.NewSQLiteExperienceStore(db),
 	}
 }
@@ -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.go

@@ -6,13 +6,13 @@ import (
 )
 
 type Experience struct {
-	ID              int    `json:"id"`
+	ID           int      `json:"id"`
-	Company         string `json:"company"`
+	Company      string   `json:"company"`
-	EmployeeType    string `json:"employee_type"`
+	EmployeeType string   `json:"employee_type"`
-	Position        string `json:"position"`
+	Position     string   `json:"position"`
-	Tasks          []string `json:"tasks"`
+	Tasks        []string `json:"tasks"`
-	Tools          string `json:"tools"`
+	Tools        string   `json:"tools"`
-	Years          int    `json:"years"`
+	Years        int      `json:"years"`
 }
 
 type SQLiteExperienceStore struct {

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">
+          <ul class="list-disc list-inside">
-                {{ range .Tasks }}
+            {{ range .Tasks }}
-                    <li>{{ . }}</li>
+            <li class="m-2">{{ . }}</li>
-                {{ end }}
+            {{ end }}
-            </ul>
+          </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>