dev21w35c

public/assets/css/modal.css

@@ -0,0 +1,36 @@
+/* -- Transition overrides -- */
+
+body {
+	transition: var(--transition) background-color;
+}
+
+body.modalActive {
+	background-color: var(--color-contrast);
+}
+
+body main .screen {
+	transition: var(--transition) transform;
+}
+
+body.modalActive main .screen {
+	transition: 300ms;
+	transform: scale(.9,.95);
+	opacity: .5;
+	pointer-events: none;
+}
+
+/* -- Boilerplate -- */
+
+.modal {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+	z-index: 1;
+	pointer-events: none;
+}
+
+.modal.active {
+	pointer-events: all;
+}

public/assets/css/style.css

@@ -1,4 +1,5 @@
 /* Copyright © Victor Westerlund - No libraries! 😲 */
+
 :root {
     --comp-background: 255,255,255;
     --comp-contrast: 33,33,33;
@@ -10,6 +11,8 @@
 
     --padding: 20px;
     --border-radius: 10px;
+    --header-height: 100px;
+    --transition: 300ms;
 }
 
 .dark {
@@ -53,6 +56,10 @@
     color: var(--color-accent);
 }
 
+picture {
+    display: contents;
+}
+
 html,
 body {
     width: 100%;
@@ -146,10 +153,20 @@ main.active {
     color: var(--color-contrast);
 }
 
+.button.loading p {
+    opacity: 0;
+}
+
+.button.loading::after {
+    position: absolute;
+    content: "loading...";
+    opacity: 1;
+}
+
 /* -- Screens -- */
 
 header {
-    --size: 100px;
+    --size: var(--header-height,100px);
     box-sizing: border-box;
     padding: var(--padding);
     height: var(--size);
@@ -206,14 +223,69 @@ header .logo {
 
 /* -- Screen > Landingpage -- */
 
+.screen.landingpage .content {
+    padding-bottom: 0;
+}
+
+.screen.landingpage img {
+    width: 100%;
+    max-width: 300px;
+    align-self: flex-end;
+}
+
+.screen.landingpage .pattern {
+    position: absolute;
+    top: var(--header-height);
+    width: 100vw;
+    height: calc(100% - var(--header-height));
+    overflow: hidden;
+}
+
+.screen.landingpage .pattern div {
+    --size: clamp(100px,100vw,35vh);
+    position: relative;
+    top: calc((var(--size) - var(--header-height)) * -1);
+    width: 0;
+    height: 0;
+    border: solid var(--size) transparent;
+    border-bottom: solid calc(var(--size) * 2) rgba(var(--comp-accent),.1);
+    transform-origin: 50% 75%;
+    transform: rotate(20deg);
+}
+
 /* -- Screen > Menu -- */
 
 .screen.menu .content {
     display: flex;
     flex-direction: column;
+    align-items: center;
     gap: 20px;
 }
 
-.screen.menu .button[data="contact"] {
+.screen.menu .button {
+    width: calc(100% - (var(--padding) * 2));
+    max-width: 400px;
+    flex: 0;
+}
+
+.screen.menu .button[data-action="openContactCard"] {
     margin-top: auto;
 }
+
+@media (max-width: 300px) {
+    .button svg:not(.hidden) ~ p,
+    header .logo {
+        display: none;
+    }
+}
+
+@media (max-width: 230px) {
+    header {
+        justify-content: center;
+    }
+
+    header .spacer,
+    header p {
+        display: none;
+    }
+}

public/assets/js/modules/Logging.mjs

@@ -1,4 +1,6 @@
-export class Logging {
+// Copyright © Victor Westerlund - No libraries! 😲
+
+class Logging {
 	constructor() {
 		this.endpoint = "/log/";
 		this.data = new URLSearchParams();
@@ -25,3 +27,9 @@ export class Logging {
 		}
 	}
 }
+
+export default class Log {
+	constructor(value,key = "u") {
+		console.log(key,value);
+	}
+}

public/assets/js/modules/Modals.mjs

@@ -0,0 +1,102 @@
+// Copyright © Victor Westerlund - No libraries! 😲
+
+import { default as Interaction, destroy } from "./UI.mjs";
+
+// Boilerplate for creating element overlays
+class Modal extends Interaction {
+	constructor(extendedInteractions = {}) {
+		const element = document.createElement("div");
+		let interactions = {
+			close: () => {
+				this.close();
+			}
+		};
+		interactions = Object.assign(interactions,extendedInteractions);
+		super(element,interactions);
+
+		this.element = this.applyTemplate(element);
+		this.importStyleSheet();
+	}
+
+	// Import the companion CSS rules
+	importStyleSheet() {
+		let sheet = "css/modal.css";
+		
+		// Import stylesheet with CSS module script if supported
+		if(document.adoptedStyleSheets) {
+			sheet = "../../" + sheet;
+			const module = import(sheet, {
+				assert: { type: "css" }
+			});
+			module.then(style => document.adoptedStyleSheets = [style.default]);
+			return;
+		}
+
+		// Exit if the stylesheet has already been imported
+		if(document.head.querySelector("link[data-async-modalcss]")) {
+			return false;
+		}
+
+		// Import the stylesheet with a link tag
+		sheet = "assets/" + sheet;
+		const element = document.createElement("link");
+		element.setAttribute("rel","stylesheet");
+		element.setAttribute("href",sheet);
+		element.setAttribute("data-async-modalcss","");
+		document.head.appendChild(element);
+	}
+
+	// Apply a modal template to the provided element
+	applyTemplate(element) {
+		// The inner div will contain modal content
+		const inner = document.createElement("div");
+		inner.classList.add("inner");
+		element.appendChild(inner);
+		element.classList.add("modal");
+
+		// PointerEvents on the outer div will close the modal
+		element.addEventListener("click",() => this.close());
+
+		return element;
+	}
+
+	open() {
+		document.body.classList.add("modalActive");
+		this.element.classList.add("active");
+	}
+
+	// Close the modal and remove it from the DOM
+	close() {
+		const activeModals = document.getElementsByClassName("modal");
+		if(!activeModals || activeModals.length === 1) {
+			// Remove active effects if all modals have been closed
+			document.body.classList.remove("modalActive");
+		}
+
+		this.element.classList.remove("active");
+		setTimeout(() => destroy(this.element),this.transition + 1); // Wait for transition
+	}
+}
+
+// Overlay with a slide-in animation from the bottom of the viewport
+export class Card extends Modal {
+	constructor(interactions) {
+		super(interactions);
+
+		this.transition = 300;
+		this.init();
+	}
+
+	setContent(content) {
+		this.element.insertAdjacentHTML("beforeend",content);
+	}
+
+	init() {
+		this.element.classList.add("card");
+		document.body.appendChild(this.element);
+	}
+
+	openPage(page) {
+		this.open();
+	}
+}

public/assets/js/modules/UI.mjs

@@ -1,4 +1,6 @@
-import { Logging } from "./Logging.mjs";
+// Copyright © Victor Westerlund - No libraries! 😲
+
+import { default as Logging } from "./Logging.mjs";
 
 const interactions = {
 	toggleMenu: () => {
@@ -8,27 +10,81 @@ const interactions = {
 		menu.style.setProperty("transition",`${speed}ms`);
 		menu.classList.toggle("active");
 		setTimeout(() => menu.style.removeProperty("transition"),speed + 1);
+	},
+	openContactCard: () => {
+		const module = import("./Modals.mjs");
+		const interactions = {
+			hello: () => {
+				console.log("Hello world");
+			}
+		};
+
+		module.then(modals => {
+			const card = new modals.Card(interactions);
+			card.openPage("contact_card");
+		});
 	}
 }
 
-export class Interaction extends Logging {
+// Remove an element and its subtree
-	constructor() {
+export function destroy(family) {
+	while(family.firstChild) {
+		family.removeChild(family.lastChild);
+	}
+	family.parentNode.removeChild(family);
+}
+
+// General-purpose scoped event handler
+export default class Interaction extends Logging {
+	constructor(scope = document.body) {
 		super();
-		this.attribute = "data-action";
+		this.attribute = "data-action"; // Target elements with this attribute
 
-		const elements = document.querySelectorAll(`[${this.attribute}]`);
+		// Bind listeners to the target attribute within the provided scope
+		const elements = scope.querySelectorAll(`[${this.attribute}]`);
 		for(const element of elements) {
-			element.addEventListener("click",event => this.clickHandler(event));
+			element.addEventListener("click",event => this.pointerEvent(event));
 		}
 	}
 
-	clickHandler(event) {
+	// Update the theme-color for Chrome on Android devices
+	setThemeColor(color) {
+		const meta = document.head.querySelector("meta[name='theme-color']");
+		const style = getComputedStyle(document.body);
+	
+		if(!meta || !color) {
+			return false;
+		}
+
+		// Dark mode will always use the background color
+		if(document.body.classList.contains("dark")) {
+			color = "background";
+		}
+	
+		if(color[0] !== "#") {
+			// Get CSS variable if color isn't a HEX code
+			color = style.getPropertyValue(`--color-${color}`);
+			color = color.replaceAll(" ","");
+		}
+		
+		meta.setAttribute("content",color);
+	}
+
+	// Handle click/touch interactions
+	pointerEvent(event) {
 		const target = event.target.closest(`[${this.attribute}]`);
 		const action = target?.getAttribute(this.attribute) ?? null;
 
 		if(!target || !action || !Object.keys(interactions).includes(action)) {
+			// Exit if the interaction is invalid or action doesn't exist
 			return false;
 		}
-		interactions[action]();
+		// Execute the function from the data-action attribute
+		interactions[action](event);
+
+		// The button has requested a theme-color change
+		if(target.hasAttribute("data-theme-color")) {
+			this.setThemeColor(target.getAttribute("data-theme-color"));
+		}
 	}
 }

public/assets/js/script.js

@@ -1,7 +1,22 @@
-import { Interaction } from "./modules/UI.mjs";
+// Copyright © Victor Westerlund - No libraries! 😲
+import { default as Interaction } from "./modules/UI.mjs";
 
-//for(const element of document.getElementsByClassName("hamburger")) {
+const theme = window.matchMedia("(prefers-color-scheme: dark)");
-//	element.addEventListener("click",() => toggleMenu());
+const main = new Interaction();
-//}
 
-const interaction = new Interaction();
+function updateTheme() {
+	const media = window.matchMedia("(prefers-color-scheme: dark)");
+	document.body.classList.remove("dark");
+
+	// Force dark theme on all pages
+	if(media.matches) {
+		document.body.classList.add("dark");
+		return;
+	}
+	
+	main.setThemeColor("background");
+}
+
+// Set the current page theme, and listen for changes
+theme.addEventListener("change",updateTheme);
+updateTheme();

public/index.html

@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Full-stack web developer from Stockholm, Sweden.">
-    <meta name="theme-color" content="#ffffff">
+    <meta name="theme-color" content="">
     <link href="assets/img/favicon.png" rel="icon">
     <link href="assets/css/style.css" rel="stylesheet">
     <title>Victor Westerlund</title>
@@ -14,19 +14,29 @@
     <main>
         <div class="screen landingpage">
             <header>
-                <div data-action="toggleMenu" class="hamburger center">
+                <div class="hamburger center" data-action="toggleMenu" data-theme-color="contrast">
                     <div></div>
                 </div>
                 <div class="spacer"></div>
                 <div class="logo"></div>
                 <p>victor westerlund</p>
             </header>
-            <div class="content">
+            <div class="content center">
+                <div class="pattern center">
+                    <div></div>
+                </div>
+                <picture>
+                    <source srcset="assets/img/myface/highres.avif" type="image/avif" media="(min-width: 1920px)">
+                    <source srcset="assets/img/myface/highres.webp" type="image/webp" media="(min-width: 1920px)">
+                    <source srcset="assets/img/myface/mediumres.avif" type="image/avif">
+                    <source srcset="assets/img/myface/mediumres.webp" type="image/webp">
+                    <img src="assets/img/myface/mediumres.png" type="image/png">
+                </picture>
             </div>
         </div>
         <div class="screen menu dark">
             <header>
-                <div data-action="toggleMenu" class="hamburger center">
+                <div class="hamburger center" data-action="toggleMenu" data-theme-color="background">
                     <svg xmlns="http://www.w3.org/2000/svg" width="28.548" height="22.828"><path d="M2.28 11.414h25.269M1.414 11.414l10-10M1.414 11.414l10 10"/></svg>
                 </div>
                 <div class="spacer"></div>
@@ -36,10 +46,10 @@
             <div class="content">
                 <div class="button phantom">
                     <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
-                    <p>contact me</p>
+                    <p>search stuff..</p>
                 </div>
                 <div class="spacer"></div>
-                <div class="button phantom" data="contact">
+                <div class="button phantom" data-action="openContactCard">
                     <p>contact me</p>
                 </div>
             </div>