CatAClock/CrowdedGames.Group
CatAClock/CrowdedGames.Group
0
0
Fork 0
Code Issues Pull requests Activity

small improvements?

Browse source
This commit is contained in:
CatAClock 2025-04-16 09:08:14 -07:00
parent 5b5b0d8169
commit 64cab8052a
4 changed files with 60 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
Animations.css Normal file
View file

@ -0,0 +1,48 @@
/* Keep stuff on the side. This class is added when JavaScript is enabled. */
.HiddenToRight {
margin-left: 100%;
margin-right: -100%;
}
.HiddenToLeft {
margin-left: -100%;
margin-right: 100%;
}
@keyframes SlideInFromRight {
0% {
margin-left: 100%;
margin-right: -100%;
}
100% {
margin-left: 0;
margin-right: 0;
}
}
.SlideInFromRight {
animation-duration: 1s;
animation-name: SlideInFromRight;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
@keyframes SlideInFromLeft {
0% {
margin-left: -100%;
margin-right: 100%;
}
100% {
margin-left: 0;
margin-right: 0;
}
}
.SlideInFromLeft {
animation-duration: 1s;
animation-name: SlideInFromRight;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}

53
index.css
View file

@ -10,14 +10,8 @@ html {
font-family: "Perfect DOS VGA 437"; font-family: "Perfect DOS VGA 437";
background-color: #176464; background-color: #176464;
overflow-x: hidden; overflow-x: hidden;
}
/* This pre fixes a bug in regards to the typing animation not working properly. */ text-align: center;
pre {
position: relative;
font-size: 64px;
top: -10px;
text-align: left;
} }
p { p {
@ -38,12 +32,8 @@ h3 {
/* Header stuff. */ /* Header stuff. */
header { header {
align-items: center;
justify-content: center;
display: block; display: block;
text-align: center;
min-width: 640px; min-width: 640px;
margin-top: -50px; margin-top: -50px;
@ -79,7 +69,7 @@ header {
padding-left: 10px; padding-left: 10px;
padding-right: 5px; padding-right: 5px;
margin-inline: auto; margin: auto;
background-color: #FBDB88; background-color: #FBDB88;
position: relative; position: relative;
@ -87,6 +77,7 @@ header {
animation-name: Startup; animation-name: Startup;
animation-play-state: running; animation-play-state: running;
/* Change the steps for however many characters your text has. */
animation-timing-function: steps(18, jump-end); animation-timing-function: steps(18, jump-end);
animation-fill-mode: forwards; animation-fill-mode: forwards;
animation-duration: 2s; animation-duration: 2s;
@ -116,10 +107,10 @@ header {
/* Project stuff. */ /* Project stuff. */
.ProjectSection { .ProjectSection {
display: flex;
flex-flow: wrap;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
display: flex;
flex-flow: wrap;
color: #FF9930; color: #FF9930;
} }
@ -163,7 +154,6 @@ header {
.ProjectLink { .ProjectLink {
text-decoration: none; text-decoration: none;
text-align: center;
max-width: 620px; max-width: 620px;
@ -205,12 +195,6 @@ header {
} }
/* Work experience stuff. */ /* Work experience stuff. */
.WorkSection {
align-items: center;
text-align: center;
justify-content: center;
}
table { table {
width: 100%; width: 100%;
} }
@ -229,30 +213,3 @@ td, th {
width: 25%; width: 25%;
height: 25%; height: 25%;
} }
/* Keep stuff on the side. This class is added when JavaScript is enabled. */
.SideLined {
margin-left: 100%;
margin-right: -100%;
}
/* Slide in animations */
@keyframes SlideIn {
0% {
margin-left: 100%;
margin-right: -100%;
}
100% {
margin-left: 0;
margin-right: 0;
}
}
.SlideIn {
animation-duration: 1s;
animation-name: SlideIn;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}

3
index.html
View file

@ -2,6 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<link href="index.css" rel="stylesheet"/> <link href="index.css" rel="stylesheet"/>
<link href="Animations.css" rel="stylesheet"/>
<meta name="description" content="Home of an independent developer. Find programming projects, games, and work experience on this website."> <meta name="description" content="Home of an independent developer. Find programming projects, games, and work experience on this website.">
<link rel="icon" type="image/png" sizes="32x32" href="Icons/Favicon32.png"> <link rel="icon" type="image/png" sizes="32x32" href="Icons/Favicon32.png">
<title>Crowded Games Group</title> <title>Crowded Games Group</title>
@ -10,7 +11,7 @@
</head> </head>
<body> <body>
<header> <header>
<div class="HeaderSolid"><pre>|</pre></div> <div class="HeaderSolid"><pre style="position: relative; font-size: 64px; top: -10px; text-align: left;">|</pre></div>
<!-- This div fixes a bug where the text is way too low and goes under the animation. --> <!-- This div fixes a bug where the text is way too low and goes under the animation. -->
<h1 style="margin-top: -35px;">CrowdedGames.group</h1> <h1 style="margin-top: -35px;">CrowdedGames.group</h1>
<section class="HeaderLinkSection"> <section class="HeaderLinkSection">

8
index.js
View file

@ -1,5 +1,5 @@
// If Javascript is enabled, enable the cool javascript stuff! // If Javascript is enabled, enable the cool javascript stuff!
document.getElementsByClassName("WorkSection")[0].classList.add("SideLined"); document.getElementsByClassName("WorkSection")[0].classList.add("HiddenToRight");
// Sounds for animations to feel nice :3 // Sounds for animations to feel nice :3
const Typing = new Audio("Audio/KeyboardTyping.mp3"); const Typing = new Audio("Audio/KeyboardTyping.mp3");
const Glow = new Audio("Audio/Glow.mp3"); const Glow = new Audio("Audio/Glow.mp3");
@ -16,12 +16,12 @@ Cat.addEventListener("mouseover", (event) => {
Noise.play(); Noise.play();
}); });
// set the size of the Glow (SectionSolid) to the proper height (CSS defaults it to 200vh // set the size of the Glow (SectionSolid) to the proper height (CSS defaults it to 200vh
document.getElementsByClassName("SectionSolid")[0].style.minHeight = String(document.getElementsByTagName("html")[0].offsetHeight - 190) + "px"; document.getElementsByClassName("SectionSolid")[0].style.minHeight = String(document.getElementsByTagName("html")[0].offsetHeight - 180) + "px";
// force the user to topside of the window. // force the user to topside of the window.
window.scroll(0, 0); window.scroll(0, 0);
// play some animations as soon as the user gets to that amount of scroll. // play some animations as soon as the user gets to that amount of scroll.
window.addEventListener("scroll", (event) => { window.addEventListener("scroll", (event) => {
if (window.scrollY + 190 >= document.getElementsByClassName("ProjectSection")[0].clientHeight && !document.getElementsByClassName("WorkSection")[0].classList.contains("SlideIn")) { if (window.scrollY + 190 >= document.getElementsByClassName("ProjectSection")[0].clientHeight && !document.getElementsByClassName("WorkSection")[0].classList.contains("SlideInFromRight")) {
document.getElementsByClassName("WorkSection")[0].classList.add("SlideIn"); document.getElementsByClassName("WorkSection")[0].classList.add("SlideInFromRight");
} }
}); });