mirror of
https://codeberg.org/vlw/victorwesterlund.com.git
synced 2025-09-13 19:13:42 +02:00
Draft
Landingpage
This commit is contained in:
parent
c34db81cd5
commit
a81f518c0f
10 changed files with 184 additions and 30 deletions
|
|
@ -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%;
|
||||
}
|
||||
BIN
public/assets/img/myface/fallback.jpg
Normal file
BIN
public/assets/img/myface/fallback.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
BIN
public/assets/img/myface/highres.png
Normal file
BIN
public/assets/img/myface/highres.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 MiB |
BIN
public/assets/img/myface/highres.webp
Normal file
BIN
public/assets/img/myface/highres.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 786 KiB |
BIN
public/assets/img/myface/mediumres.png
Normal file
BIN
public/assets/img/myface/mediumres.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 226 KiB |
BIN
public/assets/img/myface/mediumres.webp
Normal file
BIN
public/assets/img/myface/mediumres.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
public/assets/img/pattern.gif
Normal file
BIN
public/assets/img/pattern.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 B |
29
public/assets/img/pattern.txt
Normal file
29
public/assets/img/pattern.txt
Normal file
|
|
@ -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.
|
||||
7
public/assets/js/legacy.js
Normal file
7
public/assets/js/legacy.js
Normal file
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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>
|
||||
Loading…
Add table
Reference in a new issue