Initial commit

2026-03-01 23:10:24 -05:00
commit 4cefc00b64
44 changed files with 1587 additions and 0 deletions
@@ -0,0 +1,134 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&family=Special+Elite&display=swap");
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "Special Elite", system-ui;
+  background-color: #111;
+  color: #f0f0f0;
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  color: #ccc;
+}
+
+a:hover {
+  color: #fff;
+}
+
+/* Monkey + typewriter — sits inline in the header, not fixed */
+.monkey-widget {
+  display: flex;
+  align-items: flex-end;
+  flex-shrink: 0;
+}
+
+/* Wrapper handles the positional offset so the shake animation is clean */
+.monkey-widget .typewriter-wrapper {
+  position: relative;
+  transform: translate(18px, -8px);
+  z-index: 2;
+}
+
+.monkey-widget .typewriter-img {
+  width: 150px;
+  filter: grayscale(1);
+  display: block;
+}
+
+@keyframes typewriter-shake {
+  0%, 100% { transform: rotate(0deg) translate(0, 0); }
+  20%       { transform: rotate(-4deg) translate(-3px, -1px); }
+  50%       { transform: rotate(4deg) translate(3px, 2px); }
+  80%       { transform: rotate(-2deg) translate(-2px, 0); }
+}
+
+.monkey-widget .typewriter-img.shaking {
+  animation: typewriter-shake 0.3s ease;
+}
+
+.home-typewriter-shake {
+  animation: typewriter-shake 0.5s ease;
+}
+
+/* Flying letter spat out of the typewriter */
+@keyframes fly-out {
+  0%   { opacity: 1; transform: translate(-50%, -50%) translate(0px, 0px); }
+  100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--dx), var(--dy)); }
+}
+
+.flying-letter {
+  position: absolute;
+  top: 35%;
+  left: 50%;
+  pointer-events: none;
+  animation: fly-out 0.8s ease-out forwards;
+  font-family: "Special Elite", system-ui;
+  font-size: 16px;
+  font-weight: bold;
+  color: #f0f0f0;
+  white-space: nowrap;
+  z-index: 10;
+}
+
+.monkey-widget .monkey-img {
+  margin-left: -15px;
+  position: relative;
+  z-index: 1;
+}
+
+/* Navbar desktop links */
+.navbar-links {
+  display: flex;
+  gap: 28px;
+  align-items: center;
+}
+
+/* Hamburger button — hidden on desktop */
+.navbar-hamburger {
+  display: none;
+  background: transparent;
+  border: none;
+  color: #f0f0f0;
+  font-size: 1.4em;
+  cursor: pointer;
+  padding: 4px 8px;
+  line-height: 1;
+}
+
+/* Mobile dropdown menu */
+.navbar-mobile-menu {
+  display: none;
+  flex-direction: column;
+  border-top: 1px solid #222;
+}
+
+@media (max-width: 600px) {
+  .navbar-links {
+    display: none;
+  }
+
+  .navbar-hamburger {
+    display: block;
+  }
+
+  .navbar-mobile-menu {
+    display: flex;
+  }
+
+  .monkey-widget .typewriter-wrapper {
+    transform: translate(10px, -5px);
+  }
+
+  .monkey-widget .typewriter-img {
+    width: 60px;
+  }
+
+  .monkey-widget .monkey-img {
+    width: 90px !important;
+  }
+}