midou/midou36o.github.io
1
0
Fork 0
mirror of https://github.com/midou36o/midou36o.github.io synced 2025-05-15 06:29:38 +05:30
Code Actions Packages Projects Releases Activity

Commit at 4AM Coming right up

Browse Source
This commit is contained in:
Midou36O 2023-01-23 04:14:11 +01:00
parent cb3759c183
commit 8c4229fb07
Signed by: midou
GPG Key ID: 08063D5407090BC2
7 changed files with 39 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -18,6 +18,7 @@
"@typescript-eslint/eslint-plugin": "^5.45.0", "@typescript-eslint/eslint-plugin": "^5.45.0",
"@typescript-eslint/parser": "^5.45.0", "@typescript-eslint/parser": "^5.45.0",
"@unocss/preset-icons": "^0.48.4", "@unocss/preset-icons": "^0.48.4",
"@unocss/preset-web-fonts": "^0.48.4",
"eslint": "^8.28.0", "eslint": "^8.28.0",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.5.0",
"eslint-plugin-svelte3": "^4.0.0", "eslint-plugin-svelte3": "^4.0.0",

71
src/lib/style.css
View File

@ -1,5 +1,3 @@
@import url('https://fonts.googleapis.co/css2?family=Open+Sans&display=swap');
:root { :root {
--purple-color: #7a00ec; --purple-color: #7a00ec;
--brighter-purple-color: #9d41f3; --brighter-purple-color: #9d41f3;
@ -42,7 +40,6 @@ html {
.h1dance { .h1dance {
margin-top: 0; margin-top: 0;
margin: 0; margin: 0;
color: var(--brighter-purple-color);
} }
.bg { .bg {
@ -53,7 +50,6 @@ body {
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
height: 100%; height: 100%;
color: var(--brighter-purple-color);
margin: 0px; margin: 0px;
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@ -90,21 +86,15 @@ body {
border-radius: 50%; border-radius: 50%;
transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
margin-bottom: -20px; margin-bottom: -20px;
color: var(--purple-color);
filter:hue-rotate(0deg);
} }
#profilepicture:hover { #profilepicture:hover {
height: 125px; height: 125px;
width: 125px; width: 125px;
color: var(--glowish-yellow);
animation: rainbow 1s steps(36) infinite;
} }
.middle { .middle {
position: absolute;
transform: translate(-50%, -50%);
text-align: center; text-align: center;
top: 50%; top: 50%;
left: 50%; left: 50%;
@ -141,55 +131,18 @@ img {
text-align: center; text-align: center;
} }
@media only screen and (max-width: 600px) {
body {
font-size: calc(9px + 1vmin);
background-image: url('/images/BG_FHD_darker_mb.png');
}
.pfp-holder {
margin-top: -50%;
margin-left: 0%;
position: static;
}
img {
padding: 6px;
} @media (prefers-color-scheme: dark) {
} html {
--primary: #151515;
--secondary: #252525;
--tertiary: #353535;
--text: #ffffffde;
--grey: #5454547a;
#backmob { --alt: #333;
object-fit: fill; --alt-text: #ddd;
overflow: hidden; color-scheme: dark;
height: 100%;
animation: rainbow 20s steps(120) infinite;
}
.banner {
padding: 10px;
text-align: center;
background: #6e0000;
color: white;
font-size: 15px;
animation: fadeInOut linear 5s infinite;
}
.banner:hover {
animation: none;
}
@keyframes fadeInOut {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
} }
} }

2
src/routes/+layout.svelte
View File

@ -7,7 +7,7 @@
<style> <style>
</style> </style>
<main class="dark:bg-black bg-white"> <main class="dark:bg-black bg-gray-300">
<slot /> <slot />
</main> </main>

32
src/routes/+page.svelte
View File

@ -1,33 +1,23 @@
<script> <script>
import data from '$lib/data.json'; import data from '$lib/data.json';
import { blur, scale } from 'svelte/transition'; import Navi from '$lib/navi.svelte';
function LSDSim() {
console.log("hovered");
};
</script> </script>
<Navi/>
<body id="content"> <body class="dark:bg-black bg-gray-300 font-sans" id="content">
<div class="center"> <div class="center">
<img id="backdesk" src="/images/BG_FHD_darker.png" alt="" style="" in:blur="{{amount: 10, delay: 200, duration: 1000}}"/> <div class="justify-center flex items-center h-screen">
<div class="middle">
<div class="wrapper"> <div class="wrapper">
<img src="{data.avatar}45198486?v=4" title="Why are you hovering over everything?" alt="" id="profilepicture" on:mouseenter={LSDSim} in:blur="{{amount: 10}}"/> <div class="text-black dark:text-white"><h1>{data.name}</h1></div>
<div class="text-violet-500"><h1>{data.name}</h1></div> <div class="text-black dark:text-white"><p id="para" style="margin-top: -15px;">{@html data.description}</p></div>
<div class=""><p id="para" style="margin-top: -15px; color:#fff;">{@html data.description}</p></div>
<div> <div>
<hr class="text-white" style="width:60%;text-align:center;color:#fff;border-color: #fff"/> <hr class="text-black bg-black dark:bg-white dark:text-white" style="width:60%;text-align:center;"/>
</div> </div>
<div class="justify-center flex flex-row items-center gap-3 text-3xl hover:text-yellow-500"> <div class="justify-center flex flex-row items-center gap-3 text-3xl hover:text-yellow-500">
<div><a class="text-white i-carbon-logo-github" href="{data.github}{data.gh} " title="Midou's GitHub" >G</a></div> <div><a class="text-black dark:text-white i-carbon-logo-github" href="{data.github}{data.gh} " title="Midou's GitHub" >G</a></div>
<div><a class="text-white i-simple-icons-matrix" href="{data.matrix}{data.mtx}"title="Midou's Matrix">M</a></div> <div><a class="text-black dark:text-white i-simple-icons-matrix" href="{data.matrix}{data.mtx}"title="Midou's Matrix">M</a></div>
<div><a class="text-white i-mdi-at" href="mailto:{data.mail}" title="Midou's E-Mail">M</a></div> <div><a class="text-black dark:text-white i-mdi-at" href="mailto:{data.mail}" title="Midou's E-Mail">M</a></div>
<div><a class="text-white i-ph-currency-circle-dollar-bold text-4xl" href="{data.github}sponsors/{data.donate}" title="Donate to Midou.">D</a></div> <div><a class="text-black dark:text-white i-ph-currency-circle-dollar-bold text-4xl" href="{data.github}sponsors/{data.donate}" title="Donate to Midou.">D</a></div>
</div> </div>
<hr style="width:10%; height: 100; border: solid 0.5px; color:rgb(73, 81, 88);border-color: rgb(73, 81, 88);"/>
<div class="bio-and-projects">
<a id="bplink" href="/about" title="Midou's Bio" style="color:rgb(216, 213, 15);">Bio</a> | <a id="plink" href="/projects" title="Midou's Projects" style="color:rgb(216, 213, 15);">Projects</a>
</div>
<br>
</div> </div>
<br> <br>
</div> </div>

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

@ -5,8 +5,8 @@
<Navi/> <Navi/>
<div class="bg-fixed " style="background-image: url($static/images/BG_FHD_darker_mb.png)"> <div class="bg-fixed " style="background-image: url($static/images/BG_FHD_darker_mb.png)">
<div class="flex grid h-screen place-content-center content-center place-items-center gap-3 rounded-2xl m-10 bg-slate-900"> <div class="flex grid h-screen place-content-center content-center place-items-center gap-3 rounded-2xl mt-0 mx-3 outline outline-offset-1 bg-blue-200 outline-blue-500 dark:outline-indigo-500 dark:bg-indigo-900/50">
<div class="i-zondicons-information-solid text-stone-400 text-4xl" ></div> <div class="i-zondicons-information-solid text-stone-700 dark:text-stone-400 text-4xl" ></div>
<h1 class="text-stone-400 justify-center hover:text-stone" style="">h</h1> <h1 class="dark:text-stone-400 text-stone-700 justify-center hover:text-stone" style="">About</h1>
</div> </div>
</div> </div>

11
unocss.config.ts
View File

@ -4,7 +4,8 @@ import {
presetTypography, presetTypography,
transformerVariantGroup, transformerVariantGroup,
transformerDirectives, transformerDirectives,
presetWind presetWind,
presetWebFonts
} from "unocss"; } from "unocss";
import { extractorSvelte } from "unocss"; import { extractorSvelte } from "unocss";
@ -24,6 +25,14 @@ export default defineConfig({
presetWind({ presetWind({
dark: "class" dark: "class"
/* use dark: "class" when adding manual JS*/ /* use dark: "class" when adding manual JS*/
}),
presetWebFonts({
provider: 'bunny',
fonts: {
sans: 'Outfit',
mono: ['Fira Code'],
}
}) })
], ],

1
vite.config.ts
View File

@ -2,6 +2,7 @@ import { sveltekit } from '@sveltejs/kit/vite';
import type { UserConfig } from 'vite'; import type { UserConfig } from 'vite';
import UnoCSS from 'unocss/vite'; import UnoCSS from 'unocss/vite';
import presetIcons from '@unocss/preset-icons'; import presetIcons from '@unocss/preset-icons';
import presetWebFonts from '@unocss/preset-web-fonts'
const config: UserConfig = { const config: UserConfig = {
plugins: [sveltekit(), UnoCSS(), plugins: [sveltekit(), UnoCSS(),