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>