Update links

Author: socketopp

src/lib/assets/svg/WebsiteIcon.svelte

@@ -0,0 +1,14 @@
+<svg
+	width="24px"
+	height="24px"
+	viewBox="0 0 15.36 15.36"
+	id="_x30_1"
+	version="1.1"
+	class="w-6 h-6 transition fill-zinc-500 group-hover:fill-zinc-50 dark:fill-zinc-400 dark:group-hover:fill-zinc-300"
+	xml:space="preserve"
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	><path
+		d="M7.68 0C3.438 0 0 3.438 0 7.68s3.438 7.68 7.68 7.68 7.68 -3.438 7.68 -7.68S11.922 0 7.68 0m4.868 4.38h-1.4c-0.161 -0.675 -0.37 -1.296 -0.618 -1.845 0.474 0.263 0.913 0.594 1.307 0.988A5.94 5.94 0 0 1 12.548 4.38M13.56 7.68c0 0.513 -0.066 1.016 -0.192 1.5h-1.921c0.048 -0.485 0.073 -0.987 0.073 -1.5s-0.025 -1.015 -0.073 -1.5h1.921c0.127 0.484 0.192 0.987 0.192 1.5M7.68 13.56c-0.156 0 -0.631 -0.307 -1.105 -1.254 -0.196 -0.393 -0.365 -0.84 -0.503 -1.326h3.216c-0.138 0.486 -0.306 0.933 -0.503 1.326C8.311 13.253 7.836 13.56 7.68 13.56m-1.956 -4.38c-0.055 -0.487 -0.084 -0.991 -0.084 -1.5s0.029 -1.013 0.084 -1.5h3.911c0.055 0.487 0.084 0.991 0.084 1.5s-0.029 1.013 -0.084 1.5zM1.8 7.68c0 -0.513 0.066 -1.016 0.192 -1.5h1.921c-0.048 0.485 -0.073 0.987 -0.073 1.5s0.025 1.015 0.073 1.5H1.992C1.866 8.696 1.8 8.193 1.8 7.68M7.68 1.8c0.156 0 0.631 0.307 1.105 1.254 0.196 0.393 0.365 0.84 0.503 1.326H6.072c0.138 -0.486 0.306 -0.933 0.503 -1.326C7.049 2.107 7.524 1.8 7.68 1.8m-2.851 0.735c-0.248 0.549 -0.457 1.17 -0.618 1.845H2.812a5.94 5.94 0 0 1 0.71 -0.858c0.394 -0.394 0.834 -0.724 1.307 -0.988M2.812 10.98h1.4c0.161 0.675 0.37 1.296 0.618 1.845 -0.474 -0.263 -0.913 -0.594 -1.307 -0.988A5.94 5.94 0 0 1 2.812 10.98m7.719 1.845c0.248 -0.549 0.457 -1.17 0.618 -1.845h1.4a5.94 5.94 0 0 1 -0.71 0.858c-0.394 0.394 -0.834 0.724 -1.307 0.988"
+	/></svg
+>

src/lib/components/SocialLinks.svelte

@@ -1,9 +1,15 @@
 <script>
-	import { linkedin, instagram, twitter, github, resume, homepage } from '$lib/info';
+	import { linkedin, instagram, twitter, github, resume } from '$lib/info';
+	import WebsiteIcon from '../assets/svg/WebsiteIcon.svelte';
 </script>
 
 {#if twitter}
-	<a href={`https://twitter.com/${twitter}`} class="group" aria-label="Follow on Twitter">
+	<a
+		href={`https://twitter.com/${twitter}`}
+		class="group"
+		aria-label="Follow on Twitter"
+		target="_blank"
+	>
 		<svg
 			viewBox="0 0 24 24"
 			aria-hidden="true"
@@ -17,7 +23,12 @@
 {/if}
 
 {#if instagram}
-	<a href={`https://instagram.com/${instagram}`} class="group" aria-label="Follow on Instagram">
+	<a
+		href={`https://instagram.com/${instagram}`}
+		class="group"
+		aria-label="Follow on Instagram"
+		target="_blank"
+	>
 		<svg
 			viewBox="0 0 24 24"
 			aria-hidden="true"
@@ -34,7 +45,12 @@
 {/if}
 
 {#if github}
-	<a href={`https://github.com/${github}`} class="group" aria-label="Follow on GitHub">
+	<a
+		href={`https://github.com/${github}`}
+		class="group"
+		aria-label="Follow on GitHub"
+		target="_blank"
+	>
 		<svg
 			viewBox="0 0 24 24"
 			aria-hidden="true"
@@ -50,7 +66,12 @@
 {/if}
 
 {#if linkedin}
-	<a href={`https://linkedin.com/${linkedin}`} class="group" aria-label="Follow on LinkedIn">
+	<a
+		href={`https://linkedin.com/${linkedin}`}
+		class="group"
+		aria-label="Follow on LinkedIn"
+		target="_blank"
+	>
 		<svg
 			viewBox="0 0 24 24"
 			class="w-6 h-6 transition fill-zinc-500 group-hover:fill-blue-600 dark:fill-zinc-400 dark:group-hover:fill-zinc-300"
@@ -63,7 +84,7 @@
 {/if}
 
 {#if resume}
-	<a href={resume} class="group" aria-label="Read my resume">
+	<a href={resume} class="group" aria-label="Read my resume" target="_blank">
 		<div
 			class="rounded-md justify-center text-center flex w-6 h-6 transition bg-zinc-500 group-hover:bg-zinc-600 dark:bg-zinc-400 dark:group-hover:bg-zinc-300"
 		>
@@ -72,12 +93,6 @@
 	</a>
 {/if}
 
-{#if homepage}
-	<a href="https://sahl.dev" class="group" aria-label="See my website">
-		<img
-			class="hover:drop-md rounded-md justify-center text-center flex w-6 h-6 transition bg-zinc-500 group-hover:bg-zinc-600 dark:bg-zinc-400 dark:group-hover:bg-zinc-300"
-			src={homepage}
-			alt="homepage"
-		/>
-	</a>
-{/if}
+<a href="https://sahl.dev" class="group" aria-label="See my website" target="_blank">
+	<WebsiteIcon />
+</a>

src/lib/info.js

@@ -11,9 +11,8 @@ export const name = `${firstName} ${lastName}`;
 
 // Used for the landing page & footer of posts
 import avatar from '$lib/assets/cv_img_crop.jpg';
-import homepage from '$lib/assets/page_icon.jpg';
 
-export { avatar, homepage };
+export { avatar };
 
 export const bio = `\
 I'm ${firstName}, a fullstack developer based in Sweden with a passion for building useful things.