Extract non-data and update description

src/data/portfolio.ts

@@ -1,5 +1,4 @@
 import { PageBackground } from '../page/background/background';
-import { Image } from '../page/basics/image/image.html';
 import { Footer } from '../page/footer/footer.html';
 import { PageHeader } from '../page/header/header';
 import { PageImageViewer } from '../page/image-viewer/image-viewer';
@@ -27,23 +26,19 @@ export const create = (): Array<PageElement> => [
     new PageBackground(1, 1),
     new PageHeader({
       name: `András Schmelczer`,
-      photo: Image({
+      imageWebP: meWebP,
-        imageWebP: meWebP,
+      imageAltText: `a picture of me`,
-        alt: `a picture of me`,
-        imageScreenRatio: 0.3,
-      }),
       about: [
         `
-            I have always been fascinated by the engineering feats that surround us and pervade every aspect
+          With more than six years of professional experience and a degree in Computer Science, I can confidently tackle any challenge regardless of its complexity. My interests span diverse areas, making me able to architect vast and sophisticated systems with a clear understanding. I'm keen on designing distributed systems, especially when AI/ML is involved.
-            of our lives. When I realised I might someday be able to contribute to this field, I knew that
+        `,
-            this would become my life's ambition. 
-            As I am starting my third semester at Leiden University,
-            I feel I am getting closer to my ambition every day.
-          `,
         `
-            Discover some of my more interesting projects. They are all listed below.
+          I'm excited to take my part in connecting people and providing them with AI/ML solutions along with the necessary computing capabilities which were unimaginable even a decade ago.
-            Further information about me can be found at the bottom of the page.
+        `,
-          `,
+        `
+          Discover some of my more interesting earlier projects. They are all listed below.
+          Further information about me can be found at the bottom of the page.
+        `,
       ],
     }),
     new PageTimeline({
@@ -71,8 +66,6 @@ export const create = (): Array<PageElement> => [
       email: `andras@schmelczer.dev`,
       linkedin: `https://www.linkedin.com/in/andras-schmelczer-35487017b`,
       lastEditText: `Last modified on `,
-      // @ts-ignore: injected by webpack
-      lastEdit: new Date(__CURRENT_DATE__),
     })
   ),
   new PageImageViewer(),

src/page/footer/footer.html.ts

@@ -5,13 +5,15 @@ import { html } from '../../types/html';
 import { url } from '../../types/url';
 import './footer.scss';
 
+// @ts-ignore: injected by webpack
+const LAST_EDIT = new Date(__CURRENT_DATE__);
+
 export const Footer = ({
   title,
   email,
   curriculaVitae,
   linkedin,
   lastEditText,
-  lastEdit,
 }: {
   title: string;
   email: url;
@@ -21,7 +23,6 @@ export const Footer = ({
     url: url;
   }>;
   lastEditText: string;
-  lastEdit: Date;
 }): html => `
   <footer id="footer">
     <h2>${title}</h2>
@@ -46,7 +47,7 @@ export const Footer = ({
       </li>
     </ul>
     <aside class="other">
-      <p>${lastEditText} <time datetime="${lastEdit.toISOString()}">${lastEdit.toLocaleDateString()}</time></p>
+      <p>${lastEditText} <time datetime="${LAST_EDIT.toISOString()}">${LAST_EDIT.toLocaleDateString()}</time></p>
     </aside>
   </footer>
 `;

src/page/header/header.ts

@@ -1,5 +1,6 @@
 import { createElement } from '../../helper/create-element';
-import { html } from '../../types/html';
+import { ResponsiveImage } from '../../types/responsive-image';
+import { Image } from '../basics/image/image.html';
 import { PageElement } from '../page-element';
 import { generate } from './header.html';
 import { PageThemeSwitcher } from './theme-switcher/theme-switcher';
@@ -7,14 +8,28 @@ import { PageThemeSwitcher } from './theme-switcher/theme-switcher';
 export class PageHeader extends PageElement {
   public constructor({
     name,
-    photo,
+    imageWebP,
+    imageAltText,
     about,
   }: {
     name: string;
-    photo: html;
+    imageWebP: ResponsiveImage;
+    imageAltText: string;
     about: Array<string>;
   }) {
-    super(createElement(generate({ name, about, photo })));
+    super(
+      createElement(
+        generate({
+          name,
+          about,
+          photo: Image({
+            imageWebP,
+            alt: imageAltText,
+            imageScreenRatio: 0.2,
+          }),
+        })
+      )
+    );
     this.attachElement(new PageThemeSwitcher());
   }
 }