Commit main
This commit is contained in:
Dilanka-H
120
views/index.html
Normal file
120
views/index.html
Normal file
@@ -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 }}
|
||||
|
||||
|
||||
|
||||
75
views/test.html
Normal file
75
views/test.html
Normal file
@@ -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 }}
|
||||
Reference in New Issue
Block a user