187 lines
6 KiB
HTML
187 lines
6 KiB
HTML
<home-content>
|
|
<welcome>
|
|
<img
|
|
src="/static/assets/images/welcome.webp"
|
|
width="400px"
|
|
alt="A welcome text in pink"
|
|
/>
|
|
<marquee>
|
|
{% for _ in 0..12 %} 彡★Welcome to my little corner of the
|
|
Web★彡 {% endfor %}
|
|
</marquee>
|
|
</welcome>
|
|
<boxes>
|
|
<box id="bigbox">
|
|
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>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>improve</darkerer-pink> my web development 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>worse and worse.</shitty> <br /><br />
|
|
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. I always liked this type of aesthetic and
|
|
the mix of melancholy of comfort it brings me. It feels good to bring that
|
|
vibe into one of my projects.
|
|
<badges>
|
|
<img
|
|
src="/static/assets/badges/88x31computer.gif"
|
|
alt="88x31 pixel art badge with a retro computer"
|
|
/>
|
|
<img
|
|
src="/static/assets/badges/cssisawesome.webp"
|
|
alt="Badge with text 'CSS is Awesome'"
|
|
/>
|
|
<img
|
|
src="/static/assets/badges/queer.webp"
|
|
alt="Queer pride flag badge"
|
|
/>
|
|
<img
|
|
width="100px"
|
|
src="/static/assets/badges/skywardsword.webp"
|
|
alt="Cover art for The Legend of Zelda Skyward Sword"
|
|
/>
|
|
<img
|
|
src="/static/assets/badges/transrightsnow.webp"
|
|
alt="Trans rights badge with text 'Trans Rights Now'"
|
|
/>
|
|
<img
|
|
width="30%"
|
|
src="/static/assets/badges/kirby.gif"
|
|
alt="Kirby character animated GIF"
|
|
/>
|
|
<img
|
|
width="30%"
|
|
src="/static/assets/badges/pink.gif"
|
|
alt="Pink animated pixel art badge"
|
|
/>
|
|
<img
|
|
width="30%"
|
|
src="/static/assets/badges/trans.gif"
|
|
alt="Trans pride flag animated badge"
|
|
/>
|
|
</badges>
|
|
</box>
|
|
<box id="smallbox">
|
|
<socials-header> Socials ! </socials-header>
|
|
<socials>
|
|
<a href="https://github.com/naguiagahnim" target="_blank"
|
|
><img
|
|
src="/static/assets/icons/github.webp"
|
|
width="30px"
|
|
alt="GitHub logo"
|
|
/></a>
|
|
<a
|
|
href="https://open.spotify.com/intl-fr/artist/4BPUhsH6krKkCNFrdMZnZF?si=E3luyIf0S_yfJRmm82S5OA"
|
|
target="_blank"
|
|
><img
|
|
src="/static/assets/icons/spotify.webp"
|
|
width="30px"
|
|
alt="Spotify logo"
|
|
/></a>
|
|
<a href="https://www.instagram.com/agahnim_music/" target="_blank"
|
|
><img
|
|
src="/static/assets/icons/insta.webp"
|
|
width="30px"
|
|
alt="Instagram logo"
|
|
/></a>
|
|
</socials>
|
|
<img
|
|
width="200px"
|
|
src="/static/assets/gifs/divider2.gif"
|
|
alt="Decorative divider"
|
|
/>
|
|
<bibou-message
|
|
>Consult the wisdom of the Bibou, if thou darest...</bibou-message
|
|
>
|
|
<bibou-container>
|
|
<img
|
|
class="boubou"
|
|
src="/static/assets/images/boubou.webp"
|
|
alt="Bibou endormi"
|
|
/>
|
|
<img
|
|
class="bibou"
|
|
src="/static/assets/images/bibou.webp"
|
|
alt="Bibou éveillé"
|
|
/>
|
|
</bibou-container>
|
|
<bibou-text> </bibou-text>
|
|
</box>
|
|
<box id="newsbox">
|
|
<website-news>
|
|
<img
|
|
width="70%"
|
|
src="/static/assets/gifs/updates.gif"
|
|
alt="Animated text 'Updates'"
|
|
/>
|
|
|
|
{% for article in news %}
|
|
<article-entry>
|
|
<time datetime="{{ article.date }}">
|
|
{{ article.date.format("%d/%m/%Y") }}
|
|
</time>
|
|
<article-body> {{ article.body }} </article-body>
|
|
<img
|
|
width="300px"
|
|
src="/static/assets/gifs/divider2.gif"
|
|
alt="Decorative divider"
|
|
/>
|
|
</article-entry>
|
|
{% else %}
|
|
<ominous-message> Nothing to see here, for now... </ominous-message>
|
|
{% endfor %}
|
|
</website-news>
|
|
</box>
|
|
</boxes>
|
|
<!-- Nous sommes les bestioles et nous sommes responsive -->
|
|
<chibis>
|
|
<img id="me" src="/static/assets/images/boubouille.webp" />
|
|
<img id="raplapla" src="/static/assets/images/rapla.webp" />
|
|
</chibis>
|
|
</home-content>
|
|
|
|
<!-- I know I know but I need it for this pretty rainbow flagish animation -->
|
|
<script>
|
|
(function () {
|
|
<!-- For rainbow text -->
|
|
const el = document.querySelector('woopwoop');
|
|
if (!el) return;
|
|
const text = el.textContent;
|
|
el.innerHTML = text.split('').map((ch, i) =>
|
|
`<span style="animation-delay: ${i * 0.08}s">${ch === ' ' ? ' ' : ch}</span>`
|
|
).join('');
|
|
|
|
const BIBOU_QUOTES = {{bibou_quotes| tojson | safe
|
|
}};
|
|
|
|
const txtEl = document.querySelector('bibou-text');
|
|
const ctrEl = document.querySelector('bibou-container');
|
|
let intervalRef = null;
|
|
|
|
const ttText = (texte) => {
|
|
if (intervalRef) clearInterval(intervalRef);
|
|
|
|
let accumulated = "";
|
|
let index = 0;
|
|
|
|
intervalRef = setInterval(() => {
|
|
if (index < texte.length) {accumulated += texte.charAt(index); txtEl.textContent = accumulated; index++;} else {
|
|
clearInterval(intervalRef); intervalRef = null;
|
|
}
|
|
}, 40);
|
|
};
|
|
|
|
ctrEl.addEventListener('mouseenter', () => {
|
|
const quote = BIBOU_QUOTES[Math.floor(Math.random() * BIBOU_QUOTES.length)];
|
|
ttText(quote);
|
|
});
|
|
}) ();
|
|
</script>
|