Add index and whatnot

This commit is contained in:
Logan Hunt 2022-02-18 17:08:34 -07:00
parent 1588b8ddb5
commit bbfbac1daf
Signed by untrusted user who does not match committer: simponic
GPG Key ID: 52B3774857EB24B1
9 changed files with 183 additions and 1 deletions

BIN
.DS_Store vendored Normal file

Binary file not shown.

BIN
css/.DS_Store vendored Normal file

Binary file not shown.

64
css/styles.css Normal file
View File

@ -0,0 +1,64 @@
body {
margin: 0;
background-color: #AAAAAA;
font-family: 'Trebuchet MS', sans-serif;
}
.top-container {
text-align: center;
height: 100vh;
padding: 24px;
}
.profile-picture {
width: 100%;
border-radius: 50%;
max-width: 600px;
box-shadow:0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
.projects-grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
padding: 24px;
gap: 12px;
}
.project {
text-decoration: none;
color: black;
border-radius: 8px;
flex: 1;
background-color: #888888;
display: flex;
box-shadow:0 8px 12px 0 rgba(0,0,0,0.2),0 6px 12px 0 rgba(0,0,0,0.17);
min-width: 300px;
transition: transform 250ms;
padding: 12px;
gap: 12px;
}
.project:hover {
background-color: #666666;
transform: translateY(-8px);
cursor: pointer;
}
.project-logo-container {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
}
.project-body {
flex: 5;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: left;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 65 KiB

25
dvd-logo/index.html Normal file
View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<title>DVD MADNESS</title>
<style>
body {
margin: 0;
background: black;
height: 100%;
width: 100%;
}
#dvd-logo {
width: 200px;
position: absolute;
left: -200px; /* So that logo doesn't flash at top left corner when document loads */
top: -200px;
}
</style>
</head>
<body>
<img id="dvd-logo" src="images/dvd-logo.png">
<script src="js/script.js"></script>
</body>
</html>

42
dvd-logo/js/script.js Normal file
View File

@ -0,0 +1,42 @@
const randUpTo = (max) => Math.random() * max
const randomHue = (element) => {
element.style.filter = `brightness(0.5) sepia(1) saturate(10000%) hue-rotate(${randUpTo(360)}deg)`;
}
const clamp = (val, max) => val > max ? max : val;
const updateLogo = (logo, element) => {
const screen_height = window.innerHeight;
const screen_width = window.innerWidth;
const collide_y = logo.y <= 0 || (logo.y + element.clientHeight) >= screen_height;
const collide_x = logo.x <= 0 || (logo.x + element.clientWidth) >= screen_width;
logo.dx *= (collide_x ? -1 : 1);
logo.dy *= (collide_y ? -1 : 1);
if (collide_y || collide_x) {
randomHue(element);
}
// Clamp in case user changes screen size
logo.x = clamp(logo.x + logo.dx, screen_width - element.clientWidth);
logo.y = clamp(logo.y + logo.dy, screen_height - element.clientHeight);
element.style.left = `${logo.x}px`;
element.style.top = `${logo.y}px`;
};
window.onload = () => {
let logo = {
x: randUpTo(window.innerWidth),
y: randUpTo(window.innerHeight),
dx: 2,
dy: 2
};
const dvdLogo = document.getElementById("dvd-logo");
setInterval(() => updateLogo(logo, dvdLogo), 15); // ~ 67 hz
}

BIN
images/profile.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

51
index.html Normal file
View File

@ -0,0 +1,51 @@
<!DOCTYPE html>
<html>
<head>
<title>Simponic's Static Sites</title>
<link href="css/styles.css" rel="stylesheet">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<script src="https://kit.fontawesome.com/d7e97ed48f.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="top-container animate__animated animate__fadeIn">
<img src="images/profile.jpg" class="profile-picture">
<p>
👋 Hello!
<br>
🤓 I'm Simponic.
<br>
📖 This pages hosts strictly static content.
<br>
🔔 Visit <a href="https://simponic.xyz">simponic.xyz</a> to view my "real" website.
</p>
<div class="projects-grid">
<div class="project" onclick="window.location='dvd-logo/index.html'">
<div class="project-logo-container">
<i class="fa-solid fa-compact-disc"></i>
</div>
<div class="project-body">
<h1>DVD Logo Bouncing Animation</h1>
<p>Brings back the nostalgia of old-school DVD players, as discussed in <a href="https://www.youtube.com/watch?v=QOtuX0jL85Y">The Office</a>.</p>
</div>
</div>
<div class="project" onclick="window.location='maize-maze/index.html'">
<div class="project-logo-container">
<i class="fa-solid fa-diagram-project"></i>
</div>
<div class="project-body" >
<h1>The A-maze-ing Maize Maze</h1>
<p>A Randomized Kruskal's Maze game with BFS path-finding. You play as a 🌽corn stalk trying to become 🍿popcorn.</p>
</div>
</div>
</div>
</div>
</body>
</html>

@ -1 +1 @@
Subproject commit 2bf6e469a6a914c1f2c41b1408ad988bd72b09f0 Subproject commit 4d1c1142634df0b10f6a7888ef1b6c2e8d632136