Do not commit at 3am (gone wrong)

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

View File

@ -5,34 +5,34 @@
</script>
<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) -->
<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 class="justify-center flex flex-col items-center m-auto shrink overflow-hidden h-screen">
<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 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}} >
<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 w-100%"/>
<div in:fly={{ delay: 300, duration: 300, x: -50, easing: quintOut}} out:fly={{ duration: 300, x: 50, easing: quintOut}} >
<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 md:flex-col flex-row px-3 md:px-0" >
<a href="{data.github}{data.gh}">
<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>
</a>
<a href="{data.matrix}{data.mtx}">
<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>
</a>
<a href="mailto:{data.mail}">
<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>
</a>
<a href="/donate">
<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>
</a>
</div>
@ -40,11 +40,26 @@
</div>
<!-- vertical line -->
<div
in:fly={{ delay: 300, 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"
in:fly={{ delay: 300, duration: 300, y: 0, easing: quintOut}}
out:fly={{ duration: 300, 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) -->
<div class="i-gridicons-info text-4xl"></div><h2 class="text-4xl">About</h2>
</div>
<div class="flex md:flex-col flex-row px-5 md:px-0 ">
<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>

View File

@ -3,26 +3,15 @@
import relativeTime from "dayjs/plugin/relativeTime";
// DayJS
dayjs.extend(relativeTime);
let yr = dayjs('2004-15-07').fromNow(true);
let yr = dayjs('2004-07-15').fromNow(true);
</script>
<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="flex flex-row gap-2 my-4">
<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 ">
<div class="justify-center flex flex-col items-center m-auto shrink overflow-hidden h-screen ">
<div class="text-xl pt-2 px-5 md:px-40 text-center 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.
However i also have other passions and such.
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.
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.
</p>
</div>
</div>
</div>

View File

@ -10,16 +10,16 @@
<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>
</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}} >
<a href="https://github.com/sponsors/midou36o">
<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>
</a>
<a href="/donate/monero">
<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>
</a>
</div>

View File

@ -16,10 +16,12 @@
out:fly={{ duration: 300, y: 50, easing: quintOut}}
class="text-black dark:text-white text-4xl md:pr-2"
>Monero</h1>
<p class="md:hidden block text-gray-500"> I fucking hate css </p>
<!-- 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 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
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>
<p><code class="break-all">44UzWvWS9wELmqPXzLqiPphXVYBbsjkbC7r4RwCSoXC4UyzC2NbPEoPEjxZsGVfbSPbAHUGtpc8GUYUZ8fdu1a4bNAyBPDe</code></p>
</div>
</div>
</body>
</div>
</body>

View File

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