ausbernard · ausbernard · Nov 19, 2025 · Nov 19, 2025
diff --git a/assets/pics/photo-journal/atlanta-showcase.jpg b/assets/pics/photo-journal/atlanta-showcase.jpg
diff --git a/assets/pics/photo-journal/night-fish.JPG b/assets/pics/photo-journal/night-fish.JPG
diff --git a/assets/pics/photo-journal/porto-museum.jpg b/assets/pics/photo-journal/porto-museum.jpg
diff --git a/assets/pics/photo-journal/prauge-cambodian-dinner.png b/assets/pics/photo-journal/prauge-cambodian-dinner.png
diff --git a/assets/pics/photo-journal/susto.png b/assets/pics/photo-journal/susto.png
diff --git a/assets/pics/photo-journal/vienna.JPG b/assets/pics/photo-journal/vienna.JPG
diff --git a/assets/pics/photo-journal/zandie.png b/assets/pics/photo-journal/zandie.png
diff --git a/guestbook.html b/guestbook.html
@@ -0,0 +1,134 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<title>Guestbook</title>
+<meta name="viewport" content="width=device-width,initial-scale=1" />
+<style>
+  :root{ --deep:#2a1e1a; --mid:#463227; --clay:#6d4a35; --olive:#7f7761; --cream:#f5f2e7; --yellow:#c4a45a; }
+  body{
+    margin:0; font-family:"Courier New", monospace; color:var(--deep);
+    background-color:var(--deep);
+    background-image:linear-gradient(var(--mid) 1px,transparent 1px),
+                     linear-gradient(90deg,var(--mid) 1px,transparent 1px);
+    background-size:20px 20px; padding:20px;
+  }
+  .wrap{ max-width:680px; margin:0 auto; background:var(--cream); border:3px solid var(--mid);
+         box-shadow:6px 6px 0 #111; padding:16px; }
+  h1{ text-align:center; margin:0 0 12px; color:var(--mid); text-decoration:underline; }
+  .row{ display:grid; gap:14px; grid-template-columns:1fr; }
+  .card{ background:#fff; border:2px solid var(--mid); padding:12px; box-shadow:3px 3px 0 var(--olive); }
+  label{ display:block; margin:6px 0 2px; }
+  input[type="text"], textarea{
+    width:100%; box-sizing:border-box; border:2px solid var(--mid); background:#fffef7; padding:6px; font-family:inherit;
+  }
+  .btn{ background:var(--yellow); color:#000; border:2px solid var(--mid); padding:6px 12px; cursor:pointer;
+        box-shadow:2px 2px 0 #000; }
+  .btn:active{ transform:translate(1px,1px); box-shadow:inset 2px 2px 0 var(--mid); }
+  .entry{ border-bottom:2px dotted var(--olive); padding:8px 0; }
+  .entry:last-child{ border-bottom:none; }
+  .meta{ color:#6b5e50; font-size:12px; }
+  .back{ display:block; margin-top:12px; text-align:center; color:var(--clay); text-decoration:underline; }
+</style>
+</head>
+<body>
+  <div class="wrap">
+    <h1>Sign My Guestbook</h1>
+
+    <div class="row">
+      <div class="card">
+        <label for="name">Name</label>
+        <input id="name" type="text" maxlength="40" placeholder="Your name" />
+        <label for="msg">Message</label>
+        <textarea id="msg" rows="4" maxlength="500" placeholder="Say sumn!"></textarea>
+        <div style="margin-top:8px;display:flex;gap:8px;">
+          <button class="btn" id="signBtn">Sign</button>
+          <button class="btn" id="clearBtn" title="Clears only this browser">Clear (this browser)</button>
+        </div>
+      </div>
+
+      <div class="card">
+        <strong>Entries</strong>
+        <div id="entries" style="margin-top:8px;"></div>
+      </div>
+    </div>
+
+    <a class="back" href="index.html">◀ Back to Home</a>
+  </div>
+
+<script>
+
+  const KEY = "guestbook_entries_v1";
+  const $entries = document.getElementById("entries");
+  const $name = document.getElementById("name");
+  const $msg = document.getElementById("msg");
+
+  function load() {
+    try { return JSON.parse(localStorage.getItem(KEY)) || []; }
+    catch { return []; }
+  }
+  function save(entries) {
+    localStorage.setItem(KEY, JSON.stringify(entries));
+  }
+  function render() {
+    const items = load();
+    $entries.innerHTML = items.length
+      ? items.map(e => `
+          <div class="entry">
+            <div><strong>${escapeHtml(e.name || "Anonymous")}</strong></div>
+            <div>${linkify(escapeHtml(e.msg))}</div>
+            <div class="meta">${new Date(e.ts).toLocaleString()}</div>
+          </div>`).join("")
+      : `<div class="meta">No entries yet — be the first!</div>`;
+  }
+  function escapeHtml(s){ return s.replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c])); }
+  function linkify(s){ return s.replace(/(https?:\/\/[^\s<]+)/g, '<a href="$1" target="_blank" rel="noopener">$1</a>'); }
+
+  document.getElementById("signBtn").onclick = () => {
+    const name = $name.value.trim() || "Anonymous";
+    const msg  = $msg.value.trim();
+    if (!msg) return alert("Write a message first!");
+    const items = load();
+    items.unshift({ name, msg, ts: Date.now() });
+    save(items);
+    $msg.value = "";
+    render();
+  };
+  document.getElementById("clearBtn").onclick = () => {
+    if (confirm("Clear entries stored in THIS browser only?")) { localStorage.removeItem(KEY); render(); }
+  };
+
+const staticEntries = [
+  { name: "MugenNoodles 🍜", msg: "Love the retro vibes of your site!", ts: "2025-08-10T14:30:00" },
+  { name: "Alex", msg: "Feels like I’m back on MySpace again 🎶 yeeeee.", ts: "2025-04-01T19:10:00" }
+];
+
+// load from localStorage
+function load() {
+  try { return JSON.parse(localStorage.getItem(KEY)) || []; }
+  catch { return []; }
+}
+
+// render = combine static + dynamic
+function render() {
+  const userEntries = load();
+
+  // merge then sort by date descending
+  const all = [...staticEntries, ...userEntries].sort(
+    (a, b) => new Date(b.ts) - new Date(a.ts)
+  );
+
+  $entries.innerHTML = all.length
+    ? all.map(e => `
+        <div class="entry">
+          <div><strong>${escapeHtml(e.name || "Anonymous")}</strong></div>
+          <div>${linkify(escapeHtml(e.msg))}</div>
+          <div class="meta">${new Date(e.ts).toLocaleString()}</div>
+        </div>`).join("")
+    : `<div class="meta">No entries yet — be the first!</div>`;
+}
+
+render();
+</script>
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -334,12 +334,13 @@
     <img src="assets/stickers/fro-brotha.png" alt="Me" width="50" height="50"> -->
   </div>
   <div class="container">
-      <!--
+    <!--
                         __               __   __              
     .-----.---.-.--.--.|__|.-----.---.-.|  |_|__|.-----.-----.
     |     |  _  |  |  ||  ||  _  |  _  ||   _|  ||  _  |     |
     |__|__|___._|\___/ |__||___  |___._||____|__||_____|__|__|
-                          |_____|                            
+                          |_____|
+    navigation                            
     -->
     <button class="nav-toggle">MENU</button>
     <nav aria-label="Home Navigation">
@@ -351,7 +352,7 @@
         </li>
         <li>
         <li>
-          <a href="#" aria-label="Photos">
+          <a href="photojournal.html" aria-label="Photos">
             <img src="assets/icons/camera.ico" alt="The icon shows an old-school camera body. The camera body is two tone with a grey at the top and light green at the bottom. The lens is in the center and is blue.">Photos
           </a>
         </li>
@@ -361,17 +362,7 @@
           </a>
         </li>
         <li>
-          <a href="#" aria-label="Photos">
-            <img src="assets/icons/cactus.ico" alt="The icon shows an old-school camera body. The camera body is two tone with a grey at the top and light green at the bottom. The lens is in the center and is blue.">Links
-          </a>
-        </li>
-        <li>
-          <a href="#" aria-label="Music">
-            <img src="assets/icons/listening.ico" alt="The icon shows an old-school camera body. The camera body is two tone with a grey at the top and light green at the bottom. The lens is in the center and is blue.">Music
-          </a>
-        </li>
-        <li>
-          <a href="#" aria-label="Guestbook">
+          <a href="guestbook.html" aria-label="Guestbook">
             <img src="assets/icons/speak.ico" alt="The icon shows an old-school camera body. The camera body is two tone with a grey at the top and light green at the bottom. The lens is in the center and is blue.">GBook
           </a>
         </li>
@@ -399,7 +390,7 @@ <h2>About Me</h2>
 
     <p>I enjoy learning new things, finding new shows, photography, and cycling at the moment.</p> 
 
-    <p>Myspace was really fun time to me. It was what peaked my interest and love for the web and computers. I miss the old internet. So here is my ode to the old way of surfing. S/O neocities. Now watch this Drive.<img src="assets/stickers/bush.png" alt="george w bush jr" width="25" height="25" style="vertical-align:middle; margin-left:8px;"></p>
+    <p>Myspace was a really fun time to me. It showed and taught me a lot of technologies I would have never touched. This is my S/O to that time. Now watch this Drive.<img src="assets/stickers/bush.png" alt="george w bush jr" width="25" height="25" style="vertical-align:middle; margin-left:8px;"></p>
 
     <h2>My Music</h2>
     <div class="player-wrap">
@@ -447,11 +438,8 @@ <h2>My Music</h2>
 
     <div class="links">
       <h3>Cool Links</h3>
-      <a href="photo-journal.html">My Photo Gallery</a><br>
-      <a href="guestbook.html">Guestbook</a><br>
-      <a href="#">My Blog/Journal</a><br>
-      <a href="#">Learn How to Code</a><br>
       <a href="https://www.rw-designer.com/">RW-Designer</a>
+      <a href="https://github.com/ausbernard">My GitHub</a>
     </div>
 
     <h2>What's New</h2>

diff --git a/me.html b/me.html
@@ -51,24 +51,8 @@
     |  __|  _  |     ||   _|  -__|     ||   _|
     |____|_____|__|__||____|_____|__|__||____|
     -->
-    <h1>Mr. B</h1>
-
-    <p>welcome to my crib.</p>
-
-    <h2>Empty Elements</h2>
-
-    <p>Thanks for reading! Interneting should be getting easier now</p>
-
-    <p>Regards,</br>
-    The Author</p>
-
-    <hr/>
-
-    <p>This simple page looks like crap, but we'll learn how to fix it with some CSS soon</p>
-
-
+    <h1>Coming soon. ha</h1>
     <script>
-
     /*
                       __         __   
     .-----.----.----.|__|.-----.|  |_ 

diff --git a/photojournal.html b/photojournal.html
@@ -0,0 +1,132 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>My Photo Journal</title>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+
+<style>
+  /* ===== Use same root palette as index.html ===== */
+  :root{
+    --deep-navy: #2a2d3a;
+    --soft-purple: #4a4458;
+    --dusty-rose: #6b5b73;
+    --sage-green: #5d6b5d;
+    --powder-blue: #7a8ba3;
+    --cream-white: #e8e6e1;
+    --soft-pink: #c4a5aa;
+    --lavender: #9b8db5;
+    --ink-black: #1a1d26;
+  }
+
+  body {
+    margin: 0;
+    font-family: "Courier New", monospace;
+    background: linear-gradient(
+      135deg,
+      var(--deep-navy) 0%,
+      color-mix(in srgb, var(--deep-navy) 80%, var(--soft-purple)) 100%
+    );
+    padding: 20px;
+    color: var(--ink-black);
+  }
+
+  .journal-container {
+    max-width: 700px;
+    margin: 0 auto;
+    background: var(--cream-white);
+    border: 3px solid var(--powder-blue);
+    border-radius: 8px;
+    padding: 20px;
+    box-shadow: 0 8px 32px rgba(26, 29, 38, 0.4);
+  }
+
+  h1 {
+    text-align: center;
+    margin-bottom: 20px;
+    color: var(--soft-pink);
+    text-decoration: underline;
+    text-decoration-color: var(--lavender);
+  }
+
+  .entry {
+    margin-bottom: 30px;
+    text-align: center;
+  }
+
+  .entry img {
+    width: 100%;
+    max-width: 600px;
+    border: 4px solid var(--dusty-rose);
+    background: #fff;
+    display: block;
+    margin: 0 auto 10px;
+    border-radius: 4px;
+    box-shadow: 4px 4px 0 var(--ink-black);
+  }
+
+  .entry p {
+    font-size: 14px;
+    color: var(--ink-black);
+    margin: 0;
+  }
+
+  .back-link {
+    display: block;
+    text-align: center;
+    margin-top: 20px;
+    color: var(--sage-green);
+    text-decoration: underline;
+  }
+  .back-link:hover {
+    color: var(--lavender);
+  }
+</style>
+</head>
+<body>
+  <div class="journal-container">
+
+    <h1>
+      foto jrnl.
+    </h1>
+    <center>Enjoy my photography (っˆڡˆς)</center><br><br>
+
+    <div class="entry">
+      <img src="assets/pics/photo-journal/vienna.JPG" alt="Birds flying over a subway in Vienna. The photo is in black and white.">
+      <p><strong>September 2025:</strong>Birds flying around in Vienna.</p>
+    </div>
+
+    <div class="entry">
+      <img src="assets/pics/photo-journal/atlanta-showcase.jpg" alt="Young women talking on the phone in jeans and white t-shirt talking on the phone.">
+      <p><strong>August 2025:</strong> On a cell phone at sunset in GA.</p>
+    </div>
+
+    <div class="entry">
+      <img src="assets/pics/photo-journal/susto.png" alt="The band Susto working on sound check in their concert. Nashville TN">
+      <p><strong>August 2025:</strong>Susto sound check.</p>
+    </div>
+
+    <div class="entry">
+      <img src="assets/pics/photo-journal/porto-museum.jpg" alt="Young women at a museum in Porto.">
+      <p><strong>August 2025:</strong> Young woman in a museum looking out a window in Porto, PT. on film 🌊</p>
+    </div>
+
+    <div class="entry">
+      <img src="assets/pics/photo-journal/prauge-cambodian-dinner.png" alt="Young man sitting on an Author road bike in Nike trainers high white socks grey sweat pants and a black puffer jacket. Looking slightly at the camera. Shot in Prague, Czech Republic">
+      <p><strong>December 2024:</strong> Young man in Prague, CZ 🌊</p>
+    </div>
+
+    <div class="entry">
+      <img src="assets/pics/photo-journal/zandie.png" alt="Z ripping a guitar solo on stage in Nashville, TN">
+      <p><strong>July 2024:</strong> Shredding in Nashville, TN</p>
+    </div>
+
+    <div class="entry">
+      <img src="assets/pics/photo-journal/night-fish.JPG" alt="Young man holding a bass fish at night in a black shirt with a flash. The picture is in black and white. BLURR">
+      <p><strong>June 2024:</strong> Night fishing is a thing..?</p>
+    </div>
+
+    <a class="back-link" href="index.html">◀ Back to Home</a>
+  </div>
+</body>
+</html>