73 lines
2.4 KiB
Svelte
73 lines
2.4 KiB
Svelte
<script>
|
|
</script>
|
|
|
|
<h1
|
|
class="font-roboto_slab text-center text-2xl lg:text-6xl xl:text-7xl w-auto md:w-max mt-10 lg:mt-32 mx-auto font-bold h1-shadow"
|
|
>Welcome to my website</h1>
|
|
<!-->
|
|
<br class="hidden lg:block" />
|
|
</!-->
|
|
<p class="font-roboto_slab text-center lg:text-2xl text-md lg:mt-5">The modern web meets 2000</p>
|
|
<hr class="border-black" />
|
|
<br />
|
|
<div class="md:text-center lg:px-40">
|
|
<p class="">
|
|
Welcome! This is my personal website that I made as a hobby project. You are entirely welcome!
|
|
I was inspired to make this page thanks to a couple of friends of mine, whose pages you can
|
|
check out under the "Galaxies" page.
|
|
</p>
|
|
</div>
|
|
<div class="flex gap-3 mt-2 md:mt-0 lg:px-20 xl:px-40 xl:mt-10">
|
|
<img
|
|
class="h-40 md:h-60 rounded "
|
|
src="https://dutchellie.nl/DutchEllie/proper-website-2/raw/branch/main/web/static/images/rin-2.gif"
|
|
alt="Kagamine Rin excitedly jumping! yay!"
|
|
/>
|
|
<div class="w-full grid md:grid-cols-2 gap-2">
|
|
<div class="col-span-1">
|
|
<h2 class="font-semibold text-left ml-10 mb-2">Tech</h2>
|
|
<ul class="ml-10 list-disc marker:text-blue-400">
|
|
<li>Kubernetes</li>
|
|
<li>Svelte</li>
|
|
<li>SvelteKit</li>
|
|
<li>Lot's of Japanese music</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-span-1">
|
|
<h2 class="font-semibold text-left ml-10 mb-2">Misc</h2>
|
|
<ul class="ml-10 list-disc marker:text-blue-400">
|
|
<li class="underline text-[#002896] hover:text-blue-500">
|
|
<a href="https://dutchellie.nl/DutchEllie/svelte-testing">Gitea Repo</a>
|
|
</li>
|
|
<li class="underline text-[#002896] hover:text-blue-500">
|
|
<a href="https://drone.dutchellie.nl/DutchEllie/svelte-testing"
|
|
>Drone CI/CD
|
|
<img
|
|
class="ml-2 mb-1 inline"
|
|
src="https://drone.dutchellie.nl/api/badges/DutchEllie/svelte-testing/status.svg?ref=refs/heads/main"
|
|
alt="Drone build status"
|
|
/>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<br />
|
|
<p>
|
|
This entire project is open source (GPL-3) and the source code is linked above. In
|
|
addition, a CI/CD pipeline deploys this website on every push.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- How to do the animation and reverse it: https://stackoverflow.com/a/44742399 -->
|
|
<style>
|
|
.h1-shadow {
|
|
text-shadow: 2px 2px gray;
|
|
transition: text-shadow 1s cubic-bezier(0.075, 0.82, 0.165, 1);
|
|
}
|
|
.h1-shadow:hover {
|
|
text-shadow: 5px 5px gray;
|
|
transition: text-shadow 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
|
|
}
|
|
</style>
|