🔀 Contact page (#13)

* 🚚 Moved about to contact page

* ♿️ Added aria-label to contact page

* 💄 Added custom hover effect to contact list

* ♿️ Improved screen reader accessibility

* 🚨 Fixed linting error's

.vscode/settings.json

@@ -2,5 +2,8 @@
 	"files.autoSave": "onFocusChange",
 	"editor.formatOnPaste": true,
 	"editor.formatOnSave": true,
-	"editor.defaultFormatter": "esbenp.prettier-vscode"
+	"editor.defaultFormatter": "esbenp.prettier-vscode",
+	"[html]": {
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
+	}
 }

src/lib/common.ts

@@ -0,0 +1,4 @@
+import { locale } from '$lib/i18n';
+
+export const capitalizeFirstLetter = ([first, ...rest]) =>
+	first.toLocaleUpperCase(locale) + rest.join('');

src/lib/components/Profile.svelte

@@ -8,9 +8,9 @@
 		alt="headshot"
 	/>
 
-	<h1>{$t('profile.name')}</h1>
+	<h1>{$t('home.name')}</h1>
 
-	<p>{$t('profile.about')}</p>
+	<p>{$t('home.about')}</p>
 </section>
 
 <style lang="scss">

src/lib/i18n/de/contact.json

@@ -0,0 +1,5 @@
+{
+	"title": "kontakt",
+	"meta": "Kontaktdaten von Wouter van der Wal",
+	"description": "Hier sind ein paar verschiedene Möglichkeiten, mich zu kontaktieren."
+}

src/lib/i18n/de/navigation.json

@@ -5,5 +5,5 @@
 	"theme": "Thema",
 	"language": "Sprache",
 	"home": "Start",
-	"about": "Über"
+	"contact": "Kontakt"
 }

src/lib/i18n/en/contact.json

@@ -0,0 +1,5 @@
+{
+	"title": "contact",
+	"meta": "Contact details of Wouter van der Wal",
+	"description": "Here are a few different ways of contacting me."
+}

src/lib/i18n/en/navigation.json

@@ -5,5 +5,5 @@
 	"theme": "Theme",
 	"language": "Language",
 	"home": "Home",
-	"about": "About"
+	"contact": "Contact"
 }

src/lib/i18n/index.ts

@@ -3,83 +3,48 @@ import lang from './lang.json';
 
 export const defaultLocale = 'en';
 
+interface key {
+	key: string;
+	routes?: string[];
+}
+
+const languages = ['en', 'nl', 'de'];
+const keys: key[] = [
+	// Different pages
+	{
+		key: 'home',
+		routes: ['/']
+	},
+	{
+		key: 'contact',
+		routes: ['/contact']
+	},
+	// Common parts
+	{
+		key: 'navigation'
+	},
+	{
+		key: 'common'
+	}
+];
+
 /** @type {import('@sveltejs/kit').Handle} */
 const config = {
 	translations: {
 		en: { lang },
 		nl: { lang },
 		de: { lang }
 	},
-	loaders: [
-		{
-			locale: 'en',
-			key: 'profile',
-			route: ['/'],
-			loader: async () => (await import('./en/profile.json')).default
-		},
-		{
-			locale: 'en',
-			key: 'common',
-			loader: async () => (await import('./en/common.json')).default
-		},
-		{
-			locale: 'en',
-			key: 'navigation',
-			loader: async () => (await import('./en/navigation.json')).default
-		},
-		{
-			locale: 'en',
-			key: 'about',
-			path: ['/about'],
-			loader: async () => (await import('./en/about.json')).default
-		},
-
-		{
-			locale: 'nl',
-			key: 'profile',
-			route: ['/'],
-			loader: async () => (await import('./nl/profile.json')).default
-		},
-		{
-			locale: 'nl',
-			key: 'common',
-			loader: async () => (await import('./nl/common.json')).default
-		},
-		{
-			locale: 'nl',
-			key: 'navigation',
-			loader: async () => (await import('./nl/navigation.json')).default
-		},
-		{
-			locale: 'nl',
-			key: 'about',
-			path: ['/about'],
-			loader: async () => (await import('./nl/about.json')).default
-		},
-
-		{
-			locale: 'de',
-			key: 'profile',
-			route: ['/'],
-			loader: async () => (await import('./de/profile.json')).default
-		},
-		{
-			locale: 'de',
-			key: 'common',
-			loader: async () => (await import('./de/common.json')).default
-		},
-		{
-			locale: 'de',
-			key: 'navigation',
-			loader: async () => (await import('./de/navigation.json')).default
-		},
-		{
-			locale: 'de',
-			key: 'about',
-			path: ['/about'],
-			loader: async () => (await import('./de/about.json')).default
-		}
-	]
+	loaders: languages.flatMap((language) => {
+		return keys.map((key) => {
+			return {
+				locale: language,
+				key: key.key,
+				route: key.routes,
+				loader: async () => (await import(`./${language}/${key.key}.json`)).default
+			};
+		});
+	})
 };
 
 export const { t, locale, locales, loading, loadTranslations } = new i18n(config);

src/lib/i18n/nl/contact.json

@@ -0,0 +1,5 @@
+{
+	"title": "contact",
+	"meta": "Contactgegevens van Wouter van der Wal",
+	"description": "Hier zijn een paar verschillende manieren om contact met mij op te nemen."
+}

src/lib/i18n/nl/navigation.json

@@ -5,5 +5,5 @@
 	"theme": "Thema",
 	"language": "Taal",
 	"home": "Home",
-	"about": "Over"
+	"contact": "Contact"
 }

src/routes/[lang]/contact.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import { t } from '$lib/i18n';
+	import { capitalizeFirstLetter } from '$lib/common';
+
+	import MdEmail from 'svelte-icons/md/MdEmail.svelte';
+	import GoMarkGithub from 'svelte-icons/go/GoMarkGithub.svelte';
+	import FaLinkedin from 'svelte-icons/fa/FaLinkedin.svelte';
+	import FaTwitter from 'svelte-icons/fa/FaTwitter.svelte';
+	import FaReddit from 'svelte-icons/fa/FaReddit.svelte';
+</script>
+
+<svelte:head>
+	<title>{$t('common.title')} - {$t('contact.title')}</title>
+	<meta name="description" content={$t('contact.meta')} />
+</svelte:head>
+
+<h1>{capitalizeFirstLetter($t('contact.title'))}</h1>
+
+<p>{$t('contact.description')}</p>
+
+<ul>
+	<li class="email">
+		<MdEmail title="email" />
+		<span><a href="mailto:[email protected]">[email protected]</a></span>
+	</li>
+	<li class="github">
+		<GoMarkGithub title="Github" />
+		<span><a href="https://www.github.com/wjtje">wjtje</a></span>
+	</li>
+	<li class="linkedin">
+		<FaLinkedin title="LinkedIn" />
+		<span><a href="https://www.linkedin.com/in/wjtje/">Wouter van der Wal</a></span>
+	</li>
+	<li class="reddit">
+		<FaReddit title="Reddit" /><span><a href="https://www.reddit.com/u/wjtje">u/wjtje</a></span>
+	</li>
+	<li class="twitter">
+		<FaTwitter title="twitter" />
+		<span><a href="https://twitter.com/wjtje_wal">@wjtje_wal</a></span>
+	</li>
+</ul>
+
+<style lang="scss">
+	h1 {
+		@apply text-4xl pb-3;
+	}
+
+	p {
+		@apply pb-2;
+	}
+
+	ul {
+		li {
+			@apply h-8 flex flex-row gap-2 items-center mb-2 transition-[color] duration-200 w-auto;
+
+			:global(svg) {
+				@apply h-8 w-8 p-1 fill-current;
+			}
+
+			span {
+				@apply h-auto whitespace-nowrap;
+			}
+
+			// Custom hover effects
+			&.email {
+				@apply hover:text-red-600 dark:hover:text-red-500;
+			}
+
+			// Define brands with custom styles
+			$brands: linkedin, reddit, twitter;
+
+			@each $brand in $brands {
+				&.#{$brand} {
+					@apply hover:text-#{$brand}-brand;
+				}
+			}
+		}
+	}
+</style>

src/routes/__layout.svelte

@@ -30,8 +30,8 @@
 			name: $t('navigation.home')
 		},
 		{
-			path: `about`,
-			name: $t('navigation.about')
+			path: `contact`,
+			name: $t('navigation.contact')
 		}
 	];
 </script>

static/sitemap.xml

@@ -7,10 +7,10 @@
 		<xhtml:link rel="alternate" hreflang="de" href="https://wjtje.ga/de" />
 	</url>
 	<url>
-		<loc>https://wjtje.ga/en/about</loc>
+		<loc>https://wjtje.ga/en/contact</loc>
 		<priority>0.8</priority>
-		<xhtml:link rel="alternate" hreflang="en" href="https://wjtje.ga/en/about" />
-		<xhtml:link rel="alternate" hreflang="nl" href="https://wjtje.ga/nl/about" />
-		<xhtml:link rel="alternate" hreflang="de" href="https://wjtje.ga/de/about" />
+		<xhtml:link rel="alternate" hreflang="en" href="https://wjtje.ga/en/contact" />
+		<xhtml:link rel="alternate" hreflang="nl" href="https://wjtje.ga/nl/contact" />
+		<xhtml:link rel="alternate" hreflang="de" href="https://wjtje.ga/de/contact" />
 	</url>
 </urlset>

tailwind.config.cjs

@@ -2,7 +2,13 @@ module.exports = {
 	content: ['./src/**/*.{html,svelte,ts,js}'],
 	darkMode: 'class',
 	theme: {
-		extend: {}
+		extend: {
+			colors: {
+				'reddit-brand': '#ff4500',
+				'twitter-brand': '#009EF7',
+				'linkedin-brand': '#0A66C2'
+			}
+		}
 	},
 	plugins: [require('tailwindcss-global-dark')]
 };