create new html views
This commit is contained in:
160
views/index.html
160
views/index.html
@@ -11,159 +11,13 @@
|
||||
</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
|
||||
id="aboutNavLink"
|
||||
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
|
||||
id="experiencesNavLink"
|
||||
hx-get="/experience"
|
||||
hx-target="#content"
|
||||
hx-push-url="true"
|
||||
class="nav-link"
|
||||
>Experience</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>
|
||||
<!-- Header Section -->
|
||||
{{ template "header" }}
|
||||
<!-- About Section -->
|
||||
<div id="content" class="flex-grow">{{ template "about-partial" . }}</div>
|
||||
<!-- Footer Section -->
|
||||
{{ template "footer" }}
|
||||
</body>
|
||||
|
||||
<script>
|
||||
function updateActiveNav() {
|
||||
const url = window.location.pathname;
|
||||
console.log(url);
|
||||
document.querySelectorAll('.nav-link').forEach((link) => {
|
||||
link.classList.remove('active');
|
||||
if (
|
||||
link.getAttribute('hx-get') === url ||
|
||||
(url == '/' && link.id == 'aboutNavLink')
|
||||
) {
|
||||
console.log('Innnnnn', link.id);
|
||||
link.classList.add('active');
|
||||
// e.preventDefault();
|
||||
// e.stopImmediatePropagation();
|
||||
}
|
||||
});
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', (event) => {
|
||||
document.body.addEventListener('htmx:pushedIntoHistory', function (evt) {
|
||||
console.log('htmx:pushedIntoHistory', evt);
|
||||
updateActiveNav();
|
||||
});
|
||||
|
||||
document.body.addEventListener('htmx:historyRestore', function () {
|
||||
console.log('htmx:historyRestore');
|
||||
updateActiveNav();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{{ template "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 }}
|
||||
|
||||
Reference in New Issue
Block a user