Merge

src/framework/page.ts

@@ -16,7 +16,10 @@ export class Page extends PageElement {
       );
     }
 
-    rootElement.append(...children.map(e => e.getElement()).filter(e => e));
+    children
+      .map(e => e.getElement())
+      .filter(e => e)
+      .forEach(e => rootElement.appendChild(e));
 
     if (isRootPage) {
       this.broadcastEvent({ type: PageEventType.onLoad }, this);

src/index.html

@@ -11,7 +11,7 @@
         <meta property="og:image" content="https://schmelczer.dev/og-image.jpg">
 
         <meta name="description" content="You can view my projects on a timeline.">
-        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
         <meta name="theme-color" content="#AA4465" />
 
         <title>Portfolio - András Schmelczer</title>

src/model/content.ts

@@ -1,10 +1,10 @@
 import { ResponsiveImage, url } from "./misc";
 
-interface Anchor {
+export type Anchor = {
   type: "a";
   href: url;
   text: string;
-}
+};
 
 export type Video = {
   type: "video";

src/model/portfolio.ts

@@ -1,5 +1,5 @@
 import { url } from "./misc";
-import { Content, Image, Video } from "./content";
+import { Anchor, Content, Image, Video } from "./content";
 
 export interface Portfolio {
   config: Config;
@@ -25,7 +25,7 @@ export interface TimelineElement {
   figure: Image | Video;
   description: string;
   more?: Content;
-  link?: url;
+  link?: Anchor;
 }
 
 export interface Footer {

src/page/background/background.ts

@@ -33,7 +33,6 @@ export class PageBackground extends PageElement {
   protected handleEvent(event: PageEvent, parent: PageElement) {
     if (event.type === PageEventType.onLoad) {
       this.bindListeners(parent);
-      this.resize(parent);
     } else if (event.type === PageEventType.onBodyDimensionsChanged) {
       this.resize(parent, event.data?.deltaHeight);
     }

src/page/footer/footer.scss

@@ -43,7 +43,7 @@ footer#page-footer {
 
     h6 {
       @include insignificant-font();
-      opacity: 0.6;
+      opacity: 0.75;
     }
   }
 }

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

@@ -28,12 +28,7 @@ export const generate = (
                 `
                 : ""
             }
-            ${
-              link
-                ? `
-                <a href="${link}" target="_blank">${link}</a>`
-                : ""
-            }
+            ${link ? PageContent.parseTypedContent(link) : ""}
         </div>
     </section>
 `;

src/page/timeline/timeline.ts

@@ -14,7 +14,7 @@ export class PageTimeline extends PageElement {
     const elements = timeline.map(
       e => new PageTimelineElement(e, showMore, showLess)
     );
-    root.append(...elements.map(e => e.getElement()));
+    elements.map(e => e.getElement()).forEach(e => root.appendChild(e));
     super(elements);
     this.setElement(root);
   }

src/portfolio.ts

@@ -177,7 +177,7 @@ export const portfolio: Portfolio = {
         alt: `a picture of the website`
       },
       description: `A simple web page where you can view my photos.`,
-      link: `schmelczer.dev/photos`
+      link: { type: `a`, href: `photos`, text: `schmelczer.dev/photos` }
     },
     {
       date: `2016 spring`,
@@ -203,7 +203,7 @@ export const portfolio: Portfolio = {
   footer: {
     title: `Learn more`,
     cv,
-    email: `andras@schmelczer.dev`,
+    email: `schmelczerandras@gmail.com`,
     cvName: `Curriculum vitae`,
     lastEditName: `Last modified on `,
     lastEdit: new Date(2019, 11, 29) // months are 0 indexed

src/styles.scss

@@ -27,6 +27,8 @@ html {
 body {
   @include main-font();
   height: 100%;
+  padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px)
+    env(safe-area-inset-bottom, 20px) env(safe-area-inset-left, 20px);
 
   & > main {
     height: 100%;