feat(web): add global footer + see-all

steipete · steipete · commit bebee5e12486 · 2026-01-05T18:42:08.000+01:00
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -0,0 +1,22 @@
+export function Footer() {
+  return (
+    <footer className="site-footer">
+      <div className="site-footer-inner">
+        <div className="site-footer-divider" aria-hidden="true" />
+        <div className="site-footer-row">
+          <div className="site-footer-copy">
+            Open source (MIT) on{' '}
+            <a href="https://github.com/clawdbot/clawdhub" target="_blank" rel="noreferrer">
+              GitHub
+            </a>
+            . Made by{' '}
+            <a href="https://steipete.me" target="_blank" rel="noreferrer">
+              Peter Steinberger
+            </a>
+            .
+          </div>
+        </div>
+      </div>
+    </footer>
+  )
+}
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
@@ -3,6 +3,7 @@ import { createRootRoute, HeadContent, Scripts } from '@tanstack/react-router'
 import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
 import { AppProviders } from '../components/AppProviders'
 import { ClientOnly } from '../components/ClientOnly'
+import { Footer } from '../components/Footer'
 import Header from '../components/Header'
 
 import appCss from '../styles.css?url'
@@ -45,8 +46,11 @@ function RootDocument({ children }: { children: React.ReactNode }) {
       <body>
         <ClientOnly>
           <AppProviders>
-            <Header />
-            {children}
+            <div className="app-shell">
+              <Header />
+              {children}
+              <Footer />
+            </div>
             {import.meta.env.DEV ? (
               <TanStackDevtools
                 config={{
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
@@ -83,7 +83,7 @@ function Home() {
   }, [highlightedOnly, searchSkills, trimmedQuery])
 
   return (
-    <main className="app-shell">
+    <main>
       <section className={`hero${searchMode ? ' search-mode' : ''}`}>
         <div className="hero-inner">
           <div className="hero-copy fade-up" data-delay="1">
@@ -229,6 +229,11 @@ function Home() {
                 ))
               )}
             </div>
+            <div className="section-cta">
+              <Link to="/skills" className="btn">
+                See all skills
+              </Link>
+            </div>
           </section>
         </>
       )}
diff --git a/src/styles.css b/src/styles.css
@@ -80,6 +80,59 @@ code {
   flex-direction: column;
 }
 
+.app-shell main {
+  flex: 1;
+}
+
+.site-footer {
+  padding: 0 24px 40px;
+}
+
+.site-footer-inner {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.site-footer-divider {
+  height: 1px;
+  background: var(--line);
+  opacity: 0.6;
+  margin: 18px 0 16px;
+}
+
+.site-footer-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.site-footer-copy {
+  font-size: 0.85rem;
+  color: var(--ink-soft);
+}
+
+.site-footer-copy a {
+  color: inherit;
+  text-decoration: underline;
+  text-decoration-color: rgba(255, 107, 74, 0.32);
+  text-underline-offset: 3px;
+  transition:
+    color 0.2s ease,
+    text-decoration-color 0.2s ease;
+}
+
+.site-footer-copy a:hover {
+  color: var(--ink);
+  text-decoration-color: rgba(255, 107, 74, 0.6);
+}
+
+.section-cta {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 18px;
+}
+
 .navbar {
   position: sticky;
   top: 0;
