Simplify footer

src/data/create-portfolio.ts

@@ -20,8 +20,9 @@ import { photosTimelineElement } from './projects/photos';
 import { platformGameTimelineElement } from './projects/platform-game';
 import { sdf2dTimelineElement } from './projects/sdf2d';
 import { towersTimelineElement } from './projects/towers';
+import { CV, Email, GitHubLink, LinkedIn } from './shared';
 
-export const create = (): Array<PageElement> => [
+export const createPortfolio = (): Array<PageElement> => [
   new Main(
     new PageBackground(1, 1),
     new PageHeader({
@@ -62,12 +63,12 @@ export const create = (): Array<PageElement> => [
     }),
     Footer({
       title: `Learn more`,
-      curriculaVitae: [{ name: `Download my CV`, url: cvEnglish }],
+      links: [
-      email: `andras@schmelczer.dev`,
+        CV(cvEnglish),
-      linkedInLink: `https://www.linkedin.com/in/andras-schmelczer`,
+        GitHubLink('https://github.com/schmelczer'),
-      linkedInText: 'Find me on LinkedIn',
+        LinkedIn('https://www.linkedin.com/in/andras-schmelczer'),
-      gitHubLink: `https://github.com/schmelczer`,
+        Email('mailto:andras@schmelczer.dev'),
-      gitHubText: 'Find me on GitHub',
+      ],
       lastEditText: `Last modified on `,
     })
   ),

src/data/shared.ts

@@ -1,16 +1,24 @@
 import cvIcon from '../../static/icons/cv.svg';
-import githubIcon from '../../static/icons/github.svg';
+import emailIcon from '../../static/icons/email.svg';
+import gitHubIcon from '../../static/icons/github.svg';
+import linkedInIcon from '../../static/icons/linkedin.svg';
 import openIcon from '../../static/icons/open.svg';
 import packageIcon from '../../static/icons/package.svg';
 import pythonIcon from '../../static/icons/python.svg';
 import youtubeIcon from '../../static/icons/youtube.svg';
 import { ImageAnchorFactory } from '../page/basics/image-anchor/image-anchor.html';
+import { ImageButtonFactory } from '../page/basics/image-button/image-button.html';
 
-export const GitHub = ImageAnchorFactory(githubIcon, 'Open on GitHub');
+export const GitHub = ImageButtonFactory(gitHubIcon, 'Open on GitHub');
-export const NPM = ImageAnchorFactory(packageIcon, 'Open on npm');
+export const NPM = ImageButtonFactory(packageIcon, 'Open on npm');
-export const PyPi = ImageAnchorFactory(pythonIcon, 'Open on PyPi');
+export const PyPi = ImageButtonFactory(pythonIcon, 'Open on PyPi');
-export const Open = ImageAnchorFactory(openIcon, 'Open in new tab');
+export const Open = ImageButtonFactory(openIcon, 'Open in new tab');
-export const Thesis = ImageAnchorFactory(cvIcon, 'Download thesis', {
+export const Thesis = ImageButtonFactory(cvIcon, 'Download thesis', {
   shouldDownload: true,
 });
-export const Youtube = ImageAnchorFactory(youtubeIcon, 'Open on YouTube');
+export const Youtube = ImageButtonFactory(youtubeIcon, 'Open on YouTube');
+
+export const CV = ImageAnchorFactory(cvIcon, 'Download my CV');
+export const GitHubLink = ImageAnchorFactory(gitHubIcon, 'Find me on GitHub');
+export const LinkedIn = ImageAnchorFactory(linkedInIcon, 'Find me on LinkedIn');
+export const Email = ImageAnchorFactory(emailIcon, 'andras@schmelczer.dev');

src/index.ts

@@ -8,7 +8,7 @@ import '../static/no-change/favicons/favicon.ico';
 import '../static/no-change/favicons/site.webmanifest';
 import '../static/no-change/og-image.jpg';
 import '../static/no-change/robots.txt';
-import { create as createPortfolio } from './data/portfolio';
+import { createPortfolio } from './data/create-portfolio';
 import { addSupportForTabNavigation } from './helper/add-support-for-tab-navigation';
 import { removeUnnecessaryOutlines } from './helper/remove-unnecessary-outlines';
 import { scrollToFragment } from './helper/scroll-to-fragment';

src/page/basics/image-anchor/image-anchor.html.ts

@@ -9,15 +9,10 @@ export const ImageAnchorFactory =
   ) =>
   (href: url) =>
     `
-  <a class="image-anchor" 
+    <div class="image-anchor">
-    href="${href}"
-    rel="noopener"
-    target="_blank"
-    ${shouldDownload ? 'download' : ''}
-  >
-    <div class="svg-container">
       ${svg}
+      <a rel="noopener" target="_blank" href="${href}" ${
+      shouldDownload ? 'download' : ''
+    }>${title}</a>
     </div>
-    <p>${title}</p>
-  </a>
 `;

src/page/basics/image-anchor/image-anchor.scss

@@ -1,25 +1,21 @@
 @use '../../../style/mixins' as *;
 
 .image-anchor {
-  @include image-button(var(--icon-size));
+  display: flex;
+  align-items: center;
 
-  .svg-container {
+  &:not(:first-child) {
-    position: relative;
+    padding-top: var(--line-height);
-    margin: auto;
-    @include square(var(--icon-size));
-
-    svg {
-      stroke: var(--normal-text-color);
-      transition: stroke var(--transition-time), transform var(--transition-time);
-    }
   }
 
-  p {
+  svg {
-    @include main-font();
+    @include square(var(--icon-size));
-    padding-bottom: var(--small-margin);
+    margin-right: calc(var(--small-margin) / 2);
-    font-size: 0.9rem;
+    stroke: var(--normal-text-color);
-    font-style: italic;
+  }
-    padding: 0 8px 8px 8px;
+
-    text-align: center;
+  a {
+    @include link;
+    font-size: 1.4rem;
   }
 }

src/page/basics/image-button/image-button.html.ts

@@ -0,0 +1,23 @@
+import { url } from '../../../types/url';
+import './image-button.scss';
+
+export const ImageButtonFactory =
+  (
+    svg: string,
+    title: string,
+    { shouldDownload = false }: { shouldDownload?: boolean } = {}
+  ) =>
+  (href: url) =>
+    `
+  <a class="image-button" 
+    href="${href}"
+    rel="noopener"
+    target="_blank"
+    ${shouldDownload ? 'download' : ''}
+  >
+    <div class="svg-container">
+      ${svg}
+    </div>
+    <p>${title}</p>
+  </a>
+`;

src/page/basics/image-button/image-button.scss

@@ -0,0 +1,25 @@
+@use '../../../style/mixins' as *;
+
+.image-button {
+  @include image-button(var(--icon-size));
+
+  .svg-container {
+    position: relative;
+    margin: auto;
+    @include square(var(--icon-size));
+
+    svg {
+      stroke: var(--normal-text-color);
+      transition: stroke var(--transition-time), transform var(--transition-time);
+    }
+  }
+
+  p {
+    @include main-font();
+    padding-bottom: var(--small-margin);
+    font-size: 0.9rem;
+    font-style: italic;
+    padding: 0 8px 8px 8px;
+    text-align: center;
+  }
+}

src/page/footer/footer.html.ts

@@ -1,9 +1,4 @@
-import cvIcon from '../../../static/icons/cv.svg';
-import emailIcon from '../../../static/icons/email.svg';
-import githubIcon from '../../../static/icons/github.svg';
-import linkedinIcon from '../../../static/icons/linkedin.svg';
 import { html } from '../../types/html';
-import { url } from '../../types/url';
 import './footer.scss';
 
 // @ts-ignore: injected by webpack
@@ -11,54 +6,25 @@ const LAST_EDIT = new Date(__CURRENT_DATE__);
 
 export const Footer = ({
   title,
-  email,
+  links,
-  curriculaVitae,
-  linkedInLink,
-  linkedInText,
-  gitHubLink,
-  gitHubText,
   lastEditText,
 }: {
   title: string;
-  email: string;
+  links: Array<html>;
-  curriculaVitae: Array<{
-    name: string;
-    url: url;
-  }>;
-  linkedInLink: url;
-  linkedInText: string;
-  gitHubLink: url;
-  gitHubText: string;
   lastEditText: string;
 }): html => `
   <footer id="footer">
     <h2>${title}</h2>
-    <ul>
+
-        ${curriculaVitae
+    <div class="links">
-          .map(
+      ${links.join('')}
-            (cv) => `
+    </div>
-              <li>
+
-               ${cvIcon}
+    <aside>
-                <a rel="noopener" href="${cv.url}" download>${cv.name}</a>
+      <p>
-              </li>
+        ${lastEditText}
-            `
+        <time datetime="${LAST_EDIT.toISOString()}">${LAST_EDIT.toLocaleDateString()}</time>
-          )
+      </p>
-          .join('')}
-      <li>
-        ${githubIcon}
-        <a rel="noopener" target="_blank" href="${gitHubLink}">${gitHubText}</a>
-      </li>
-      <li>
-        ${linkedinIcon}
-        <a rel="noopener" target="_blank" href="${linkedInLink}">${linkedInText}</a>
-      </li>
-      <li>
-        ${emailIcon}
-        <a rel="noopener" href="mailto:${email}">${email}</a>
-      </li>
-    </ul>
-    <aside class="other">
-      <p>${lastEditText} <time datetime="${LAST_EDIT.toISOString()}">${LAST_EDIT.toLocaleDateString()}</time></p>
     </aside>
   </footer>
 `;

src/page/footer/footer.scss

@@ -1,57 +1,24 @@
 @use '../../style/mixins' as *;
 
-footer#footer {
+#footer {
   text-align: center;
   margin-top: var(--large-margin);
 
-  a {
-    @include link;
-  }
-
   h2 {
     @include title-font();
   }
 
-  ul {
+  .links {
-    margin-top: var(--normal-margin);
+    margin: var(--normal-margin) 0 0 var(--normal-margin);
-    list-style: none;
     display: inline-block;
-    text-align: left;
-
-    li {
-      @include center-children();
-      justify-content: flex-start;
-
-      &:not(:first-child) {
-        padding-top: var(--line-height);
-      }
-
-      svg {
-        @include square(var(--icon-size));
-        margin-right: calc(var(--small-margin) / 2);
-        stroke: var(--normal-text-color);
-      }
-
-      a {
-        font-size: 1.4rem;
-      }
-    }
   }
 
-  aside.other {
+  aside {
-    @include center-children();
+    margin: var(--large-margin) auto var(--line-height) auto;
-    flex-direction: column;
-    margin: var(--large-margin) auto 0 auto;
-    padding-bottom: var(--line-height);
-    width: var(--body-width);
 
     p {
-      display: inline;
+      @include special-text-font();
-      &,
+      color: var(--normal-text-color);
-      * {
-        @include special-text-font();
-        color: var(--normal-text-color);
-      }
       opacity: 0.75;
     }
   }