diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..6c55f7f Binary files /dev/null and b/.DS_Store differ diff --git a/css/.DS_Store b/css/.DS_Store new file mode 100644 index 0000000..2af3bfd Binary files /dev/null and b/css/.DS_Store differ diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..82ec524 --- /dev/null +++ b/css/styles.css @@ -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; +} diff --git a/dvd-logo/images/dvd-logo.png b/dvd-logo/images/dvd-logo.png new file mode 100644 index 0000000..560e642 Binary files /dev/null and b/dvd-logo/images/dvd-logo.png differ diff --git a/dvd-logo/index.html b/dvd-logo/index.html new file mode 100644 index 0000000..fc07484 --- /dev/null +++ b/dvd-logo/index.html @@ -0,0 +1,25 @@ + + + + + DVD MADNESS + + + + + + + diff --git a/dvd-logo/js/script.js b/dvd-logo/js/script.js new file mode 100644 index 0000000..9703f88 --- /dev/null +++ b/dvd-logo/js/script.js @@ -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 +} diff --git a/images/profile.jpg b/images/profile.jpg new file mode 100644 index 0000000..57ba3d0 Binary files /dev/null and b/images/profile.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..47c463b --- /dev/null +++ b/index.html @@ -0,0 +1,51 @@ + + + + + Simponic's Static Sites + + + + + +
+ +

+ ๐Ÿ‘‹ Hello! +
+ ๐Ÿค“ I'm Simponic. +
+ ๐Ÿ“– This pages hosts strictly static content. +
+ ๐Ÿ”” Visit simponic.xyz to view my "real" website. +

+
+
+
+ +
+ +
+

DVD Logo Bouncing Animation

+

Brings back the nostalgia of old-school DVD players, as discussed in The Office.

+
+
+ +
+
+ +
+ +
+

The A-maze-ing Maize Maze

+

A Randomized Kruskal's Maze game with BFS path-finding. You play as a ๐ŸŒฝcorn stalk trying to become ๐Ÿฟpopcorn.

+
+
+
+
+ + + diff --git a/maize-maze b/maize-maze index 2bf6e46..4d1c114 160000 --- a/maize-maze +++ b/maize-maze @@ -1 +1 @@ -Subproject commit 2bf6e469a6a914c1f2c41b1408ad988bd72b09f0 +Subproject commit 4d1c1142634df0b10f6a7888ef1b6c2e8d632136