victor westerlund
+full-stack web developer
+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.
+hello@victorwesterlund.com
+diff --git a/README.md b/README.md index a79987c..24f8446 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,4 @@ # victorwesterlund.com -Repo for victorwesterlund.com + + +Source code for victorwesterlund.com diff --git a/api/router.php b/api/router.php new file mode 100644 index 0000000..bf89329 --- /dev/null +++ b/api/router.php @@ -0,0 +1,5 @@ + 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 */ \ No newline at end of file diff --git a/public/assets/fonts/RobotoMono-Bold.ttf b/public/assets/fonts/RobotoMono-Bold.ttf new file mode 100644 index 0000000..900fce6 Binary files /dev/null and b/public/assets/fonts/RobotoMono-Bold.ttf differ diff --git a/public/assets/fonts/RobotoMono-Bold.woff2 b/public/assets/fonts/RobotoMono-Bold.woff2 new file mode 100644 index 0000000..3884344 Binary files /dev/null and b/public/assets/fonts/RobotoMono-Bold.woff2 differ diff --git a/public/assets/fonts/RobotoMono-Regular.ttf b/public/assets/fonts/RobotoMono-Regular.ttf new file mode 100644 index 0000000..7c4ce36 Binary files /dev/null and b/public/assets/fonts/RobotoMono-Regular.ttf differ diff --git a/public/assets/fonts/RobotoMono-Regular.woff2 b/public/assets/fonts/RobotoMono-Regular.woff2 new file mode 100644 index 0000000..1f715de Binary files /dev/null and b/public/assets/fonts/RobotoMono-Regular.woff2 differ diff --git a/public/assets/img/favicon.png b/public/assets/img/favicon.png new file mode 100644 index 0000000..9b5f6b2 Binary files /dev/null and b/public/assets/img/favicon.png differ 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/img/where.gif b/public/assets/img/where.gif new file mode 100644 index 0000000..9c34296 Binary files /dev/null and b/public/assets/img/where.gif differ diff --git a/public/assets/img/where.png b/public/assets/img/where.png new file mode 100644 index 0000000..864db1c Binary files /dev/null and b/public/assets/img/where.png differ diff --git a/public/assets/img/where.webp b/public/assets/img/where.webp new file mode 100644 index 0000000..3e73ef2 Binary files /dev/null and b/public/assets/img/where.webp differ 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/assets/js/script.js b/public/assets/js/script.js new file mode 100644 index 0000000..e69de29 diff --git a/public/index.html b/public/index.html index 9db2d77..e4cc3bb 100644 --- a/public/index.html +++ b/public/index.html @@ -1,11 +1,46 @@
- - -Too Early.. but not 425!
+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.
+hello@victorwesterlund.com
+