Add navigational link

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'
+        )}.`,
       ],
     }),
 

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);
   }

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>`;

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);
+}