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…
Add table
Add a link
Reference in a new issue