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

commit before sleeping, removed most of the projects css style and actually centered the icons on the main page.

Browse Source
This commit is contained in:
Midou36O 2023-07-31 01:39:17 +01:00
parent b3068e23c6
commit 9c77f90c58
Signed by: midou
GPG Key ID: 1D134A95FE521A7A
4 changed files with 49 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/lib/style.css
View File

@ -10,29 +10,26 @@ html {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
#backdesk { #backdesk {
height: 100%; height: 100%;
object-fit: fill; object-fit: fill;
overflow: hidden; overflow: hidden;
animation: rainbow 20s steps(120) infinite; animation: rainbow 20s steps(120) infinite;
} }
#backmob { #backmob {
display:none; display: none;
} }
@keyframes rainbow { @keyframes rainbow {
from { filter:hue-rotate(10deg); } from {
to { filter:hue-rotate(360deg); } filter: hue-rotate(10deg);
} }
to {
filter: hue-rotate(360deg);
}
}
.bio-and-projects { .bio-and-projects {
text-align: center;
position: fixed;
left: 5px; left: 5px;
width: 100%; width: 100%;
} }
@ -43,7 +40,7 @@ html {
} }
.bg { .bg {
background-image: url(/Images/BG_FHD_darker_mb.png); background-image: url(/Images/BG_FHD_darker_mb.png);
} }
body { body {
@ -93,7 +90,6 @@ body {
width: 125px; width: 125px;
} }
.middle { .middle {
text-align: center; text-align: center;
top: 50%; top: 50%;
@ -104,14 +100,6 @@ a {
text-decoration: none; text-decoration: none;
} }
.middle-bottom { .middle-bottom {
height: 200px; height: 200px;
width: 400px; width: 400px;
@ -131,9 +119,6 @@ img {
text-align: center; text-align: center;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
html { html {
--primary: #151515; --primary: #151515;

30
src/routes/+page.svelte
View File

@ -14,25 +14,25 @@
<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 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" > <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" >
<a href="{data.github}{data.gh}"> <a href="{data.github}{data.gh}">
<div class="flex flex-row py-1"> <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 text-black dark:text-white px-2 md:px-0 my-auto text-3xl"></div><p class="text-2xl md:block hidden dark:text-white text-black md:pl-2">GitHub</p> <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>
</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 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 text-black dark:text-white px-2 my-auto md:px-0 text-3xl"></div><p class="text-2xl md:block hidden dark:text-white text-black md:pl-2">Matrix</p> <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>
</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 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 text-black dark:text-white px-2 md:px-0 my-auto text-3xl"></div><p class="text-2xl md:block hidden text-black dark:text-white md:pl-2">Mail</p> <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>
</div> </div>
</a> </a>
<a href="/donate"> <a href="/donate">
<div class="flex flex-row py-1"> <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 text-black px-2 md:px-0 dark:text-white my-auto text-3xl"></div><p class="text-2xl md:block hidden text-black dark:text-white md:pl-2">Donate</p> <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>
</div> </div>
</a> </a>
</div> </div>
@ -45,20 +45,20 @@
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) -->
<div class="flex md:flex-col flex-row px-5 md:px-0"> <div class="flex md:flex-col flex-row gap-2 md:gap-0 mx-5 md:mx-0">
<div in:fly={{ delay: 300, duration: 300, x: -20, easing: quintOut}} <div in:fly={{ delay: 300, duration: 300, x: -20, easing: quintOut}}
out:fly={{ delay: 50, duration: 250, y: 0, easing: quintOut}} out:fly={{ delay: 50, duration: 250, y: 0, easing: quintOut}}
class="flex flex-row rounded md:m-3 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400"> class="flex flex-row rounded md:p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400">
<a href="/about"><div class="flex flex-row"><div class="i-gridicons-info text-5xl md:text-4xl align-middle my-auto"/><h2 class="md:pl-2 text-4xl hidden md:block">About</h2></div></a> <a href="/about" data-sveltekit-preload-code><div class="flex flex-row"><div class="i-gridicons-info text-5xl md:text-4xl align-middle my-auto"/><h2 class="md:pl-2 text-4xl hidden md:block">About</h2></div></a>
</div> </div>
<div in:fly={{ delay: 350, duration: 300, x: -20, easing: quintOut}} <div in:fly={{ delay: 350, duration: 300, x: -20, easing: quintOut}}
out:fly={{ delay: 100, duration: 200, y: 0, easing: quintOut}} out:fly={{ delay: 100, duration: 200, y: 0, easing: quintOut}}
class="flex flex-row rounded md:m-3 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400"> class="flex flex-row rounded md:p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400">
<a href="/projects"><div class="flex flex-row"><div class="i-octicon-project-16 text-5xl md:text-4xl my-auto"/><h2 class="md:pl-2 text-4xl hidden md:block">Projects</h2></div></a> <a href="/projects" data-sveltekit-preload-code><div class="flex flex-row"><div class="i-octicon-project-16 text-5xl md:text-4xl my-auto"/><h2 class="md:pl-2 text-4xl hidden md:block">Projects</h2></div></a>
</div> </div>
<div in:fly={{ delay: 400, duration: 300, x: -20, easing: quintOut}} <div in:fly={{ delay: 400, duration: 300, x: -20, easing: quintOut}}
out:fly={{ delay: 150, duration: 150, y: 0, easing: quintOut}} out:fly={{ delay: 150, duration: 150, y: 0, easing: quintOut}}
class="flex flex-row rounded md:m-3 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400"> class="flex flex-row rounded md:p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400">
<a href="/blog"><div class="flex flex-row"><div class="i-ph-book-bold text-5xl md:text-4xl my-auto"/><h2 class="md:pl-2 text-4xl hidden md:block">Blog</h2></div></a> <a href="/blog"><div class="flex flex-row"><div class="i-ph-book-bold text-5xl md:text-4xl my-auto"/><h2 class="md:pl-2 text-4xl hidden md:block">Blog</h2></div></a>
</div> </div>
</div> </div>

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

@ -3,27 +3,24 @@
import { quintOut } from 'svelte/easing'; import { quintOut } from 'svelte/easing';
</script> </script>
<body class="dark:bg-black bg-gray-300 font-sans" id="content">
<div class="text-center"> <div 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 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">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 dark:border-white 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 mt-5 md:dark:hover:bg-white p-1 md:dark:hover:text-black md:hover:bg-gray-400 rounded">
<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 class="i-carbon-logo-github my-auto text-3xl"></div><p class="text-2xl 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 md:dark:hover:bg-white p-1 md:dark:hover:text-black md:hover:bg-gray-400 rounded">
<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 class="i-tabler-coin-monero pl-3 my-auto text-3xl"></div><p class="text-2xl pl-2">Monero</p>
</div> </div>
</a> </a>
</div> </div>
</div> </div>
</div> </div>
</body>

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

@ -1,18 +1,20 @@
<script> <script>
import proj from '$lib/project.json'; import proj from '$lib/project.json';
</script> </script>
<div class="mb-50px md:mb-0 min-h-screen justify-center grid md:grid-rows-3 xl:grid-cols-2 place-items-center md:my-4 gap-3 mx-4 grid-cols-1"> <div class="min-h-screen justify-center gap-1 flex flex-col place-items-center">
{#each proj as { name, date, desc, url, image, imdes }} {#each proj as { name, date, desc, url, image, imdes }}
<div class="dark:bg-slate-400 bg-slate-600 dark:text-white text-black rounded-lg w-[100-40] md:max-w-xl"> <div class="flex flex-col bg-gray-800">
<div class="md:flex"> <div class="my-auto">
<div class="md:shrink-0"> <div class="flex flex-row">
<img class="md:rounded-l-lg md:rounded-none rounded-lg md:h-50 md:w-45 w-screen object-cover h-48" src="{image}" alt="{imdes}"> <div class="flex flex-col">
</div> <h3 class="text-3xl dark:text-white text-black text-center">{name}</h3>
<div class="pb-20 pt-5 px-8 md:rounded-lg rounded-b-lg dark:text-white text-black dark:bg-slate-7 bg-slate-200 md:h-50"> <p class="text-sm dark:text-white text-black text-center">{date}</p>
<div><h3 class="text-3xl dark:text-white text-black text-center">{name}</h3></div> <p class="dark:text-white text-black text-sm">{desc}</p>
<div class="text-sm dark:text-white text-black text-center">{date}</div> </div>
<div><p class="dark:text-white text-black text-sm">{desc}</p></div> <div class="h-10% w-50 overflow-hidden">
<div><a class="text-xl bg-sky-5 hover:bg-sky-4 hover:text-white text-white outline-0 hover:shadow-md duration-300 shadow-sky-4/50 px-4 py-1 justify-end m-4 rounded-full float-right" href="{url}">Check it out</a></div> <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>
</div> </div>
</div> </div>
</div> </div>