added navigation

wraybowling · wraybowling · commit 5b11aeddaac4 · 2025-09-15T17:43:02.000-04:00
diff --git a/index.html b/index.html
@@ -57,9 +57,13 @@
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <div class="hero">
+    <header>
       <img src="baqup-tools-logo-optimized.svg" alt="baqup tools logo" />
-    </div>
+      <nav>
+        <a href="index.html">Backup</a>
+        <a href="visualizer.html">Visualizer</a>
+      </nav>
+    </header>
 
     <h2>It's your money. It's your data.<br />Back it up!</h2>
 
diff --git a/style.css b/style.css
@@ -34,7 +34,14 @@ a:not(.bookmarklet):hover {
   text-decoration: none;
 }
 
-.hero img {
+header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: start;
+}
+
+header img {
   width: clamp(100px, 100vw, 300px);
 }
 
diff --git a/visualizer.html b/visualizer.html
@@ -58,9 +58,13 @@
     <link rel="stylesheet" href="visualizer.css" />
   </head>
   <body>
-    <div class="hero">
+    <header>
       <img src="baqup-tools-logo-optimized.svg" alt="baqup tools logo" />
-    </div>
+      <nav>
+        <a href="index.html">Backup</a>
+        <a href="visualizer.html">Visualizer</a>
+      </nav>
+    </header>
 
     <h1>Snapshot Visualizers</h1>
     <p>You can use these tools to view your backups offline.</p>
@@ -95,6 +99,22 @@ <h2>Qubes</h2>
       style="width: 100%"
     />
 
+    <h2>About Me</h2>
+    <p>
+      <a href="https://github.com/wraybowling">Wray Bowling</a> is a freelance
+      web developer living in South Carolina.
+    </p>
+
+    <p>
+      If you found this tool useful,
+      <a
+        href="https://github.com/sponsors/wraybowling/signup"
+        target="_blank"
+        rel="noopener"
+        >donations are appreciated</a
+      >.
+    </p>
+
     <script src="visualizer.js"></script>
   </body>
 </html>

Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,14 @@ a:not(.bookmarklet):hover {`
`34`	`34`	`text-decoration: none;`
`35`	`35`	`}`
`36`	`36`
`37`		`-.hero img {`
	`37`	`+header {`
	`38`	`+ display: flex;`
	`39`	`+ flex-direction: row;`
	`40`	`+ justify-content: space-between;`
	`41`	`+ align-items: start;`
	`42`	`+}`
	`43`	`+`
	`44`	`+header img {`
`38`	`45`	`width: clamp(100px, 100vw, 300px);`
`39`	`46`	`}`
`40`	`47`