coolans/my-website
1
0
Fork 0
mirror of https://github.com/CoolnsX/my-website.git synced 2025-12-20 07:15:19 +05:30
Code Issues Packages Projects Releases Wiki Activity

feat:rewrite using zola

Browse Source
This commit is contained in:
coolnsx
2025-05-16 00:19:58 +05:30
parent 7b57b1e222
commit 3819f62620
17 changed files with 2353 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
templates/base.html Normal file
View File

@@ -0,0 +1,109 @@
<!doctype html>
<html lang="en" class="dark scroll-smooth">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{% block title %}{% endblock title %} - Coolans</title>
<link
rel="stylesheet"
href="{{ get_url(path='styles/main.css') | safe }}"
/>
<script>
// Mobile menu toggle
function toggleMobileMenu() {
const menu = document.getElementById("mobile-menu");
menu.classList.toggle("hidden");
}
</script>
</head>
<body
class="min-h-screen flex flex-col bg-black text-white relative transition-colors duration-300"
>
<!-- Blurred Background Image -->
<div
class="fixed inset-0 -z-10 bg-[url('/assets/background.webp')] bg-cover bg-center blur-md"
></div>
<div class="fixed inset-0 bg-black/70 -z-5"></div>
<!-- Top Navigation -->
<nav class="sticky top-0 z-50 bg-transparent backdrop-blur-none py-4">
<div
class="container mx-auto px-4 flex justify-between items-center"
>
<!-- Logo Island -->
<div
class="px-6 py-3 rounded-2xl bg-gray-900/80 border border-gray-800 shadow-xl backdrop-blur-md"
>
<a href="/" class="text-xl font-bold text-white">Coolans</a>
</div>
<!-- Mobile menu button -->
<button
class="md:hidden px-3 py-2 rounded-lg text-gray-300 bg-gray-900/80 border border-gray-800 hover:text-white focus:outline-none focus:ring-2 focus:ring-white"
aria-label="Toggle menu"
onclick="toggleMobileMenu()"
>
<svg
class="w-6 h-6"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
viewBox="0 0 24 24"
>
<path d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<!-- Nav Links Island -->
<ul
id="mobile-menu"
class="hidden md:flex md:static absolute right-4 top-full mt-2 md:mt-0 px-6 py-3 rounded-2xl bg-gray-900/80 border border-gray-800 shadow-xl backdrop-blur-md space-x-6 md:space-x-6 flex-col md:flex-row text-gray-300 md:items-center"
>
<li>
<a
href="/"
class="hover:text-blue-400 block py-2 md:py-0"
>Home</a
>
</li>
<li>
<a
href="/blog"
class="hover:text-blue-400 block py-2 md:py-0"
>Blogs</a
>
</li>
</ul>
</div>
</nav>
<!-- Main Content Section -->
<main class="flex-grow section py-10 relative z-10 rounded-2xl">
<div
class="container mx-auto px-4"
>
<div
class="px-6 py-4 rounded-2xl bg-gray-900/80 border border-gray-800 shadow-xl backdrop-blur-md text-center text-sm"
>
{% block content %}{% endblock content %}
</div>
</div>
</main>
<!-- Footer -->
<footer class="w-full py-10 relative z-10">
<div class="container mx-auto px-4">
<div
class="px-6 py-4 rounded-2xl bg-gray-900/80 border border-gray-800 shadow-xl backdrop-blur-md text-center text-sm text-gray-400"
>
&copy; {{ now() | date(format="%Y") }} Coolans. All rights
reserved.
</div>
</div>
</footer>
</body>
</html>

10
templates/blog-page.html Normal file
View File

@@ -0,0 +1,10 @@
{% extends "base.html" %}
{% block content %}
<h1 class="title">
{{ page.title }}
</h1>
<p class="subtitle"><strong>{{ page.date }}</strong></p>
{{ page.content | safe }}
{% endblock content %}

14
templates/blog.html Normal file
View File

@@ -0,0 +1,14 @@
{% extends "base.html" %}
{% block title %} Blogs {% endblock title %}
{% block content %}
<h1 class="text-4xl md:text-5xl font-extrabold">
{{ section.title }}
</h1>
<ul>
{% for page in section.pages %}
<li><a href="{{ page.permalink | safe }}">{{ page.title }}</a></li>
{% endfor %}
</ul>
{% endblock content %}

126
templates/index.html Normal file
View File

@@ -0,0 +1,126 @@
{% extends "base.html" %} {% block title %}Welcome{% endblock title %} {% block
content %}
<h1 class="text-4xl md:text-5xl font-extrabold leading-tight">
Hi, I'm Tanveer — a Full Stack Developer & Self-Taught SysAdmin.
</h1>
<p class="mt-6 text-lg text-gray-300">
I build performant, secure, and maintainable web applications using
<span class="text-white font-semibold">Laravel</span>. Beyond web
development, I handle Linux servers, automate deployment pipelines, and
optimize infrastructure using tools like
<span class="font-semibold">NGINX</span>,
<span class="font-semibold">Docker</span>, and
<span class="font-semibold">systemd</span>.
</p>
<p class="mt-4 text-lg text-gray-300">
From building REST APIs and scalable backends to managing uptime and DevOps
workflows — I care deeply about clean code, automation, and reliability.
</p>
<p class="mt-4 text-lg text-gray-300">
My goal? Deliver fast, secure, and elegant solutions that make an impact —
whether for a side project, startup, or enterprise system.
</p>
<div class="pt-6">
<a
href="{{ get_url(path='@/blog/_index.md') }}"
class="inline-block px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg shadow transition"
>
Read My Blog →
</a>
</div>
<hr class="my-10 border-gray-700" />
<div>
<h2 class="text-2xl font-bold mb-4">📬 Get in Touch</h2>
<p class="text-lg text-gray-300 mb-4">
I'm always open to collaborating, freelancing, or just chatting tech.
</p>
<ul class="text-gray-300 space-y-2">
<li>
<strong>Email:</strong>
<a
href="#"
class="obfuscated-link text-blue-400 hover:underline text-lg"
data-encoded="bWVAY29vbGFucy5kZXY="
>Loading...</a
>
</li>
<strong>Github:</strong>
<a
href="#"
class="obfuscated-link text-blue-400 hover:underline text-lg"
data-encoded="aHR0cHM6Ly9naXRodWIuY29tL2Nvb2xuc3g="
target="_blank"
rel="noopener noreferrer"
>Loading...</a
>
</li>
<li>
<strong>LinkedIn:</strong>
<a
href="#"
class="obfuscated-link text-blue-400 hover:underline text-lg"
data-encoded="aHR0cHM6Ly9saW5rZWRpbi5jb20vaW4vY29vbGFucw=="
target="_blank"
rel="noopener noreferrer"
>Loading...</a
>
</li>
<li>
<strong>Matrix:</strong>
<a
href="#"
class="obfuscated-link text-blue-400 hover:underline text-lg"
data-encoded="aHR0cHM6Ly9tYXRyaXgudG8vIy9AY29vbGFuczpjb29sYW5zLmRldg=="
target="_blank"
rel="noopener noreferrer"
>Loading...</a
>
</li>
</ul>
</div>
<script>
function decodeAndFillLinks() {
const links = document.querySelectorAll(".obfuscated-link");
links.forEach((link) => {
const encoded = link.getAttribute("data-encoded");
if (!encoded) return;
const decoded = atob(encoded);
// Determine if email, phone, or URL by simple checks:
if (decoded.includes("@") && !decoded.startsWith('http')) {
// Email
link.href = `mailto:${decoded}`;
link.textContent = decoded;
return;
}
if (decoded.startsWith('http')) {
// URL - set href to full URL,
// but visible text to last segment after last '/'
link.href = decoded;
// Remove trailing slash if any
const trimmed = decoded.endsWith('/') ? decoded.slice(0, -1) : decoded;
// Extract last segment after '/'
const parts = trimmed.split('/');
const lastSegment = parts[parts.length - 1] || decoded;
link.textContent = lastSegment;
} else {
// Default fallback — just text
link.textContent = decoded;
}
});
}
document.addEventListener("DOMContentLoaded", decodeAndFillLinks);
</script>
{% endblock content %}