DilankaHer/my_website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update the layout completely and include tailwind standalone

Browse Source
This commit is contained in:
DilankaHer
2025-11-20 03:42:21 +07:00
parent 60440c095b
commit a9641ed82b
14 changed files with 177 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
views/experience.html
View File

@@ -5,19 +5,20 @@
<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">
<!-- Header Section -->
{{ template "header" }}
<!-- Projects Section -->
<div id="content" class="flex-grow">{{ template "experience-partial" .}}</div>
<body
class="bg-primary dark:bg-darkprimary text-bodytext dark:text-darkbodytext flex flex-col min-h-screen"
>
<!-- Experience Section -->
<div id="content" class="flex-grow">
{{ template "experience-partial" .}}
</div>
<!-- Footer Section -->
{{ template "footer" }}
</body>
{{ template "script" }}
</html>
{{ end}}
{{ end}}

2
views/footer.html
View File

@@ -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">

2
views/header.html
View File

@@ -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">

46
views/index.html
View File

@@ -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">
<!-- Header Section -->
{{ template "header" }}
<!-- About Section -->
<div id="content" class="flex-grow">{{ template "about-partial" . }}</div>
<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" }} -->
<!-- About Section -->
<div id="content" class="flex-grow">{{ template "about-partial" . }}</div>
</div>
<!-- Footer Section -->
{{ template "footer" }}
</body>

48
views/partials/about-partial.html
View File

@@ -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">
<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">
<!-- 🌟 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-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"
>
Projects
</a>
<a
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

65
views/partials/experience-partial.html
View File

@@ -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">
<p class="mb-6 font-bold text-lg"> Parent Company - IdPassglobal</p>
<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="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 class="flex flex-row m-10 mb-4">
<p class="font-bold text-lg">
For all jobs mentioned below I was an employee of
</p>
<p class="font-bold text-lg italic underline ml-1.5">Idpassglobal</p>
</div>
<div class="m-10 mb-6">
{{ range . }} {{ template "experience-partial-range" . }} {{ end }}
</div>
{{ end }} {{block "experience-partial-range" . }}
<div class="grid grid-cols-[7rem_1rem_auto]">
<!-- <div class="flex flex-row"> -->
<div class="text-right font-bold text-xs leading-none">{{.StartFrom}}</div>
<!-- <div class="grid grid-cols-[1rem_auto] ml-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>
{{ end }}
</ul>
<!-- </div> -->
</div>
</div>
{{ end }}
{{ block "experience-partial-range" . }}
<tbody>
<tr class="hover:bg-blue-50 border-b border-gray-300">
<td class="table-td">{{ .Company }}</td>
<td class="table-td">{{ .Position }}</td>
<td class="table-td">{{ .EmployeeType }}</td>
<td class="table-td text-start px-2">
<ul class="list-disc list-inside">
{{ range .Tasks }}
<li class="m-2">{{ . }}</li>
{{ end }}
</ul>
</td>
<td class="table-td">{{ .Tools }}</td>
<td class="table-td">{{ .TimePeriod }}</td>
</tr>
</tbody>
{{ end }}

9
views/projects.html
View File

@@ -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">
<!-- Header Section -->
{{ template "header" }}
<body
class="bg-primary dark:bg-darkprimary text-bodytext dark:text-darkbodytext flex flex-col min-h-screen"
>
<!-- Projects Section -->
<div id="content" class="flex-grow">{{ template "projects-partial" .}}</div>
<!-- Footer Section -->

35
views/script.html
View File

@@ -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) => {
link.classList.remove('active');
if (link.getAttribute('hx-get') === url) {
link.classList.add('active');
}
});
console.log('Current URL:', url);
if (url === '/' || url === '') {
scatteredWords.classList.add('md:block');
} 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();
});
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();
}
setScatteredWordsVisibility();
});
});
</script>