Refactor portfolio

src/page/header/header.html.ts

@@ -0,0 +1,11 @@
+import './header.scss';
+import { Header } from '../../types/portfolio';
+import { html } from '../../types/html';
+
+export const generate = ({ name }: Header): html => `
+  <section id="about">
+    <div class="picture"></div>
+    <div class="placeholder"></div>
+    <h1>${name}</h1>
+  </section>
+`;

src/page/header/header.scss

@@ -0,0 +1,66 @@
+@use '../../style/mixins' as *;
+
+section#about {
+  @include card-base();
+  padding: var(--normal-margin);
+  background-color: var(--accent-color);
+  font-size: 0;
+
+  $img-size: 125px;
+  h1,
+  img,
+  .placeholder {
+    @include title-font();
+  }
+
+  img {
+    @include square($img-size);
+    border-radius: 100%;
+    cursor: pointer;
+    box-shadow: var(--shadow);
+  }
+
+  p {
+    @include main-font();
+    text-align: justify;
+  }
+
+  h1 {
+    hyphens: none;
+  }
+
+  p,
+  h1 {
+    color: var(--very-light-text-color);
+    margin-top: var(--line-height);
+  }
+
+  @include on-large-screen {
+    $img-size: 190px;
+
+    width: var(--body-width);
+    margin: calc(#{var(--normal-margin)} + #{$img-size} * 1 / 3) auto 0 auto;
+    position: relative;
+    border-radius: var(--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 - #{var(--normal-margin)}));
+      box-sizing: content-box;
+      float: left;
+      margin: 0 0.75ex 0.75ex 0;
+    }
+
+    h1 {
+      text-align: left;
+      margin-top: 0;
+    }
+  }
+}

src/page/header/header.ts

@@ -0,0 +1,15 @@
+import { PageContent } from '../content/content';
+import { Header } from '../../types/portfolio';
+import { generate } from './header.html';
+import { createElement } from '../../helper/create-element';
+import { PageThemeSwitcher } from '../theme-switcher/theme-switcher';
+import { PageElement } from '../page-element';
+
+export class PageHeader extends PageElement {
+  public constructor(header: Header) {
+    super(createElement(generate(header)));
+    this.attachElementByReplacing('.picture', header.picture);
+    this.attachElement(new PageContent(header.about));
+    this.attachElement(new PageThemeSwitcher());
+  }
+}