Refactor portfolio

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