midou/midou36o.github.io
1
0
Fork 0
mirror of https://github.com/midou36o/midou36o.github.io synced 2025-02-20 06:17:33 +05:30
Code Actions Packages Projects Releases Activity

animations and new Nav and footer (stolen from segfault)

Browse Source
This commit is contained in:
Midou36O 2023-01-22 15:08:14 +01:00
parent d3b5a2577e
commit cb3759c183
Signed by: midou
GPG Key ID: 08063D5407090BC2
8 changed files with 32 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -25,6 +25,7 @@
"prettier-plugin-svelte": "^2.8.1", "prettier-plugin-svelte": "^2.8.1",
"svelte": "^3.54.0", "svelte": "^3.54.0",
"svelte-check": "^3.0.1", "svelte-check": "^3.0.1",
"svelte-dark-mode": "^2.1.0",
"tslib": "^2.4.1", "tslib": "^2.4.1",
"typescript": "^4.9.3", "typescript": "^4.9.3",
"unocss": "^0.48.4", "unocss": "^0.48.4",

18
src/lib/style.css
View File

@ -12,6 +12,10 @@ html {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
#backdesk { #backdesk {
height: 100%; height: 100%;
object-fit: fill; object-fit: fill;
@ -46,7 +50,6 @@ html {
} }
body { body {
background-color: rgb(0, 0, 0);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
height: 100%; height: 100%;
@ -108,17 +111,16 @@ body {
} }
a { a {
color: var(--glowish-yellow);
text-decoration: none; text-decoration: none;
} }
a:visited {
color: rgb(72, 115, 243);
}
a:hover {
color: crimson;
}
.middle-bottom { .middle-bottom {
height: 200px; height: 200px;

10
src/routes/+layout.svelte
View File

@ -1,8 +1,14 @@
<script> <script>
import "uno.css"; import "uno.css";
import "$lib/style.css"; import "$lib/style.css";
import Foote from "$lib/foote.svelte";
</script> </script>
<main> <style>
</style>
<main class="dark:bg-black bg-white">
<slot /> <slot />
</main> </main>
<Foote/>

7
src/routes/+page.svelte
View File

@ -3,22 +3,21 @@
import { blur, scale } from 'svelte/transition'; import { blur, scale } from 'svelte/transition';
function LSDSim() { function LSDSim() {
console.log("hovered"); console.log("hovered");
document.getElementById("back").style.filter = "animation: fadeIn";
}; };
</script> </script>
<body id="content"> <body id="content">
<div class="center"> <div class="center">
<img id="backdesk" src="/images/BG_FHD_darker.png" alt="" style="" transition:blur="{{amount: 10, delay: 200, duration: 1000}}"/> <img id="backdesk" src="/images/BG_FHD_darker.png" alt="" style="" in:blur="{{amount: 10, delay: 200, duration: 1000}}"/>
<div class="middle"> <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} transition:blur="{{amount: 10}}"/> <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-violet-500"><h1>{data.name}</h1></div> <div class="text-violet-500"><h1>{data.name}</h1></div>
<div class=""><p id="para" style="margin-top: -15px; color:#fff;">{@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-white" style="width:60%;text-align:center;color:#fff;border-color: #fff"/>
</div> </div>
<div class="justify-center flex flex-row items-center gap-3 text-3xl"> <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-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-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-white i-mdi-at" href="mailto:{data.mail}" title="Midou's E-Mail">M</a></div>

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

@ -1,10 +1,11 @@
<script> <script>
import {blur} from 'svelte/transition'; import {blur} from 'svelte/transition';
import Navi from '$lib/navi.svelte';
</script> </script>
<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 place-content-center place-items-center gap-3 rounded-2xl m-4 bg-slate-900"> <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="i-zondicons-information-solid text-stone-400 text-4xl" ></div> <div class="i-zondicons-information-solid text-stone-400 text-4xl" ></div>
<h1 class="text-stone-400 justify-center hover:text-stone" style="">h</h1> <h1 class="text-stone-400 justify-center hover:text-stone" style="">h</h1>
</div> </div>

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

@ -1 +1,5 @@
<script>
import Navi from '$lib/navi.svelte';
</script>
<Navi/>
<p>When the page is sus</p> <p>When the page is sus</p>

1
unocss.config.ts
View File

@ -23,6 +23,7 @@ export default defineConfig({
}), }),
presetWind({ presetWind({
dark: "class" dark: "class"
/* use dark: "class" when adding manual JS*/
}) })
], ],

13
vite.config.ts
View File

@ -4,17 +4,8 @@ import UnoCSS from 'unocss/vite';
import presetIcons from '@unocss/preset-icons'; import presetIcons from '@unocss/preset-icons';
const config: UserConfig = { const config: UserConfig = {
plugins: [sveltekit(), UnoCSS( plugins: [sveltekit(), UnoCSS(),
{ /* Self note: Don't add a config between the (), it just overrides the external config. */
shortcuts: {
// Shortcuts go here: Format: " class : "unocss" "
sm: "640px"
},
rules : [
['m-1', {margin : '0.25 em' }],
]
}
),
] ]
}; };