commit 82d6cb535bdf30b5905fafb46d57b1dff7a0b030 Author: Jo 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 @@ + + + + + + + + + + A place on the web! + + +
+
+ My profile picture, it shows the character Serial-Designation-N from the popular indie series Murder-Drones. +
+
+

Hey, I'm Jo!

+

And this is my little yay.boo page, which I think looks really neat.

+
+
+ + + + + + \ 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