skeletal layout, theme functionality, mobile/desktop responsive, autoscroll

2025-10-29 02:03:46 -05:00
commit 8f86e13dfc
24 changed files with 4950 additions and 0 deletions
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -0,0 +1,64 @@
+import React from "react";
+
+type Social = { label: string; href: string; icon?: React.ReactNode };
+
+export function Footer({
+  year = new Date().getFullYear(),
+  socials = [
+    { label: "GitHub", href: "#" },
+    { label: "LinkedIn", href: "#" },
+    { label: "Email", href: "#" },
+  ],
+  showBackToTop = true,
+}: {
+  year?: number;
+  socials?: Social[];
+  showBackToTop?: boolean;
+}) {
+  return (
+    <footer className="border-t border-secondary bg-bg px-4 py-10">
+      <div className="mx-auto flex max-w-7xl flex-col items-center justify-between gap-6 md:flex-row">
+        {/* Left: Brand + tagline */}
+        <div className="text-center md:text-left">
+          <div className="text-xl font-extrabold tracking-wide text-text">Jody Holt</div>
+          <p className="text-sm text-text/70">Design • Develop • Deliver</p>
+        </div>
+
+        {/* Middle: Links */}
+        <nav className="flex items-center gap-5">
+          <a className="text-text hover:text-primary" href="#projects">Projects</a>
+          <a className="text-text hover:text-primary" href="#experience">Experience</a>
+          <a className="text-text hover:text-primary" href="#home">Background</a>
+        </nav>
+
+        {/* Right: Socials */}
+        <div className="flex items-center gap-4 text-text">
+          {socials.map((s) => (
+            <a
+              key={s.label}
+              href={s.href}
+              aria-label={s.label}
+              className="inline-flex h-10 w-10 items-center justify-center rounded-lg border border-secondary hover:border-primary hover:text-primary"
+              title={s.label}
+            >
+              {/* replace with real SVGs later */}
+              {s.icon ?? <span className="h-2.5 w-2.5 rounded-full bg-current" />}
+            </a>
+          ))}
+        </div>
+      </div>
+
+      <div className="mx-auto mt-6 flex max-w-7xl items-center justify-center gap-4">
+        <div className="text-center text-xs text-text/60">© {year} Jody Holt • All rights reserved</div>
+        {showBackToTop && (
+          <button
+            onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
+            className="rounded px-3 py-1 text-xs text-text/70 hover:text-primary border border-secondary hover:border-primary"
+          >
+            Back to top
+          </button>
+        )}
+      </div>
+    </footer>
+  );
+}