commit 82d6cb535bdf30b5905fafb46d57b1dff7a0b030
Author: Jo <Johannesreckers2006@gmail.com>
Date: Wed Sep 27 23:44:27 2023 +0200
initial commit
diff --git a/animations.css b/animations.css
new file mode 100644
index 0000000..86a7bb2
--- /dev/null
+++ b/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%}
+}
\ No newline at end of file
diff --git a/avatar.jpg b/avatar.jpg
new file mode 100644
index 0000000..0258c8f
Binary files /dev/null and b/avatar.jpg differ
diff --git a/globals.css b/globals.css
new file mode 100644
index 0000000..03b5704
--- /dev/null
+++ b/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);
+}
\ No newline at end of file
diff --git a/index.css b/index.css
new file mode 100644
index 0000000..553d2b0
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..6efde90
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/variables.css b/variables.css
new file mode 100644
index 0000000..93a0981
--- /dev/null
+++ b/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;
+}
\ No newline at end of file