initial commit

animations.css

@@ -0,0 +1,56 @@
+@keyframes fade-in-container {
+  0% {
+    opacity: 0;
+    transform: translateY(50px);
+  }
+  100% {
+    opacity: .8;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fade-in-footer {
+  0% {
+    opacity: 0;
+    transform: translateY(100px);
+  }
+  100% {
+    opacity: .8;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fade-in-profile {
+  0% {
+    opacity: 0;
+    transform: translateY(-500px);
+
+    box-shadow: 0 0 10rem 1rem #181926;
+  }
+  50% {
+    box-shadow: 0 0 10rem 2rem #181926;
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+
+    box-shadow: 0 0 10rem 3.5rem #181926;
+  }
+}
+
+/* Background gradient effect */
+@-webkit-keyframes backgroundGradient {
+  0%{background-position:50% 0%}
+  50%{background-position:50% 100%}
+  100%{background-position:50% 0%}
+}
+@-moz-keyframes backgroundGradient {
+  0%{background-position:50% 0%}
+  50%{background-position:50% 100%}
+  100%{background-position:50% 0%}
+}
+@keyframes backgroundGradient {
+  0%{background-position:50% 0%}
+  50%{background-position:50% 100%}
+  100%{background-position:50% 0%}
+}

globals.css

@@ -0,0 +1,122 @@
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    position: relative;
+}
+
+body {
+    min-height: 100vh;
+
+    background: linear-gradient(180deg, var(--color-background) 0% 5%, var(--color-red) 99% 100%);
+    background-size: 110% 110%;
+
+    -webkit-animation: backgroundGradient 15s ease infinite;
+    -moz-animation: backgroundGradient 15s ease infinite;
+    animation: backgroundGradient 15s ease infinite;
+
+    text-rendering: optimizeLegibility;
+    shape-rendering: geometricPrecision;
+
+    h1 {
+        font-size: 2rem;
+    }
+
+    p {
+        font-size: 1.3rem;
+    }
+
+    a {
+        transition: ease-in-out 250ms;
+        text-decoration: none;
+        color: var(--color-blue);
+    }
+
+    a:hover {
+        color: var(--color-lavender);
+    }
+}
+
+/* Preload */
+.preload * {
+    transition: none !important;
+    -webkit-transition: none !important;
+    -moz-transition: none !important;
+    -ms-transition: none !important;
+    -o-transition: none !important;
+}
+
+/* Flex */
+.flex {
+    display: flex;
+}
+
+.flex-col {
+    flex-direction: column;
+}
+
+.flex-row {
+    flex-direction: row;
+}
+
+/* Position */
+.sticky {
+    position: sticky;
+}
+
+.fixed {
+    position: fixed;
+}
+
+/* Justify */
+.justify-center {
+    justify-content: center;
+}
+
+.justify-between {
+    justify-content: space-between;
+}
+
+.justify-around {
+    justify-content: space-around;
+}
+
+.justify-evenly {
+    justify-content: space-evenly;
+}
+
+/* Items */
+.items-center {
+    align-items: center;
+}
+
+.items-end {
+    align-items: end;
+}
+
+/* Content */
+.content-center {
+    align-content: center;
+}
+
+/* Text */
+.text-center {
+    text-align: center;
+}
+
+/* Color schemes */
+.color--base-dark {
+    background-color: var(--color-background);
+}
+
+.color--container1-dark {
+    background-color: var(--color-container1);
+}
+
+.color--text-dark {
+    color: var(--color-text);
+}
+
+.color--subtext-dark {
+    color: var(--color-subtext);
+}

index.css

@@ -0,0 +1,68 @@
+:root {
+    --default-padding: 4rem;
+    --roundness-sm: 8px;
+    --roundness-lg: 12px;
+    --roundness-xl: 24px;
+    --roundness-full: 250px;
+}
+
+.profile-container {
+    width: 17.5rem;
+    height: 17.5rem;
+
+    margin: 0 0 2.5rem 0;
+
+    border-radius: var(--roundness-xl);
+    
+    img {
+        width: 17.5rem;
+        height: 17.5rem;
+        object-fit: cover;
+
+        border-radius: var(--roundness-full);
+        border: 2px solid var(--color-background);
+        box-shadow: 0 0 20rem 15rem var(--color-background) inset;
+
+        transition: ease-in-out 1s;
+
+        animation-name: fade-in-profile;
+        animation-duration: 1.75s;
+        animation-fill-mode: both
+    }
+}
+
+.about-container {
+    width: 30rem;
+    height: 10rem;
+
+    padding: .5rem;
+
+    border-radius: var(--roundness-xl);
+    background-color: var(--color-background);
+    
+    transition: ease-in-out 1s;
+
+    animation-name: fade-in-container;
+    animation-duration: 1s;
+    animation-fill-mode: both;
+
+    gap: 1rem;
+}
+
+.footer {
+    bottom: 1rem;
+
+    width: 50rem;
+    height: 3rem;
+
+    border-radius: var(--roundness-xl);
+    background-color: var(--color-background);
+
+    transition: ease-in-out 1s;
+
+    animation-name: fade-in-footer;
+    animation-duration: 2s;
+    animation-fill-mode: both;
+
+    gap: 1rem;
+}

index.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./animations.css">
+    <link rel="stylesheet" href="./variables.css">
+    <link rel="stylesheet" href="./globals.css">
+    <link rel="stylesheet" href="./index.css">
+    <title>A place on the web!</title>
+</head>
+<body class="preload flex flex-col justify-center items-center content-center text-center color--text-dark">
+    <div class="content flex flex-col justify-center items-center content-center text-center">
+        <div class="profile-container flex justify-center items-center text-center">
+            <img src="./avatar.jpg" alt="My profile picture, it shows the character Serial-Designation-N from the popular indie series Murder-Drones.">
+        </div>
+        <div class="about-container flex flex-col justify-center items-center content-center text-center">
+            <h1>Hey, I'm <a href="https://fedi.jo-dev.xyz/@Jo" rel="me">Jo</a>!</h1>
+            <p>And this is my little yay.boo page, which I think looks really neat.</p>
+        </div>
+    </div>
+    <footer class="footer fixed flex flex-row justify-evenly items-center text-center color--subtext-dark">
+        <p>{ <a href="https://h.yay.boo">h.yay.boo</a> }</p>
+        <p>{ <a href="https://rhys.yay.boo">rhys.yay.boo</a> }</p>
+    </footer>
+
+    <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
+    <script>
+        $(window).load(function() {
+            $("body").removeClass("preload");
+        });
+    </script>
+</body>
+</html>

variables.css

@@ -0,0 +1,15 @@
+:root {
+    /* Background/Panels */
+    --color-background: #24273a;
+
+    /* Text */
+    --color-text: #cad3f5;
+    --color-subtext: #b8c0e0;
+
+    /* Accent/Highlight colors */
+    --color-red: #ed8796;
+    --color-pink: #f5bde6;
+    --color-blue: #8aadf4;
+    --color-lavender: #b7bdf8;
+    --color-green: #a6da95;
+}