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 --- package.json | 3 +- pnpm-lock.yaml | 136 ++++++++++++++++++++++++++++++++++++++++++++ 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 +++-- vite.config.ts | 6 +- 14 files changed, 179 insertions(+), 18 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 diff --git a/package.json b/package.json index ec634f9..3d2319b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "website", - "version": "0.2.5", + "version": "1.0.0", "description": "My personal website, built with SvelteKit", "author": "pml68", "license": "GPL-3.0", @@ -13,6 +13,7 @@ "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch" }, "devDependencies": { + "@poppanator/sveltekit-svg": "^4.2.1", "@sveltejs/adapter-static": "^3.0.1", "@sveltejs/kit": "^2.5.2", "@sveltejs/vite-plugin-svelte": "^3.0.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a17385f..6675c24 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5,6 +5,9 @@ settings: excludeLinksFromLockfile: false devDependencies: + '@poppanator/sveltekit-svg': + specifier: ^4.2.1 + version: 4.2.1(svelte@4.2.12)(svgo@3.2.0)(vite@5.1.4) '@sveltejs/adapter-static': specifier: ^3.0.1 version: 3.0.1(@sveltejs/kit@2.5.2) @@ -308,6 +311,35 @@ packages: resolution: {integrity: sha512-2LuNTFBIO0m7kKIQvvPHN6UE63VjpmL9rnEEaOOaiSPbZK+zUOYIzBAWcED+3XYzhYsd/0mD57VdxAEqqV52CQ==} dev: true + /@poppanator/sveltekit-svg@4.2.1(svelte@4.2.12)(svgo@3.2.0)(vite@5.1.4): + resolution: {integrity: sha512-w7jl4EVOOF+X+uv2BEUiMDJwds+GfbczwGpcS0+rsjIsKYmqmwMi4ts3bVZR9ZvdFHWy5rS84U+pSBClz6cbBg==} + peerDependencies: + svelte: '>=4.x' + svgo: '>=3.x' + vite: '>=4.x' + dependencies: + '@rollup/pluginutils': 5.1.0 + svelte: 4.2.12 + svgo: 3.2.0 + vite: 5.1.4(sass@1.71.1) + transitivePeerDependencies: + - rollup + dev: true + + /@rollup/pluginutils@5.1.0: + resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==} + engines: {node: '>=14.0.0'} + peerDependencies: + rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0 + peerDependenciesMeta: + rollup: + optional: true + dependencies: + '@types/estree': 1.0.5 + estree-walker: 2.0.2 + picomatch: 2.3.1 + dev: true + /@rollup/rollup-android-arm-eabi@4.12.0: resolution: {integrity: sha512-+ac02NL/2TCKRrJu2wffk1kZ+RyqxVUlbjSagNgPm94frxtr+XDL12E5Ll1enWskLrtrZ2r8L3wED1orIibV/w==} cpu: [arm] @@ -483,6 +515,11 @@ packages: - supports-color dev: true + /@trysound/sax@0.2.0: + resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==} + engines: {node: '>=10.13.0'} + dev: true + /@types/cookie@0.6.0: resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==} dev: true @@ -530,6 +567,10 @@ packages: engines: {node: '>=8'} dev: true + /boolbase@1.0.0: + resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==} + dev: true + /brace-expansion@1.1.11: resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==} dependencies: @@ -578,6 +619,11 @@ packages: periscopic: 3.1.0 dev: true + /commander@7.2.0: + resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==} + engines: {node: '>= 10'} + dev: true + /concat-map@0.0.1: resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==} dev: true @@ -587,6 +633,24 @@ packages: engines: {node: '>= 0.6'} dev: true + /css-select@5.1.0: + resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==} + dependencies: + boolbase: 1.0.0 + css-what: 6.1.0 + domhandler: 5.0.3 + domutils: 3.1.0 + nth-check: 2.1.1 + dev: true + + /css-tree@2.2.1: + resolution: {integrity: sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==} + engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'} + dependencies: + mdn-data: 2.0.28 + source-map-js: 1.0.2 + dev: true + /css-tree@2.3.1: resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==} engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0} @@ -595,6 +659,18 @@ packages: source-map-js: 1.0.2 dev: true + /css-what@6.1.0: + resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==} + engines: {node: '>= 6'} + dev: true + + /csso@5.0.5: + resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==} + engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'} + dependencies: + css-tree: 2.2.1 + dev: true + /debug@4.3.4: resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==} engines: {node: '>=6.0'} @@ -626,11 +702,43 @@ packages: resolution: {integrity: sha512-KqFl6pOgOW+Y6wJgu80rHpo2/3H07vr8ntR9rkkFIRETewbf5GaYYcakYfiKz89K+sLsuPkQIZaXDMjUObZwWg==} dev: true + /dom-serializer@2.0.0: + resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==} + dependencies: + domelementtype: 2.3.0 + domhandler: 5.0.3 + entities: 4.5.0 + dev: true + + /domelementtype@2.3.0: + resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==} + dev: true + + /domhandler@5.0.3: + resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==} + engines: {node: '>= 4'} + dependencies: + domelementtype: 2.3.0 + dev: true + + /domutils@3.1.0: + resolution: {integrity: sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==} + dependencies: + dom-serializer: 2.0.0 + domelementtype: 2.3.0 + domhandler: 5.0.3 + dev: true + /dotenv@16.4.5: resolution: {integrity: sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==} engines: {node: '>=12'} dev: true + /entities@4.5.0: + resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==} + engines: {node: '>=0.12'} + dev: true + /es6-promise@3.3.1: resolution: {integrity: sha512-SOp9Phqvqn7jtEUxPWdWfWoLmyt2VaJ6MpvP9Comy1MceMXqE6bxvaTu4iaxpYYPzhny28Lc+M87/c2cPK6lDg==} dev: true @@ -670,6 +778,10 @@ packages: resolution: {integrity: sha512-Cf6VksWPsTuW01vU9Mk/3vRue91Zevka5SjyNf3nEpokFRuqt/KjUQoGAwq9qMmhpLTHmXzSIrFRw8zxWzmFBA==} dev: true + /estree-walker@2.0.2: + resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==} + dev: true + /estree-walker@3.0.3: resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==} dependencies: @@ -815,6 +927,10 @@ packages: '@jridgewell/sourcemap-codec': 1.4.15 dev: true + /mdn-data@2.0.28: + resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==} + dev: true + /mdn-data@2.0.30: resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==} dev: true @@ -879,6 +995,12 @@ packages: engines: {node: '>=0.10.0'} dev: true + /nth-check@2.1.1: + resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==} + dependencies: + boolbase: 1.0.0 + dev: true + /once@1.4.0: resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==} dependencies: @@ -1145,6 +1267,20 @@ packages: periscopic: 3.1.0 dev: true + /svgo@3.2.0: + resolution: {integrity: sha512-4PP6CMW/V7l/GmKRKzsLR8xxjdHTV4IMvhTnpuHwwBazSIlw5W/5SmPjN8Dwyt7lKbSJrRDgp4t9ph0HgChFBQ==} + engines: {node: '>=14.0.0'} + hasBin: true + dependencies: + '@trysound/sax': 0.2.0 + commander: 7.2.0 + css-select: 5.1.0 + css-tree: 2.3.1 + css-what: 6.1.0 + csso: 5.0.5 + picocolors: 1.0.0 + dev: true + /tiny-glob@0.2.9: resolution: {integrity: sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==} dependencies: 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 -Wave 2 + + + + +
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
diff --git a/vite.config.ts b/vite.config.ts index bbf8c7d..2007f5a 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,6 +1,10 @@ import { sveltekit } from '@sveltejs/kit/vite'; import { defineConfig } from 'vite'; +import svg from '@poppanator/sveltekit-svg' export default defineConfig({ - plugins: [sveltekit()] + plugins: [ + sveltekit(), + svg() + ] }); -- cgit v1.2.3