midou/midou36o.github.io
1
0
Fork 0
mirror of https://github.com/midou36o/midou36o.github.io synced 2024-11-08 18:22:23 +05:30
Code Actions Packages Projects Releases Activity

Do not commit at 3am (gone wrong)

Browse Source
This commit is contained in:
Midou36O 2023-07-25 03:10:31 +01:00
parent 557a7f8239
commit a3bae60b88
Signed by: midou
GPG Key ID: 1D134A95FE521A7A
5 changed files with 66 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/routes/+page.svelte
View File

@ -5,34 +5,34 @@
</script> </script>
<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-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}} animate=true out:fly={{ duration: 300, y: -50, easing: quintOut}} class="text-center"> <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="justify-center flex flex-col items-center m-auto shrink overflow-hidden h-screen"> <div class="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, x: 50, easing: quintOut}} animate=true 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 w-100%"/> <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}} > <div in:fly={{ delay: 300, duration: 300, x: -50, easing: quintOut}} out:fly={{ duration: 300, x: 50, easing: quintOut}} class="flex md:flex-col flex-row px-3 md:px-0" >
<a href="{data.github}{data.gh}"> <a href="{data.github}{data.gh}">
<div class="flex flex-row py-1"> <div class="flex flex-row py-1">
<div class="i-carbon-logo-github text-black text-3xl"></div><p class="text-1xl text-black pl-2">GitHub</p> <div class="i-carbon-logo-github text-black dark:text-white px-2 md:px-0 text-3xl"></div><p class="text-1xl md:block hidden dark:text-white text-black md:pl-2">GitHub</p>
</div> </div>
</a> </a>
<a href="{data.matrix}{data.mtx}"> <a href="{data.matrix}{data.mtx}">
<div class="flex flex-row py-1"> <div class="flex flex-row py-1">
<div class="i-tabler-brand-matrix pl-3 text-black text-3xl"></div><p class="text-1xl text-black pl-2">Matrix</p> <div class="i-tabler-brand-matrix md:pl-3 text-black dark:text-white px-2 md:px-0 text-3xl"></div><p class="text-1xl md:block hidden dark:text-white text-black md:pl-2">Matrix</p>
</div> </div>
</a> </a>
<a href="mailto:{data.mail}"> <a href="mailto:{data.mail}">
<div class="flex flex-row py-1"> <div class="flex flex-row py-1">
<div class="i-mdi-at pl-3 text-black text-3xl"></div><p class="text-1xl text-black pl-2">Mail</p> <div class="i-mdi-at md:pl-3 text-black dark:text-white px-2 md:px-0 text-3xl"></div><p class="text-1xl md:block hidden text-black dark:text-white md:pl-2">Mail</p>
</div> </div>
</a> </a>
<a href="/donate"> <a href="/donate">
<div class="flex flex-row py-1"> <div class="flex flex-row py-1">
<div class="i-ph-currency-circle-dollar-bold pl-3 text-black text-3xl"></div><p class="text-1xl text-black pl-2">Donate</p> <div class="i-ph-currency-circle-dollar-bold md:pl-3 text-black px-2 md:px-0 dark:text-white text-3xl"></div><p class="text-1xl md:block hidden text-black dark:text-white md:pl-2">Donate</p>
</div> </div>
</a> </a>
</div> </div>
@ -40,11 +40,26 @@
</div> </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}}
out:fly={{ duration: 300, y: 0, easing: quintOut}} out:fly={{ duration: 300, y: 0, easing: quintOut}}
class="md:mx-4 md:h-1/2 md:w-1 w-3/4 border-1 bg-black border-black rounded-md" 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) -->
<div class="i-gridicons-info text-4xl"></div><h2 class="text-4xl">About</h2> <div class="flex md:flex-col flex-row px-5 md:px-0 ">
</div> <div in:fly={{ delay: 300, duration: 300, x: -20, easing: quintOut}}
out:fly={{ delay: 50, duration: 250, y: 0, easing: quintOut}}
class="flex flex-row">
<a href="/about"><div class="flex flex-row"><div class="i-gridicons-info text-5xl md:text-4xl"></div><h2 class="md:pl-2 text-4xl hidden md:block">About</h2></div></a>
</div>
<div in:fly={{ delay: 350, duration: 300, x: -20, easing: quintOut}}
out:fly={{ delay: 100, duration: 200, y: 0, easing: quintOut}}
class="flex flex-row">
<a href="/projects"><div class="flex flex-row"><div class="i-octicon-project-16 text-5xl md:text-4xl"></div><h2 class="md:pl-2 text-4xl hidden md:block">Projects</h2></div></a>
</div>
<div in:fly={{ delay: 400, duration: 300, x: -20, easing: quintOut}}
out:fly={{ delay: 150, duration: 150, y: 0, easing: quintOut}}
class="flex flex-row">
<a href="/blog"><div class="flex flex-row"><div class="i-ph-book-bold text-5xl md:text-4xl"></div><h2 class="md:pl-2 text-4xl hidden md:block">Blog</h2></div></a>
</div>
</div>
</body> </body>

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

@ -3,26 +3,15 @@
import relativeTime from "dayjs/plugin/relativeTime"; import relativeTime from "dayjs/plugin/relativeTime";
// DayJS // DayJS
dayjs.extend(relativeTime); dayjs.extend(relativeTime);
let yr = dayjs('2004-15-07').fromNow(true); let yr = dayjs('2004-07-15').fromNow(true);
</script> </script>
<div class="min-h-screen"> <div class="min-h-screen">
<div class="mt-70px md:mt-100px flex place-content-center content-center place-items-center gap-3 rounded-2xl mx-7 md:mx-30 my-6 outline outline-offset-0 bg-blue-200 outline-blue-500 dark:outline-indigo-500 dark:bg-indigo-900/50"> <div class="justify-center flex flex-col items-center m-auto shrink overflow-hidden h-screen ">
<div class="flex flex-row gap-2 my-4"> <div class="text-xl pt-2 px-5 md:px-40 text-center md:text-left mb-50px text-black dark:text-white ">
<div class="i-zondicons-information-solid m-1 text-stone-700 dark:text-indigo-300 text-4xl"></div>
<h1 class="text-stone-700 dark:text-indigo-400 text-4xl">About</h1>
</div>
</div>
<div class="text-center content-center items-center flex flex-col md:inline-flex justify-center place-items-center md:text-left">
<div class="flex flex-row gap-3 md:pl-30">
<div class="i-mdi-head-question-outline text-black dark:text-white text-5xl">Head</div>
<h2 class="text-5xl text-black dark:text-white ">Who i am</h2>
</div>
</div>
<div class="text-xl pt-2 px-5 md:px-40 md:text-left mb-50px text-black dark:text-white ">
<p>I'm a passionate programmer who has nothing to do with his life other than to just live in front of a computer and that's it. <p>I'm a passionate programmer who has nothing to do with his life other than to just live in front of a computer and that's it.
However i also have other passions and such. However i also have other passions and such.
Well this is just temporary, don't really expect me to add something useful in it. Well this is just temporary, don't really expect me to add something useful in it.
@ -31,7 +20,7 @@
Hey are you listening? This is serious. No i really mean it's actually serious. Hey are you listening? This is serious. No i really mean it's actually serious.
I'm trying to extend this enough to see if it works or not, because for some reason HTML loves stopping at a point without styling the BG. I'm trying to extend this enough to see if it works or not, because for some reason HTML loves stopping at a point without styling the BG.
Anyway how's it going? Lore ipsum bullshit yadda yadda yadda. Did you know that project + is actually nice? No? Too bad. Anyway how's it going? Lore ipsum bullshit yadda yadda yadda. Did you know that project + is actually nice? No? Too bad.
</p> </p>
</div> </div>
</div>
</div> </div>

6
src/routes/donate/+page.svelte
View File

@ -10,16 +10,16 @@
<h1 class="text-black dark:text-white text-4xl">Donate</h1> <h1 class="text-black dark:text-white text-4xl">Donate</h1>
<p class="text-black dark:text-white pb-5" style="">Thanks a lot!</p> <p class="text-black dark:text-white pb-5" style="">Thanks a lot!</p>
</div> </div>
<hr transition:fly={{ duration: 300, x: 0, easing: quintOut}} class="border-black w-1/6"/> <hr transition:fly={{ duration: 300, x: 0, easing: quintOut}} class="border-black dark:border-white w-1/6"/>
<div in:fly={{ delay: 300, duration: 300, x: -50, easing: quintOut}} 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}} >
<a href="https://github.com/sponsors/midou36o"> <a href="https://github.com/sponsors/midou36o">
<div class="flex flex-row pt-5"> <div class="flex flex-row pt-5">
<div class="i-carbon-logo-github text-black text-2xl"></div><p class="text-1xl text-black pl-2">GitHub Sponsors</p> <div class="i-carbon-logo-github dark:text-white text-black text-2xl"></div><p class="text-1xl text-black dark:text-white pl-2">GitHub Sponsors</p>
</div> </div>
</a> </a>
<a href="/donate/monero"> <a href="/donate/monero">
<div class="flex flex-row"> <div class="flex flex-row">
<div class="i-tabler-coin-monero pl-3 text-black text-2xl"></div><p class="text-1xl text-black pl-2">Monero</p> <div class="i-tabler-coin-monero pl-3 text-black dark:text-white text-2xl"></div><p class="text-1xl text-black dark:text-white pl-2">Monero</p>
</div> </div>
</a> </a>
</div> </div>

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

@ -16,10 +16,12 @@
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>
<p class="md:hidden block text-gray-500"> I fucking hate css </p>
<!-- 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: 300, y: 0, easing: quintOut}}
class="md:h-1/2 md:w-1 w-3/4 border-1 bg-black border-black rounded-md" 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>
<div <div
in:fly={{ delay: 300, duration: 300, y: 50, easing: quintOut}} in:fly={{ delay: 300, duration: 300, y: 50, easing: quintOut}}
@ -31,5 +33,5 @@
<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><code class="break-all">44UzWvWS9wELmqPXzLqiPphXVYBbsjkbC7r4RwCSoXC4UyzC2NbPEoPEjxZsGVfbSPbAHUGtpc8GUYUZ8fdu1a4bNAyBPDe</code></p>
</div> </div>
</div> </div>
</body> </body>

111
unocss.config.ts
View File

@ -6,9 +6,9 @@ import {
transformerDirectives, transformerDirectives,
presetWind, presetWind,
presetWebFonts presetWebFonts
} from "unocss"; } from 'unocss';
import { extractorSvelte } from "unocss"; import { extractorSvelte } from 'unocss';
export default defineConfig({ export default defineConfig({
extractors: [extractorSvelte], extractors: [extractorSvelte],
@ -17,114 +17,53 @@ export default defineConfig({
presetIcons(), presetIcons(),
presetTypography({ presetTypography({
cssExtend: { cssExtend: {
"h1,h2,h3,h4,h5,h6": { 'h1,h2,h3,h4,h5,h6': {
"font-weight": "800" 'font-weight': '800'
} }
} }
}), }),
presetWind({ presetWind({
dark: "class" /* dark: "class" */
/* use dark: "class" when adding manual JS*/ /* use dark: "class" when adding manual JS*/
}), }),
presetWebFonts({ presetWebFonts({
provider: 'bunny', provider: 'bunny',
fonts: { fonts: {
sans: ['Outfit', 'Comic Sans MS'], sans: ['Outfit', 'Comic Sans MS'],
mono: ['Fira Code'], mono: ['Fira Code']
}
}
}) })
], ],
theme: { theme: {
fontFamily: { fontFamily: {
primary: ["var(--font-primary)"] primary: ['var(--font-primary)']
}, },
margin: { margin: {
"0-auto": "0 auto" '0-auto': '0 auto'
}, },
colors: { colors: {
accent: "var(--accent)", accent: 'var(--accent)',
accentTranslucent: "var(--accent-translucent)", accentTranslucent: 'var(--accent-translucent)',
primary: "var(--primary)", primary: 'var(--primary)',
secondary: "var(--secondary)", secondary: 'var(--secondary)',
tertiary: "var(--tertiary)", tertiary: 'var(--tertiary)',
text: "var(--text)", text: 'var(--text)',
grey: "var(--grey)", grey: 'var(--grey)',
alt: "var(--alt)", alt: 'var(--alt)',
altText: "var(--alt-text)" altText: 'var(--alt-text)'
}, },
breakpoints: { breakpoints: {
sm: "640px", sm: '640px',
md: "768px", md: '768px',
lg: "1024px", lg: '1024px',
xl: "1280px", xl: '1280px',
"2xl": "1536px", '2xl': '1536px',
nav: "1030px" nav: '1030px'
} }
}, },
transformers: [transformerVariantGroup(), transformerDirectives()], transformers: [transformerVariantGroup(), transformerDirectives()],
safelist: ["i-ic:outline-dark-mode", "i-ic:outline-light-mode"] safelist: ['i-ic:outline-dark-mode', 'i-ic:outline-light-mode']
}); });