diff options
| author | pml68 <tutorialmester@gmail.com> | 2024-02-27 18:12:53 +0100 |
|---|---|---|
| committer | pml68 <tutorialmester@gmail.com> | 2024-02-27 18:12:53 +0100 |
| commit | 844ae572caf03d19c36e5be54074a92e8b468f87 (patch) | |
| tree | e1c0d57861c4444e4404637460a41fc9c7ed10c6 /src/routes | |
| parent | chore: update packages (diff) | |
| download | pml68.dev-844ae572caf03d19c36e5be54074a92e8b468f87.tar.gz | |
feat: drop Font Awesome, migrate to SVG icons
Diffstat (limited to '')
| -rw-r--r-- | src/routes/+layout.svelte | 12 | ||||
| -rw-r--r-- | src/routes/+page.svelte | 15 |
2 files changed, 19 insertions, 8 deletions
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 @@ <script lang="ts"> import '../app.scss' - import wave1 from '$lib/assets/wave1.svg' - import wave2 from '$lib/assets/wave2.svg' + import WaveLeft from '$lib/assets/wave1.svg?url' + import WaveRight from '$lib/assets/wave2.svg?url' </script> -<img src={wave1} alt="Wave 1" class="wave wave1"> -<img src={wave2} alt="Wave 2" class="wave wave2"> +<!--img src={wave1} alt="Wave 1" class="wave wave1"> +<img src={wave2} alt="Wave 2" class="wave wave2"--> + +<img src={WaveLeft} alt="" class="wave wave1" /> +<img src={WaveRight} alt="" class="wave wave2" /> + <div class="container"> <slot/> </div> 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`) + } </script> <svelte:head> @@ -20,12 +30,9 @@ <p>Just your average IT student</p> <div class="socials"> {#each socialsList as {link, icon}} - <a href={link} target="_blank"> - <i class={'social-icon ' + icon}></i> - </a> + <a use:insertIcon={icon} href={link} target="_blank" class="icon"></a> {/each} </div> - <br> <div class="projects"> Check out my projects <a href={base + '/projects'}><b>here</b></a> </div> |