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 = [ "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) => + `${title}`; 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); +}