Another commit at 2AM this time coming up

This commit is contained in:
Midou36O 2023-01-26 02:11:05 +01:00
parent 8c4229fb07
commit 5e756dcc7b
Signed by: midou
GPG Key ID: 08063D5407090BC2
15 changed files with 73 additions and 16 deletions

View File

@ -27,10 +27,15 @@
"svelte": "^3.54.0",
"svelte-check": "^3.0.1",
"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"
},
"type": "module"
"type": "module",
"dependencies": {
"@unocss/reset": "^0.48.4",
"dayjs": "^1.11.7"
}
}

View File

@ -2,6 +2,7 @@
import "uno.css";
import "$lib/style.css";
import Foote from "$lib/foote.svelte";
import "@unocss/reset/tailwind.css";
</script>
<style>

View File

@ -3,14 +3,14 @@
import Navi from '$lib/navi.svelte';
</script>
<Navi/>
<body class="dark:bg-black bg-gray-300 font-sans" id="content">
<div class="center">
<div class="justify-center flex items-center h-screen">
<div class="wrapper">
<div class="text-black dark:text-white"><h1>{data.name}</h1></div>
<div class="text-black dark:text-white"><p id="para" style="margin-top: -15px;">{@html data.description}</p></div>
<body class="dark:bg-black bg-gray-300 font-sans min-h-screen" id="content">
<div class="text-center">
<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" style="width:60%;text-align:center;"/>
<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>

View File

@ -1,12 +1,41 @@
<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
dayjs.extend(relativeTime);
let yr = dayjs('2004-15-07').fromNow(true);
</script>
<Navi/>
<div class="bg-fixed " style="background-image: url($static/images/BG_FHD_darker_mb.png)">
<div class="flex grid h-screen place-content-center content-center place-items-center gap-3 rounded-2xl mt-0 mx-3 outline outline-offset-1 bg-blue-200 outline-blue-500 dark:outline-indigo-500 dark:bg-indigo-900/50">
<div class="i-zondicons-information-solid text-stone-700 dark:text-stone-400 text-4xl" ></div>
<h1 class="dark:text-stone-400 text-stone-700 justify-center hover:text-stone" style="">About</h1>
</div>
<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="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>
</div>
</div>
<div class="text-center content-center items-center flex flex-col md:inline-flex justify-center place-items-center md:text-left">
<div class="flex flex-row gap-3 md:pl-30">
<div class="i-mdi-head-question-outline text-black dark:text-white text-5xl">Head</div>
<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 ">
<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.
You can call me Midou. Anyway I live in Morocco, I'm {yr} old.
There are a tons of things i've done but you never know what's the point of doing all of this.
Hey are you listening? This is serious. No i really mean it's actually serious.
I'm trying to extend this enough to see if it works or not, because for some reason HTML loves stopping at a point without styling the BG.
Anyway how's it going? Lore ipsum bullshit yadda yadda yadda. Did you know that project + is actually nice? No? Too bad.
</p>
</div>
</div>

View File

@ -1,5 +1,22 @@
<script>
import Navi from '$lib/navi.svelte';
import proj from '$lib/project.json';
</script>
<Navi/>
<p>When the page is sus</p>
<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 ">
{#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}">
</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><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>
</div>
</div>
{/each}
</div>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 515 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 367 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 194 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 56 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 244 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 242 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 234 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 222 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 206 KiB

View File

@ -1,14 +1,19 @@
import { sveltekit } from '@sveltejs/kit/vite';
import type { UserConfig } from 'vite';
import { defineConfig } from "vite";
import UnoCSS from 'unocss/vite';
import presetIcons from '@unocss/preset-icons';
import presetWebFonts from '@unocss/preset-web-fonts'
const config: UserConfig = {
plugins: [sveltekit(), UnoCSS(),
/* Self note: Don't add a config between the (), it just overrides the external config. */
]
],
optimizeDeps: {
include: ["dayjs/plugin/relativeTime.js"],
},
};
export default config;