agahnim.dev/templates/partials/home.html

67 lines
No EOL
3 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 %}
&nbsp;彡★Welcome to my little corner of the Web★彡&nbsp;
{% 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" />
<img src="/static/assets/badges/cssisawesome.webp" />
<img src="/static/assets/badges/queer.webp" />
<img width="100px" src="/static/assets/badges/skywardsword.webp" />
<img src="/static/assets/badges/transrightsnow.webp" />
<img width="30%" src="/static/assets/badges/kirby.gif" />
<img width="30%" src="/static/assets/badges/pink.gif" />
<img width="30%" src="/static/assets/badges/trans.gif" />
</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" /></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" /></a>
<a href="https://www.instagram.com/agahnim_music/" target="_blank"><img src="/static/assets/icons/insta.webp"
width="30px" /></a>
</socials>
<img width="200px" src="/static/assets/gifs/divider2.gif" />
</box>
</boxes>
</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>