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

messing w/ design

Browse source
This commit is contained in:
cirroskais 2024-04-18 15:47:10 -04:00
parent 264d15d921
commit 1c4068ff87
No known key found for this signature in database
GPG key ID: 5FC73EBF2678E33D
3 changed files with 60 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.env.example
View file

@ -1,4 +1,2 @@
DISCORD_TOKEN=
LASTFM_KEY=
LASTFM_SECRET=

10
src/lib/components/Icons/Mastodon.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>Mastodon</title><path
d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"
/></svg
>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

38
src/routes/+page.svelte
View file

@ -5,6 +5,7 @@
import Discord from '$lib/components/Icons/Discord.svelte';
import Lastfm from '$lib/components/Icons/LastFM.svelte';
import GitHub from '$lib/components/Icons/GitHub.svelte';
import Mastodon from '$lib/components/Icons/Mastodon.svelte';
</script>
<svelte:head>
@ -12,41 +13,51 @@
</svelte:head>
<div class="hero w-full h-[50rem] rounded-lg mx-auto">
<div class="h-full w-full rounded-lg p-4">
<div class="flex max-w-lg p-2 bg-black/75 rounded-lg mt-24">
<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="flex md:w-[42rem] p-2 bg-black/75 rounded-lg">
<img
class="mr-2 h-20 md:h-24 rounded-full"
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="my-auto tracking-widest text-2xl md:text-5xl text-white/75">
<div class="my-auto flex flex-col">
<p class="tracking-wider text-2xl md:text-5xl text-white/75">
{$page.data.discord?.global_name}
</p>
<p class="text-md md:text-2xl text-white/50">
{$page.data.discord?.username}
</p>
<div
class="w-9 md:w-12 h-9 md:h-12 my-auto px-2 pt-3 md:pt-3.5 text-sm md:text-3xl text-white/75"
>
<Discord />
</div>
</div>
<div class="md:w-[32rem] flex place-content-between text-xl p-2 bg-black/75 rounded-lg mt-1">
<p class="py-1 text-white/50">Full stack JavaScript developer.</p>
<div class="text-2xl flex space-x-4">
<div
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-white/50">
<div class="h-7 w-7 my-auto text-white/75">
<Lastfm />
</div>
</a>
<a class="flex" href="https://github.com/{config.GITHUB}">
<div class="h-7 w-7 my-auto text-white/50">
<div class="h-7 w-7 my-auto text-white/75">
<GitHub />
</div>
</a>
<a class="flex" href="https://mastodon.social/{config.FEDIVERSE}">
<div class="h-7 w-7 my-auto text-white/75">
<Mastodon />
</div>
</a>
<a class="flex" href="https://discord.com/users/{config.DISCORD}">
<div class="h-7 w-7 my-auto text-white/75">
<Discord />
</div>
</a>
</div>
<div class="max-w-lg p-2 bg-black/75 rounded-lg mt-1">
<div class="md:w-[42rem] p-2 bg-black/75 rounded-lg mt-1">
<div class="flex space-x-4">
<img
class="w-24 h-24 rounded-lg"
@ -66,4 +77,5 @@
</div>
</div>
</div>
</div>
</div>