diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index f2a0dfb..27cda5c 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -1,5 +1,7 @@
 :root {
-    --color: black;
+    --color: #212121;
+    --color-accent: white;
+    --color-highlight: #f4f2ff;
 }
 
 @font-face {
@@ -23,19 +25,25 @@
 /* Cornerstones */
 
 * {
-    margin: auto;
+    margin: 0;
     font-family: "Roboto Mono","Arial",sans-serif;
     color: var(--color);
 }
 
+*::selection {
+    background: var(--color-highlight);
+    color: var(--color);
+}
+
 html,
 body,
-main {
+main,
+main > div {
     width: 100%;
     height: 100%;
 }
 
-/* Components */
+/* --- */
 
 .logo {
     --size: 3vw;
@@ -58,16 +66,118 @@ main {
     opacity: .3;
 }
 
+h2 {
+    font-weight: normal;
+    font-size: 1.42em;
+}
+
+h2 span {
+    color: var(--color-accent);
+    background: var(--color);
+}
+
 /* Layout */
 
 main {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    grid-template-rows: 1fr;
-    grid-column-gap: 0px;
-    grid-row-gap: 0px;
+    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 {
-    width: 80%;
+    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%;
 }
\ No newline at end of file
diff --git a/public/assets/img/myface/fallback.jpg b/public/assets/img/myface/fallback.jpg
new file mode 100644
index 0000000..b0c95d8
Binary files /dev/null and b/public/assets/img/myface/fallback.jpg differ
diff --git a/public/assets/img/myface/highres.png b/public/assets/img/myface/highres.png
new file mode 100644
index 0000000..57f0649
Binary files /dev/null and b/public/assets/img/myface/highres.png differ
diff --git a/public/assets/img/myface/highres.webp b/public/assets/img/myface/highres.webp
new file mode 100644
index 0000000..11e709b
Binary files /dev/null and b/public/assets/img/myface/highres.webp differ
diff --git a/public/assets/img/myface/mediumres.png b/public/assets/img/myface/mediumres.png
new file mode 100644
index 0000000..c8ca5cc
Binary files /dev/null and b/public/assets/img/myface/mediumres.png differ
diff --git a/public/assets/img/myface/mediumres.webp b/public/assets/img/myface/mediumres.webp
new file mode 100644
index 0000000..8b7cc86
Binary files /dev/null and b/public/assets/img/myface/mediumres.webp differ
diff --git a/public/assets/img/pattern.gif b/public/assets/img/pattern.gif
new file mode 100644
index 0000000..b85a387
Binary files /dev/null and b/public/assets/img/pattern.gif differ
diff --git a/public/assets/img/pattern.txt b/public/assets/img/pattern.txt
new file mode 100644
index 0000000..d30e08e
--- /dev/null
+++ b/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.
diff --git a/public/assets/js/legacy.js b/public/assets/js/legacy.js
new file mode 100644
index 0000000..abb16ab
--- /dev/null
+++ b/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);
+}
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 4de4f0b..04d3003 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,35 +3,43 @@
 <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.">
     <link href="assets/img/favicon.png" rel="icon">
     <link href="assets/css/style.css" rel="stylesheet">
-
     <title>Victor Westerlund</title>
 </head>
 <body>
     <main>
-        <div>
-            <div class="block">
-                <div class="logo"></div>
-                <h1>victor westerlund</h1>
-                <h2>full-stack web developer</h2>
-            </div>
-            <div class="block">
-                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis, nibh sed ultrices vehicula, risus enim fermentum lacus, vitae lacinia erat arcu in magna. Sed eget aliquam diam, vitae facilisis enim. Morbi laoreet nulla sit amet eros tempor tincidunt.</p>
-                <p>Donec facilisis efficitur dui, sed vestibulum dolor luctus et. Sed tincidunt nulla urna.</p>
-            </div>
-            <div class="block">
-                <nav>
-                    <a href="#">contact</a>
-                    <a href="#">github</a>
-                </nav>
+        <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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis, nibh sed ultrices vehicula, risus enim fermentum lacus, vitae lacinia erat arcu in magna. Sed eget aliquam diam, vitae facilisis enim. Morbi laoreet nulla sit amet eros tempor tincidunt.</span></p>
+                    <p><span>Programming languages: <strong>JavaScript, PHP, SQL & Python</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>
-            <p>Placeholder</p>
+        <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 type="module" src="assets/js/script.js"></script>
+    <script src="assets/js/script.js" type="module"></script>
+    <script src="assets/js/legacy.js" nomodule></script>
 </body>
 </html>
\ No newline at end of file