Footer

ui/src/App.jsx

@@ -5,6 +5,22 @@ import { StackPresetToolbar } from "./components/StackPresetToolbar";
 import { StatusPanels } from "./components/StatusPanels";
 import { useRuntimeState } from "./hooks/useRuntimeState";
 
+function AppFooter() {
+  return (
+    <footer className="app-footer">
+      <span>Built with React + Vite</span>
+      <span aria-hidden="true">-</span>
+      <a href="https://git.f-40.com/aiden/video-shader-toys" target="_blank" rel="noreferrer">
+        Source code
+      </a>
+      <span aria-hidden="true">-</span>
+      <a href="https://www.linkedin.com/in/aiden-wilson-275/" target="_blank" rel="noreferrer">
+        Built by Aiden Wilson
+      </a>
+    </footer>
+  );
+}
+
 function App() {
   const [appState, setAppState] = useRuntimeState();
   const [pendingShaderId, setPendingShaderId] = useState("");
@@ -53,6 +69,7 @@ function App() {
             <div className="progress-bar is-indeterminate" />
           </div>
         </section>
+        <AppFooter />
       </main>
     );
   }
@@ -114,6 +131,8 @@ function App() {
         setPendingShaderId={setPendingShaderId}
         shaders={shaders}
       />
+
+      <AppFooter />
     </main>
   );
 }

ui/src/styles.css

@@ -426,6 +426,29 @@ pre {
   background: var(--app-error-soft);
 }
 
+.app-footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+  padding: 0.25rem 0 0.5rem;
+  color: var(--app-muted);
+  font-size: 0.82rem;
+  text-align: center;
+}
+
+.app-footer a {
+  color: #b9def1;
+  text-decoration: none;
+}
+
+.app-footer a:hover,
+.app-footer a:focus-visible {
+  color: #e7f6ff;
+  text-decoration: underline;
+}
+
 .progress-track {
   height: 0.5rem;
   overflow: hidden;