rework this messy website partially

This commit is contained in:
Midou36O 2023-07-24 17:41:54 +01:00
parent 5e756dcc7b
commit 59ec4c73c5
Signed by: midou
GPG Key ID: 1D134A95FE521A7A
22 changed files with 298 additions and 52 deletions

13
.eslintignore Normal file
View File

@ -0,0 +1,13 @@
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example
# Ignore files for PNPM, NPM and YARN
pnpm-lock.yaml
package-lock.json
yarn.lock

20
.eslintrc.cjs Normal file
View File

@ -0,0 +1,20 @@
module.exports = {
root: true,
parser: '@typescript-eslint/parser',
extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
plugins: ['svelte3', '@typescript-eslint'],
ignorePatterns: ['*.cjs'],
overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
settings: {
'svelte3/typescript': () => require('typescript')
},
parserOptions: {
sourceType: 'module',
ecmaVersion: 2020
},
env: {
browser: true,
es2017: true,
node: true
}
};

11
.gitignore vendored Normal file
View File

@ -0,0 +1,11 @@
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example
vite.config.js.timestamp-*
vite.config.ts.timestamp-*
pnpm-lock.yaml

1
.npmrc Normal file
View File

@ -0,0 +1 @@
engine-strict=true

13
.prettierignore Normal file
View File

@ -0,0 +1,13 @@
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example
# Ignore files for PNPM, NPM and YARN
pnpm-lock.yaml
package-lock.json
yarn.lock

2
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,2 @@
{
}

View File

@ -12,30 +12,31 @@
"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",
"@unocss/preset-web-fonts": "^0.48.4",
"eslint": "^8.28.0",
"eslint-config-prettier": "^8.5.0",
"@iconify/json": "^2.2.27",
"@sveltejs/adapter-auto": "^1.0.3",
"@sveltejs/adapter-static": "^2.0.1",
"@sveltejs/kit": "^1.8.3",
"@typescript-eslint/eslint-plugin": "^5.53.0",
"@typescript-eslint/parser": "^5.53.0",
"@unocss/preset-icons": "^0.48.5",
"@unocss/preset-web-fonts": "^0.48.5",
"eslint": "^8.34.0",
"eslint-config-prettier": "^8.6.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",
"prettier": "^2.8.4",
"prettier-plugin-svelte": "^2.9.0",
"svelte": "^3.55.1",
"svelte-check": "^3.0.4",
"svelte-dark-mode": "^2.1.0",
"svelte-time": "^0.7.1",
"tslib": "^2.4.1",
"typescript": "^4.9.3",
"unocss": "^0.48.4",
"vite": "^4.0.0"
"tslib": "^2.5.0",
"typescript": "^4.9.5",
"unocss": "^0.48.5",
"vite": "^4.1.4"
},
"type": "module",
"dependencies": {
"@unocss/reset": "^0.48.4",
"@unocss/reset": "^0.48.5",
"dayjs": "^1.11.7"
}
}

View File

@ -0,0 +1,23 @@
<script lang="ts">
import { afterUpdate } from "svelte";
import DarkMode from "svelte-dark-mode";
let theme: "dark" | "light";
afterUpdate(() => {
document.documentElement.className = theme;
});
let toggle = () => {
theme = theme === "dark" ? "light" : "dark";
};
</script>
<DarkMode bind:theme />
<button
on:click={toggle}
class="cursor-pointer float-right flex items-center bg-transparent border-0 font-primary">
<div class="i-ic:{theme === 'dark' ? 'outline-light-mode' : 'outline-dark-mode'} text-black dark:text-white hover:text-blue-700 text-3xl md:text-4xl dark:hover:text-indigo-5" />
</button>

11
src/lib/foote.svelte Normal file
View File

@ -0,0 +1,11 @@
<script>
import { fly } from 'svelte/transition';
</script>
<footer class="flex dark:bg-black bg-gray-300 flex-col text-xl fixed bottom-0 w-screen">
<div
class="flex flex-col justify-center sm:flex-row text-black dark:text-white gap-1 border-t border-t-solid border-t-grey p-3 text-sm"
>
<span class="flex flex-row items-center gap-1">Made with <div class="i-simple-icons:svelte text-[#FF3E00]" />SvelteKit</span>
</div>
</footer>

41
src/lib/navi.svelte Normal file
View File

@ -0,0 +1,41 @@
<script lang="ts">
import ThemeToggle from '$lib/ThemeToggle.svelte';
import { fade, fly, slide } from 'svelte/transition';
// Menu
let showMenu = false;
function toggleNav() {
showMenu = !showMenu;
}
</script>
<hader>
<div class="dark:bg-gray-900 bg-neutral-100 shadow-md w-screen top-0 z-50">
<div class="flex grid">
<div>
<div class="flex flex-row">
<h1 class="mx-4 md:mt-3 hidden md:block"><a class="text-black dark:text-white visited:dark:text-white visited:text-black md:text-4xl " href="/"><strong>Home</strong></h1>
<ul class="flex md:flex-row flex-col md:flex md:gap-2 list-none md:justify-center md:place-content-center">
<div class="flex my-3 gap-3 md:flex-row">
<div class="ml-5 md:hidden flex text-4xl i-material-symbols-home-outline-rounded"><a href="/" class="text-black bg-black cursor-pointer dark:bg-white dark:text-white dark:hover:bg-indigo-5 hover:text-blue-700 hover:bg-blue-700 dark:hover:bg-indigo-5 dark:hover:text-indigo-5 ">Home</a></div>
<div class="md:hidden flex md:text-5xl text-4xl i-ic-round-menu">
<button class="text-black bg-black cursor-pointer dark:bg-white dark:text-white dark:hover:bg-indigo-5 dark:hover:text-indigo-5 hover:bg-blue-700 hover:text-blue-700 " on:click="{toggleNav}" >Menu</button>
</div>
</div>
<div class="md:flex-row md:flex {showMenu ? 'flex' : 'hidden'} flex-col md:place-content-center md:justify-center flex-1 ml-6 gap-3 md:gap-4">
<div><li class="{showMenu ? 'flex' : 'hidden'} md:mt-0 md:flex rounded-b-xl shrink place-items-center grid hover:md:bg-gray-100 hover:shadow-lg hover:pt-2 dark:hover:md:shadow-sky-500/50 dark:md:hover:bg-sky-600 hover:duration-100"><div class="md:hidden i-ri-information-line bg-black dark:bg-white text-3xl px-1"></div><a href="/about"class="text-black dark:text-white visited:text-black text-center pt-5 w-20 pb-2 dark:visited:text-white">About</a></li></div>
<div><li class="{showMenu ? 'flex' : 'hidden'} md:flex rounded-b-xl shrink place-items-center grid columns-3 hover:md:bg-gray-100 hover:shadow-lg hover:pt-2 dark:hover:md:shadow-sky-500/50 dark:md:hover:bg-sky-600 hover:duration-100"><div class="md:hidden i-mdi-briefcase-outline bg-black dark:bg-white text-3xl px-1"></div><a href="/projects" class="text-black dark:text-white visited:text-black text-center w-20 pb-2 pt-5 dark:visited:text-white">Projects</a></li></div>
<!--<div><li class="{showMenu ? 'flex' : 'hidden'} md:flex rounded-b-xl shrink place-items-center grid columns-3 hover:md:bg-gray-100 hover:shadow-lg hover:pt-2 dark:hover:md:shadow-sky-500/50 dark:md:hover:bg-sky-600 hover:duration-100 mb-2 md:mb-0 "><div class="md:hidden i-mingcute-pen-2-line bg-black dark:bg-white text-3xl px-1"></div><a href="/blog" class="text-black dark:text-white visited:text-black text-center w-20 pb-2 pt-5 dark:visited:text-white">Blog</a></li></div>-->
</div>
</ul>
</div>
</div>
<div class="flex-1 justify-center content-center float-right mr-6 my-4 h-7 w-7 md:my-5">
<ThemeToggle/>
</div>
</div>
</div>
</hader>

18
src/lib/project.json Normal file
View File

@ -0,0 +1,18 @@
[
{
"name" : "Project Segfault",
"date" : "Sometime in 2022",
"desc" : "Open source development and hosted services.",
"url" : "https://projectsegfau.lt",
"image" : "https://github.com/ProjectSegfault/Logo/raw/main/png/logo_semi_transparent.png",
"imdes" : ""
},
{
"name" : "Mario Kart Wii 3DS",
"date" : "Sometime in 2018",
"desc" : "A mod that aims to port mario kart wii tracks and functions to mario kart 3DS.",
"url" : "https://github.com/orgs/MKW3DS/repositories",
"image" : "https://github.com/Midou36O/MKW3DS-Launcher/raw/master/BootNTR/romfs/sprites/topBackground.png",
"imdes" : ""
}
]

View File

@ -3,13 +3,15 @@
import "$lib/style.css";
import Foote from "$lib/foote.svelte";
import "@unocss/reset/tailwind.css";
import Navi from "$lib/navi.svelte";
export const prerender = true;
</script>
<style>
</style>
<main class="dark:bg-black bg-gray-300">
<slot />
</main>
<Foote/>

View File

@ -1,22 +1,24 @@
<script>
import data from '$lib/data.json';
import Navi from '$lib/navi.svelte';
import { fly } from 'svelte/transition';
import { quintOut } from 'svelte/easing';
</script>
<Navi/>
<body class="dark:bg-black bg-gray-300 font-sans min-h-screen" id="content">
<body class="dark:bg-black bg-gray-300 text-black dark:text-white font-sans" id="content">
<div class="text-center">
<div class="justify-center flex items-center m-auto shrink overflow-hidden h-screen">
<div class="justify-center flex items-center m-auto shrink overflow-hidden h-screen ">
<div class="items-center justify-center">
<div class="text-black dark:text-white text-4xl"><h1>{data.name}</h1></div>
<div class="text-black dark:text-white my-3"><p id="" style="margin-top: -15px;">{@html data.description}</p></div>
<div>
<hr class="text-black bg-black dark:bg-white dark:text-white text-center justify-center m-auto my-2" style="width:60%;text-align:center;"/>
</div>
<div class="justify-center flex flex-row items-center gap-3 text-3xl hover:text-yellow-500">
<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-black dark: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-mdi-at" href="mailto:{data.mail}" title="Midou's E-Mail">M</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 in:fly={{ delay: 300, duration: 300, x: 50, easing: quintOut}} out:fly={{ duration: 400, x: -50, easing: quintOut}} >
<div class="text-4xl"><h1>{data.name}</h1></div>
<div class="my-3"><p id="" style="margin-top: -15px;">{@html data.description}</p></div>
</div>
<hr in:fly={{ delay: 300, duration: 300, x: 0, easing: quintOut}} out:fly={{ duration: 400, x: 0, easing: quintOut}} class="border-black dark:border-white w-100%"/>
<div in:fly={{ delay: 300, duration: 300, x: -50, easing: quintOut}} out:fly={{ duration: 400, x: 50, easing: quintOut}} >
<div class="justify-center flex flex-row items-center gap-3 text-3xl hover:text-black hover:dark:text-white">
<div><a class="i-carbon-logo-github" href="{data.github}{data.gh}" title="Midou's GitHub">G</a></div>
<div><a class="i-simple-icons-matrix" href="{data.matrix}{data.mtx}" title="Midou's Matrix">M</a></div>
<div><a class="i-mdi-at" href="mailto:{data.mail}" title="Midou's E-Mail">M</a></div>
<div><a class="i-ph-currency-circle-dollar-bold text-4xl" href="/donate" title="Donate to Midou.">D</a></div>
</div>
</div>
</div>
<br>

View File

@ -1,7 +1,4 @@
<script>
import {blur} from 'svelte/transition';
import Navi from '$lib/navi.svelte';
import Time from "svelte-time";
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
// DayJS
@ -12,9 +9,8 @@
</script>
<Navi/>
<div class="min-h-screen">
<div class="flex place-content-center content-center place-items-center gap-3 rounded-2xl mx-7 md:mx-30 my-6 outline outline-offset-0 bg-blue-200 outline-blue-500 dark:outline-indigo-500 dark:bg-indigo-900/50">
<div class="mt-70px md:mt-100px flex place-content-center content-center place-items-center gap-3 rounded-2xl mx-7 md:mx-30 my-6 outline outline-offset-0 bg-blue-200 outline-blue-500 dark:outline-indigo-500 dark:bg-indigo-900/50">
<div class="flex flex-row gap-2 my-4">
<div class="i-zondicons-information-solid m-1 text-stone-700 dark:text-indigo-300 text-4xl"></div>
<h1 class="text-stone-700 dark:text-indigo-400 text-4xl">About</h1>
@ -26,7 +22,7 @@
<h2 class="text-5xl text-black dark:text-white ">Who i am</h2>
</div>
</div>
<div class="text-xl pt-2 px-5 md:px-40 md:text-left text-black dark:text-white ">
<div class="text-xl pt-2 px-5 md:px-40 md:text-left mb-50px text-black dark:text-white ">
<p>I'm a passionate programmer who has nothing to do with his life other than to just live in front of a computer and that's it.
However i also have other passions and such.
Well this is just temporary, don't really expect me to add something useful in it.
@ -38,4 +34,4 @@
</p>
</div>
</div>
</div>

12
src/routes/blog/+page.js Normal file
View File

@ -0,0 +1,12 @@
export async function load( { data, fetch } ) {
const endpoint = "http://127.0.0.1:8055/items/Data";
const res = await fetch(endpoint);
const content = await res.json();
console.log(content.data);
return {
content: content
}
}

View File

@ -0,0 +1,25 @@
<script>
export let content;
const posts = { content };
console.log(content);
</script>
<div class="mt-70px md:mt-80px mb-50px md:mb-0 min-h-screen justify-center grid md:grid-rows-3 xl:grid-cols-2 place-items-center md:my-4 mt-4 gap-3 mx-4 grid-cols-1 ">
{#each content as data (data.id) }
<div class="dark:bg-slate-400 bg-slate-600 dark:text-white text-black rounded-lg w-[100-40] md:max-w-xl">
<div class="md:flex">
<div class="md:shrink-0">
<img class="md:rounded-l-lg md:rounded-none rounded-lg md:h-full md:w-45 w-screen object-cover h-48" src="{data.img}" alt="e">
</div>
<div class="pb-20 pt-5 px-8 md:py-2 md:px-8 md:rounded-lg rounded-b-lg dark:text-white text-black dark:bg-slate-7 bg-slate-200 md:h-full">
<div><h3 class="text-3xl dark:text-white text-black text-center">{data.name}</h3></div>
<div class="text-sm dark:text-white text-black text-center">{data.date}</div>
<div><a class="text-xl bg-sky-5 hover:bg-sky-4 hover:text-white text-white outline-0 hover:shadow-md duration-300 shadow-sky-4/50 px-4 py-1 justify-end m-4 rounded-full float-right" href="eee">Check it out</a></div>
</div>
</div>
</div>
{:else}
<p>Ayo wait a second</p>
{/each}
</div>

View File

@ -0,0 +1,29 @@
<script>
import { fly } from 'svelte/transition';
import { quintOut } from 'svelte/easing';
</script>
<body class="dark:bg-black bg-gray-300 font-sans" id="content">
<div class="text-center">
<div class="justify-center flex flex-col items-center m-auto shrink overflow-hidden h-screen ">
<div in:fly={{ delay: 300, duration: 300, x: 50, easing: quintOut}} animate=true out:fly={{ duration: 300, x: -50, easing: quintOut}} >
<h1 class="text-black dark:text-white text-4xl">Donate</h1>
<p class="text-black dark:text-white pb-5" style="">Thanks a lot!</p>
</div>
<hr transition:fly={{ duration: 300, x: 0, easing: quintOut}} class="border-black w-1/6"/>
<div in:fly={{ delay: 300, duration: 300, x: -50, easing: quintOut}} out:fly={{ duration: 300, x: 50, easing: quintOut}} >
<a href="https://github.com/sponsors/midou36o">
<div class="flex flex-row pt-5">
<div class="i-carbon-logo-github text-black text-2xl"></div><p class="text-1xl text-black pl-2">GitHub Sponsors</p>
</div>
</a>
<a href="/donate/monero">
<div class="flex flex-row">
<div class="i-tabler-coin-monero pl-3 text-black text-2xl"></div><p class="text-1xl text-black pl-2">Monero</p>
</div>
</a>
</div>
</div>
</div>
</body>

View File

@ -0,0 +1,19 @@
<script>
import { fly } from 'svelte/transition';
import { quintOut } from 'svelte/easing';
</script>
<body class="text-black dark:text-white dark:bg-black bg-gray-300 font-sans" id="content">
<div class="text-center">
<div class="justify-center flex md:flex-row flex-col items-center m-auto shrink overflow-hidden h-screen ">
<div in:fly={{ delay: 300, duration: 300, y: -50, easing: quintOut}} out:fly={{ duration: 300, y: 50, easing: quintOut}} class="i-tabler-coin-monero pl-0 md:pl-3 text-black text-5xl"></div>
<h1 in:fly={{ delay: 300, duration: 300, y: -50, easing: quintOut}} out:fly={{ duration: 300, y: 50, easing: quintOut}} class="text-black dark:text-white text-4xl md:pr-2">Monero</h1>
<div in:fly={{ delay: 300, duration: 300, y: 0, easing: quintOut}} out:fly={{ duration: 300, y: 0, easing: quintOut}} class="md:h-1/2 md:w-1 w-3/4 border-1 bg-black border-black rounded-md"></div>
<div in:fly={{ delay: 300, duration: 300, y: 50, easing: quintOut}} out:fly={{ duration: 300, y: -50, easing: quintOut}} class="flex flex-col md:px-2 text-center md:text-left">
<h1 class="text-3xl pb-3">QR code:</h1>
<img src="/qr.png" alt="QR code" class="pb-5 justify-center md:w-1.5/4 md:mx-0 mx-10% md:h-1.5/4 w-80% text-center items-center h-auto"/>
<h1 class="underline-offset-auto hover:underline text-3xl"><a href="monero:44UzWvWS9wELmqPXzLqiPphXVYBbsjkbC7r4RwCSoXC4UyzC2NbPEoPEjxZsGVfbSPbAHUGtpc8GUYUZ8fdu1a4bNAyBPDe"> Monero wallet:</a></h1>
<p><code class="break-all">44UzWvWS9wELmqPXzLqiPphXVYBbsjkbC7r4RwCSoXC4UyzC2NbPEoPEjxZsGVfbSPbAHUGtpc8GUYUZ8fdu1a4bNAyBPDe</code></p>
</div>
</div>
</body>

View File

@ -1,22 +1,20 @@
<script>
import Navi from '$lib/navi.svelte';
import proj from '$lib/project.json';
</script>
<Navi/>
<div class="min-h-screen justify-center grid md:grid-rows-3 xl:grid-cols-2 place-items-center md:my-4 mt-4 gap-3 mx-4 grid-cols-1 ">
<div class="mb-50px md:mb-0 min-h-screen justify-center grid md:grid-rows-3 xl:grid-cols-2 place-items-center md:my-4 gap-3 mx-4 grid-cols-1">
{#each proj as { name, date, desc, url, image, imdes }}
<div class="dark:bg-slate-400 bg-slate-600 dark:text-white text-black rounded-lg w-[100-40] md:max-w-xl">
<div class="md:flex">
<div class="md:shrink-0">
<img class="md:rounded-l-lg md:rounded-none rounded-lg md:h-full md:w-45 w-screen object-cover h-48" src="{image}" alt="{imdes}">
<img class="md:rounded-l-lg md:rounded-none rounded-lg md:h-50 md:w-45 w-screen object-cover h-48" src="{image}" alt="{imdes}">
</div>
<div class="pb-20 pt-5 px-8 md:py-2 md:px-8 md:rounded-r-lg md:rounded-none rounded-b-lg dark:text-white text-black dark:bg-slate-7 bg-slate-200 md:h-full">
<div class="pb-20 pt-5 px-8 md:rounded-lg rounded-b-lg dark:text-white text-black dark:bg-slate-7 bg-slate-200 md:h-50">
<div><h3 class="text-3xl dark:text-white text-black text-center">{name}</h3></div>
<div class="text-sm dark:text-white text-black text-center">{date}</div>
<div><p class="dark:text-white text-black text-sm">{desc}</p></div>
<div><a class="text-xl bg-sky-5 hover:bg-sky-4 hover:text-white text-white outline-0 hover:shadow-md duration-300 shadow-sky-4/50 px-4 py-1 justify-end m-4 rounded-full float-right" href="{url}">Access the project</a></div>
<div><a class="text-xl bg-sky-5 hover:bg-sky-4 hover:text-white text-white outline-0 hover:shadow-md duration-300 shadow-sky-4/50 px-4 py-1 justify-end m-4 rounded-full float-right" href="{url}">Check it out</a></div>
</div>
</div>
</div>
{/each}
</div>
{/each}
</div>

BIN
static/qr.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

View File

@ -1,4 +1,5 @@
import adapter from '@sveltejs/adapter-auto';
// import adapter from '@sveltejs/adapter-auto';
import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/kit/vite';
/** @type {import('@sveltejs/kit').Config} */
@ -8,7 +9,15 @@ const config = {
preprocess: vitePreprocess(),
kit: {
adapter: adapter()
adapter: adapter(
{
pages: 'build',
assets: 'build',
fallback: 'index.html',
precompress: false,
strict: true
}
)
}
};

View File

@ -29,7 +29,7 @@ export default defineConfig({
presetWebFonts({
provider: 'bunny',
fonts: {
sans: 'Outfit',
sans: ['Outfit', 'Comic Sans MS'],
mono: ['Fira Code'],
}