88 lines
2.7 KiB
Svelte
88 lines
2.7 KiB
Svelte
<script>
|
|
import Guestbook from "../misc/guestbook.svelte";
|
|
|
|
</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 dark:border-[#ffc0f5]" />
|
|
<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] dark:text-blue-200 dark:hover:text-blue-50 hover:text-blue-500"
|
|
>
|
|
<a href="https://dutchellie.nl/DutchEllie/svelte-website">Gitea Repo</a>
|
|
</li>
|
|
<li
|
|
class="underline text-[#002896] dark:text-blue-200 dark:hover:text-blue-50 hover:text-blue-500"
|
|
>
|
|
<a href="https://drone.dutchellie.nl/DutchEllie/svelte-website"
|
|
>Drone CI/CD
|
|
<img
|
|
class="ml-2 mb-1 inline"
|
|
src="https://drone.dutchellie.nl/api/badges/DutchEllie/svelte-website/status.svg?ref=refs/heads/main"
|
|
alt="Drone build status"
|
|
/>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="grid md:grid-cols-2 md:gap-2 mt-3">
|
|
<div>
|
|
<h2 class="font-semibold">Details</h2>
|
|
<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 class="mt-6">
|
|
<Guestbook/>
|
|
</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>
|