midou/midou36o.github.io
1
0
Fork 0
mirror of https://github.com/midou36o/midou36o.github.io synced 2025-02-20 06:17:33 +05:30
Code Actions Packages Projects Releases Activity

Welp, the basics are done, some stuff left to polish and the blog will

Browse Source 
be done later.
This commit is contained in:
Midou36O 2023-08-15 17:27:12 +01:00
parent 9c77f90c58
commit 42bb896247
Signed by: midou
GPG Key ID: 1D134A95FE521A7A
5 changed files with 95 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/project.json
View File

@ -4,7 +4,7 @@
"date": "Sometime in 2022", "date": "Sometime in 2022",
"desc": "Open source development and hosted services.", "desc": "Open source development and hosted services.",
"url": "https://projectsegfau.lt", "url": "https://projectsegfau.lt",
"image": "https://github.com/ProjectSegfault/Logo/raw/main/png/logo_semi_transparent.png", "image": "https://github.com/ProjectSegfault/Logo/raw/main/BGs/SVG/bg_shadow_dark_next.svg",
"imdes": "" "imdes": ""
}, },
{ {

20
src/routes/+page.svelte
View File

@ -7,32 +7,32 @@
<body class="text-black dark:text-white dark:bg-black bg-gray-300 font-sans" id="content"> <body class="text-black dark:text-white dark:bg-black bg-gray-300 font-sans" id="content">
<div class="justify-center flex md:flex-row flex-col items-center m-auto shrink overflow-hidden h-25% md:h-screen"> <div class="justify-center flex md:flex-row flex-col items-center m-auto shrink overflow-hidden h-25% md:h-screen">
<!-- Primary content (left) --> <!-- Primary content (left) -->
<div in:fly={{ delay: 300, duration: 300, y: 50, easing: quintOut}} out:fly={{ delay: 100, duration: 200, y: 0, easing: quintOut}} class="text-center"> <div in:fly={{ delay: 300, duration: 300, y: 0, easing: quintOut}} out:fly={{ delay: 100, duration: 200, y: 0, easing: quintOut}} class="text-center">
<div class="md:text-right justify-center flex flex-col items-center m-auto shrink overflow-hidden md:pb-0 md:pt-0 pb-10% pt-110% h-1/2 md:h-screen"> <div class="md:text-right justify-center flex flex-col items-center md:items-end m-auto shrink overflow-hidden md:pb-0 md:pt-0 pb-10% pt-110% h-1/2 md:h-screen">
<div in:fly={{ delay: 300, duration: 300, x: 50, easing: quintOut}} animate=true out:fly={{ duration: 300, x: -50, easing: quintOut}} > <div in:fly={{ delay: 300, duration: 300, x: 50, easing: quintOut}} out:fly={{ duration: 300, x: -50, easing: quintOut}} >
<h1 class="text-black dark:text-white text-4xl">{data.name}</h1> <h1 class="text-black dark:text-white text-4xl">{data.name}</h1>
<p class="text-black dark:text-white pb-5" style="">{@html data.description}</p> <p class="text-black dark:text-white pb-5" style="">{@html data.description}</p>
</div> </div>
<hr transition:fly={{ duration: 300, x: 0, easing: quintOut}} class="border-black dark:border-white w-100%"/> <hr in:fly={{ delay: 300, duration: 300, x: 50, easing: quintOut}} out:fly={{ duration: 300, x: -50, easing: quintOut}} class="border-black dark:border-white w-100%"/>
<div in:fly={{ delay: 300, duration: 300, x: -50, easing: quintOut}} out:fly={{ duration: 300, x: 50, easing: quintOut}} class="flex right text-right mt-1 justify-self-end md:flex-col flex-row px-3 md:px-0" > <div in:fly={{ delay: 300, duration: 300, x: 50, easing: quintOut}} out:fly={{ duration: 300, x: -50, easing: quintOut}} class="flex right text-right mt-1 justify-self-end md:flex-col flex-row px-3 md:px-0 place-items-end" >
<a href="{data.github}{data.gh}"> <a href="{data.github}{data.gh}">
<div class="flex flex-row p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400 rounded"> <div class="flex flex-row p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400 rounded">
<div class="i-carbon-logo-github px-2 md:px-0 my-auto text-3xl"></div><p class="text-2xl md:block hidden md:pl-2">GitHub</p> <p class="text-2xl md:block hidden md:pr-2">GitHub</p><div class="i-carbon-logo-github px-2 md:px-0 my-auto text-3xl"/>
</div> </div>
</a> </a>
<a href="{data.matrix}{data.mtx}"> <a href="{data.matrix}{data.mtx}">
<div class="flex flex-row p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400 rounded"> <div class="flex flex-row p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400 rounded">
<div class="i-tabler-brand-matrix md:pl-3 px-2 my-auto md:px-0 text-3xl"></div><p class="text-2xl md:block hidden md:pl-2">Matrix</p> <p class="text-2xl md:block hidden md:pr-2">Matrix</p><div class="i-tabler-brand-matrix md:pl-3 px-2 my-auto md:px-0 text-3xl"/>
</div> </div>
</a> </a>
<a href="mailto:{data.mail}"> <a href="mailto:{data.mail}">
<div class="flex flex-row p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400 rounded"> <div class="flex flex-row p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400 rounded">
<div class="i-mdi-at md:pl-3 px-2 md:px-0 my-auto text-3xl"></div><p class="text-2xl md:block hidden pl-2">Mail</p> <p class="text-2xl md:block hidden md:pr-2">Mail</p><div class="i-mdi-at md:pl-3 px-2 md:px-0 my-auto text-3xl"/>
</div> </div>
</a> </a>
<a href="/donate"> <a href="/donate">
<div class="flex flex-row py-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400 rounded"> <div class="flex flex-row py-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400 rounded">
<div class="i-ph-currency-circle-dollar-bold md:pl-3 px-2 md:px-0 my-auto text-3xl"></div><p class="text-2xl md:block hidden md:pl-2">Donate</p> <p class="text-2xl md:block hidden md:pr-2">Donate</p><div class="i-ph-currency-circle-dollar-bold md:pl-1 mr-1 px-2 md:px-0 my-auto text-3xl"/>
</div> </div>
</a> </a>
</div> </div>
@ -41,7 +41,7 @@
<!-- vertical line --> <!-- vertical line -->
<div <div
in:fly={{ delay: 300, duration: 300, y: 0, easing: quintOut}} in:fly={{ delay: 300, duration: 300, y: 0, easing: quintOut}}
out:fly={{ duration: 300, y: 0, easing: quintOut}} out:fly={{ duration: 100, y: 0, easing: quintOut}}
class="md:mx-4 md:h-1/4 md:w-1 w-3/4 border-1 bg-black border-black dark:border-white dark:bg-white rounded-md hidden md:block" class="md:mx-4 md:h-1/4 md:w-1 w-3/4 border-1 bg-black border-black dark:border-white dark:bg-white rounded-md hidden md:block"
></div> ></div>
<!-- Secondary content (right) --> <!-- Secondary content (right) -->

9
src/routes/about/+page.svelte
View File

@ -6,7 +6,6 @@
let yr = dayjs('2004-07-15').fromNow(true); let yr = dayjs('2004-07-15').fromNow(true);
import { fly } from 'svelte/transition'; import { fly } from 'svelte/transition';
import { quintOut } from 'svelte/easing'; import { quintOut } from 'svelte/easing';
</script> </script>
<body class="text-black dark:text-white dark:bg-black bg-gray-300 font-sans md:px-10%" id="content"> <body class="text-black dark:text-white dark:bg-black bg-gray-300 font-sans md:px-10%" id="content">
@ -14,8 +13,6 @@
<!-- Primary content (Left) --> <!-- Primary content (Left) -->
<div class="text-center"> <div class="text-center">
<div <div
class="justify-center flex md:flex-row flex-col items-center m-auto shrink overflow-hidden h-screen "> class="justify-center flex md:flex-row flex-col items-center m-auto shrink overflow-hidden h-screen ">
<div <div
in:fly={{ delay: 300, duration: 300, y: 50, easing: quintOut}} in:fly={{ delay: 300, duration: 300, y: 50, easing: quintOut}}
@ -23,7 +20,7 @@
class="flex flex-col"> class="flex flex-col">
<div class="flex flex-col md:flex-row"> <div class="flex flex-col md:flex-row">
<div <div
class="i-gridicons-info place-content-center place-self-center justify-center content-center text-center pl-0 md:pl-3 text-black text-5xl" class="i-gridicons-info dark:text-white place-content-center place-self-center justify-center content-center text-center pl-0 md:pl-3 text-black text-5xl"
></div> ></div>
<h1 <h1
class="text-black dark:text-white text-4xl md:pr-2" class="text-black dark:text-white text-4xl md:pr-2"
@ -32,7 +29,7 @@
<p class="md:hidden block text-gray-500 py-1"> I fucking hate css </p> <p class="md:hidden block text-gray-500 py-1"> I fucking hate css </p>
<a href="/"> <a href="/">
<div class="flex place-content-center place-self-center justify-center content-center flex-row md:pl-25%"> <div class="flex place-content-center place-self-center justify-center content-center flex-row md:pl-25%">
<div class="i-ep-back text-4xl md:text-2xl mr-0 md:mr-1"></div> <div class="i-ep-back text-4xl md:text-2xl my-auto mr-0 md:mr-1"></div>
<p class="md:block hidden"> Go back? </p> <p class="md:block hidden"> Go back? </p>
</div> </div>
</a> </a>
@ -60,7 +57,7 @@
</p> </p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</body> </body>

20
src/routes/donate/monero/+page.svelte
View File

@ -7,17 +7,27 @@
<!-- Primary content --> <!-- Primary content -->
<div class="text-center"> <div class="text-center">
<div class="justify-center flex md:flex-row flex-col items-center m-auto shrink overflow-hidden h-screen "> <div class="justify-center flex md:flex-row flex-col items-center m-auto shrink overflow-hidden h-screen ">
<div <div>
<div class="flex flex-col md:flex-row">
<div
in:fly={{ delay: 300, duration: 300, y: 50, easing: quintOut}} in:fly={{ delay: 300, duration: 300, y: 50, easing: quintOut}}
out:fly={{ duration: 300, y: -50, easing: quintOut}} out:fly={{ duration: 300, y: -50, easing: quintOut}}
class="i-tabler-coin-monero pl-0 md:pl-3 text-black text-5xl" class="i-tabler-coin-monero dark:text-white mx-auto md:mx-0 pl-0 md:pl-3 text-black text-5xl"
></div> />
<h1 <h1
in:fly={{ delay: 300, duration: 300, y: 50, easing: quintOut}} in:fly={{ delay: 300, duration: 300, y: 50, easing: quintOut}}
out:fly={{ duration: 300, y: -50, easing: quintOut}} out:fly={{ duration: 300, y: -50, easing: quintOut}}
class="text-black dark:text-white text-4xl md:pr-2" class="text-black dark:text-white text-4xl md:pr-2"
>Monero</h1> >Monero</h1>
</div>
<p class="md:hidden block text-gray-500"> I fucking hate css </p> <p class="md:hidden block text-gray-500"> I fucking hate css </p>
<a href="/">
<div class="flex place-content-center place-self-center justify-center content-center flex-row md:pl-25%">
<div class="i-material-symbols-home-outline-rounded text-4xl md:text-2xl my-auto mr-0 md:mr-1"></div>
<p class="md:block hidden"> Go home? </p>
</div>
</a>
</div>
<!-- Vertical line --> <!-- Vertical line -->
<div <div
in:fly={{ delay: 300, duration: 300, y: 0, easing: quintOut}} in:fly={{ delay: 300, duration: 300, y: 0, easing: quintOut}}
@ -31,9 +41,9 @@
class="flex flex-col md:px-2 text-center md:text-left" class="flex flex-col md:px-2 text-center md:text-left"
> >
<h1 class="text-3xl pb-3">QR code:</h1> <h1 class="text-3xl pb-3">QR code:</h1>
<img src="/qr.png" alt="QR code" class="pb-5 justify-center md:w-1.5/4 md:mx-0 mx-10 md:h-1.5/4 w-80% text-center items-center h-auto"/> <img src="/qr.png" alt="QR code" class="pb-5 justify-center md:w-1.5/4 md:mx-0 mx-auto md:h-1.5/4 w-80% text-center items-center h-auto"/>
<h1 class="underline-offset-auto hover:underline text-3xl"><a href="monero:44UzWvWS9wELmqPXzLqiPphXVYBbsjkbC7r4RwCSoXC4UyzC2NbPEoPEjxZsGVfbSPbAHUGtpc8GUYUZ8fdu1a4bNAyBPDe"> Monero wallet:</a></h1> <h1 class="underline-offset-auto hover:underline text-3xl"><a href="monero:44UzWvWS9wELmqPXzLqiPphXVYBbsjkbC7r4RwCSoXC4UyzC2NbPEoPEjxZsGVfbSPbAHUGtpc8GUYUZ8fdu1a4bNAyBPDe"> Monero wallet:</a></h1>
<p><code class="break-all">44UzWvWS9wELmqPXzLqiPphXVYBbsjkbC7r4RwCSoXC4UyzC2NbPEoPEjxZsGVfbSPbAHUGtpc8GUYUZ8fdu1a4bNAyBPDe</code></p> <p class="mx-2 md:mx-0 bg-black dark:bg-white dark:text-black text-white p-1 rounded-md "><code class="break-all ">44UzWvWS9wELmqPXzLqiPphXVYBbsjkbC7r4RwCSoXC4UyzC2NbPEoPEjxZsGVfbSPbAHUGtpc8GUYUZ8fdu1a4bNAyBPDe</code></p>
</div> </div>
</div> </div>
</body> </body>

78
src/routes/projects/+page.svelte
View File

@ -1,22 +1,76 @@
<script> <script>
import proj from '$lib/project.json'; import proj from '$lib/project.json';
import { fly } from 'svelte/transition';
import { quintOut } from 'svelte/easing';
</script> </script>
<div class="min-h-screen justify-center gap-1 flex flex-col place-items-center">
{#each proj as { name, date, desc, url, image, imdes }} <body class="text-black dark:text-white dark:bg-black bg-gray-300 font-sans md:px-10%" id="content">
<div class="flex flex-col bg-gray-800"> <div class="min-h-screen">
<!-- Primary content (Left) -->
<div class="text-center">
<div
class="justify-center flex md:flex-row flex-col items-center m-auto shrink overflow-hidden h-screen ">
<div
in:fly={{ delay: 300, duration: 300, y: 50, easing: quintOut}}
out:fly={{ duration: 300, y: -50, easing: quintOut}}
class="flex flex-col">
<div class="flex flex-col md:flex-row">
<div
class="i-octicon-project-16 place-content-center place-self-center justify-center content-center text-center pl-0 md:pl-3 text-black text-5xl"
></div>
<h1
class="text-black dark:text-white text-4xl md:pl-2 md:pr-2"
>Projects</h1>
</div>
<p class="md:hidden block text-gray-500 py-1"> I fucking hate css </p>
<a href="/">
<div class="flex place-content-center place-self-center justify-center content-center flex-row md:pl-25%">
<div class="i-ep-back text-4xl md:text-2xl my-auto mr-0 md:mr-1"></div>
<p class="md:block hidden"> Go back? </p>
</div>
</a>
</div>
<!-- Vertical line -->
<div
in:fly={{ delay: 300, duration: 300, y: 0, easing: quintOut}}
out:fly={{ duration: 300, y: 0, easing: quintOut}}
class="md:h-1/2 md:w-1 w-3/4 border-1 bg-black border-black dark:bg-white dark:border-white rounded-md"
></div>
<div class="md:pl-4 md:gap-1 flex md:h-50% flex-col place-items-start">
<div class="overflow-y-auto">
{#each proj as { name, date, desc, url, image, imdes }, i}
<a href="{url}">
<!-- Gotta fix this, it's gonna look ugly when there are too many projects in the list... -->
<div
in:fly={{ delay: 350, duration: 300 * i, y: -50, easing: quintOut}}
out:fly={{ duration: 300 , y: 50, easing: quintOut}}
class="flex flex-col p-2 rounded dark:hover:bg-#082f49 hover:bg-blue-100">
<div class="my-auto"> <div class="my-auto">
<div class="flex flex-row"> <div class="flex flex-row place-content-between">
<div class="flex flex-col"> <div class="flex flex-col pl-4 md:pl-0 gap-3 my-auto py-2 text-left z-0 place-items-start">
<h3 class="text-3xl dark:text-white text-black text-center">{name}</h3> <h3 class="text-3xl dark:text-white text-black text-center">{name}</h3>
<p class="text-sm dark:text-white text-black text-center">{date}</p> <p class="text-sm dark:text-white text-black text-center">{date}</p>
<p class="dark:text-white text-black text-sm">{desc}</p> <p class="dark:text-white text-black text-sm">{desc}</p>
</div> </div>
<div class="h-10% w-50 overflow-hidden"> <div class="md:h-10% h-100% md:w-50 w-50 object-cover rounded backdrop-opacity-10 md:object-contain float-right z-10 overflow-hidden md:block hidden" style="mask-image: linear-gradient(to left, rgba(0, 0, 0, 1.0) 50%, transparent 100%);">
<img class="transition -py-20 duration-400 static top-0 opacity-75 object-contain hover:scale-120" src="{image}" alt="{imdes}"> <img class="transition duration-600 top-0 opacity-50 scale-110 hover:opacity-75 object-cover md:object-contain hover:scale-120" src="{image}" alt="{imdes}">
<div class="h-30 top-0 static bg-gradient-to-l from-gray-800"/>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</a>
<hr
in:fly={{ delay: 300, duration: 500 * i, y: 0, easing: quintOut}}
out:fly={{ duration: 300 , y: 50, easing: quintOut}}
class="border-black dark:border-white justify-center mx-auto w-85% md:w-100% my-2"/>
{/each} {/each}
</div>
</div> </div>
</div>
</div>
</body>