Mostly done

src/page/about/about.scss

@@ -4,15 +4,7 @@
 #about {
   @include important-card();
 
-  $img-size: 190px;
-
-  position: relative;
-  width: $body-width;
-  margin-top: calc(#{$normal-margin} + #{$img-size} * 1 / 3);
-
-  h1 {
-    text-align: left;
-  }
+  $img-size: 125px;
 
   h1,
   img,
@@ -21,29 +13,49 @@
     @include title-font();
   }
 
-  .placeholder {
-    @include square(calc(#{$img-size} * 2 / 3 - #{$normal-margin}));
-    box-sizing: content-box;
-    float: left;
-    margin: 0 0.75ex 0.75ex 0;
-  }
-
   img {
     @include square($img-size);
-    position: absolute;
-    left: 0;
-    top: 0;
-    transform: translateY(-$img-size * 1/3) translateX(-$img-size * 1/3);
     border-radius: 100%;
     cursor: pointer;
   }
 
-  @media (max-width: $breakpoint-width) {
-  }
-
   p {
     @include main-font();
     text-align: justify;
     margin-top: $small-margin;
   }
+
+  @media (max-width: $breakpoint-width) {
+    h1 {
+      margin-top: $small-margin;
+    }
+  }
+
+  @media (min-width: $breakpoint-width) {
+    $img-size: 190px;
+
+    width: $body-width;
+    margin: calc(#{$normal-margin} + #{$img-size} * 1 / 3) auto 0 auto;
+    position: relative;
+    border-radius: $border-radius;
+
+    img {
+      @include square($img-size);
+      position: absolute;
+      left: 0;
+      top: 0;
+      transform: translateY(-$img-size * 1/3) translateX(-$img-size * 1/3);
+    }
+
+    .placeholder {
+      @include square(calc(#{$img-size} * 2 / 3 - #{$normal-margin}));
+      box-sizing: content-box;
+      float: left;
+      margin: 0 0.75ex 0.75ex 0;
+    }
+
+    h1 {
+      text-align: left;
+    }
+  }
 }

src/page/background/background.scss

@@ -9,16 +9,16 @@
   transform-style: preserve-3d;
   overflow: hidden;
 
-  transition: height $slow-transition-time, width $slow-transition-time;
+  transition: height $long-transition-time, width $long-transition-time;
 
   div {
     border-radius: 10000px;
     position: absolute;
     left: 0;
     top: 0;
-    width: 160px;
+    width: 130px;
 
-    transition: transform $slow-transition-time, opacity $slow-transition-time;
+    transition: transform $long-transition-time, opacity $long-transition-time;
 
     animation: fade-in 1s linear;
     @keyframes fade-in {

src/page/background/background.ts

@@ -11,12 +11,12 @@ import { generate } from "./background.html";
 
 export class PageBackground extends PageElement {
   private blobs: Array<Blob> = [];
-  private blobSpacing = 300;
+  private blobSpacing = 350;
 
   public constructor(private start: PageElement, private end: PageElement) {
     super();
     this.setElement(createElement(generate()));
-    Blob.initialize(20, 40, 5);
+    Blob.initialize(10, 30, 5);
   }
 
   protected handleEvent(event: PageEvent, parent: PageElement) {
@@ -24,7 +24,7 @@ export class PageBackground extends PageElement {
       this.bindListeners(parent);
       this.resize(parent);
     } else if (event.type === PageEventType.onBodyDimensionsChanged) {
-      this.resize(parent, event.data.deltaHeight);
+      this.resize(parent, event.data?.deltaHeight);
     }
   }
 
@@ -44,10 +44,9 @@ export class PageBackground extends PageElement {
     this.getElement().style.width = `${width}px`;
     this.getElement().style.height = `${height}px`;
 
-    const requiredBlobCount =
-      width > 900 ? Math.round((width * height) / this.blobSpacing ** 2) : 0;
-
-    console.log(requiredBlobCount);
+    const requiredBlobCount = Math.round(
+      (width * height) / this.blobSpacing ** 2
+    );
 
     while (requiredBlobCount > this.blobs.length) {
       const blob = new Blob();
@@ -55,7 +54,7 @@ export class PageBackground extends PageElement {
       this.blobs.push(blob);
     }
 
-    const random = randomFactory(2322);
+    const random = randomFactory(2662);
 
     this.blobs.forEach((b, i) => {
       if (i >= requiredBlobCount) {

src/page/background/blob.ts

@@ -7,7 +7,7 @@ import {
 } from "../../framework/helper";
 
 export class Blob {
-  private static readonly creatorRandom = randomFactory(42);
+  private static readonly creatorRandom = randomFactory(44);
   private static readonly colors = ["#fff9e0", "#ffd6d6"];
   private static zMin: number;
   private static zMax: number;

src/page/content/content.ts

@@ -18,7 +18,7 @@ export class PageContent extends PageElement {
               .map(element => {
                 if (PageContent.isTyped(element)) {
                   if (element.type === "a") {
-                    return `<a href="${element.href}" target="_blank"> ${element.text} </a>`;
+                    return `<a href="${element.href}" rel="noreferrer" target="_blank"> ${element.text} </a>`;
                   }
                   if (element.type === "video") {
                     return `<video controls><source src="${element.src}" /></video>`;

src/page/footer/footer.html.ts

@@ -19,11 +19,11 @@ export const generate = ({
         <h2>${title}</h2>
         <ul>
             <li>
-                <img src="${cvIcon}" alt="CV" />
-                <a id="cv" target="_blank">${cvName}</a>
+                <img src="${cvIcon}" alt="CV" class="no-open" />
+                <a id="cv" href="${cv}" target="_blank">${cvName}</a>
             </li>
             <li>
-                <img src="${emailIcon}" alt="email" />
+                <img src="${emailIcon}" alt="email" class="no-open"/>
                 <a id="email" href="mailto:${email}">${email}</a>
             </li>
         </ul>

src/page/footer/footer.scss

@@ -4,10 +4,8 @@
 footer#page-footer {
   text-align: center;
 
-  margin: $normal-margin auto 0 auto;
-  padding: $normal-margin $normal-margin $line-height $normal-margin;
+  margin: $large-margin auto 0 auto;
   width: 100%;
-  // backdrop-filter: blur($blur-radius);
 
   h2 {
     @include title-font();
@@ -16,7 +14,7 @@ footer#page-footer {
   ul {
     list-style: none;
     display: inline-block;
-    margin-top: calc(#{$small-margin} / 2 + #{$normal-margin} / 2);
+    margin-top: $normal-margin;
     text-align: left;
 
     li {
@@ -40,7 +38,7 @@ footer#page-footer {
 
   aside.other {
     @include center-children();
-    margin: calc(2 * #{$normal-margin}) auto 0 auto;
+    margin: $large-margin auto $line-height auto;
     width: $body-width;
 
     h6 {

src/page/image-viewer/image-viewer.ts

@@ -24,7 +24,9 @@ export class PageImageViewer extends PageElement {
     );
     images
       .filter(
-        (img: HTMLImageElement) => img.parentElement !== this.getElement()
+        (img: HTMLImageElement) =>
+          img.parentElement !== this.getElement() &&
+          !img.classList.contains("no-open")
       )
       .forEach(
         (img: HTMLImageElement) => (img.onclick = this.handleClick.bind(this))

src/page/index.ts

@@ -7,7 +7,6 @@ import { PageImageViewer } from "./image-viewer/image-viewer";
 import { Page } from "../framework/page";
 
 export const create = ({ config, header, timeline, footer }: Portfolio) => {
-  document.title = header.name;
   const pageHeader = new PageHeader(header, config.aPictureOf);
   const pageFooter = new PageFooter(footer);
 

src/page/timeline/timeline-element/timeline-element.html.ts

@@ -9,11 +9,10 @@ export const generate = (
 ): html => `
     <section class="timeline-element">
         <div class="line">
-            <p class="date-wide-screen">${date}</p>
+            <p class="date">${date}</p>
         </div>
         <div class="card">
             <h2>${title}</h2>
-            <p class="date-narrow-screen">${date}</p>
             <div class="image-container">
                 <img src="${picture}" alt="${picture}"/>
             </div>
@@ -21,10 +20,10 @@ export const generate = (
             ${
               more
                 ? `
-                <div id="more"></div>
+                <div class="more"></div>
                 <div class="buttons">
-                    <a id="show-more">${showMore}</a>
-                    <a id="show-less">${showLess}</a>
+                    <a class="show-more">${showMore}</a>
+                    <a class="show-less">${showLess}</a>
                 </div>
                 `
                 : ""

src/page/timeline/timeline-element/timeline-element.scss

@@ -4,46 +4,63 @@
 .timeline-element {
   display: flex;
 
-  .date-narrow-screen,
-  .date-wide-screen {
-    @include insignificant-font();
-  }
-
-  .date-wide-screen {
-    color: $accent-color;
-  }
-
   .line {
-    @media (max-width: $breakpoint-width) {
-      display: none;
-    }
-
     position: relative;
-    margin: 0 $small-margin 0 $icon-size / 2;
     border-left: $line-width solid $accent-color;
 
     &:before {
       content: "";
       @include square($icon-size);
       position: absolute;
-      top: 33%;
       left: calc(-0.5 * #{$icon-size} - (1.5 * #{$line-width}));
       border: $line-width solid $accent-color;
       border-radius: 100%;
       background: $background;
     }
 
-    .date-wide-screen {
-      position: relative;
-      top: calc(33% + #{$icon-size} + 2ch);
-      transform: rotate(30deg);
-      margin: 0 $normal-margin 0 calc(#{$line-width} + 1ex);
-      width: 100px;
+    .date {
+      @include insignificant-font();
     }
   }
 
-  &:not(:first-of-type) .card {
-    margin-top: $normal-margin;
+  @media (min-width: $breakpoint-width) {
+    &:not(:first-of-type) .card {
+      margin-top: $large-margin;
+    }
+
+    .line {
+      &:before {
+        top: calc(33% - #{$icon-size} / 2);
+      }
+
+      .date {
+        position: relative;
+        top: calc(33% + #{$icon-size} / 2 + 1ch);
+        transform: rotate(30deg);
+        margin: 0 $normal-margin 0 calc(#{$line-width} + 1ex);
+        width: 100px;
+      }
+    }
+  }
+
+  @media (max-width: $breakpoint-width) {
+    flex-direction: column;
+    align-items: center;
+
+    &:before {
+      top: calc(50% - #{$icon-size} / 2);
+    }
+
+    .line {
+      @include center-children();
+      height: 150px;
+      width: 50%;
+
+      .date {
+        margin-left: calc(#{$icon-size} / 2 + #{$small-margin});
+        width: 200px;
+      }
+    }
   }
 
   .card {
@@ -58,18 +75,9 @@
       @include sub-title-font();
     }
 
-    .date-narrow-screen {
-      @media (min-width: $breakpoint-width) {
-        display: none;
-      }
-
-      margin: $small-margin 0 0 0;
-      color: $light-text-color;
-    }
-
     .image-container {
       font-size: 0;
-      box-shadow: inset $shadow;
+      box-shadow: inset $shadow1, inset $shadow2;
       pointer-events: none;
       img {
         pointer-events: all;
@@ -83,11 +91,11 @@
       font-style: italic;
     }
 
-    #more {
+    .more {
       overflow: hidden;
       height: 0;
       margin-top: 0;
-      transition: height $slow-transition-time;
+      transition: height $long-transition-time;
     }
 
     .buttons {
@@ -95,14 +103,14 @@
       margin-top: $small-margin;
 
       * {
-        transition: opacity $slow-transition-time;
+        transition: opacity $long-transition-time;
       }
 
-      #show-more {
+      .show-more {
         opacity: 1;
       }
 
-      #show-less {
+      .show-less {
         opacity: 0;
         visibility: hidden;
         position: absolute;

src/page/timeline/timeline-element/timeline-element.ts

@@ -20,7 +20,7 @@ export class PageTimelineElement extends PageElement {
       const content = new PageContent(timelineElement.more);
       super([content]);
       this.isOpen = false;
-      this.more = root.querySelector("#more");
+      this.more = root.querySelector(".more");
       this.more.appendChild(content.getElement());
       window.addEventListener("resize", this.handleResize.bind(this));
       root
@@ -31,8 +31,8 @@ export class PageTimelineElement extends PageElement {
   }
 
   private toggleOpen() {
-    const showMore = this.query("#show-more") as HTMLElement;
-    const showLess = this.query("#show-less") as HTMLElement;
+    const showMore = this.query(".show-more") as HTMLElement;
+    const showLess = this.query(".show-less") as HTMLElement;
     if (this.isOpen) {
       PageTimelineElement.show(showMore);
       PageTimelineElement.hide(showLess);
@@ -51,6 +51,14 @@ export class PageTimelineElement extends PageElement {
       type: PageEventType.onBodyDimensionsChanged,
       data: { deltaHeight }
     });
+
+    setTimeout(
+      () =>
+        this.eventBroadcaster?.broadcastEvent({
+          type: PageEventType.onBodyDimensionsChanged
+        }),
+      350
+    );
   }
 
   private static hide(element: HTMLElement) {

src/page/timeline/timeline.scss

@@ -1,5 +1,10 @@
 @import "../../style/vars";
 
-main#timeline {
-  margin-top: $normal-margin;
+#timeline {
+  width: $body-width;
+  margin: $large-margin auto 0 auto;
+
+  @media (max-width: $breakpoint-width) {
+    margin: auto;
+  }
 }