Refactor portfolio and fix grammar

src/page/basics/text/text.html.ts

@@ -1,6 +0,0 @@
-import './text.scss';
-import { html } from '../../../types/html';
-
-export const generate = (text: string): html => `
-  <p class="text">${text}</p>
-`;

src/page/basics/text/text.scss

@@ -1,6 +0,0 @@
-@use '../../../style/mixins' as *;
-
-.text {
-  @include main-font();
-  text-align: left;
-}

src/page/basics/text/text.ts

@@ -1,9 +0,0 @@
-import { PageElement } from '../../page-element';
-import { createElement } from '../../../helper/create-element';
-import { generate } from './text.html';
-
-export class Text extends PageElement {
-  public constructor(text: string) {
-    super(createElement(generate(text)));
-  }
-}

src/page/basics/video/video.html.ts

@@ -3,20 +3,22 @@ import { url } from '../../../types/url';
 import { html } from '../../../types/html';
 
 export const generate = ({
-  poster,
-  options,
   webm,
   mp4,
+  poster,
+  shouldActLikeGif,
   container,
 }: {
-  poster?: url;
-  options?: string;
   webm: url;
   mp4: url;
+  poster?: url;
+  shouldActLikeGif?: boolean;
   container?: boolean;
 }): html => `
   ${container === undefined || container ? `<div class="figure-container">` : ''}
-    <video loading="lazy" ${options} ${poster ? `poster="${poster}` : ''}" >
+    <video loading="lazy" ${
+      shouldActLikeGif ? 'autoplay loop muted' : ''
+    } controls playsinline preload="metadata" ${poster ? `poster="${poster}` : ''}" >
         <source src="${webm}" type="video/webm"/>
         <source src="${mp4}" type="video/mp4"/>
     </video>

src/page/basics/video/video.ts

@@ -8,7 +8,7 @@ export class Video extends PageElement {
     poster?: url;
     mp4: url;
     webm: url;
-    options?: string;
+    shouldActLikeGif?: boolean;
     container?: boolean;
   }) {
     super(createElement(generate(options)));

src/page/content/content.scss

@@ -1 +1,5 @@
 @use '../../style/mixins' as *;
+
+.content {
+  text-align: left;
+}

src/page/content/content.ts

@@ -1,11 +1,14 @@
 import { createElement } from '../../helper/create-element';
-import { Content } from '../../types/portfolio';
+
 import { generate } from './content.html';
 import { PageElement } from '../page-element';
 
 export class PageContent extends PageElement {
-  public constructor(content: Content) {
+  public constructor(content: Array<string>) {
     super(createElement(generate()));
-    content.forEach(c => this.attachElement(c));
+    content.map(t => {
+      const p = createElement(`<p>${t}</p>`);
+      this.htmlRoot.appendChild(p);
+    });
   }
 }

src/page/footer/footer.html.ts

@@ -1,8 +1,8 @@
-import { Footer } from '../../types/portfolio';
 import './footer.scss';
 import cvIcon from '../../static/icons/cv.svg';
 import emailIcon from '../../static/icons/email.svg';
 import { html } from '../../types/html';
+import { FooterParameters } from './footer';
 
 export const generate = ({
   title,
@@ -10,7 +10,7 @@ export const generate = ({
   curriculaVitae,
   lastEditText,
   lastEdit,
-}: Footer): html => `
+}: FooterParameters): html => `
   <footer id="footer">
     <h2>${title}</h2>
     <ul>

src/page/footer/footer.ts

@@ -1,11 +1,21 @@
-import { Footer } from '../../types/portfolio';
 import { PageElement } from '../page-element';
-
 import { generate } from './footer.html';
 import { createElement } from '../../helper/create-element';
+import { url } from '../../types/url';
+
+export interface FooterParameters {
+  title: string;
+  email: string;
+  curriculaVitae: Array<{
+    name: string;
+    url: url;
+  }>;
+  lastEditText: string;
+  lastEdit: Date;
+}
 
 export class PageFooter extends PageElement {
-  constructor(footer: Footer) {
+  constructor(footer: FooterParameters) {
     super(createElement(generate(footer)));
   }
 }

src/page/header/header.html.ts

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

src/page/header/header.ts

@@ -1,14 +1,16 @@
 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';
+import { Image } from '../basics/image/image';
 
 export class PageHeader extends PageElement {
-  public constructor(header: Header) {
-    super(createElement(generate(header)));
-    this.attachElementByReplacing('.picture', header.picture);
+  public constructor(header: { name: string; photo: Image; about: Array<string> }) {
+    super(createElement(generate(header.name)));
+
+    this.attachElementByReplacing('.picture', header.photo);
     this.attachElement(new PageContent(header.about));
     this.attachElement(new PageThemeSwitcher());
   }

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

@@ -1,10 +1,10 @@
-import { TimelineElement } from '../../../types/portfolio';
 import info from '../../../static/icons/info.svg';
 import './timeline-element.scss';
 import { html } from '../../../types/html';
+import { TimelineElementParameters } from './timeline-element';
 
 export const generate = (
-  { date, title, more }: TimelineElement,
+  { date, title, more }: TimelineElementParameters,
   showMore: string
 ): html => {
   const id = titleToFragment(title);
@@ -18,7 +18,7 @@ export const generate = (
       <div class="figure"></div>
       <div class="lower">
         <h2><a href="#${id}">${title}</a></h2>
-        <div class="description"></div>
+        <p class="description"></p>
         ${more ? '<div class="more"></div>' : ''}
         <div class="buttons">
         ${

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

@@ -173,7 +173,7 @@
             padding-bottom: var(--small-margin);
             font-size: 0.9rem;
             font-style: italic;
-            padding: 0 8px 8px 8px;
+            padding: 0 8px var(--small-margin) 8px;
           }
         }
 

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

@@ -1,8 +1,19 @@
-import { TimelineElement } from '../../../types/portfolio';
 import { PageContent } from '../../content/content';
 import { PageElement } from '../../page-element';
 import { generate } from './timeline-element.html';
 import { createElement } from '../../../helper/create-element';
+import { Video } from '../../basics/video/video';
+import { Image } from '../../basics/image/image';
+import { Preview } from '../../basics/preview/preview';
+
+export interface TimelineElementParameters {
+  date: string;
+  figure: Image | Video | Preview;
+  title: string;
+  description: string;
+  more?: Array<string>;
+  links: Array<PageElement>;
+}
 
 export class PageTimelineElement extends PageElement {
   private isOpen: boolean;
@@ -11,7 +22,7 @@ export class PageTimelineElement extends PageElement {
   private showLess: string;
 
   public constructor(
-    timelineElement: TimelineElement,
+    timelineElement: TimelineElementParameters,
     showMore: string,
     showLess: string
   ) {
@@ -30,7 +41,7 @@ export class PageTimelineElement extends PageElement {
     } else super(root);
 
     this.attachElementByReplacing('.figure', timelineElement.figure);
-    this.attachElementByReplacing('.description', timelineElement.description);
+    this.query('.description').innerText = timelineElement.description;
     timelineElement.links.forEach(l => this.attachElementAsChildOf('.buttons', l));
 
     this.showMore = showMore;

src/page/timeline/timeline.ts

@@ -1,11 +1,21 @@
-import { Timeline } from '../../types/portfolio';
-import { PageTimelineElement } from './timeline-element/timeline-element';
+import {
+  PageTimelineElement,
+  TimelineElementParameters,
+} from './timeline-element/timeline-element';
 import { generate } from './timeline.html';
 import { createElement } from '../../helper/create-element';
 import { PageElement } from '../page-element';
 
 export class PageTimeline extends PageElement {
-  public constructor({ elements, showMoreText, showLessText }: Timeline) {
+  public constructor({
+    elements,
+    showMoreText,
+    showLessText,
+  }: {
+    showMoreText: string;
+    showLessText: string;
+    elements: Array<TimelineElementParameters>;
+  }) {
     super(createElement(generate()));
     elements.forEach(e =>
       this.attachElement(new PageTimelineElement(e, showMoreText, showLessText))