vlw/victorwesterlund.com
1
0
Fork 0
mirror of https://codeberg.org/vlw/victorwesterlund.com.git synced 2025-09-13 19:13:42 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

wip(22w15a): gazer initial with crappy mobile menu

Browse source
This commit is contained in:
Victor Westerlund 2022-04-16 22:02:50 +02:00
parent 7ce5ceea9e
commit fd9070a837
14 changed files with 364 additions and 202 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
public/assets/css/error.css Normal file
View file

@ -0,0 +1,15 @@
#card {
position: relative;
padding: var(--padding);
border-radius: clamp(18px, 1vw, 1vw);
backdrop-filter: saturate(100) brightness(.4);
-webkit-backdrop-filter: saturate(100) brightness(.4);
border: solid var(--border-size) rgba(var(--color-contrast), .1);
box-shadow: 0 1vh 2vh rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);
}
@supports ((not ((backdrop-filter: saturate(1)) and (backdrop-filter: brightness(1)))) and (not ((-webkit-backdrop-filter: saturate(1)) and (-webkit-backdrop-filter: brightness(1))))) {
#card {
background-color: rgba(var(--color-base), .7);
}
}

258
public/assets/css/pages/main.css Normal file
View file

@ -0,0 +1,258 @@
@import url("../style.css");
main,
main #content {
display: grid;
grid-template-rows: minmax(0, 1fr) calc(var(--header-height) * 3);
}
main #content {
grid-template-rows: var(--header-height) calc(var(--header-height) * 2);
}
/* -- Gaze -- */
#gaze {
background: url("../../media/gazer/2x.jpg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
filter: hue-rotate(0) contrast(1.1);
-webkit-filter: hue-rotate(0) contrast(1.1);
animation: hue-rotate 10s infinite linear;
}
/* -- Menu -- */
nav {
--border-width: 100;
position: relative;
width: 100vw;
padding: 20px;
display: initial;
border: solid 2px transparent;
border-image: repeating-linear-gradient(90deg, black 0px, black 10px, rgba(255,255,255,.3) 10px, rgba(255,255,255,.3) 20px) 2;
border-image-slice: 0 0 0 0;
border-image-repeat: repeat;
box-sizing: border-box;
display: grid;
grid-template-rows: repeat(3, 1fr);
gap: 20px;
}
nav a {
color: var(--color-accent);
text-align: center;
font-size: clamp(16px, 15vw, 7vh);
}
#menu {
width: 100%;
background-color: #141414;
display: grid;
grid-template-columns: clamp(1px, 100%, 500px);
grid-template-rows: minmax(0, 1fr);
justify-content: center;
white-space: nowrap;
}
#menu .inner {
position: relative;
display: grid;
grid-template-columns: repeat(2, 1fr);
transition: var(--transition) transform;
transform: translateX(var(--padding));
}
main.menuOpen #menu .inner {
transform: translateX(calc(var(--padding) * -1));
}
main.menuOpen #menu .open,
main:not(.menuOpen) #menu .close {
opacity: 0;
}
#menu .inner :is(.open, .close) {
position: absolute;
padding: var(--padding);
display: flex;
align-items: center;
gap: var(--padding);
transition: var(--transition) opacity;
}
#menu .inner .close {
right: 0;
}
#menu .inner :is(.open, .close) svg {
height: 40px;
fill: white;
}
/* -- Mail -- */
#mail {
display: grid;
justify-content: center;
align-content: center;
text-align: right;
line-height: 23px;
gap: var(--padding);
}
#mail p:last-child {
color: var(--color-accent);
}
#mail p:last-child::before {
content: "tap ";
}
#mail p span {
opacity: .3;
}
@keyframes hue-rotate {
to {
filter: hue-rotate(360deg) contrast(1.1);
-webkit-filter: hue-rotate(360deg) contrast(1.1);
}
}
/* -- Media Queries -- */
@media (pointer: fine) {
#mail p:last-child::before {
content: "click ";
}
a {
--hover-translate: 20px;
position: relative;
transition: var(--transition) transform, var(--transition) text-shadow;
}
a:hover {
cursor: pointer;
animation: hue-rotate-hover 2s infinite linear;
text-shadow: var(--hover-translate) var(--hover-translate) #292929;
font-weight: bold;
transform: translate(
calc((var(--hover-translate) / 2) * -1),
calc((var(--hover-translate) / 2) * -1)
);
}
a:hover::after {
content: "";
position: absolute;
left: 0;
bottom: calc((var(--hover-translate) / 2) * -1);
width: calc(100% + calc(var(--hover-translate) / 2));
height: calc(var(--hover-translate) / 2);
}
a:hover:active {
text-shadow: calc(var(--hover-translate) / 2) calc(var(--hover-translate) / 2) #292929;
transform: translate(
calc((var(--hover-translate) / 4) * -1),
calc((var(--hover-translate) / 4) * -1)
);
}
@keyframes hue-rotate-hover {
to {
filter: hue-rotate(360deg);
-webkit-filter: hue-rotate(360deg);
}
}
}
@media not all and (min-aspect-ratio: 14/9) and (min-height: 600px) {
#gaze {
transition: var(--transition) transform, var(--transition) opacity;
transition-delay: var(--transition-speed);
transform: translateX(0);
}
main.menuOpen #gaze {
transition-delay: 1ms;
opacity: 0;
transform: translateX(-40px);
}
#menuContent {
transition: var(--transition) opacity;
transition-delay: 1ms;
position: absolute;
bottom: calc(var(--header-height) * 3);
width: 100%;
background-color: black;
opacity: 0;
pointer-events: none;
}
main.menuOpen #menuContent {
transition-delay: var(--transition-speed);
opacity: 1;
pointer-events: all;
}
}
@media (min-aspect-ratio: 14/9) and (min-height: 600px) {
main {
display: flex;
flex-direction: row-reverse;
}
main > div {
width: 50%;
}
main #content {
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--header-height);
}
main #content > div {
justify-content: right;
}
#menuContent {
display: flex;
}
nav {
width: 18vw;
border-image-slice: 1 0 1 0;
}
nav a {
font-size: 3vw;
text-align: right;
}
/* -- Menu -- */
#menu {
display: none;
}
}
@media (max-height: 600px) {
main {
grid-template-rows: minmax(0, 1fr) var(--header-height);
}
#menuContent {
bottom: calc(var(--header-height) * 1);
}
#mail {
display: none;
}
}

213
public/assets/css/style.css
View file

@ -1,9 +1,11 @@
:root {
--color-base: 0, 0, 0;
--color-contrast: 256, 256, 256;
--color-accent: yellow;
--padding: clamp(40px, 2vw, 2vw);
--border-size: clamp(4px, .25vw, .25vw);
--header-height: 80px;
--padding: 20px;
--transition-speed: 300ms;
--transition: cubic-bezier(0,0,0,1) var(--transition-speed);
}
/* -- Cornerstones -- */
@ -11,195 +13,86 @@
* {
margin: 0;
font-family: "Monaco", "Consolas", monospace, sans-serif;
color: rgb(var(--color-contrast));
color: white;
user-select: none;
}
*::selection {
background-color: rgb(var(--color-contrast));
color: rgb(var(--color-base));
::selection {
background-color: white;
color: black;
}
html,
body {
width: 100%;
height: 100%;
overflow-x: hidden;
overflow: hidden;
background-color: black;
}
html {
background-color: rgba(var(--color-base), .7);
background-size: cover;
background-blend-mode: overlay;
background-position: center;
background-attachment: fixed;
}
picture {
display: contents;
}
h1 {
font-size: clamp(45px, 7vw, 6vh);
}
p, a {
font-size: clamp(20px, 3vw, 2vh);
text-align: justify;
}
/* -- Components -- */
body {
display: flex;
flex-direction: column;
align-items: center;
display: grid;
grid-template-rows: var(--header-height) 1fr;
}
/* -- Content -- */
header {
--border-color: #1e1e1e;
text-align: right;
font-size: 18px;
display: grid;
grid-template-columns: 1fr var(--header-height);
justify-content: right;
border-bottom: solid 1px var(--border-color);
}
header > div {
display: grid;
justify-items: center;
gap: var(--padding, 30px);
}
body > div {
padding: calc(var(--padding) / 2);
}
:is(#intro, #card) a {
--padding-vert: clamp(17px, 1.1vw, 1.1vw);
display: inline-block;
text-decoration: none;
text-align: center;
user-select: none;
background-color: rgba(var(--color-contrast), .13);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
box-shadow:
inset 0 .3vh 1.6vh rgba(0, 0, 0, 0),
0 .1vh .3vh rgba(0, 0, 0, .12),
0 .1vh .2vh rgba(0, 0, 0, .24);
}
/* --- */
#intro {
padding: calc(var(--padding) / 2);
}
#intro a {
padding: var(--padding-vert) 2vw;
border-radius: 100px;
border: solid var(--border-size) rgba(var(--color-contrast), 0);
margin: var(--padding) 0;
width: calc(100% - ((var(--padding) / 2) + var(--border-size)));
}
#intro p {
margin: 1vh 0;
font-size: clamp(20px, 3vw, 3vh);
}
/* --- */
#card,
#card > div {
display: flex;
flex-direction: column;
align-items: center;
gap: calc(var(--padding) / 2);
}
#card {
--portrait-size: clamp(128px, 12vw, 12vh);
position: relative;
max-width: 600px;
padding: var(--padding);
border-radius: clamp(18px, 1vw, 1vw);
backdrop-filter: saturate(100) brightness(.4);
-webkit-backdrop-filter: saturate(100) brightness(.4);
border: solid var(--border-size) rgba(var(--color-contrast), .1);
box-shadow: 0 1vh 2vh rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);
header > div:not(:first-child) {
height: var(--header-height);
border-left: solid 1px var(--border-color);
}
#card img {
width: var(--portrait-size);
height: var(--portrait-size);
position: absolute;
border-radius: 100%;
top: calc(((var(--portrait-size) / 2) + var(--border-size)) * -1);
background-color: rgb(var(--color-base));
box-shadow: 0 1vh 2vh rgba(0, 0, 0 , .19), 0 6px 6px rgba(0, 0, 0 , .23);
header #logo img {
width: calc(100% - (var(--padding) * 2));
}
#card a {
width: 100%;
padding: var(--padding-vert) 0;
margin-top: calc(var(--padding) / 2);
border-radius: clamp(9px, .5vw, .5vw);
header #crumbs {
justify-self: right;
text-align: right;
padding: 0 20px;
}
/* -- Page Constraints -- */
main {
max-height: calc(100vh - var(--header-height));
}
/* -- Media Queries -- */
@supports ((not ((backdrop-filter: saturate(1)) and (backdrop-filter: brightness(1)))) and (not ((-webkit-backdrop-filter: saturate(1)) and (-webkit-backdrop-filter: brightness(1))))) {
#card {
background-color: rgba(var(--color-base), .7);
}
}
@media (pointer: fine) {
:is(#intro, #card) a {
--transition-speed: 200ms;
transition:
var(--transition-speed) background-color,
var(--transition-speed) box-shadow,
var(--transition-speed) border-color;
}
:is(#intro, #card) a:hover {
background-color: rgba(var(--color-contrast), .2);
border-color: rgba(var(--color-contrast), .2);
box-shadow:
inset 0 .3vh 1.6vh rgba(0, 0, 0, .16),
0 .3vh .6vh rgba(0, 0, 0, .16),
0 .3vh .6vh rgba(0, 0, 0, .23);
}
:is(#intro, #card) a:active {
background-color: rgba(var(--color-contrast), .15);
}
}
@media (max-width: 330px) {
p, a {
text-align: left;
font-size: 18px;
header {
grid-template-columns: var(--header-height);
}
#card {
padding: calc(var(--padding) / 2);
header #crumbs {
display: none;
}
}
@media (min-aspect-ratio: 14/9) and (min-height: 600px) {
body {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: unset;
}
body > div {
display: grid;
align-items: center;
}
body > div:last-of-type {
padding: calc(var(--padding) * 2);
}
#intro a {
width: unset;
}
#card {
min-width: 300px;
max-width: 30vw;
header #crumbs {
justify-self: left;
text-align: right;
}
}

15
public/assets/js/script.mjs
View file

@ -1,14 +1 @@
import { default as Glitch } from "./glitch/Glitch.mjs";
const logging = "https://victorwesterlund-logging-dnzfgzf6za-lz.a.run.app";
// Log link clicks
for(let link of document.getElementsByTagName("a")) {
link.addEventListener("click", event => {
event.preventDefault();
navigator?.sendBeacon(logging, event);
window.location.href = event.target.href;
});
}
window.glitch = new Glitch(document.body.parentElement);
document.getElementById("menu").addEventListener("click", () => document.getElementsByTagName("main")[0].classList.toggle("menuOpen"));

BIN
public/assets/media/gazer/1x.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
public/assets/media/gazer/1x.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.1 KiB

BIN
public/assets/media/gazer/2x.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 44 KiB

BIN
public/assets/media/gazer/2x.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
public/assets/media/gazer/3x.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 95 KiB

BIN
public/assets/media/gazer/3x.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 42 KiB

BIN
public/assets/media/gazer/4x.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 155 KiB

BIN
public/assets/media/gazer/4x.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 69 KiB

1
public/assets/media/vw.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="22"><g fill="none"><path d="M12 22 0 0h24Z"/><path d="M12 17.82335 20.63092 2H3.36908L12 17.82335M12 22 0 0h24L12 22Z" fill="#ff0"/><g opacity=".5"><path d="M24 22 12 0h24Z"/><path d="M24 17.82335 32.63092 2H15.36908L24 17.82335M24 22 12 0h24L24 22Z" fill="#ff0"/></g></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 337 B

64
public/index.html
View file

@ -14,37 +14,45 @@
<link rel="icon" href="assets/media/favicon-dark.png" media="(prefers-color-scheme:light)">
<link rel="icon" href="assets/media/favicon-light.png" media="(prefers-color-scheme:dark)">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/pages/main.css">
</head>
<body>
<div>
<div id="intro">
<p>hello, my name is</p>
<h1>victor</h1>
<p>I'm a</p>
<h1>full-stack</h1>
<h1>developer</h1>
<p>from Sweden</p>
<a href="https://github.com/VictorWesterlund">my github -></a>
<header>
<div id="crumbs">
<p>victor westerlund</p>
</div>
</div>
<div>
<div id="card">
<picture>
<source srcset="assets/media/pfp/256.webp" type="image/webp" media="(min-width: 600px)">
<source srcset="assets/media/pfp/128.webp" type="image/webp">
<source srcset="assets/media/pfp/256.jpg" type="image/jpg" media="(min-width: 600px)">
<img src="assets/media/pfp/128.jpg" alt="portrait of victor"/>
</picture>
<div>
<p>I create things with code. When I'm not creating things with code, I enjoy skiing, watching movies and some occasional gaming</p>
<p>And beyond computer science, I'm also an armchair rabbit-holer for engineering, physics and astronomy</p>
</div>
<div>
<p>...and ☕, full-time</p>
</div>
<!--<a href="contact">contact me</a>-->
<div id="logo">
<img src="assets/media/vw.svg"/>
</div>
</div>
<script type="module" src="assets/js/script.mjs"></script>
</header>
<main class="menuOpen">
<div id="gaze"></div>
<div id="content">
<div id="menuContent">
<nav>
<a>work</a>
<a>about</a>
<a>contact</a>
</nav>
</div>
<div id="menu">
<div class="inner">
<div class="open">
<svg viewBox="0 0 100 100"><polygon points="100,10 30,50 100,90"/></svg>
<p>open menu</p>
</div>
<div class="close">
<p>close menu</p>
<svg viewBox="0 0 100 100"><polygon points="100,10 30,50 100,90"/></svg>
</div>
</div>
</div>
<div id="mail">
<p><span>---- BEGIN PRIMARY MAIL BLOCK ----</span><br>victor@victorwesterlund.com<br><span>---- END PRIMARY MAIL BLOCK ----</span></p>
<p>to copy</p>
</div>
</div>
<script type="module" src="assets/js/script.mjs"></script>
</main>
</body>
</html>