From 844ae572caf03d19c36e5be54074a92e8b468f87 Mon Sep 17 00:00:00 2001 From: pml68 Date: Tue, 27 Feb 2024 18:12:53 +0100 Subject: feat: drop Font Awesome, migrate to SVG icons --- src/app.d.ts | 1 + src/app.html | 1 - src/app.scss | 8 ++++++-- src/lib/assets/dev.svg | 1 + src/lib/assets/envelope.svg | 1 + src/lib/assets/github.svg | 1 + src/lib/assets/steam.svg | 1 + src/lib/assets/telegram.svg | 1 + src/lib/socials.json | 10 +++++----- src/routes/+layout.svelte | 12 ++++++++---- src/routes/+page.svelte | 15 +++++++++++---- 11 files changed, 36 insertions(+), 16 deletions(-) create mode 100644 src/lib/assets/dev.svg create mode 100644 src/lib/assets/envelope.svg create mode 100644 src/lib/assets/github.svg create mode 100644 src/lib/assets/steam.svg create mode 100644 src/lib/assets/telegram.svg (limited to 'src') diff --git a/src/app.d.ts b/src/app.d.ts index 743f07b..ede21d9 100644 --- a/src/app.d.ts +++ b/src/app.d.ts @@ -1,5 +1,6 @@ // See https://kit.svelte.dev/docs/types#app // for information about these interfaces +import '@poppanator/sveltekit-svg/dist/svg' declare global { namespace App { // interface Error {} diff --git a/src/app.html b/src/app.html index 96c3803..db4d6c5 100644 --- a/src/app.html +++ b/src/app.html @@ -4,7 +4,6 @@ - %sveltekit.head% diff --git a/src/app.scss b/src/app.scss index 0780b91..49f55e3 100644 --- a/src/app.scss +++ b/src/app.scss @@ -25,11 +25,11 @@ body { } .socials { - margin-top: 10px; + margin: 10px 0 4vh; } .social-icon { - font-size: clamp($icon-min, $icon-desired, $icon-max); + width: clamp($icon-min, $icon-desired, $icon-max); } a { @@ -43,6 +43,10 @@ a { } } +a.icon { + margin-right: 2vw; +} + .container { display: flex; height: 100dvh; diff --git a/src/lib/assets/dev.svg b/src/lib/assets/dev.svg new file mode 100644 index 0000000..f853ed1 --- /dev/null +++ b/src/lib/assets/dev.svg @@ -0,0 +1 @@ + diff --git a/src/lib/assets/envelope.svg b/src/lib/assets/envelope.svg new file mode 100644 index 0000000..f794f06 --- /dev/null +++ b/src/lib/assets/envelope.svg @@ -0,0 +1 @@ + diff --git a/src/lib/assets/github.svg b/src/lib/assets/github.svg new file mode 100644 index 0000000..c1b3699 --- /dev/null +++ b/src/lib/assets/github.svg @@ -0,0 +1 @@ + diff --git a/src/lib/assets/steam.svg b/src/lib/assets/steam.svg new file mode 100644 index 0000000..6d8f438 --- /dev/null +++ b/src/lib/assets/steam.svg @@ -0,0 +1 @@ + diff --git a/src/lib/assets/telegram.svg b/src/lib/assets/telegram.svg new file mode 100644 index 0000000..2639cb9 --- /dev/null +++ b/src/lib/assets/telegram.svg @@ -0,0 +1 @@ + diff --git a/src/lib/socials.json b/src/lib/socials.json index ea4c1ab..208a115 100644 --- a/src/lib/socials.json +++ b/src/lib/socials.json @@ -2,23 +2,23 @@ "socials": [ { "link": "https://github.com/pml68", - "icon": "fab fa-github" + "icon": "Github" }, { "link": "https://dev.to/pml68", - "icon": "fab fa-dev" + "icon": "Dev" }, { "link": "https://steamcommunity.com/id/nigmaballs", - "icon": "fab fa-steam" + "icon": "Steam" }, { "link": "https://t.me/pml68_1", - "icon": "fab fa-telegram" + "icon": "Telegram" }, { "link": "mailto:contact@pml68.me", - "icon": "fas fa-envelope" + "icon": "Envelope" } ] } diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 1a4cdb8..b4050c8 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,12 +1,16 @@ - Wave 1

+ + +

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index e4e6726..c6d0eb7 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -3,12 +3,22 @@ import { base } from '$app/paths' import { socials } from '$lib/socials.json' + import SteamIcon from '$lib/assets/steam.svg?src' + import GithubIcon from '$lib/assets/github.svg?src' + import DevIcon from '$lib/assets/dev.svg?src' + import TelegramIcon from '$lib/assets/telegram.svg?src' + import EnvelopeIcon from '$lib/assets/envelope.svg?src' + type Social = { link: string, icon: string } const socialsList: Social[] = socials + + const insertIcon: Function = (element: HTMLElement, icon: string) => { + element.innerHTML = eval(`${icon}Icon`) + } @@ -20,12 +30,9 @@

Just your average IT student

{#each socialsList as {link, icon}} - - - + {/each}

Check out my projects here

-- cgit v1.2.3