Refactor portfolio and fix grammar

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))