Agahnim/agahnim.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

home: wip

Browse source
This commit is contained in:
Agahnim 2026-03-23 09:54:51 +01:00
parent f129d40ae1
commit 12b390d068
3 changed files with 144 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

90
templates/base.html
View file

@ -16,58 +16,58 @@
</head>
<body hx-boost="true" hx-target="#content">
<crt>
<persistent-ui>
{% include "partials/header.html" %}
<miniplayer-container id="miniplayer-container">
{% block miniplayer %}{% endblock %}
</miniplayer-container>
</persistent-ui>
<crt>
<persistent-ui>
{% include "partials/header.html" %}
<miniplayer-container id="miniplayer-container">
{% block miniplayer %}{% endblock %}
</miniplayer-container>
</persistent-ui>
<main id="content">
{% block content %}{% endblock %}
</main>
</crt>
<main id="content">
{% block content %}{% endblock %}
</main>
</crt>
<script src="/static/miniplayer.js"></script>
<script>
function updateMiniplayerVisibility() {
const isMusicPage = window.location.pathname === '/music';
const miniplayer = document.getElementById('miniplayer-container');
if (miniplayer) {
miniplayer.style.display = isMusicPage ? 'none' : '';
}
<script src="/static/miniplayer.js"></script>
<script>
function updateMiniplayerVisibility() {
const isMusicPage = window.location.pathname === '/music';
const miniplayer = document.getElementById('miniplayer-container');
if (miniplayer) {
miniplayer.style.display = isMusicPage ? 'none' : '';
}
}
function updateNavState() {
const path = window.location.pathname;
document.querySelectorAll('navbar input[type="radio"]').forEach(radio => {
radio.checked = false;
});
if (path === '/') {
const homeRadio = document.getElementById('nav-home');
if (homeRadio) homeRadio.checked = true;
} else if (path === '/music') {
const musicRadio = document.getElementById('nav-music');
if (musicRadio) musicRadio.checked = true;
}
function updateNavState() {
const path = window.location.pathname;
document.querySelectorAll('navbar input[type="radio"]').forEach(radio => {
radio.checked = false;
});
if (path === '/') {
const homeRadio = document.getElementById('nav-home');
if (homeRadio) homeRadio.checked = true;
} else if (path === '/music') {
const musicRadio = document.getElementById('nav-music');
if (musicRadio) musicRadio.checked = true;
}
}
function closeMobileMenu() {
const checkbox = document.getElementById('nav-toggle-checkbox');
if (checkbox) checkbox.checked = false;
}
function closeMobileMenu() {
const checkbox = document.getElementById('nav-toggle-checkbox');
if (checkbox) checkbox.checked = false;
}
updateMiniplayerVisibility();
updateNavState();
document.body.addEventListener('htmx:afterSwap', () => {
updateMiniplayerVisibility();
updateNavState();
closeMobileMenu();
window.scrollTo(0, 0);
});
</script>
</body>
document.body.addEventListener('htmx:afterSwap', () => {
updateMiniplayerVisibility();
updateNavState();
closeMobileMenu();
window.scrollTo(0, 0);
});
</script>
</body>
</html>
</html>

29
templates/partials/home.html
View file

@ -5,25 +5,23 @@
</welcome>
<boxes>
<box id="bigbox">
Thank you for visiting my website !
Thank you for visiting my <woopwoop>brand new</woopwoop> website !
For now it's still a <darkerer-pink>work in progress</darkerer-pink> but I'm sure you will see
changes if you come back from time to time :)
<br /><br />
My name is <darkerer-pink>Agahnim</darkerer-pink>
<pronouns className="ml-1 px-2 py-[1px] text-xs rounded-full bg-blue-ouga text-white font-semibold">she/her
</pronouns>,
I'm a <darkerer-pink className="text-darkerer-pink-ouga">developer</darkerer-pink> and <darkerer-pink
className="text-darkerer-pink-ouga">music producer</darkerer-pink> from <darkerer-pink
className="text-darkerer-pink-ouga">France</darkerer-pink> !
<pronouns>she/her</pronouns>,
I'm a <darkerer-pink>developer</darkerer-pink> and <darkerer-pink>music producer</darkerer-pink> from
<darkerer-pink>France</darkerer-pink> !
<br /><br />
I created this website not just to <darkerer-pink className="text-darkerer-pink-ouga">improve</darkerer-pink> my
I created this website not just to <darkerer-pink>improve</darkerer-pink> my
web development
skills, but also because it's <boing className="inline-block text-darkerer-pink-ouga animate-bounce">fun</boing>
skills, but also because it's <boing>fun</boing>
to
build a project like this. It's a small, personal space on the internet, away from the social climate, which is
getting <shitty className="text-red-700">worse and worse</shitty>
getting <shitty>worse and worse.</shitty>
<br /><br />
This website is inspired by the <darkerer-pink className="text-darkerer-pink-ouga">vaporwave
This website is inspired by the <darkerer-pink>vaporwave
aesthetic</darkerer-pink> and
the old
PCs I used to tinker with when I was a kid.
@ -34,4 +32,13 @@
<p>Salut</p>
</box>
</boxes>
</home-content>
</home-content>
<!-- I know I know but I need it for this pretty rainbow flagish animation -->
<script>
const el = document.querySelector('woopwoop');
const text = el.textContent;
el.innerHTML = text.split('').map((ch, i) =>
`<span style="animation-delay: ${i * 0.08}s">${ch === ' ' ? '&nbsp;' : ch}</span>`
).join('');
</script>