From 45a3c27e45fa4d0712b5062a6b8f95eb819ec6bb Mon Sep 17 00:00:00 2001
From: Chad <chad@dontbechad.com>
Date: Sat, 24 Jan 2026 14:28:35 -0600
Subject: [PATCH] Clean working solution - simplified JavaScript

- Simplified JavaScript to only handle year timeline sections
- Fixed overflow-y: auto to enable scrolling
- Remove interference with footer and other content
- Keep all markdown content unchanged
- Create proper story structure without breaking existing elements
- Add quick navigation and interactive year sections
- Clean, maintainable approach
---
 static/css/journey.css |  3 ++-
 static/js/journey.js   | 46 ++++++++++++++++++++++--------------------
 2 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/static/css/journey.css b/static/css/journey.css
index 14c93e2..bfc5706 100644
--- a/static/css/journey.css
+++ b/static/css/journey.css
@@ -3,7 +3,8 @@
   background: linear-gradient(135deg, #0A1929 0%, #1A2332 50%, #0F172A 100%);
   background-attachment: fixed;
   position: relative;
-  overflow: hidden;
+  overflow-y: auto;
+  min-height: 100vh;
 }
 
 /* Logo styling */
diff --git a/static/js/journey.js b/static/js/journey.js
index 43e7431..04fb506 100644
--- a/static/js/journey.js
+++ b/static/js/journey.js
@@ -1,18 +1,9 @@
-// Journey Page JavaScript - Convert markdown to interactive timeline
+// Simple Journey Page JavaScript - Only handle year timeline
 document.addEventListener('DOMContentLoaded', function() {
     console.log('Journey.js loaded - DOM content loaded');
     
-    // Find the container with story content
-    const container = document.querySelector('.container') || document.querySelector('main');
-    if (!container) {
-        console.log('No container found');
-        return;
-    }
-    
-    console.log('Container found, looking for year sections...');
-    
     // Find all h2 elements that contain years
-    const yearHeaders = Array.from(container.querySelectorAll('h2')).filter(h2 => {
+    const yearHeaders = Array.from(document.querySelectorAll('h2')).filter(h2 => {
         const text = h2.textContent;
         return /\d{4}/.test(text);
     });
@@ -25,6 +16,13 @@ document.addEventListener('DOMContentLoaded', function() {
     }
     
     // Wrap everything in story structure
+    const container = document.querySelector('.container') || document.querySelector('main');
+    if (!container) {
+        console.log('No container found');
+        return;
+    }
+    
+    // Create story structure but only wrap year sections
     const storyPage = document.createElement('div');
     storyPage.className = 'story-page';
     
@@ -34,17 +32,13 @@ document.addEventListener('DOMContentLoaded', function() {
     const storyThread = document.createElement('div');
     storyThread.className = 'story-thread';
     
-    // Move all content to new structure
+    // Move all content from original container to new structure
     while (container.firstChild) {
-        storyContainer.appendChild(container.firstChild);
+        storyThread.appendChild(container.firstChild);
     }
     
-    storyThread.appendChild(storyContainer);
-    storyPage.appendChild(storyThread);
-    container.appendChild(storyPage);
-    
-    // Now convert h2 elements to collapsible sections
-    const allH2Elements = storyContainer.querySelectorAll('h2');
+    // Now convert only the h2 year sections
+    const allH2Elements = storyThread.querySelectorAll('h2');
     const sections = [];
     
     allH2Elements.forEach((h2, index) => {
@@ -104,7 +98,7 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     });
     
-    // Add click handlers
+    // Add click handlers for the year sections
     sections.forEach(section => {
         const header = section.querySelector('.year-header');
         const content = section.querySelector('.year-content');
@@ -152,7 +146,7 @@ document.addEventListener('DOMContentLoaded', function() {
             </div>
         `;
         
-        storyContainer.insertBefore(quickJump, storyThread);
+        storyThread.insertBefore(quickJump, storyThread);
         
         // Add jump handlers
         quickJump.querySelectorAll('.jump-to-year').forEach(btn => {
@@ -169,5 +163,13 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     }
     
-    console.log('Story conversion completed with', sections.length, 'sections');
+    // Wrap everything in story structure
+    storyPage.appendChild(storyContainer);
+    storyPage.appendChild(storyThread);
+    
+    // Replace the original container content with the new structure
+    container.innerHTML = '';
+    container.appendChild(storyPage);
+    
+    console.log('Story conversion completed with', sections.length, 'year sections');
 });
\ No newline at end of file