Svelte-add

2024-11-22 22:22:58 +05:30 · 2023-01-19 18:05:09 +01:00 · 2023-01-19 18:05:09 +01:00 · 47a9994c87
commit 47a9994c87
parent 40979faa8e
27 changed files with 514 additions and 0 deletions
--- a/package.json
+++ b/package.json
@ -0,0 +1,34 @@
+{
+	"name": "src",
+	"version": "0.0.1",
+	"private": true,
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --plugin-search-dir . --check . && eslint .",
+		"format": "prettier --plugin-search-dir . --write ."
+	},
+	"devDependencies": {
+		"@iconify/json": "^2.2.8",
+		"@sveltejs/adapter-auto": "^1.0.0",
+		"@sveltejs/kit": "^1.0.0",
+		"@typescript-eslint/eslint-plugin": "^5.45.0",
+		"@typescript-eslint/parser": "^5.45.0",
+		"@unocss/preset-icons": "^0.48.4",
+		"eslint": "^8.28.0",
+		"eslint-config-prettier": "^8.5.0",
+		"eslint-plugin-svelte3": "^4.0.0",
+		"prettier": "^2.8.0",
+		"prettier-plugin-svelte": "^2.8.1",
+		"svelte": "^3.54.0",
+		"svelte-check": "^3.0.1",
+		"tslib": "^2.4.1",
+		"typescript": "^4.9.3",
+		"unocss": "^0.48.4",
+		"vite": "^4.0.0"
+	},
+	"type": "module"
+}
--- a/src/app.d.ts
+++ b/src/app.d.ts
@ -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 {};
--- a/src/app.html
+++ b/src/app.html
@ -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>
--- a/src/lib/data.json
+++ b/src/lib/data.json
@ -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/"
+}
--- a/src/lib/style.css
+++ b/src/lib/style.css
@ -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;
+	}
+}
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -0,0 +1,8 @@
+<script>
+    import "uno.css";
+    import "$lib/style.css";
+</script>
+    
+<main>
+   <slot />
+</main>
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -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>
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@ -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>
--- a/src/routes/projects/+page.svelte
+++ b/src/routes/projects/+page.svelte
@ -0,0 +1 @@
+<p>When the page is sus</p>
--- a/static/favicon.png
+++ b/static/favicon.png
--- a/static/images/BG_FHD.png
+++ b/static/images/BG_FHD.png
--- a/static/images/BG_FHD_darker.png
+++ b/static/images/BG_FHD_darker.png
--- a/static/images/BG_FHD_darker_mb.png
+++ b/static/images/BG_FHD_darker_mb.png
--- a/static/images/BG_MAX.png
+++ b/static/images/BG_MAX.png
--- a/static/images/OpenGraph.jpg
+++ b/static/images/OpenGraph.jpg
--- a/static/images/OpenGraph.png
+++ b/static/images/OpenGraph.png
--- a/static/images/OpenGraphNoTxt.png
+++ b/static/images/OpenGraphNoTxt.png
--- a/static/images/banner.png
+++ b/static/images/banner.png
--- a/static/images/donate.svg
+++ b/static/images/donate.svg
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve" style="fill:#fff">
+<g><g transform="translate(0.000000,511.000000) scale(0.100000,-0.100000)"><path d="M2768.9,4045.4l-59.7-50.1V2328c1.9-1765.5-1.9-1703.8,90.5-1752c30.8-17.3,897.2-23.1,3452-23.1h3411.6l55.8,55.8l55.8,55.8v1659.6v1659.6l-55.8,55.8l-55.8,55.8H6245.9H2828.5L2768.9,4045.4z M8777.6,3654.5c26.9-267.6,283-523.7,560.2-558.3l100.1-11.6v-760.5v-760.5l-100.1-13.5c-286.9-42.3-527.5-283-562.2-564.1l-11.5-96.3H6242H3719.9l-13.5,90.5c-40.4,288.8-277.2,529.4-558.3,569.9l-102,13.5v760.5v760.5l104,13.5c146.3,21.2,319.6,119.4,408.2,231c78.9,102,152.1,273.4,152.1,361.9v57.8h2529.8H8768L8777.6,3654.5z"/><path d="M6101.5,3556.3c-346.5-73.2-650.8-417.8-756.6-856.7c-52-225.3-53.9-523.7,0-748.9c113.6-473.6,413.9-797.1,799-864.4c319.6-53.9,675.8,161.7,864.4,521.7c127.1,244.5,157.9,379.3,157.9,716.2c0,335-30.8,471.7-155.9,714.3C6811.9,3415.8,6442.3,3627.6,6101.5,3556.3z M6367.2,3155.9c9.6-100.1,11.5-104,82.8-129c119.3-40.4,221.4-119.4,263.7-202.2l40.4-77l-52-19.3c-27-11.6-86.6-28.9-132.9-40.4c-75.1-19.3-88.6-17.3-140.5,21.2c-161.7,119.4-458.2,30.8-419.7-125.1c17.3-65.5,92.4-98.2,259.9-113.6c310-27,502.5-196.4,502.5-442.8c0-175.2-134.8-354.2-302.3-402.4l-92.4-27l-9.6-104l-9.6-104H6242h-115.5l-9.6,104c-9.6,104-9.6,104-92.4,127.1c-44.3,13.5-111.7,48.1-146.3,75.1c-73.2,55.8-154,175.2-138.6,202.2c5.8,9.6,67.4,32.7,136.7,50.1c125.1,34.6,127.1,34.6,171.4-7.7c92.4-86.6,344.6-69.3,410.1,28.9c25,38.5,25,55.8,5.8,102c-27,67.4-82.8,90.5-248.4,105.9c-175.2,15.4-259.9,46.2-350.4,125.1c-258,219.5-169.4,625.7,155.9,722c84.7,25,86.6,27,92.4,109.7c7.7,132.8,9.6,134.8,132.9,129l111.6-5.8L6367.2,3155.9z"/><path d="M4145.4,2701.5c-213.7-78.9-319.6-336.9-225.3-541c121.3-263.8,450.5-321.5,650.7-113.6c181,186.7,148.2,471.7-69.3,616.1C4409.2,2722.7,4253.2,2740,4145.4,2701.5z"/><path d="M8053.7,2699.6c-281.1-100.1-350.4-477.5-121.3-677.7c90.5-78.9,188.7-109.7,306.1-96.3c121.3,15.4,200.2,61.6,279.2,163.6C8754.5,2401.2,8427.2,2832.4,8053.7,2699.6z"/><path d="M2792-180.6c-163.6-19.2-400.4-94.3-527.5-167.5c-204.1-119.4-2154.4-1478.6-2164-1511.3c-9.6-23.1,130.9-240.7,481.3-750.9c273.4-392.8,508.3-725.8,525.6-739.3c36.6-30.8,38.5-30.8,452.4,258c198.3,138.6,383.1,254.1,442.8,273.4c140.6,48.1,294.6,63.5,412,42.3c53.9-11.5,747-258,1540.2-550.6c864.4-319.6,1478.6-537.2,1538.3-542.9c209.8-23.1,161.7-52,2264.1,1401.6c1072.4,743.2,1969.5,1366.9,1990.7,1388.1c23.1,19.2,65.5,80.9,96.3,136.7c48.1,86.6,55.8,121.3,55.8,244.5c-1.9,231-107.8,394.7-315.8,487.1c-98.2,42.4-265.7,50.1-371.6,15.4c-38.5-13.5-614.2-400.4-1280.3-860.6l-1209.1-837.5l5.8-129c13.5-256.1-71.3-464-258-639.2c-169.4-155.9-285-200.2-541-202.1h-196.4l-1016.5,510.2c-887.5,444.7-1018.5,516-1033.9,564.1c-23.1,65.5,34.6,156,109.7,163.6c34.7,3.9,342.7-140.5,1018.5-481.3c958.8-481.3,970.3-487.1,1105.1-492.9c211.8-11.6,375.4,77,485.2,263.8c46.2,77,52,107.8,52,252.2c0,142.5-5.8,175.2-52,250.3c-27,48.1-75.1,109.7-105.9,138.6c-28.9,28.9-673.8,363.9-1432.4,745.1C3404.2-215.2,3354.1-192.1,3055.7-172.9C2986.4-169,2867.1-172.9,2792-180.6z" style="fill:#fff"/></g></g>
+</svg>
--- a/static/images/email.svg
+++ b/static/images/email.svg
@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Mail.Ru icon</title><path d="M15.61 12c0 1.99-1.62 3.61-3.61 3.61-1.99 0-3.61-1.62-3.61-3.61 0-1.99 1.62-3.61 3.61-3.61 1.99 0 3.61 1.62 3.61 3.61M12 0C5.383 0 0 5.383 0 12s5.383 12 12 12c2.424 0 4.761-.722 6.76-2.087l.034-.024-1.617-1.879-.027.017A9.494 9.494 0 0 1 12 21.54c-5.26 0-9.54-4.28-9.54-9.54 0-5.26 4.28-9.54 9.54-9.54 5.26 0 9.54 4.28 9.54 9.54a9.63 9.63 0 0 1-.225 2.05c-.301 1.239-1.169 1.618-1.82 1.568-.654-.053-1.42-.52-1.426-1.661V12A6.076 6.076 0 0 0 12 5.93 6.076 6.076 0 0 0 5.93 12 6.076 6.076 0 0 0 12 18.07a6.02 6.02 0 0 0 4.3-1.792 3.9 3.9 0 0 0 3.32 1.805c.874 0 1.74-.292 2.437-.821.719-.547 1.256-1.336 1.553-2.285.047-.154.135-.504.135-.507l.002-.013c.175-.76.253-1.52.253-2.457 0-6.617-5.383-12-12-12" style="fill:#FFFFFF"/></svg>
--- a/static/images/github.svg
+++ b/static/images/github.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24"><title>GitHub icon</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" style="fill:#fff"/></svg>
--- a/static/images/matrix.svg
+++ b/static/images/matrix.svg
@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" viewBox="0 0 27.9 32" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+ <title>Matrix (protocol) logo</title>
+ <g transform="translate(-.095 .005)" fill="#FFFFFF">
+  <path d="m27.1 31.2v-30.5h-2.19v-0.732h3.04v32h-3.04v-0.732z"/>
+  <path d="m8.23 10.4v1.54h0.044c0.385-0.564 0.893-1.03 1.49-1.37 0.58-0.323 1.25-0.485 1.99-0.485 0.72 0 1.38 0.14 1.97 0.42 0.595 0.279 1.05 0.771 1.36 1.48 0.338-0.5 0.796-0.941 1.38-1.32 0.58-0.383 1.27-0.574 2.06-0.574 0.602 0 1.16 0.074 1.67 0.22 0.514 0.148 0.954 0.383 1.32 0.707 0.366 0.323 0.653 0.746 0.859 1.27 0.205 0.522 0.308 1.15 0.308 1.89v7.63h-3.13v-6.46c0-0.383-0.015-0.743-0.044-1.08-0.0209-0.307-0.103-0.607-0.242-0.882-0.133-0.251-0.336-0.458-0.584-0.596-0.257-0.146-0.606-0.22-1.05-0.22-0.44 0-0.796 0.085-1.07 0.253-0.272 0.17-0.485 0.39-0.639 0.662-0.159 0.287-0.264 0.602-0.308 0.927-0.052 0.347-0.078 0.697-0.078 1.05v6.35h-3.13v-6.4c0-0.338-7e-3 -0.673-0.021-1-0.0114-0.314-0.0749-0.623-0.188-0.916-0.108-0.277-0.3-0.512-0.55-0.673-0.258-0.168-0.636-0.253-1.14-0.253-0.198 0.0083-0.394 0.042-0.584 0.1-0.258 0.0745-0.498 0.202-0.705 0.374-0.228 0.184-0.422 0.449-0.584 0.794-0.161 0.346-0.242 0.798-0.242 1.36v6.62h-3.13v-11.4z"/>
+  <path d="m0.936 0.732v30.5h2.19v0.732h-3.04v-32h3.03v0.732z"/>
+ </g>
+</svg>
--- a/static/images/small_banner.png
+++ b/static/images/small_banner.png
--- a/svelte.config.js
+++ b/svelte.config.js
@ -0,0 +1,15 @@
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/kit/vite';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
+
+	kit: {
+		adapter: adapter()
+	}
+};
+
+export default config;
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,17 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true
+	}
+	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}
--- a/unocss.config.ts
+++ b/unocss.config.ts
@ -0,0 +1,120 @@
+import {
+	defineConfig,
+	presetIcons,
+	presetTypography,
+	transformerVariantGroup,
+	transformerDirectives,
+	presetWind
+} from "unocss";
+
+import { extractorSvelte } from "unocss";
+
+export default defineConfig({
+	extractors: [extractorSvelte],
+
+	presets: [
+		presetIcons(),
+		presetTypography({
+			cssExtend: {
+				"h1,h2,h3,h4,h5,h6": {
+					"font-weight": "800"
+				}
+			}
+		}),
+		presetWind({
+			dark: "class"
+		})
+	],
+
+	theme: {
+		fontFamily: {
+			primary: ["var(--font-primary)"]
+		},
+		margin: {
+			"0-auto": "0 auto"
+		},
+		colors: {
+			accent: "var(--accent)",
+			accentTranslucent: "var(--accent-translucent)",
+			primary: "var(--primary)",
+			secondary: "var(--secondary)",
+			tertiary: "var(--tertiary)",
+			text: "var(--text)",
+			grey: "var(--grey)",
+			alt: "var(--alt)",
+			altText: "var(--alt-text)"
+		},
+		breakpoints: {
+			sm: "640px",
+			md: "768px",
+			lg: "1024px",
+			xl: "1280px",
+			"2xl": "1536px",
+			nav: "1030px"
+		}
+	},
+
+	transformers: [transformerVariantGroup(), transformerDirectives()],
+
+	safelist: ["i-ic:outline-dark-mode", "i-ic:outline-light-mode"]
+});
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,22 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import type { UserConfig } from 'vite';
+import UnoCSS from 'unocss/vite';
+import presetIcons from '@unocss/preset-icons';
+
+const config: UserConfig = {
+	plugins: [sveltekit(), UnoCSS(
+		{
+			shortcuts: {
+				// Shortcuts go here: Format: " class : "unocss" "
+				sm: "640px"
+			},
+			rules : [
+				['m-1', {margin : '0.25 em' }],
+			]
+		}
+	),
+	
+]
+};
+
+export default config;
				`@ -0,0 +1 @@`
				<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Mail.Ru icon</title><path d="M15.61 12c0 1.99-1.62 3.61-3.61 3.61-1.99 0-3.61-1.62-3.61-3.61 0-1.99 1.62-3.61 3.61-3.61 1.99 0 3.61 1.62 3.61 3.61M12 0C5.383 0 0 5.383 0 12s5.383 12 12 12c2.424 0 4.761-.722 6.76-2.087l.034-.024-1.617-1.879-.027.017A9.494 9.494 0 0 1 12 21.54c-5.26 0-9.54-4.28-9.54-9.54 0-5.26 4.28-9.54 9.54-9.54 5.26 0 9.54 4.28 9.54 9.54a9.63 9.63 0 0 1-.225 2.05c-.301 1.239-1.169 1.618-1.82 1.568-.654-.053-1.42-.52-1.426-1.661V12A6.076 6.076 0 0 0 12 5.93 6.076 6.076 0 0 0 5.93 12 6.076 6.076 0 0 0 12 18.07a6.02 6.02 0 0 0 4.3-1.792 3.9 3.9 0 0 0 3.32 1.805c.874 0 1.74-.292 2.437-.821.719-.547 1.256-1.336 1.553-2.285.047-.154.135-.504.135-.507l.002-.013c.175-.76.253-1.52.253-2.457 0-6.617-5.383-12-12-12" style="fill:#FFFFFF"/></svg>
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24"><title>GitHub icon</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" style="fill:#fff"/></svg>