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
static/style.css
View file

@ -131,6 +131,47 @@ table {
border-spacing: 0; border-spacing: 0;
} }
/* Animations */
@keyframes woopwoop {
0%,
100% {
transform: translateY(0) rotate(-2deg);
}
50% {
transform: translateY(-10px) rotate(2deg);
}
}
@keyframes woopwoopmove {
to {
background-position: 200% center;
}
}
@keyframes scanlines {
0% {
background-position: 0 50%;
}
}
@keyframes boing {
0%,
100% {
transform: translateY(-25%);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
50% {
transform: none;
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
}
:root { :root {
@ -146,7 +187,6 @@ table {
} }
::selection { ::selection {
text-shadow: 0px 0px 3px var(--darkerer-pink) text-shadow: 0px 0px 3px var(--darkerer-pink)
} }
@ -202,12 +242,6 @@ crt {
} }
} }
@keyframes scanlines {
0% {
background-position: 0 50%;
}
}
/* persistent-ui */ /* persistent-ui */
persistent-ui { persistent-ui {
position: fixed; position: fixed;
@ -358,14 +392,15 @@ home-content {
boxes { boxes {
display: flex; display: flex;
width: 30%; flex-wrap: wrap;
width: min(90svw, 800px);
gap: 1rem; gap: 1rem;
box { box {
border-radius: 0.25rem; border-radius: 0.25rem;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
background-color: white; background-color: white;
padding: 4rem; padding: 1rem;
&#bigbox { &#bigbox {
flex: 1; flex: 1;
@ -376,6 +411,43 @@ home-content {
} }
} }
} }
pronouns {
display: inline-flex;
align-items: center;
padding: 0.15rem 0.55rem;
border-radius: 9999px;
background-color: var(--blue);
font-weight: 500;
font-size: 13px;
color: white;
white-space: nowrap;
line-height: 1.4;
}
darkerer-pink {
color: var(--darkerer-pink);
}
boing {
display: inline-block;
color: var(--darkerer-pink);
animation: boing 0.8s infinite;
}
shitty {
color: #753b00;
}
woopwoop span {
display: inline-block;
background: linear-gradient(90deg, var(--blue), var(--darker-pink), var(--darkerer-pink), var(--lavender), var(--light-blue), var(--light-pink), var(--pink));
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: woopwoop 1.2s ease-in-out infinite, woopwoopmove 2s linear infinite;
}
} }
/* 404 */ /* 404 */

6
templates/base.html
View file

@ -16,7 +16,7 @@
</head> </head>
<body hx-boost="true" hx-target="#content"> <body hx-boost="true" hx-target="#content">
<crt> <crt>
<persistent-ui> <persistent-ui>
{% include "partials/header.html" %} {% include "partials/header.html" %}
<miniplayer-container id="miniplayer-container"> <miniplayer-container id="miniplayer-container">
@ -27,7 +27,7 @@
<main id="content"> <main id="content">
{% block content %}{% endblock %} {% block content %}{% endblock %}
</main> </main>
</crt> </crt>
<script src="/static/miniplayer.js"></script> <script src="/static/miniplayer.js"></script>
<script> <script>
@ -68,6 +68,6 @@
window.scrollTo(0, 0); window.scrollTo(0, 0);
}); });
</script> </script>
</body> </body>
</html> </html>

27
templates/partials/home.html
View file

@ -5,25 +5,23 @@
</welcome> </welcome>
<boxes> <boxes>
<box id="bigbox"> <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 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 :) changes if you come back from time to time :)
<br /><br /> <br /><br />
My name is <darkerer-pink>Agahnim</darkerer-pink> 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>she/her</pronouns>,
</pronouns>, I'm a <darkerer-pink>developer</darkerer-pink> and <darkerer-pink>music producer</darkerer-pink> from
I'm a <darkerer-pink className="text-darkerer-pink-ouga">developer</darkerer-pink> and <darkerer-pink <darkerer-pink>France</darkerer-pink> !
className="text-darkerer-pink-ouga">music producer</darkerer-pink> from <darkerer-pink
className="text-darkerer-pink-ouga">France</darkerer-pink> !
<br /><br /> <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 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 to
build a project like this. It's a small, personal space on the internet, away from the social climate, which is 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 /> <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 aesthetic</darkerer-pink> and
the old the old
PCs I used to tinker with when I was a kid. PCs I used to tinker with when I was a kid.
@ -35,3 +33,12 @@
</box> </box>
</boxes> </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>