mirror of
https://codeberg.org/vlw/victorwesterlund.com.git
synced 2025-09-14 11:33:41 +02:00
Merge fd9070a837 into 6cde286d3b
This commit is contained in:
Victor Westerlund
GitHub
commit
c5829dcf8d
14 changed files with 364 additions and 202 deletions
15
public/assets/css/error.css
Normal file
15
public/assets/css/error.css
Normal 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
258
public/assets/css/pages/main.css
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,9 +1,11 @@
|
||||||
:root {
|
:root {
|
||||||
--color-base: 0, 0, 0;
|
--color-accent: yellow;
|
||||||
--color-contrast: 256, 256, 256;
|
|
||||||
|
|
||||||
--padding: clamp(40px, 2vw, 2vw);
|
--header-height: 80px;
|
||||||
--border-size: clamp(4px, .25vw, .25vw);
|
--padding: 20px;
|
||||||
|
|
||||||
|
--transition-speed: 300ms;
|
||||||
|
--transition: cubic-bezier(0,0,0,1) var(--transition-speed);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* -- Cornerstones -- */
|
/* -- Cornerstones -- */
|
||||||
|
|
@ -11,195 +13,86 @@
|
||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: "Monaco", "Consolas", monospace, sans-serif;
|
font-family: "Monaco", "Consolas", monospace, sans-serif;
|
||||||
color: rgb(var(--color-contrast));
|
color: white;
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
*::selection {
|
::selection {
|
||||||
background-color: rgb(var(--color-contrast));
|
background-color: white;
|
||||||
color: rgb(var(--color-base));
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 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 {
|
body {
|
||||||
display: flex;
|
display: grid;
|
||||||
flex-direction: column;
|
grid-template-rows: var(--header-height) 1fr;
|
||||||
align-items: center;
|
}
|
||||||
|
|
||||||
|
/* -- 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;
|
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;
|
align-items: center;
|
||||||
gap: calc(var(--padding) / 2);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#card {
|
header > div:not(:first-child) {
|
||||||
--portrait-size: clamp(128px, 12vw, 12vh);
|
height: var(--header-height);
|
||||||
|
border-left: solid 1px var(--border-color);
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#card img {
|
header #logo img {
|
||||||
width: var(--portrait-size);
|
width: calc(100% - (var(--padding) * 2));
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#card a {
|
header #crumbs {
|
||||||
width: 100%;
|
justify-self: right;
|
||||||
padding: var(--padding-vert) 0;
|
text-align: right;
|
||||||
margin-top: calc(var(--padding) / 2);
|
padding: 0 20px;
|
||||||
border-radius: clamp(9px, .5vw, .5vw);
|
}
|
||||||
|
|
||||||
|
/* -- Page Constraints -- */
|
||||||
|
|
||||||
|
main {
|
||||||
|
max-height: calc(100vh - var(--header-height));
|
||||||
}
|
}
|
||||||
|
|
||||||
/* -- Media Queries -- */
|
/* -- 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) {
|
@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) {
|
@media (max-width: 330px) {
|
||||||
p, a {
|
header {
|
||||||
text-align: left;
|
grid-template-columns: var(--header-height);
|
||||||
font-size: 18px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#card {
|
header #crumbs {
|
||||||
padding: calc(var(--padding) / 2);
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-aspect-ratio: 14/9) and (min-height: 600px) {
|
@media (min-aspect-ratio: 14/9) and (min-height: 600px) {
|
||||||
body {
|
header #crumbs {
|
||||||
display: grid;
|
justify-self: left;
|
||||||
grid-template-columns: repeat(2, 1fr);
|
text-align: right;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1 @@
|
||||||
import { default as Glitch } from "./glitch/Glitch.mjs";
|
document.getElementById("menu").addEventListener("click", () => document.getElementsByTagName("main")[0].classList.toggle("menuOpen"));
|
||||||
|
|
||||||
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);
|
|
||||||
BIN
public/assets/media/gazer/1x.jpg
Normal file
BIN
public/assets/media/gazer/1x.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
public/assets/media/gazer/1x.webp
Normal file
BIN
public/assets/media/gazer/1x.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
BIN
public/assets/media/gazer/2x.jpg
Normal file
BIN
public/assets/media/gazer/2x.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
BIN
public/assets/media/gazer/2x.webp
Normal file
BIN
public/assets/media/gazer/2x.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
public/assets/media/gazer/3x.jpg
Normal file
BIN
public/assets/media/gazer/3x.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
BIN
public/assets/media/gazer/3x.webp
Normal file
BIN
public/assets/media/gazer/3x.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
public/assets/media/gazer/4x.jpg
Normal file
BIN
public/assets/media/gazer/4x.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 155 KiB |
BIN
public/assets/media/gazer/4x.webp
Normal file
BIN
public/assets/media/gazer/4x.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
1
public/assets/media/vw.svg
Normal file
1
public/assets/media/vw.svg
Normal 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>
|
||||||
|
After Width: | Height: | Size: 337 B |
|
|
@ -22,37 +22,45 @@
|
||||||
<link rel="icon" href="assets/media/favicon-dark.png" media="(prefers-color-scheme:light)">
|
<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="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/style.css">
|
||||||
|
<link rel="stylesheet" href="assets/css/pages/main.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>
|
<header>
|
||||||
<div id="intro">
|
<div id="crumbs">
|
||||||
<p>hello, my name is</p>
|
<p>victor westerlund</p>
|
||||||
<h1>victor</h1>
|
</div>
|
||||||
<p>I'm a</p>
|
<div id="logo">
|
||||||
<h1>full-stack</h1>
|
<img src="assets/media/vw.svg"/>
|
||||||
<h1>developer</h1>
|
</div>
|
||||||
<p>from Sweden</p>
|
</header>
|
||||||
<a href="https://github.com/VictorWesterlund">my github -></a>
|
<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>
|
||||||
<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>
|
||||||
<div>
|
<div id="mail">
|
||||||
<p>...and ☕, full-time</p>
|
<p><span>---- BEGIN PRIMARY MAIL BLOCK ----</span><br>victor@victorwesterlund.com<br><span>---- END PRIMARY MAIL BLOCK ----</span></p>
|
||||||
</div>
|
<p>to copy</p>
|
||||||
<!--<a href="contact">contact me</a>-->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script type="module" src="assets/js/script.mjs"></script>
|
<script type="module" src="assets/js/script.mjs"></script>
|
||||||
|
</main>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue