Merge branch 'master' of https://github.com/VictorWesterlund/victorwesterlund.com

README.md

@@ -1,2 +1,4 @@
 # victorwesterlund.com
-Repo for victorwesterlund.com
+![Website](https://img.shields.io/website?url=https%3A%2F%2Fvictorwesterlund.com)
+
+Source code for victorwesterlund.com

api/router.php

@@ -0,0 +1,5 @@
+<?php
+
+	http_response_code("503 Service Unavailable");
+	header("Content-Type: text/plain");
+	echo "Not available yet";

public/assets/css/style.css

@@ -0,0 +1,235 @@
+:root {
+    --color: #212121;
+    --color-accent: white;
+    --color-highlight: #f4f2ff;
+}
+
+@font-face {
+    font-family: "Roboto Mono";
+    font-weight: 400;
+    src: local("Roboto Mono Regular"),
+         local("RobotoMono-Regular"),
+         url("../fonts/RobotoMono-Regular.woff2"),
+         url("../fonts/RobotoMono-Regular.ttf");
+}
+
+@font-face {
+    font-family: "Roboto Mono";
+    font-weight: 700;
+    src: local("Roboto Mono Bold"),
+         local("RobotoMono-Bold"),
+         url("../fonts/RobotoMono-Bold.woff2"),
+         url("../fonts/RobotoMono-Bold.ttf");
+}
+
+/* Cornerstones */
+
+* {
+    margin: 0;
+    font-family: "Roboto Mono","Arial",sans-serif;
+    color: var(--color);
+}
+
+*::selection {
+    background: var(--color-highlight);
+    color: var(--color);
+}
+
+html,
+body,
+main,
+main > div {
+    width: 100%;
+    height: 100%;
+}
+
+/* --- */
+
+.logo {
+    --size: 5em;
+    --skew: calc(var(--size) / 1.7);
+
+    width: 0; 
+    height: 0; 
+    border-left: var(--skew) solid transparent;
+    border-right: var(--skew) solid transparent;
+    border-top: var(--size) solid var(--color);
+}
+
+.logo::after {
+    content: "";
+    width: 0; 
+    height: 0; 
+    border-left: var(--skew) solid transparent;
+    border-right: var(--skew) solid transparent;
+    border-top: var(--size) solid var(--color);
+    opacity: .3;
+}
+
+h1 {
+    font-size: 2em;
+}
+
+h2 {
+    font-weight: normal;
+    font-size: 1.42em;
+}
+
+h2 span {
+    color: var(--color-accent);
+    background: var(--color);
+}
+
+/* Layout */
+
+main {
+    margin: auto;
+    max-width: 200vh;
+    background: url("../img/pattern.gif");
+    background-size: auto 90%;
+    background-position: 100% 100%;
+    background-repeat: no-repeat;
+    image-rendering: pixelated;
+    image-rendering: -moz-crisp-edges;
+}
+
+main * {
+    image-rendering: initial;
+}
+
+main > div {
+    position: absolute;
+    width: 50%;
+    height: 100%;
+}
+
+/* --- */
+
+#intro {
+    left: 0;
+    width: 100vh;
+    box-sizing: border-box;
+    padding: 5vw;
+    display: flex;
+    align-items: center;
+    z-index: 1;
+}
+
+#intro .inner {
+    display: flex;
+    flex-wrap: wrap;
+    height: 100%;
+}
+
+#intro .logo {
+    --size: 7vh;
+    margin-bottom: 2em;
+}
+
+#intro .block {
+    width: 100%;
+    font-size: 3vh;
+}
+
+#intro .block:last-child {
+    display: flex;
+    align-items: flex-end;
+}
+
+#intro .block p {
+    font-size: .7em;
+    margin-bottom: 1.5em;
+}
+
+#intro .block p span {
+    background: var(--color-accent);
+}
+
+/* --- */
+
+nav a {
+    text-decoration: none;
+    margin-right: 2em;
+    font-size: .9em;
+}
+
+nav a::after {
+    content: "→";
+    padding-left: .5em;
+}
+
+nav a:hover {
+    background: var(--color-highlight);
+    font-weight: bold;
+}
+
+/* --- */
+
+#myface {
+    right: 0;
+    width: 50%;
+    display: flex;
+    justify-content: center;
+}
+
+#myface picture,
+#myface img {
+    position: absolute;
+    height: 80%;
+    bottom: 0;
+    pointer-events: none;
+    display: flex;
+    justify-content: center;
+}
+
+#myface img {
+    height: 100%;
+}
+
+@media screen and (max-width: 1010px) {
+
+    #myface {
+        display: none;
+    }
+
+}
+
+@media screen and (max-width: 800px) {
+
+    h1 {
+        font-size: 7vw;
+    }
+
+    h2 {
+        font-size: 5vw;
+    }
+
+    main {
+        max-width: unset;
+        background-size: auto 100vw;
+    }
+
+    #intro {
+        width: initial;
+        padding: 10vw;
+        text-align: center;
+    }
+
+    #intro p {
+        text-align: justify;
+    }
+
+    #intro .block p:last-of-type {
+        text-align: initial;
+    }
+
+    nav a {
+        text-decoration: none;
+        margin-right: 5vw;
+        font-size: 5vw;
+    }
+
+}
+
+
+/* Victor Westerlund */

public/assets/img/pattern.txt

@@ -0,0 +1,29 @@
++--------------------------------------------------------------------------------------------+
+Size comparison for 6x6 monochrome image ranking from best to worst
+
+pattern.gif: 49 bytes
+	- Dithering level: 7 (doesn't really matter)
+	- Transparency threshold: 128 (doesn't really matter)
+
+pattern.bmp: 86 bytes
+	- Bit depth: 4
+	- Dirthering level: 7 (doesn't really matter)
+
+pattern.png: 151 bytes
+	- Bit depth: 4
+	- Dirthering level: 7 (doesn't really matter)
+	- Transparency threshold: 192 (doesn't really matter)
+	- Interlaced (saves 1 byte)
+
+pattern.webp: 248 bytes
+	- Quality: 100
+
+pattern.jpg: 800 bytes
+	- Chroma Subsampling: 4:2:2 (saves 6 bytes from 4:4:4)
++--------------------------------------------------------------------------------------------+
+
+-- Here's the image used for the test --
+data:image/gif;base64,R0lGODlhBgAGAHAAACwAAAAABgAGAIH////08v8AAAAAAAACCgRiGciL9mA6ExQAOw==
+
+
+Unfortunately after all response headers are set, the total ends up at 317 bytes.

public/assets/js/legacy.js

@@ -0,0 +1,7 @@
+// Promote IE to Edge
+if(/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) {
+	window.location = 'microsoft-edge:' + window.location;
+	setTimeout(function() {
+		window.location = 'https://go.microsoft.com/fwlink/?linkid=2135547';
+	},1);
+}

public/index.html

@@ -1,11 +1,46 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>Victor Westerlund</title>
+    <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">
+    <link href="assets/img/favicon.png" rel="icon">
+    <link href="assets/css/style.css" rel="stylesheet">
+    <title>Victor Westerlund</title>
 </head>
 <body>
-	<p>Too Early.. but not 425!</p>
+    <main>
+        <div id="intro">
+            <div class="inner">
+                <div class="block">
+                    <div class="logo"></div>
+                    <h1><span>victor westerlund</span></h1>
+                    <h2><span>full-stack web developer</span></h2>
+                </div>
+                <div class="block">
+                    <p><span>I create things with code, and usually design things for humans to interact with my code. I'm also a true wannabe jack of all trades; and coffee-loving non-coffee snob.</span></p>
+                    <p><span><strong>hello@victorwesterlund.com</strong></span></p>
+                </div>
+                <div class="block">
+                    <nav>
+                        <!--<a href="#">contact</a>-->
+                        <a href="https://github.com/VictorWesterlund" target="_blank">github</a>
+                    </nav>
+                </div>
+            </div>
+        </div>
+        <div id="myface">
+            <picture>
+                <source media="(min-width: 900px)" srcset="assets/img/myface/highres.webp" type="image/webp">
+                <source media="(min-width: 300px)" srcset="assets/img/myface/mediumres.webp" type="image/webp">
+                <source media="(min-width: 900px)" srcset="assets/img/myface/highres.png" type="image/png">
+                <source media="(min-width: 300px)" srcset="assets/img/myface/mediumres.png" type="image/png">
+                <img srcset="assets/img/myface/fallback.jpg" type="image/jpeg">
+            </picture>
+        </div>
+    </main>
+    <script src="assets/js/script.js" type="module"></script>
+    <script src="assets/js/legacy.js" nomodule></script>
 </body>
 </html>

public/not_found.html

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<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">
+	<link href="assets/img/favicon.png" rel="icon">
+	<link href="assets/css/style.css" rel="stylesheet">
+	<title>Page Not Found - Victor Westerlund</title>
+	<style>
+		#content {
+			box-sizing: border-box;
+			padding: 10vh;
+		}
+
+		h1, h2 {
+			text-align: center;
+		}
+
+		h1 {
+			font-size: 8vh;
+		}
+
+		h2 {
+			font-size: 4vh;
+		}
+
+		img {
+			position: absolute;
+			height: 50vh;
+			bottom: 0px;
+			left: 50%;
+			transform: translate(-50%);
+			pointer-events: none;
+		}
+		@media screen and (max-width: 800px) {
+
+			.logo {
+				--size: 15vw;
+				margin-bottom: 10vw;
+			}
+
+			#content {
+				padding: 10vw;
+			}
+
+			h1 {
+				font-size: 10vw;
+			}
+
+			h2 {
+				font-size: 5vw;
+			}
+
+		}
+	</style>
+</head>
+<body>
+	<div id="content">
+		<a href="https://victorwesterlund.com"><div class="logo"></div></a>
+		<h1>404 Not Found</h1>
+		<h2>idk..</h2>
+	</div>
+	<picture>
+		<source srcset="assets/img/where.webp" type="image/webp">
+		<source srcset="assets/img/where.gif" type="image/gif">
+		<img srcset="assets/img/where.png" type="image/png"/>
+	</picture>
+</body>
+</html>

server.conf

@@ -19,6 +19,7 @@ server {
         include snippets/ssl.conf;
 
         root /var/www/github_victorwesterlund_victorwesterlund.com/public;
+        error_page 404 403 /not_found.html;
 
         location \ {
                 try_files $uri $uri.html $uri/ =404;
@@ -58,11 +59,8 @@ server {
 
         root /var/www/github_victorwesterlund_victorwesterlund.com/api;
 
-        location \ {
-                try_files $uri $uri.html $uri/ =404;
-        }
-
-        location ~ \.php$ {
+        location \* {
+                try_files /router.php$request_uri =404;
                 add_header Access-Control-Allow-Origin *;
                 include snippets/fastcgi-php-router.conf;
                 fastcgi_pass unix:/run/php/php7.3-fpm.sock;