Add index and whatnot
This commit is contained in:
Logan Hunt
parent
1588b8ddb5
commit
bbfbac1daf
GPG Key ID:
52B3774857EB24B1
BIN
css/.DS_Store
vendored
Normal file
BIN
css/.DS_Store
vendored
Normal file
Binary file not shown.
64
css/styles.css
Normal file
64
css/styles.css
Normal 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;
|
||||||
|
}
|
||||||
BIN
dvd-logo/images/dvd-logo.png
Normal file
BIN
dvd-logo/images/dvd-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
25
dvd-logo/index.html
Normal file
25
dvd-logo/index.html
Normal 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
42
dvd-logo/js/script.js
Normal 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
BIN
images/profile.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
51
index.html
Normal file
51
index.html
Normal 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
|
||||||
Loading…
Reference in New Issue
Block a user