initial commit
This commit is contained in:
commit
82d6cb535b
6 changed files with 295 additions and 0 deletions
56
animations.css
Normal file
56
animations.css
Normal file
|
@ -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%}
|
||||||
|
}
|
BIN
avatar.jpg
Normal file
BIN
avatar.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 27 KiB |
122
globals.css
Normal file
122
globals.css
Normal file
|
@ -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);
|
||||||
|
}
|
68
index.css
Normal file
68
index.css
Normal file
|
@ -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;
|
||||||
|
}
|
34
index.html
Normal file
34
index.html
Normal file
|
@ -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>
|
15
variables.css
Normal file
15
variables.css
Normal file
|
@ -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;
|
||||||
|
}
|
Loading…
Reference in a new issue