Refactor portfolio

src/page/header/header.html.ts

@@ -1,4 +1,4 @@
-import './about.scss';
+import './header.scss';
 import { Header } from '../../types/portfolio';
 import { html } from '../../types/html';
 

src/page/header/header.ts

@@ -1,6 +1,6 @@
 import { PageContent } from '../content/content';
 import { Header } from '../../types/portfolio';
-import { generate } from './about.html';
+import { generate } from './header.html';
 import { createElement } from '../../helper/create-element';
 import { PageThemeSwitcher } from '../theme-switcher/theme-switcher';
 import { PageElement } from '../page-element';

src/page/theme-switcher/theme-switcher.scss

@@ -1,6 +1,6 @@
 @use '../../style/mixins' as *;
 
-input[type='checkbox']#theme-switcher {
+#theme-switcher {
   @include on-large-screen {
     position: absolute;
     top: calc(-1 * var(--small-margin));
@@ -13,10 +13,6 @@ input[type='checkbox']#theme-switcher {
     margin-top: var(--normal-margin);
   }
 
-  &::-ms-check {
-    display: none;
-  }
-
   background-color: var(--accent-color);
   cursor: pointer;
   -webkit-appearance: none;
@@ -29,8 +25,7 @@ input[type='checkbox']#theme-switcher {
   $margin: calc((#{$size} - #{$icon-size}) / 2);
 
   border-radius: 1000px;
-  box-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.175),
-    inset 0 0 1px rgba(0, 0, 0, 0.4);
+  box-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.175), inset 0 0 1px rgba(0, 0, 0, 0.4);
 
   &:before {
     // moon + sun
@@ -52,14 +47,12 @@ input[type='checkbox']#theme-switcher {
     top: 50%;
     transform: translateY(-50%);
 
-    transition: transform var(--transition-time),
-      background-color var(--transition-time);
+    transition: transform var(--transition-time), background-color var(--transition-time);
   }
 
   &:not(:checked) {
     &:before {
-      transform: translateY(-50%)
-        translateX(calc(3 * #{$margin} + #{$icon-size}));
+      transform: translateY(-50%) translateX(calc(3 * #{$margin} + #{$icon-size}));
 
       animation: shine 3s linear alternate infinite;
       background-color: var(--sun-color);
@@ -90,8 +83,7 @@ input[type='checkbox']#theme-switcher {
 
     &:after {
       background-color: var(--accent-color);
-      transform: translateY(-50%)
-        translateX(calc(#{$margin} + #{$icon-size} * 0.33));
+      transform: translateY(-50%) translateX(calc(#{$margin} + #{$icon-size} * 0.33));
     }
   }
 }

src/portfolio.ts

@@ -2,7 +2,7 @@ import { PageFooter } from './page/footer/footer';
 import { Video } from './page/basics/video/video';
 import { Text } from './page/basics/text/text';
 import { Image } from './page/basics/image/image';
-import { PageHeader } from './page/about/about';
+import { PageHeader } from './page/header/header';
 import { PageTimeline } from './page/timeline/timeline';
 import { PageImageViewer } from './page/image-viewer/image-viewer';
 import { last } from './helper/last';
@@ -65,9 +65,7 @@ export const create = () => {
   const Open = ImageAnchorFactory(openIcon, 'Open in new tab');
   const Thesis = ImageAnchorFactory(cvIcon, 'Download thesis');
 
-  const page = {
-    imageViewer: new PageImageViewer(),
-    header: new PageHeader({
+  const header = new PageHeader({
     name: `András Schmelczer`,
     picture: new Image(meWebP, meJpeg, `a picture of me`, false),
     about: [
@@ -78,8 +76,9 @@ export const create = () => {
       new Text(`Look at some of the more interesting projects I have worked on. They are all listed below. 
         Further information about me can be found at the bottom of the page.`),
     ],
-    }),
-    timeline: new PageTimeline({
+  });
+
+  const timeline = new PageTimeline({
     showMoreText: `Show details`,
     showLessText: `Show less`,
     elements: [
@@ -194,11 +193,7 @@ export const create = () => {
       {
         date: `2019 November`,
         title: `My Notes`,
-          figure: new Image(
-            myNotesWebP,
-            myNotesJpeg,
-            `two screenshots of the application`
-          ),
+        figure: new Image(myNotesWebP, myNotesJpeg, `two screenshots of the application`),
         description: new Text(
           `A minimalist note organizer and editor powered by Markwon.`
         ),
@@ -206,10 +201,7 @@ export const create = () => {
           new Text(
             `A basic android app for creating and filtering notes written in markdown.`
           ),
-            new Anchor(
-              `https://github.com/schmelczerandras/my-notes`,
-              `MyNotes on GitHub`
-            ),
+          new Anchor(`https://github.com/schmelczerandras/my-notes`, `MyNotes on GitHub`),
           new Text(
             `It was my homework for BME's Android and web development course.
           It was also my first experience with Android development.`
@@ -374,18 +366,21 @@ export const create = () => {
         links: [],
       },
     ],
-    }),
-    footer: new PageFooter({
+  });
+
+  const footer = new PageFooter({
     title: `Learn more`,
     curriculaVitae: [{ name: `Curriculum vitae`, url: cvEnglish }],
     email: `andras@schmelczer.dev`,
     lastEditText: `Last modified on `,
     lastEdit: new Date(2020, 11 - 1, 17), // months are 0 indexed
-    }),
-  };
+  });
 
   new Body(document.querySelector('main'), [
-    ...Object.values(page),
-    new PageBackground(page.header, [page.timeline], page.footer),
+    new PageImageViewer(),
+    header,
+    timeline,
+    footer,
+    new PageBackground(header, [timeline], footer),
   ]);
 };

src/style/vars.scss

@@ -3,7 +3,7 @@
 @use 'animations/animations' as *;
 
 :root {
-  --transition-time: 250ms;
+  --transition-time: 150ms;
   --line-width: 3px;
   --line-height: 18px;
   --accent-color: #b7455e;

src/types/portfolio.ts

@@ -6,12 +6,6 @@ import { PageElement } from '../page/page-element';
 import { url } from './url';
 import { Preview } from '../page/basics/preview/preview';
 
-export interface Portfolio {
-  header: Header;
-  timeline: Timeline;
-  footer: Footer;
-}
-
 export interface Header {
   name: string;
   picture: Image;