From 2746f239d7e217828ab83cbf137a7c41fb2a0501 Mon Sep 17 00:00:00 2001
From: Andras Schmelczer <andras@schmelczer.dev>
Date: Mon, 26 Sep 2022 16:22:27 +0200
Subject: [PATCH] Add navigational link

---
 src/data/portfolio.ts       | 6 +++++-
 src/page/header/header.scss | 7 ++-----
 src/page/link/link.html.ts  | 5 +++++
 src/page/link/link.scss     | 6 ++++++
 4 files changed, 18 insertions(+), 6 deletions(-)
 create mode 100644 src/page/link/link.html.ts
 create mode 100644 src/page/link/link.scss

diff --git a/src/data/portfolio.ts b/src/data/portfolio.ts
index a2d009a..87a2b2d 100644
--- a/src/data/portfolio.ts
+++ b/src/data/portfolio.ts
@@ -2,6 +2,7 @@ import { Background } from '../page/background/background';
 import { Contact } from '../page/contact/contact.html';
 import { Header } from '../page/header/header';
 import { ImageViewer } from '../page/image-viewer/image-viewer';
+import { Link } from '../page/link/link.html';
 import { Main } from '../page/main/main';
 import { PageElement } from '../page/page-element';
 import { TimelineElement } from '../page/timeline-element/timeline-element';
@@ -34,7 +35,10 @@ export const portfolio: Array<PageElement> = [
 
         "I'm passionate about architecting and building large-scale systems, especially in the context of AI/ML. However, in my free time, I also enjoy working with shaders, data visualisation, and sometimes even microcontrollers.",
 
-        "Discover some of my more exciting projects below. And if you'd like to reach out to me, you can find my contact details at the bottom of the page.",
+        `Discover some of my more exciting projects below. And if you'd like to reach out to me, you can find my contact details at ${Link(
+          'the bottom of the page',
+          '#contact'
+        )}.`,
       ],
     }),
 
diff --git a/src/page/header/header.scss b/src/page/header/header.scss
index 1dbbfb4..2c8c391 100644
--- a/src/page/header/header.scss
+++ b/src/page/header/header.scss
@@ -30,12 +30,9 @@
     text-align: justify;
   }
 
-  h1 {
-    hyphens: none;
-  }
-
+  h1,
   p,
-  h1 {
+  a {
     color: var(--very-light-text-color);
     margin-top: var(--line-height);
   }
diff --git a/src/page/link/link.html.ts b/src/page/link/link.html.ts
new file mode 100644
index 0000000..5f876f8
--- /dev/null
+++ b/src/page/link/link.html.ts
@@ -0,0 +1,5 @@
+import { url } from '../../types/url';
+import './link.scss';
+
+export const Link = (title: string, href: url) =>
+  `<a class="link" href="${href}">${title}</a>`;
diff --git a/src/page/link/link.scss b/src/page/link/link.scss
new file mode 100644
index 0000000..517e4bf
--- /dev/null
+++ b/src/page/link/link.scss
@@ -0,0 +1,6 @@
+@use '../../style/mixins' as *;
+
+.link {
+  text-decoration: none;
+  border-bottom: 2px solid var(--special-text-color);
+}