Welp, the basics are done, some stuff left to polish and the blog will
be done later.
This commit is contained in:
parent
9c77f90c58
commit
42bb896247
GPG Key ID:
1D134A95FE521A7A
|
|
@ -4,7 +4,7 @@
|
|||
"date": "Sometime in 2022",
|
||||
"desc": "Open source development and hosted services.",
|
||||
"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": ""
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -7,32 +7,32 @@
|
|||
<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">
|
||||
<!-- 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 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 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, 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 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}} out:fly={{ duration: 300, x: -50, easing: quintOut}} >
|
||||
<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>
|
||||
</div>
|
||||
<hr transition:fly={{ duration: 300, x: 0, 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" >
|
||||
<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 place-items-end" >
|
||||
<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="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>
|
||||
</a>
|
||||
<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="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>
|
||||
</a>
|
||||
<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="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>
|
||||
</a>
|
||||
<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="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>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
<!-- vertical line -->
|
||||
<div
|
||||
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"
|
||||
></div>
|
||||
<!-- Secondary content (right) -->
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
let yr = dayjs('2004-07-15').fromNow(true);
|
||||
import { fly } from 'svelte/transition';
|
||||
import { quintOut } from 'svelte/easing';
|
||||
|
||||
</script>
|
||||
|
||||
<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) -->
|
||||
<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}}
|
||||
|
|
@ -23,7 +20,7 @@
|
|||
class="flex flex-col">
|
||||
<div class="flex flex-col md:flex-row">
|
||||
<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>
|
||||
<h1
|
||||
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>
|
||||
<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 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>
|
||||
</div>
|
||||
</a>
|
||||
|
|
@ -60,7 +57,7 @@
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -7,17 +7,27 @@
|
|||
<!-- Primary content -->
|
||||
<div class="text-center">
|
||||
<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}}
|
||||
out:fly={{ duration: 300, y: -50, easing: quintOut}}
|
||||
class="i-tabler-coin-monero pl-0 md:pl-3 text-black text-5xl"
|
||||
></div>
|
||||
class="i-tabler-coin-monero dark:text-white mx-auto md:mx-0 pl-0 md:pl-3 text-black text-5xl"
|
||||
/>
|
||||
<h1
|
||||
in:fly={{ delay: 300, 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"
|
||||
>Monero</h1>
|
||||
</div>
|
||||
<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 -->
|
||||
<div
|
||||
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"
|
||||
>
|
||||
<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>
|
||||
<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>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -1,22 +1,76 @@
|
|||
<script>
|
||||
import proj from '$lib/project.json';
|
||||
import { fly } from 'svelte/transition';
|
||||
import { quintOut } from 'svelte/easing';
|
||||
</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 }}
|
||||
<div class="flex flex-col bg-gray-800">
|
||||
|
||||
<body class="text-black dark:text-white dark:bg-black bg-gray-300 font-sans md:px-10%" id="content">
|
||||
<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="flex flex-row">
|
||||
<div class="flex flex-col">
|
||||
<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="dark:text-white text-black text-sm">{desc}</p>
|
||||
<div class="flex flex-row place-content-between">
|
||||
<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>
|
||||
<p class="text-sm dark:text-white text-black text-center">{date}</p>
|
||||
<p class="dark:text-white text-black text-sm">{desc}</p>
|
||||
</div>
|
||||
<div class="h-10% w-50 overflow-hidden">
|
||||
<img class="transition -py-20 duration-400 static top-0 opacity-75 object-contain hover:scale-120" src="{image}" alt="{imdes}">
|
||||
<div class="h-30 top-0 static bg-gradient-to-l from-gray-800"/>
|
||||
<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 duration-600 top-0 opacity-50 scale-110 hover:opacity-75 object-cover md:object-contain hover:scale-120" src="{image}" alt="{imdes}">
|
||||
</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}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Reference in New Issue