Commit main

.gitignore

@@ -16,6 +16,7 @@
 coverage.*
 *.coverprofile
 profile.cov
+images/
 
 # Dependency directories (remove the comment below to include it)
 # vendor/

css/index.css

@@ -0,0 +1,26 @@
+.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; /* Tailwind blue-600 */
+    border-bottom-color: #2563eb;
+    font-weight: 600;
+}

go.mod

@@ -0,0 +1,7 @@
+module duhweb
+
+go 1.24.5
+
+require github.com/go-chi/chi/v5 v5.2.3
+
+require github.com/mattn/go-sqlite3 v1.14.32 // indirect

go.sum

@@ -0,0 +1,4 @@
+github.com/go-chi/chi/v5 v5.2.3 h1:WQIt9uxdsAbgIYgid+BpYc+liqQZGMHRaUwp0JUcvdE=
+github.com/go-chi/chi/v5 v5.2.3/go.mod h1:L2yAIGWB3H+phAw1NxKwWM+7eUH/lU8pOMm5hHcoops=
+github.com/mattn/go-sqlite3 v1.14.32 h1:JD12Ag3oLy1zQA+BNn74xRgaBbdhbNIDYvQUEuuErjs=
+github.com/mattn/go-sqlite3 v1.14.32/go.mod h1:Uh1q+B4BYcTPb+yiD3kU8Ct7aC0hY9fxUwlHK0RXw+Y=

internal/api/project_handler.go

@@ -0,0 +1,44 @@
+package api
+
+import (
+	"database/sql"
+	"duhweb/internal/store"
+	"html/template"
+	"net/http"
+)
+
+type ProjectHandler struct {
+	Templates  *template.Template
+	ProjectStore *store.SQLiteProjectStore
+}
+
+func (h *ProjectHandler) Render(w http.ResponseWriter, tmpl string, data interface{}) {
+	if err := h.Templates.ExecuteTemplate(w, tmpl, data); err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+}
+
+func NewProjectHandler(db *sql.DB) *ProjectHandler {
+	return &ProjectHandler{
+		Templates:  template.Must(template.ParseGlob("views/*.html")),
+		ProjectStore: store.NewSQLiteProjectStore(db),
+	}
+}
+
+func (h *ProjectHandler) InitPage(w http.ResponseWriter, r *http.Request) {
+	h.Render(w, "index", nil)
+}
+
+func (h *ProjectHandler) AboutPage(w http.ResponseWriter, r *http.Request) {
+	h.Render(w, "about", nil)
+}
+
+func (h *ProjectHandler) ProjectsPage(w http.ResponseWriter, r *http.Request) {
+	projects, err := h.ProjectStore.GetAllProjects()
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+	h.Render(w, "projects", projects)
+}

internal/app/app.go

@@ -0,0 +1,30 @@
+package app
+
+import (
+	"database/sql"
+	"duhweb/internal/api"
+	"duhweb/internal/store"
+	"log"
+	"os"
+)
+
+type Application struct {
+	Logger *log.Logger
+	ProjectHandler *api.ProjectHandler
+	DB *sql.DB
+}
+
+func NewApplication() (*Application, error) {
+	logger := log.New(os.Stdout, "", log.Ldate|log.Ltime)
+	sqlDB, err := store.Open()
+	if err != nil {
+		return nil, err
+	}
+	ProjectHandler := api.NewProjectHandler(sqlDB)
+	app := &Application{
+		Logger: logger,
+		ProjectHandler: ProjectHandler,
+		DB: sqlDB,
+	}
+	return app, nil
+}

internal/routes/routes.go

@@ -0,0 +1,16 @@
+package routes
+
+import (
+	"duhweb/internal/app"
+
+	"github.com/go-chi/chi/v5"
+)
+
+func SetupRoutes(app *app.Application) *chi.Mux {
+	r := chi.NewRouter()
+
+	r.Get("/", app.ProjectHandler.InitPage)
+	r.Get("/about", app.ProjectHandler.AboutPage)
+	r.Get("/projects", app.ProjectHandler.ProjectsPage)
+	return r
+}

internal/store/database.go

@@ -0,0 +1,22 @@
+package store
+
+import (
+	"database/sql"
+	"fmt"
+
+	_ "github.com/mattn/go-sqlite3"
+)
+
+func Open() (*sql.DB, error) {
+	db, err := sql.Open("sqlite3", "C:/Users/dilan/Documents/Go/my_website_db.db")
+	if err != nil {
+		return nil, fmt.Errorf("db open: %w", err)
+	}
+
+	if err := db.Ping(); err != nil {
+		return nil, fmt.Errorf("db ping: %w", err)
+	}
+
+	fmt.Println("Connected to Database...")
+	return db, nil
+}

internal/store/project_store.go

@@ -0,0 +1,37 @@
+package store
+
+import "database/sql"
+
+type Project struct {
+	ID          int    `json:"id"`
+	Title       string `json:"title"`
+	Description string `json:"description"`
+	Link        string `json:"link"`
+	TechStack   string `json:"tech_stack"`
+}
+
+type SQLiteProjectStore struct {
+	db *sql.DB
+}
+
+func NewSQLiteProjectStore(db *sql.DB) *SQLiteProjectStore {
+	return &SQLiteProjectStore{db: db}
+}
+
+func (s *SQLiteProjectStore) GetAllProjects() ([]Project, error) {
+	rows, err := s.db.Query("SELECT id, title, description, link, tech_stack FROM projects")	
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+
+	var projects []Project
+	for rows.Next() {
+		var p Project
+		if err := rows.Scan(&p.ID, &p.Title, &p.Description, &p.Link, &p.TechStack); err != nil {
+			return nil, err
+		}
+		projects = append(projects, p)
+	}
+	return projects, nil
+}

main.go

@@ -0,0 +1,37 @@
+package main
+
+import (
+	"duhweb/internal/app"
+	"duhweb/internal/routes"
+	"net/http"
+	"time"
+)
+
+type Count struct {
+	Count int
+}
+
+func main() {
+	app, err := app.NewApplication()
+	if err != nil {
+		panic(err)
+	}
+
+	app.Logger.Println("app has started")
+
+	r := routes.SetupRoutes(app)
+	r.Handle("/images/*", http.StripPrefix("/images/", http.FileServer(http.Dir("images"))))
+    r.Handle("/css/*", http.StripPrefix("/css/", http.FileServer(http.Dir("css"))))
+
+	server := &http.Server{
+		Addr:         ":8080",
+		Handler:      r,
+		IdleTimeout:  time.Minute,
+		ReadTimeout:  10 * time.Second,
+		WriteTimeout: 30 * time.Second,
+	}
+
+	if err := server.ListenAndServe(); err != nil {
+		app.Logger.Fatal(err)
+	}
+}

views/index.html

@@ -0,0 +1,120 @@
+{{ block "index" . }}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <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">
+</head>
+<body class="bg-gray-50 text-gray-900 flex flex-col min-h-screen">
+
+  <!-- Navbar -->
+  <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>
+    <div class="space-x-6">
+      <a hx-get="/about" hx-target="#content" hx-push-url="/" class="nav-link active">About</a>
+      <a id="projectsNavLink" hx-get="/projects" hx-target="#content" hx-push-url="true" class="nav-link">Projects</a>
+      <a class="nav-link">Experience</a>
+      <a class="nav-link">Contact</a>
+    </div>
+  </nav>
+</header>
+
+<script>
+  document.querySelectorAll('.nav-link').forEach(link => {
+    link.addEventListener('click', function (e) {
+      document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));
+      this.classList.add('active');
+    });
+  });
+</script>
+
+
+  <div id="content" class="flex-grow">
+    {{ template "about" . }}
+  </div>  
+
+
+  <!-- Contact Section -->
+  <footer id="contact" class="bg-gray-100 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:your@email.com" class="text-blue-600 hover:underline">Email</a>
+        <a href="https://linkedin.com/in/yourprofile" target="_blank" class="text-blue-600 hover:underline">LinkedIn</a>
+        <a href="https://github.com/yourusername" target="_blank" class="text-blue-600 hover:underline">GitHub</a>
+      </div>
+      <p class="mt-6 text-gray-500 text-sm">© 2025 Your Name</p>
+    </div>
+  </footer>
+
+</body>
+
+<script>
+      function initProjectButton() {
+        const button = document.getElementById("projectButton");
+        if (button && !button.dataset.bound) { 
+          button.addEventListener("click", function () {
+            const navLinks = document.querySelectorAll(".nav-link");
+            navLinks.forEach(link => link.classList.remove("active"));
+            const projectsNavLink = document.getElementById("projectsNavLink");
+            projectsNavLink.classList.add("active");
+          });
+          button.dataset.bound = "true";
+        }
+      }
+      document.addEventListener("DOMContentLoaded", initProjectButton);
+      document.addEventListener("DOMContentLoaded", (event) => {
+        document.body.addEventListener("htmx:afterSwap", function(evt) {
+          if (evt.detail.target.id === "content") {
+            initProjectButton();
+          }
+        });
+      });
+    </script>
+</html>
+{{ end }}
+
+{{ block "about" . }}
+<!-- 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">
+      <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">
+        A <span class="font-semibold">[Your Role]</span> who loves building [something about what you do].
+      </p>
+      <div class="flex gap-4">
+        <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">View Projects</a>
+        <a href="#contact" 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 -->
+    <section id="about" class="container mx-auto 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 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>
+  {{ end }}
+
+{{ block "projects" . }}
+    <h2 class="text-3xl font-bold mb-6">Projects</h2>
+    {{ range . }}
+        {{ template "project" . }}
+    {{ end}}
+{{ end }}
+
+{{ block "project" . }}
+      <div class="mb-4">
+        <a href="{{ .Link }}" class="text-blue-600 hover:underline">{{ .Title }}</a> - {{ .Description }}
+      </div>
+{{ end }}
+
+
+      

views/test.html

@@ -0,0 +1,75 @@
+{{ block "index" . }}
+<!DOCTYPE html>
+<html>
+    <head>
+        <title></title>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <script src="https://unpkg.com/htmx.org@1.9.2"></script>
+        <link rel="stylesheet" href="/css/index.css">
+    </head>
+    <body>
+        {{ template "form" .Form }}
+        <hr>
+        {{ template "display" .Data}}
+    </body>
+    <script>
+        document.addEventListener("DOMContentLoaded", (event) => {
+            document.body.addEventListener("htmx:beforeSwap", (evt) => {
+                console.log(evt.detail.xhr.status);
+                if (evt.detail.xhr.status === 422) {
+                    evt.detail.shouldSwap = true;
+                    evt.detail.isError = false;
+                }
+            });
+        });
+    </script>
+</html>
+{{ end }}
+
+{{ block "form" . }}
+   <form hx-swap="outerHTML" hx-post="/contacts">
+        name: <input
+        {{ if .Values.name }} value="{{ .Values.name }}" {{ end }}
+        type="text" name="name">
+        email: <input
+        {{ if .Values.email }} value="{{ .Values.email }}" {{ end }}
+        type="text" name="email">
+
+        {{ if .Errors.email }}
+            <div style="color:red;">{{ .Errors.email }}</div>
+        {{ end }}
+        <button type="submit">Create Contact</button>
+   </form>
+{{ end }}
+
+{{ block "display" .}}
+   <div id="contacts" style="display:flex; flex-direction: column;">
+    {{ range .Contacts }}
+        {{ template "contact" . }}
+    {{ end }}
+   </div>
+{{ end }}
+
+{{ block "contact" .}}
+    <div class="contact" id="contact-{{ .Id }}" style="display: flex;">
+        <div hx-indicator="#ci-{{ .Id }}" hx-target="#contact-{{ .Id }}" hx-swap="outerHTML swap:500ms" hx-delete="/contacts/{{ .Id }}" style="width: 1rem;">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <path fill="none" d="M0 0h24v24H0z"/>
+                <path d="M4 2h16a1 1 0 011 1v1a1 1 0 01-1 1H4a1 1 0 01-1-1V3a1 1 0 011-1zM3 6h18v16a1 1 0 01-1 1H4a1 1 0 01-1-1V6zm3 3v9a1 1 0 002 0v-9a1 1 0 00-2 0zm5 0v9a1 1 0 002 0v-9a1 1 0 00-2 0zm5 0v9a1 1 0 002 0v-9a1 1 0 00-2 0z"/>
+            </svg>
+        </div>
+        Name: <span>{{ .Name }}</span>
+        Email: <span>{{ .Email }}</span>
+
+        <div id="ci-{{ .Id }}" class="htmx-indicator">
+            <img src="/images/bars.svg" alt="loading" style="width: 1rem">
+        </div>
+    </div>
+{{ end }}
+
+{{ block "oob-contact" .}}
+    <div hx-swap-oob="afterbegin" id="contacts">
+        {{ template "contact" . }}
+    </div>
+{{ end }}