filling in right bar

2025-12-18 21:15:24 -05:00
parent fc7001f4be
commit 1a77cc08cf
6 changed files with 213 additions and 68 deletions
--- a/public/resume.pdf
+++ b/public/resume.pdf
--- a/src/app.css
+++ b/src/app.css
@@ -128,6 +128,36 @@
  }
 }

+/* Manual dark mode via .dark class */
+.dark {
+  --color-rosewater: #efc9c2;
+  --color-flamingo: #ebb2b2;
+  --color-pink: #f2a7de;
+  --color-mauve: #b889f4;
+  --color-red: #ea7183;
+  --color-maroon: #ea838c;
+  --color-peach: #f39967;
+  --color-yellow: #eaca89;
+  --color-green: #96d382;
+  --color-teal: #78cec1;
+  --color-sky: #91d7e3;
+  --color-sapphire: #68bae0;
+  --color-blue: #739df2;
+  --color-lavender: #a0a8f6;
+  --color-text: #b5c1f1;
+  --color-subtext1: #a6b0d8;
+  --color-subtext0: #959ec2;
+  --color-overlay2: #848cad;
+  --color-overlay1: #717997;
+  --color-overlay0: #63677f;
+  --color-surface2: #505469;
+  --color-surface1: #3e4255;
+  --color-surface0: #2c2f40;
+  --color-base: #1e1e2e;
+  --color-mantle: #141620;
+  --color-crust: #0e0f16;
+}
+
 :root {
  font-family: "Source Code Pro", monospace;
 }
@@ -471,3 +501,20 @@ input[type="checkbox"]:checked::before {
    display: block !important;
  }
 }
+@keyframes shaker {
+  0% {
+    transform: rotate(0deg);
+  }
+  33% {
+    transform: rotate(15deg);
+  }
+  66% {
+    transform: rotate(-15deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}
+.shaker:hover {
+  animation: shaker 0.5s ease;
+}
--- a/src/components/Bars.tsx
+++ b/src/components/Bars.tsx
@@ -4,6 +4,10 @@ import { onMount, createEffect, createSignal, Show, For } from "solid-js";
 import { api } from "~/lib/api";
 import { TerminalSplash } from "./TerminalSplash";
 import { insertSoftHyphens } from "~/lib/client-utils";
+import GitHub from "./icons/GitHub";
+import LinkedIn from "./icons/LinkedIn";
+import MoonIcon from "./icons/MoonIcon";
+import SunIcon from "./icons/SunIcon";

 export function LeftBar() {
  const { setLeftBarSize, leftBarVisible, setLeftBarVisible } = useBars();
@@ -138,7 +142,7 @@ export function LeftBar() {
  return (
    <nav
      ref={ref}
-      class="border-r-overlay2 fixed z-50 h-full w-min border-r-2 transition-transform duration-500 ease-out md:max-w-[20%]"
+      class="border-r-overlay2 bg-base fixed z-50 h-full w-min border-r-2 transition-transform duration-500 ease-out md:max-w-[20%]"
      classList={{
        "-translate-x-full": !leftBarVisible(),
        "translate-x-0": leftBarVisible()
@@ -182,47 +186,42 @@ export function LeftBar() {
        </h3>
      </Typewriter>
      <div class="text-text flex flex-col px-4 text-xl font-bold">
-        <ul class="gap-4">
-          {/* Recent blog posts */}
-          <li class="mt-2 mb-6">
-            <div class="flex flex-col gap-2">
-              <span class="text-lg font-semibold">Recent Posts</span>
-              <div class="flex flex-col gap-3">
-                <Show when={recentPosts()} fallback={<TerminalSplash />}>
-                  <For each={recentPosts()}>
-                    {(post) => (
-                      <a
-                        href={`/blog/${post.title}`}
-                        class="hover:text-subtext0 block transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-105 hover:font-bold"
-                      >
-                        <Typewriter class="flex flex-col" keepAlive={false}>
-                          <div class="relative overflow-hidden">
-                            <img
-                              src={post.banner_photo || "/blueprint.jpg"}
-                              alt="post-cover"
-                              class="float-right mb-1 ml-2 h-12 w-16 rounded object-cover"
-                            />
-                            <span class="inline wrap-break-word hyphens-auto">
-                              {insertSoftHyphens(post.title.replace(/_/g, " "))}
-                            </span>
-                          </div>
+        <div class="flex flex-col py-8">
+          <span class="text-lg font-semibold">Recent Posts</span>
+          <div class="flex flex-col gap-3 pt-4">
+            <Show when={recentPosts()} fallback={<TerminalSplash />}>
+              <For each={recentPosts()}>
+                {(post) => (
+                  <a
+                    href={`/blog/${post.title}`}
+                    class="hover:text-subtext0 block transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-105 hover:font-bold"
+                  >
+                    <Typewriter class="flex flex-col" keepAlive={false}>
+                      <div class="relative overflow-hidden">
+                        <img
+                          src={post.banner_photo || "/blueprint.jpg"}
+                          alt="post-cover"
+                          class="float-right mb-1 ml-2 h-12 w-16 rounded object-cover"
+                        />
+                        <span class="inline wrap-break-word hyphens-auto">
+                          {insertSoftHyphens(post.title.replace(/_/g, " "))}
+                        </span>
+                      </div>

-                          <span class="text-subtext0 clear-both text-sm">
-                            {new Date(post.date).toLocaleDateString("en-US", {
-                              month: "short",
-                              day: "numeric",
-                              year: "numeric"
-                            })}
-                          </span>
-                        </Typewriter>
-                      </a>
-                    )}
-                  </For>
-                </Show>
-              </div>
-            </div>
-          </li>
-        </ul>
+                      <span class="text-subtext0 clear-both text-sm">
+                        {new Date(post.date).toLocaleDateString("en-US", {
+                          month: "short",
+                          day: "numeric",
+                          year: "numeric"
+                        })}
+                      </span>
+                    </Typewriter>
+                  </a>
+                )}
+              </For>
+            </Show>
+          </div>
+        </div>
        <Typewriter keepAlive={false} class="absolute bottom-12">
          <div class="flex flex-col gap-4">
            <ul class="gap-4">
@@ -260,7 +259,20 @@ export function RightBar() {
  let ref: HTMLDivElement | undefined;
  let actualWidth = 0;

+  const [isDark, setIsDark] = createSignal(false);
+
  onMount(() => {
+    // Initialize dark mode based on system preference
+    const prefersDark = window.matchMedia(
+      "(prefers-color-scheme: dark)"
+    ).matches;
+    const savedTheme = localStorage.getItem("theme");
+
+    if (savedTheme === "dark" || (!savedTheme && prefersDark)) {
+      setIsDark(true);
+      document.documentElement.classList.add("dark");
+    }
+
    if (ref) {
      const updateSize = () => {
        actualWidth = ref?.offsetWidth || 0;
@@ -289,10 +301,21 @@ export function RightBar() {
    setRightBarSize(rightBarVisible() ? actualWidth : 0);
  });

+  const toggleDarkMode = () => {
+    setIsDark(!isDark());
+    if (!isDark()) {
+      document.documentElement.classList.add("dark");
+      localStorage.setItem("theme", "dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+      localStorage.setItem("theme", "light");
+    }
+  };
+
  return (
    <nav
      ref={ref}
-      class="border-l-overlay2 fixed right-0 z-50 hidden h-full min-h-screen w-fit border-l-2 transition-transform duration-500 ease-out md:block md:max-w-[20%]"
+      class="border-l-overlay2 bg-base fixed right-0 z-50 hidden h-full min-h-screen w-fit border-l-2 transition-transform duration-500 ease-out md:block md:max-w-[20%]"
      classList={{
        "translate-x-full": !rightBarVisible(),
        "translate-x-0": rightBarVisible()
@@ -303,22 +326,79 @@ export function RightBar() {
          : "cubic-bezier(0.4, 0, 0.2, 1)" // Smooth when hiding
      }}
    >
-      <Typewriter keepAlive={false} class="z-50">
-        <h3 class="hover:text-subtext0 w-fit text-center text-3xl underline transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-105">
-          Right Navigation
-        </h3>
-        <div class="text-text flex h-screen flex-col justify-between px-4 py-10 text-xl font-bold">
-          <ul class="gap-4">
-            <li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
-              <a href="/">Home</a>
-            </li>
-            <li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
-              <a href="#about">About</a>
-            </li>
-            <li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
-              <a href="/contact">Contact</a>
-            </li>
-          </ul>
+      <Typewriter keepAlive={false} class="z-50 px-4 pt-4">
+        <div class="text-text flex h-screen flex-col justify-between py-6">
+          <div class="flex flex-col gap-6">
+            <h3 class="text-subtext0 rule-around text-lg font-semibold">
+              Connect
+            </h3>
+            <ul class="flex flex-col gap-4">
+              <li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
+                <a href="/contact">Contact</a>
+              </li>
+              <li>
+                <a
+                  href="https://github.com/MikeFreno/"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="hover:text-subtext0 flex items-center gap-3 transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-105"
+                >
+                  <span class="shaker rounded-full p-2">
+                    <GitHub height={24} width={24} fill={undefined} />
+                  </span>
+                  <span>GitHub</span>
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://www.linkedin.com/in/michael-freno-176001256/"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="hover:text-subtext0 flex items-center gap-3 transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-105"
+                >
+                  <span class="shaker rounded-full p-2">
+                    <LinkedIn height={24} width={24} fill={undefined} />
+                  </span>
+                  <span>LinkedIn</span>
+                </a>
+              </li>
+              <li>
+                <a
+                  href="/resume"
+                  class="hover:text-subtext0 flex items-center gap-3 transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-105"
+                >
+                  <span class="shaker rounded-full p-2">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      height={24}
+                      width={24}
+                      viewBox="0 0 384 512"
+                      class="fill-text"
+                    >
+                      <path d="M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM112 256H272c8.8 0 16 7.2 16 16s-7.2 16-16 16H112c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64H272c8.8 0 16 7.2 16 16s-7.2 16-16 16H112c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64H272c8.8 0 16 7.2 16 16s-7.2 16-16 16H112c-8.8 0-16-7.2-16-16s7.2-16 16-16z" />
+                    </svg>
+                  </span>
+                  <span>Resume</span>
+                </a>
+              </li>
+            </ul>
+          </div>
+
+          {/* Dark Mode Toggle */}
+          <div class="border-overlay0 border-t pt-6">
+            <button
+              onClick={toggleDarkMode}
+              class="hover:bg-surface0 flex w-full items-center gap-3 rounded-lg p-3 transition-all duration-200 ease-in-out hover:scale-105"
+              aria-label="Toggle dark mode"
+            >
+              <Show when={isDark()} fallback={<MoonIcon size={24} />}>
+                <SunIcon size={24} fill="var(--color-text)" />
+              </Show>
+              <span class="text-text font-semibold">
+                {isDark() ? "Light Mode" : "Dark Mode"}
+              </span>
+            </button>
+          </div>
        </div>
      </Typewriter>
    </nav>
--- a/src/components/ErrorBoundaryFallback.tsx
+++ b/src/components/ErrorBoundaryFallback.tsx
@@ -1,5 +1,5 @@
 import { useNavigate } from "@solidjs/router";
-import { createEffect, createSignal, For } from "solid-js";
+import { createSignal, For, onMount, onCleanup } from "solid-js";

 export interface ErrorBoundaryFallbackProps {
  error: Error;
@@ -21,9 +21,11 @@ export default function ErrorBoundaryFallback(
  }
  const [glitchText, setGlitchText] = createSignal("ERROR");

-  createEffect(() => {
-    console.error(props.error);
+  // Log error immediately (safe for SSR)
+  console.error(props.error);

+  // Client-only glitch animation
+  onMount(() => {
    const glitchChars = "!@#$%^&*()_+-=[]{}|;':\",./<>?~`";
    const originalText = "ERROR";

@@ -44,7 +46,7 @@ export default function ErrorBoundaryFallback(
      }
    }, 400);

-    return () => clearInterval(glitchInterval);
+    onCleanup(() => clearInterval(glitchInterval));
  });

  const createParticles = () => {
--- a/src/routes/contact.tsx
+++ b/src/routes/contact.tsx
@@ -102,7 +102,7 @@ export default function ContactPage() {

  const LineageQuestionsDropDown = () => {
    return (
-      <div class="mx-auto px-4 py-12 md:w-3/4 md:flex-row lg:w-1/2">
+      <div class="w-full py-12">
        <RevealDropDown title={"Questions about Life and Lineage?"}>
          <div>
            Feel free to use the form{" "}
@@ -198,7 +198,7 @@ export default function ContactPage() {
      <Meta name="description" content="Contact Me" />

      <div class="flex min-h-screen w-full justify-center">
-        <div class="pt-[20vh]">
+        <div class="w-full max-w-4xl px-4 pt-[20vh]">
          <div class="text-center text-3xl tracking-widest dark:text-white">
            Contact
          </div>
@@ -210,13 +210,13 @@ export default function ContactPage() {
          <Show when={viewer() === "lineage"}>
            <LineageQuestionsDropDown />
          </Show>
-          <form onSubmit={sendEmailTrigger} class="min-w-[85vw] px-4">
+          <form onSubmit={sendEmailTrigger} class="w-full">
            <div
              class={`flex w-full flex-col justify-evenly pt-6 ${
                viewer() !== "lineage" ? "md:mt-24" : ""
              }`}
            >
-              <div class="mx-auto w-full justify-evenly md:flex md:w-3/4 md:flex-row lg:w-1/2">
+              <div class="mx-auto w-full justify-evenly md:flex md:flex-row">
                <div class="input-group md:mx-4">
                  <input
                    type="text"
@@ -242,7 +242,7 @@ export default function ContactPage() {
                  <label class="underlinedInputLabel">Email</label>
                </div>
              </div>
-              <div class="mx-auto w-full pt-6 md:w-3/4 md:pt-12 lg:w-1/2">
+              <div class="mx-auto w-full pt-6 md:pt-12">
                <div class="textarea-group">
                  <textarea
                    required
@@ -255,7 +255,7 @@ export default function ContactPage() {
                  <label class="underlinedInputLabel">Message</label>
                </div>
              </div>
-              <div class="mx-auto flex w-full justify-end pt-4 md:w-3/4 lg:w-1/2">
+              <div class="mx-auto flex w-full justify-end pt-4">
                <Show
                  when={countDown() > 0}
                  fallback={
--- a/src/routes/resume.tsx
+++ b/src/routes/resume.tsx
@@ -0,0 +1,16 @@
+import { Title } from "@solidjs/meta";
+
+export default function Resume() {
+  return (
+    <main class="flex h-screen w-full flex-col">
+      <Title>Resume - Freno.dev</Title>
+      <div class="flex h-full w-full items-center justify-center">
+        <iframe
+          src="/resume.pdf"
+          class="h-full w-full border-0"
+          title="Resume PDF"
+        />
+      </div>
+    </main>
+  );
+}