rework this messy website partially
This commit is contained in:
parent
5e756dcc7b
commit
59ec4c73c5
GPG Key ID:
1D134A95FE521A7A
|
|
@ -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
|
||||
|
|
@ -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
|
||||
}
|
||||
};
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
{
|
||||
}
|
||||
37
package.json
37
package.json
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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" : ""
|
||||
}
|
||||
]
|
||||
|
|
@ -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/>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
|
|
@ -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
|
||||
}
|
||||
)
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ export default defineConfig({
|
|||
presetWebFonts({
|
||||
provider: 'bunny',
|
||||
fonts: {
|
||||
sans: 'Outfit',
|
||||
sans: ['Outfit', 'Comic Sans MS'],
|
||||
mono: ['Fira Code'],
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue