feat: add footer component with styling for site links

Author: MaxwellMetzner

.github/workflows/deploy-pages.yml

@@ -39,6 +39,8 @@ jobs:
 
       - name: Setup Pages
         uses: actions/configure-pages@v5
+        with:
+          enablement: true
 
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3

src/App.tsx

@@ -1803,6 +1803,13 @@ function App() {
         onClose={() => setReplaceSlotId(null)}
         onSelectAlternative={handleSwapAlternative}
       />
+
+      <footer className="site-footer panel">
+        <span className="site-footer-label">More projects and writing</span>
+        <a className="site-footer-link" href="https://maxwellmetzner.github.io/">
+          maxwellmetzner.github.io
+        </a>
+      </footer>
     </div>
   );
 }

src/styles.css

@@ -79,6 +79,32 @@ button {
   gap: 24px;
 }
 
+.site-footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 18px 24px;
+  text-align: center;
+}
+
+.site-footer-label {
+  color: var(--muted);
+  font-size: 0.92rem;
+}
+
+.site-footer-link {
+  color: var(--accent-strong);
+  font-weight: 700;
+  text-decoration: none;
+}
+
+.site-footer-link:hover,
+.site-footer-link:focus-visible {
+  text-decoration: underline;
+  text-underline-offset: 0.18em;
+}
+
 .panel,
 .map-panel {
   position: relative;
@@ -1333,6 +1359,10 @@ button {
     align-items: stretch;
   }
 
+  .site-footer {
+    flex-direction: column;
+  }
+
   .wizard-footer {
     padding-top: 20px;
   }