@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Jura:wght@300..700&display=swap'); html, body, body * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100dvh; } body { background: radial-gradient(300% 250% at 0 150%, #fca945, #49b8f4 30%, #1d7bff 50%); font-family: "Inter Tight", sans-serif; color: white; } /* Titles */ h1, h2, h3, h4, h5, h6 { font-weight: bold; } /* Layout */ #hero-container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; } /* Hero */ .hero { display: flex; gap: 1em; max-width: 600px; padding: 22px 0 22px 24px; /*-webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);*/ border-radius: 65px; } .hero-portrait { display: flex; position: relative; flex-shrink: 0; width: 10em; height: 10em; /* day */ background: radial-gradient(circle at center, #f3f5ed, #c7e2e0); background-size: contain; background-repeat: no-repeat; border-radius: inherit; border-radius: 65px; box-shadow: 0px 10px 30px -10px rgba(0, 0, 0, 0.2); transform: scale(1) rotate(0deg); opacity: 1; -webkit-transition: transform 0.3s ease-in-out, opacity 0.2s ease-in; transition: transform 0.3s ease-in-out, opacity 0.2s ease-in; -webkit-user-select: none; user-select: none; overflow: hidden; cursor: pointer; } .hero-portrait img { width: 100%; border-radius: inherit; -webkit-user-drag: none; -webkit-filter: drop-shadow(0px -2px 8px rgba(0, 0, 0, 0.3)); filter: drop-shadow(0px -2px 8px rgba(0, 0, 0, 0.3)); } .hero-portrait:hover { transform: scale(1.01) rotate(1deg); } .hero-portrait:active { transform: scale(0.8) rotate(22.5deg); opacity: 0; } .hero-text { display: flex; flex-direction: column; justify-content: center; align-items: left; height: 100%; font-size: 150%; text-shadow: 0px 2px 20px rgba(0, 0, 0, 0.3); } .hero-subtitle { font-size: 20px } .hero-tags { display: flex; flex-wrap: wrap; margin-top: 10px; margin-left: -4px; justify-content: left; font-size: 14px; } .tag { display: inline-block; margin: 4px; padding: 0.2em 0.6em; font-family: "Jura"; text-align: center; font-size: 0.9em; border-radius: 4px; background-color: rgba(0, 0, 0, 0.2); -webkit-user-drag: element; -webkit-user-select: none; user-select: none; } /* Buttons */ div.buttons { display: flex; gap: 1em; margin-top: 1em; } button { /* Reset */ background: none; color: inherit; border: none; font: inherit; outline: inherit; /* Style */ display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background-color: rgba(0, 0, 0, 0.2); border-radius: 33%; text-decoration: none; cursor: pointer; transition: transform 0.2s ease-in-out; } .night button, .sunrise button { /* night */ background-color: rgba(255, 255, 255, 0.2); } button:hover { transform: scale(1.05); } button img { width: 60%; height: 60%; mix-blend-mode: luminosity; transition: all 0.2s ease-in-out; } .button-link { display: block; } .button-link.linkedin img { -webkit-filter: invert(100%); filter: invert(1); transform: scale(0.9); } .button-link.github img { transform: scale(0.95); } .button-link.email img { filter: invert(1); transform: scale(1.2); }

Zac Krasnow

Full-stack web developer

HTML

CSS

Javascript

Typescript

Node.js

Express

React

Vue

Websockets

APIs