initial work on redesign

2026-05-11 22:06:56 +00:00 · 2023-03-08 00:40:22 +01:00
parent 2f0b1e8307
commit 0beeab357b
8 changed files with 188 additions and 480 deletions
@@ -0,0 +1,153 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
+:root {
+    margin: 0;
+    padding: 0;
+    --max-width: 40rem;
+}
+html {
+    font-family: 'Open Sans', sans-serif;
+    color: white;
+    background-size: cover;
+    font-size: 1.2em;
+}
+body {
+    margin: 0;
+    background-color: rgba(16, 16, 16, 0.7);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+    width: 100%;
+    min-height: 100vh;
+    padding: 0;
+    background-image: url("img/bg.jpg");
+    background-position: center;
+    background-attachment: fixed;
+    background-size: cover;
+    background-blend-mode: overlay;
+}
+
+small {
+    font-size: 0.6rem;
+}
+
+p, h1, h2, h3, h4, h5, h6 {
+    text-align: center;
+    margin: 0;
+}
+
+a {
+    text-decoration: none;
+}
+
+h2 {
+    font-size: 1.1rem;
+}
+
+header {
+    padding-block: 2rem;
+    padding-inline: 1rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+}
+
+main {
+    width: 100%;
+    max-width: var(--max-width);
+    padding-inline: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.avatar {
+    width: min(16rem, 100%);
+    height: min(16rem, 100%);
+    aspect-ratio: 1/1;
+    border-radius: 50%;
+    border: 3px solid #44251a;
+    background-color: gray;
+    overflow: clip;
+}
+
+.avatar img {
+    width: 100%;
+    height: 100%;
+}
+
+.bio {
+    padding: 1rem;
+    max-width: var(--max-width);
+    width: 100%;
+    border: 2px solid #000;
+    border-radius: 0.2rem;
+    background-color: rgba(0,0,0, 0.5);
+    backdrop-filter: blur(4px);
+    box-sizing: border-box;
+}
+
+.projects {
+    text-align: center;
+    width: 100%;
+    display: grid;
+    grid-gap: 1rem;
+    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+
+}
+
+.vertical-screen {
+    padding: 1rem;
+    border: 2px solid #000;
+    border-radius: 0.2rem;
+    position: relative;
+    background-color: rgba(0,0,0, 0.5);
+    backdrop-filter: blur(4px);
+    box-sizing: border-box;
+    min-height: 20rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: center;
+    text-decoration: none;
+    color: #fff;
+}
+
+.vertical-screen p {
+    font-size: 0.8rem;
+    color: rgba(255,255,255, 0.75);
+}
+
+.vertical-screen .bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    overflow: hidden;
+    opacity: 0.075;
+    background-image: url("img/board.jpg");
+    background-position: center;
+    animation: pan-image-1 30s infinite;
+}
+
+@keyframes pan-image-1 {
+    0% {
+        background-position: 36% 42%;
+    }
+    25% {
+        background-position: 60% 84%;
+    }
+    50% {
+        background-position: 45% 60%;
+    }
+    75% {
+        background-position: 12% 20%;
+    }
+    100% {
+        background-position: 36% 42%;
+    }
+}