mirror of
https://github.com/midou36o/midou36o.github.io
synced 2025-06-04 00:41:01 +05:30
Svelte-add
This commit is contained in:
13
src/app.d.ts
vendored
Normal file
13
src/app.d.ts
vendored
Normal file
@@ -0,0 +1,13 @@
|
||||
// See https://kit.svelte.dev/docs/types#app
|
||||
// for information about these interfaces
|
||||
// and what to do when importing types
|
||||
declare global {
|
||||
namespace App {
|
||||
// interface Error {}
|
||||
// interface Locals {}
|
||||
// interface PageData {}
|
||||
// interface Platform {}
|
||||
}
|
||||
}
|
||||
|
||||
export {};
|
||||
12
src/app.html
Normal file
12
src/app.html
Normal file
@@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width initial-scale=1" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
11
src/lib/data.json
Normal file
11
src/lib/data.json
Normal file
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"name" : "Midou",
|
||||
"description" : "<strong>Developer</strong>, Not a good <strong>Artist</strong>, <strong>Sysadmin</strong>",
|
||||
"gh": "Midou36O",
|
||||
"donate": "Midou36O",
|
||||
"mtx": "@midou:projectsegfau.lt",
|
||||
"mail" : "midou@midou.dev",
|
||||
"github" : "https://github.com/",
|
||||
"matrix" : "https://matrix.to/#/",
|
||||
"avatar" : "https://avatars.githubusercontent.com/u/"
|
||||
}
|
||||
193
src/lib/style.css
Normal file
193
src/lib/style.css
Normal file
@@ -0,0 +1,193 @@
|
||||
@import url('https://fonts.googleapis.co/css2?family=Open+Sans&display=swap');
|
||||
|
||||
:root {
|
||||
--purple-color: #7a00ec;
|
||||
--brighter-purple-color: #9d41f3;
|
||||
--glowish-yellow: rgb(216, 213, 15);
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
#backdesk {
|
||||
height: 100%;
|
||||
object-fit: fill;
|
||||
overflow: hidden;
|
||||
animation: rainbow 20s steps(120) infinite;
|
||||
}
|
||||
#backmob {
|
||||
display:none;
|
||||
}
|
||||
|
||||
@keyframes rainbow {
|
||||
from { filter:hue-rotate(10deg); }
|
||||
to { filter:hue-rotate(360deg); }
|
||||
}
|
||||
|
||||
|
||||
.bio-and-projects {
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
left: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.h1dance {
|
||||
margin-top: 0;
|
||||
margin: 0;
|
||||
color: var(--brighter-purple-color);
|
||||
}
|
||||
|
||||
.bg {
|
||||
background-image: url(/Images/BG_FHD_darker_mb.png);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: rgb(0, 0, 0);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
height: 100%;
|
||||
color: var(--brighter-purple-color);
|
||||
margin: 0px;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.sociallink {
|
||||
color: white;
|
||||
animation-name: fadeIn;
|
||||
animation-duration: 3s;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
#profilepicture {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
transition: all 0.5s ease-in-out;
|
||||
margin-bottom: -20px;
|
||||
color: var(--purple-color);
|
||||
filter:hue-rotate(0deg);
|
||||
}
|
||||
|
||||
#profilepicture:hover {
|
||||
height: 125px;
|
||||
width: 125px;
|
||||
color: var(--glowish-yellow);
|
||||
animation: rainbow 1s steps(36) infinite;
|
||||
}
|
||||
|
||||
|
||||
.middle {
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--glowish-yellow);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: rgb(72, 115, 243);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: crimson;
|
||||
}
|
||||
|
||||
.middle-bottom {
|
||||
height: 200px;
|
||||
width: 400px;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: 7%;
|
||||
margin-left: -200px;
|
||||
}
|
||||
|
||||
img {
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.center {
|
||||
/* <center> tag is no longer needed and is considered useless/going to be deprecated???? so im just gonna center using css and div */
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#backmob {
|
||||
object-fit: fill;
|
||||
overflow: hidden;
|
||||
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;
|
||||
}
|
||||
}
|
||||
8
src/routes/+layout.svelte
Normal file
8
src/routes/+layout.svelte
Normal file
@@ -0,0 +1,8 @@
|
||||
<script>
|
||||
import "uno.css";
|
||||
import "$lib/style.css";
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
40
src/routes/+page.svelte
Normal file
40
src/routes/+page.svelte
Normal file
@@ -0,0 +1,40 @@
|
||||
<script>
|
||||
import data from '$lib/data.json';
|
||||
import { blur, scale } from 'svelte/transition';
|
||||
function LSDSim() {
|
||||
console.log("hovered");
|
||||
document.getElementById("back").style.filter = "animation: fadeIn";
|
||||
};
|
||||
</script>
|
||||
|
||||
<body id="content">
|
||||
<div class="center">
|
||||
<img id="backdesk" src="/images/BG_FHD_darker.png" alt="" style="" transition:blur="{{amount: 10, delay: 200, duration: 1000}}"/>
|
||||
<div class="middle">
|
||||
<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}}"/>
|
||||
<div class="h1dance"><h1>{data.name}</h1></div>
|
||||
<div class="paragraph-start"><p id="para" style="margin-top: -15px; color:#fff;">{@html data.description}</p></div>
|
||||
<div>
|
||||
<hr class="text-white" style="width:60%;text-align:center;color:#fff;border-color: #fff"/>
|
||||
</div>
|
||||
<div class="justify-center flex flex-row items-center gap-3 text-3xl">
|
||||
<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-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>
|
||||
<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>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
11
src/routes/about/+page.svelte
Normal file
11
src/routes/about/+page.svelte
Normal file
@@ -0,0 +1,11 @@
|
||||
<script>
|
||||
import {blur} from 'svelte/transition';
|
||||
</script>
|
||||
|
||||
|
||||
<div class="bg">
|
||||
<div class="flex place-items-center">
|
||||
<div class="i-icon-park-outline-attention " style=" width: 60px; height: 60px;"></div>
|
||||
<h1 class="text-indigo-700 justify-center hover:text-indigo-800" style="">h</h1>
|
||||
</div>
|
||||
</div>
|
||||
1
src/routes/projects/+page.svelte
Normal file
1
src/routes/projects/+page.svelte
Normal file
@@ -0,0 +1 @@
|
||||
<p>When the page is sus</p>
|
||||
Reference in New Issue
Block a user