brandan/personal-website
1
0
Fork 0
Code Pull requests Activity

footerrrrrr

Browse source
This commit is contained in:
cirroskais 2024-04-20 06:53:59 -04:00
parent 1d659793a5
commit d22fd40f38
No known key found for this signature in database
GPG key ID: 5FC73EBF2678E33D
15 changed files with 116 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
bun.lockb
View file

Binary file not shown.

27
package.json
View file

@ -1,17 +1,6 @@
{
"name": "personal-website",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"start": "bun ./build/index.js",
"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
"lint": "prettier --check .",
"format": "prettier --write ."
},
"devDependencies": {
"@sveltejs/adapter-auto": "^3.0.0",
"@sveltejs/kit": "^2.0.0",
@ -27,8 +16,16 @@
"typescript": "^5.0.0",
"vite": "^5.0.3"
},
"type": "module",
"dependencies": {
"lucide-svelte": "^0.370.0"
}
"private": true,
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"start": "bun ./build/index.js",
"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
"lint": "prettier --check .",
"format": "prettier --write ."
},
"type": "module"
}

5
src/app.css
View file

@ -25,8 +25,3 @@ body {
.hero > div {
backdrop-filter: blur(10px);
}
a {
@apply hover:text-neutral-400;
@apply transition-colors;
}

4
src/lib/components/Blog/ListedPost.svelte
View file

@ -6,8 +6,8 @@
</script>
<a in:fade={{ delay: 50 * index }} href="/blog/{post.id}">
<div class="bg-gray-500/10 p-4 rounded-2xl">
<img class="aspect-video bg-black rounded-xl mb-2" src={post.image} alt="Blog post cover" />
<div class="p-4 rounded-2xl bg-gray-500/10">
<img class="mb-2 bg-black rounded-xl aspect-video" src={post.image} alt="Blog post cover" />
<p class="text-2xl">{post.title}</p>
<p class="text-white/50">By {post.author}</p>
</div>

6
src/lib/components/Blog/ScaffoldListedPost.svelte
View file

@ -1,5 +1,5 @@
<div class="bg-gray-500/10 p-4 rounded-2xl">
<div class="p-4 rounded-2xl bg-gray-500/10">
<div class="bg-neutral-200/20 h-[10.5rem] w-full rounded-xl animate-pulse mb-3"></div>
<div class="bg-neutral-200/20 h-7 w-52 rounded-xl animate-pulse my-1"></div>
<div class="bg-neutral-200/20 h-5 w-20 rounded-lg animate-pulse"></div>
<div class="my-1 w-52 h-7 rounded-xl animate-pulse bg-neutral-200/20"></div>
<div class="w-20 h-5 rounded-lg animate-pulse bg-neutral-200/20"></div>
</div>

46
src/lib/components/Footer.svelte
View file

@ -1,3 +1,45 @@
<div class="shadow-lg bg-gray-500/10 h-full w-full">
<p class="text-center py-5 text-white/50">Made with SvelteKit & Tailwind CSS</p>
<script>
import Svelte from './Icons/Svelte.svelte';
import TailwindCSS from './Icons/TailwindCSS.svelte';
</script>
<div class="flex py-2 w-full h-full shadow-lg bg-gray-500/10">
<div class="flex flex-col m-auto text-sm text-neutral-500">
<div class="flex mx-auto space-x-1.5">
<p>Built with</p>
<a
href="https://kit.svlete.dev/"
class="flex space-x-0.5 text-[#ff3e00] underline underline-offset-[3px]"
>
<div class="my-auto w-4 h-4">
<Svelte></Svelte>
</div>
<p class="font-bold">SvelteKit</p>
</a>
</div>
<div class="flex mx-auto space-x-1.5">
<p>Designed with</p>
<a
href="https://tailwindcss.com/"
class="flex space-x-0.5 text-[#06b6d4] underline underline-offset-[3px]"
>
<div class="my-auto w-4 h-4">
<TailwindCSS></TailwindCSS>
</div>
<p class="font-bold">Tailwind CSS</p>
</a>
</div>
<div class="flex mx-auto space-x-1.5">
<p>Hosted with</p>
<a
href="https://coolify.io/"
class="flex space-x-0.5 text-[#8c52ff] underline underline-offset-[3px]"
>
<div class="my-auto w-4 h-4">
<img src="/icons/coolify-transparent.png" alt="" />
</div>
<p class="font-bold">Coolify</p>
</a>
</div>
</div>
</div>

8
src/lib/components/HeaderComponents/Header.svelte → src/lib/components/Header.svelte
View file

@ -2,10 +2,10 @@
import HeaderLink from './HeaderLink.svelte';
</script>
<div class="shadow-lg bg-gray-500/10 h-full">
<div class="container flex h-full w-full">
<a href="/" class="font-bold text-2xl my-auto tracking-wider"> cirroskais </a>
<div class="ml-auto flex space-x-4">
<div class="h-full shadow-lg bg-gray-500/10">
<div class="container flex w-full h-full">
<a href="/" class="my-auto text-2xl font-bold tracking-wider"> cirroskais </a>
<div class="flex ml-auto space-x-4">
<HeaderLink href="/">Home</HeaderLink>
<HeaderLink href="/projects">Projects</HeaderLink>
<HeaderLink href="/blog">Blog</HeaderLink>

7
src/lib/components/HeaderComponents/HeaderLink.svelte → src/lib/components/HeaderLink.svelte
View file

@ -12,6 +12,11 @@
});
</script>
<a {href} class="my-auto text-lg transition-all {selected && 'font-bold tracking-wider'}">
<a
{href}
class="my-auto text-lg transition-all {selected
? 'font-bold tracking-wider'
: 'hover:text-neutral-400'}"
>
<slot />
</a>

10
src/lib/components/Icons/Forgejo.svelte Normal file
View file

@ -0,0 +1,10 @@
<svg
role="img"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
stroke="none"
fill="currentColor"
><title>Forgejo</title><path
d="M16.7773 0c1.6018 0 2.9004 1.2986 2.9004 2.9005s-1.2986 2.9004-2.9004 2.9004c-1.0854 0-2.0315-.596-2.5288-1.4787H12.91c-2.3322 0-4.2272 1.8718-4.2649 4.195l-.0007 2.1175a7.0759 7.0759 0 0 1 4.148-1.4205l.1176-.001 1.3385.0002c.4973-.8827 1.4434-1.4788 2.5288-1.4788 1.6018 0 2.9004 1.2986 2.9004 2.9005s-1.2986 2.9004-2.9004 2.9004c-1.0854 0-2.0315-.596-2.5288-1.4787H12.91c-2.3322 0-4.2272 1.8718-4.2649 4.195l-.0007 2.319c.8827.4973 1.4788 1.4434 1.4788 2.5287 0 1.602-1.2986 2.9005-2.9005 2.9005-1.6018 0-2.9004-1.2986-2.9004-2.9005 0-1.0853.596-2.0314 1.4788-2.5287l-.0002-9.9831c0-3.887 3.1195-7.0453 6.9915-7.108l.1176-.001h1.3385C14.7458.5962 15.692 0 16.7773 0ZM7.2227 19.9052c-.6596 0-1.1943.5347-1.1943 1.1943s.5347 1.1943 1.1943 1.1943 1.1944-.5347 1.1944-1.1943-.5348-1.1943-1.1944-1.1943Zm9.5546-10.4644c-.6596 0-1.1944.5347-1.1944 1.1943s.5348 1.1943 1.1944 1.1943c.6596 0 1.1943-.5347 1.1943-1.1943s-.5347-1.1943-1.1943-1.1943Zm0-7.7346c-.6596 0-1.1944.5347-1.1944 1.1943s.5348 1.1943 1.1944 1.1943c.6596 0 1.1943-.5347 1.1943-1.1943s-.5347-1.1943-1.1943-1.1943Z"
/></svg
>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

10
src/lib/components/Icons/Svelte.svelte Normal file
View file

@ -0,0 +1,10 @@
<svg
role="img"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
stroke="none"
fill="currentColor"
><title>Svelte</title><path
d="M10.354 21.125a4.44 4.44 0 0 1-4.765-1.767 4.109 4.109 0 0 1-.703-3.107 3.898 3.898 0 0 1 .134-.522l.105-.321.287.21a7.21 7.21 0 0 0 2.186 1.092l.208.063-.02.208a1.253 1.253 0 0 0 .226.83 1.337 1.337 0 0 0 1.435.533 1.231 1.231 0 0 0 .343-.15l5.59-3.562a1.164 1.164 0 0 0 .524-.778 1.242 1.242 0 0 0-.211-.937 1.338 1.338 0 0 0-1.435-.533 1.23 1.23 0 0 0-.343.15l-2.133 1.36a4.078 4.078 0 0 1-1.135.499 4.44 4.44 0 0 1-4.765-1.766 4.108 4.108 0 0 1-.702-3.108 3.855 3.855 0 0 1 1.742-2.582l5.589-3.563a4.072 4.072 0 0 1 1.135-.499 4.44 4.44 0 0 1 4.765 1.767 4.109 4.109 0 0 1 .703 3.107 3.943 3.943 0 0 1-.134.522l-.105.321-.286-.21a7.204 7.204 0 0 0-2.187-1.093l-.208-.063.02-.207a1.255 1.255 0 0 0-.226-.831 1.337 1.337 0 0 0-1.435-.532 1.231 1.231 0 0 0-.343.15L8.62 9.368a1.162 1.162 0 0 0-.524.778 1.24 1.24 0 0 0 .211.937 1.338 1.338 0 0 0 1.435.533 1.235 1.235 0 0 0 .344-.151l2.132-1.36a4.067 4.067 0 0 1 1.135-.498 4.44 4.44 0 0 1 4.765 1.766 4.108 4.108 0 0 1 .702 3.108 3.857 3.857 0 0 1-1.742 2.583l-5.589 3.562a4.072 4.072 0 0 1-1.135.499m10.358-17.95C18.484-.015 14.082-.96 10.9 1.068L5.31 4.63a6.412 6.412 0 0 0-2.896 4.295 6.753 6.753 0 0 0 .666 4.336 6.43 6.43 0 0 0-.96 2.396 6.833 6.833 0 0 0 1.168 5.167c2.229 3.19 6.63 4.135 9.812 2.108l5.59-3.562a6.41 6.41 0 0 0 2.896-4.295 6.756 6.756 0 0 0-.665-4.336 6.429 6.429 0 0 0 .958-2.396 6.831 6.831 0 0 0-1.167-5.168Z"
/></svg
>
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

10
src/lib/components/Icons/TailwindCSS.svelte Normal file
View file

@ -0,0 +1,10 @@
<svg
role="img"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
stroke="none"
fill="currentColor"
><title>Tailwind CSS</title><path
d="M12.001,4.8c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 C13.666,10.618,15.027,12,18.001,12c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C16.337,6.182,14.976,4.8,12.001,4.8z M6.001,12c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 c1.177,1.194,2.538,2.576,5.512,2.576c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C10.337,13.382,8.976,12,6.001,12z"
/></svg
>
Side by side

After

Width:  |  Height:  |  Size: 649 B

4
src/routes/+layout.svelte
View file

@ -4,7 +4,7 @@
import { page } from '$app/stores';
import { fade } from 'svelte/transition';
import Header from '$lib/components/HeaderComponents/Header.svelte';
import Header from '$lib/components/Header.svelte';
import Footer from '$lib/components/Footer.svelte';
</script>
@ -33,6 +33,6 @@
</div>
{/key}
<div class="w-screen h-[4rem]">
<div class="w-screen">
<Footer></Footer>
</div>

24
src/routes/+page.svelte
View file

@ -17,16 +17,16 @@
</svelte:head>
<div class="hero w-full h-[54rem] rounded-lg mx-auto my-auto">
<div class="h-full rounded-lg p-4 md:flex">
<div class="md:w-fit md:mx-auto my-auto min-h-max">
<div class="p-4 h-full rounded-lg md:flex">
<div class="my-auto md:w-fit md:mx-auto min-h-max">
<div class="flex md:w-[42rem] p-2 bg-black/75 rounded-lg">
<img
class="mr-2 h-20 md:h-24 rounded-full"
class="mr-2 h-20 rounded-full md:h-24"
src="https://cdn.discordapp.com/avatars/{$page.data.discord.id}/{$page.data.discord
.avatar}.png"
alt="{$page.data.discord?.username}'s profile picture"
/>
<p class="text-3xl md:text-4xl text-neutral-300 my-auto">
<p class="my-auto text-3xl md:text-4xl text-neutral-300">
{$page.data.discord?.username}
</p>
</div>
@ -35,32 +35,32 @@
class="md:w-[42rem] flex place-content-center space-x-2 text-xl p-2 bg-black/75 rounded-lg mt-1"
>
<a class="flex" href="https://www.last.fm/user/{config.LASTFM}">
<div class="h-7 w-7 my-auto text-neutral-500 hover:text-red-500 transition-colors">
<div class="my-auto w-7 h-7 transition-colors text-neutral-500 hover:text-red-500">
<Lastfm />
</div>
</a>
<a class="flex" href="https://github.com/{config.GITHUB}">
<div class="h-7 w-7 my-auto text-neutral-500 hover:text-black transition-colors">
<div class="my-auto w-7 h-7 transition-colors text-neutral-500 hover:text-black">
<GitHub />
</div>
</a>
<a class="flex" href="https://mastodon.social/{config.FEDIVERSE}">
<div class="h-7 w-7 my-auto text-neutral-500 hover:text-indigo-700 transition-colors">
<div class="my-auto w-7 h-7 transition-colors text-neutral-500 hover:text-indigo-700">
<Mastodon />
</div>
</a>
<a class="flex" href="https://discord.com/users/{config.DISCORD}">
<div class="h-7 w-7 my-auto text-neutral-500 hover:text-blue-600 transition-colors">
<div class="my-auto w-7 h-7 transition-colors text-neutral-500 hover:text-blue-600">
<Discord />
</div>
</a>
<a class="flex" href="https://x.com/{config.TWITTER}">
<div class="h-7 w-7 my-auto text-neutral-500 hover:text-black transition-colors">
<div class="my-auto w-7 h-7 transition-colors text-neutral-500 hover:text-black">
<X />
</div>
</a>
<a class="flex" href="https://bsky.app/profile/{config.BLUESKY}">
<div class="h-7 w-7 my-auto text-neutral-500 hover:text-blue-400 transition-colors">
<div class="my-auto w-7 h-7 transition-colors text-neutral-500 hover:text-blue-400">
<Bluesky />
</div>
</a>
@ -75,8 +75,8 @@
)?.['#text']}
alt="Album art for {$page.data.lastfm?.recenttracks?.track[0]?.name}"
/>
<div class="w-full my-auto">
<p class="text-2xl text-neutral-300 whitespace-nowrap overflow-clip">
<div class="my-auto w-full">
<p class="text-2xl overflow-clip whitespace-nowrap text-neutral-300">
{$page.data.lastfm?.recenttracks?.track[0]?.name}
</p>
<p class="text-xl text-neutral-500">

2
src/routes/blog/+page.svelte
View file

@ -29,7 +29,7 @@
<div class="">
<div
class="grid md:grid-cols-2 md:grid-rows-5 lg:grid-cols-3 lg:grid-rows-4 xl:grid-cols-4 xl:grid-rows-3 gap-2"
class="grid gap-2 md:grid-cols-2 md:grid-rows-5 lg:grid-cols-3 lg:grid-rows-4 xl:grid-cols-4 xl:grid-rows-3"
>
{#each posts as post, i}
<ListedPost {post} index={i}></ListedPost>

BIN
static/icons/coolify-transparent.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4 KiB