41 lines
2.2 KiB
Svelte
41 lines
2.2 KiB
Svelte
<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="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>
|
|
<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>
|