local review resolutions, no content change

src/app.py

@@ -62,7 +62,6 @@ def load_json(path):
 projects = load_json("./static/json/projects.json")
 books = load_json("./static/json/books.json")
 skills = load_json("./static/json/skills.json")
-timeline = load_json("./static/json/timeline.json")
 pages = load_json("./static/json/pages.json")
 
 pages['projects']['skillList'] = skills
@@ -70,7 +69,6 @@ pages['projects']['projects'] = projects
 pages['home']['books'] = books
 pages['books']['books'] = books
 pages['status']['services'] = SERVICES
-pages['about']['timeline'] = timeline
 
 
 # ── Error rendering ──────────────────────────────────────────────────

src/static/css/App.css

@@ -2008,3 +2008,28 @@ tr {
   from { background-position: 200% 0; }
   to { background-position: -200% 0; }
 }
+
+/* Skip-to-content link (accessible navigation) */
+.skip-link {
+  position: fixed;
+  top: -100%;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10000;
+  background: #000;
+  color: #fff;
+  padding: 0.75rem 1.5rem;
+  font-size: 0.95rem;
+  font-weight: 600;
+  text-decoration: none;
+  border: 2px solid currentColor;
+  border-radius: 0 0 4px 4px;
+  white-space: nowrap;
+  transition: top 0.15s ease;
+}
+
+.skip-link:focus {
+  top: 0;
+  outline: 2px solid #4E9A26;
+  outline-offset: 0;
+}

src/static/js/responsive.js

@@ -2,13 +2,17 @@ function toggleMenu(collapse) {
   if (window.innerWidth < 1400) {
     const menu = document.querySelector(".navControl");
     const bar = document.querySelector(".header");
+    const btn = document.getElementById("menu");
     const isCollapsed = !menu.style.maxHeight || menu.style.maxHeight === "0px";
+
     if (isCollapsed && !collapse) {
       menu.style.maxHeight = `${menu.scrollHeight + 10}px`;
       bar.style.borderBottomWidth = "0px";
+      if (btn) btn.setAttribute("aria-expanded", "true");
     } else {
       menu.style.maxHeight = "0px";
       bar.style.borderBottomWidth = "3px";
+      if (btn) btn.setAttribute("aria-expanded", "false");
     }
   }
 }
@@ -98,10 +102,14 @@ function activeSkill(obj) {
   let skill = obj.closest(".skill");
   if (skill.classList.contains("activeSkill")) {
     skill.classList.remove("activeSkill");
+    const btn = obj.closest('.skillname') || obj.querySelector?.('.skillname') || obj;
+    if (btn && btn.setAttribute) btn.setAttribute("aria-expanded", "false");
     return;
   }
   while (skill) {
     skill.classList.add("activeSkill");
+    const nameEl = skill.querySelector?.(':scope > .skillname') || skill.querySelector('.skillname');
+    if (nameEl) nameEl.setAttribute("aria-expanded", "true");
     skill = skill.parentElement.closest(".skill");
   }
 }

src/static/json/pages.json

@@ -1,16 +1,10 @@
 {
     "home": {
         "template": "home.html",
-        "title": "Andrew Simonson - Portfolio Home",
+        "title": "Andrew Simonson - Data Scientist & Researcher",
-        "description": "Andrew Simonson's Digital Portfolio home",
+        "description": "Andrew Simonson - Data Scientist at Ecolab, graduate student at RIT. Projects, research papers, and more.",
         "canonical": "/"
     },
-    "about": {
-        "template": "about.html",
-        "title": "Andrew Simonson - About",
-        "description": "About Andrew Simonson — career and education timeline",
-        "canonical": "/about"
-    },
     "status": {
         "template": "status.html",
         "title":"Andrew Simonson - Status Page",
@@ -19,8 +13,8 @@
     },
     "projects": {
         "template": "projects.html",
-        "title": "Andrew Simonson - Projects",
+        "title": "Projects & Research - Andrew Simonson",
-        "description": "Recent projects by Andrew Simonson on his lovely portfolio website :)",
+        "description": "Data science projects, geospatial analysis, research papers, and software experiments by Andrew Simonson.",
         "canonical": "/projects"
     },
     "books": {
@@ -37,8 +31,8 @@
     },
     "certificates": {
         "template": "certs.html",
-        "title": "Certificates and Awards",
+        "title": "Certifications & Awards - Andrew Simonson",
-        "description": "Certificates and Awards Listing",
+        "description": "Data science, DevOps, and entrepreneurship certifications earned by Andrew Simonson.",
         "canonical": "/certs"
     }
 }

src/templates/about.html

@@ -7,18 +7,17 @@
         <h2>My story, in order</h2>
     </div>
   </div>
-  <div id="desktopSpacer"></div>
   <div class="homeSubContent">
     <div class="foregroundContent">
         <div class="concentratedHead">
             <h3>Career &amp; Education Timeline</h3>
         </div>
 
-        <div class="timeline-filters">
+        <div class="timeline-filters" role="toolbar" aria-label="Filter timeline entries">
-            <button class="filter-btn active" data-filter="all">All</button>
+            <button class="filter-btn active" data-filter="all" aria-pressed="true">All</button>
-            <button class="filter-btn" data-filter="experience">Experience</button>
+            <button class="filter-btn" data-filter="experience" aria-pressed="false">Experience</button>
-            <button class="filter-btn" data-filter="education">Education</button>
+            <button class="filter-btn" data-filter="education" aria-pressed="false">Education</button>
-            <button class="filter-btn" data-filter="technical">Technical</button>
+            <button class="filter-btn" data-filter="technical" aria-pressed="false">Technical</button>
         </div>
 
         <div class="timeline" id="timeline">
@@ -55,8 +54,9 @@ document.addEventListener('DOMContentLoaded', function() {
     buttons.forEach(function(btn) {
         btn.addEventListener('click', function() {
             var filter = this.getAttribute('data-filter');
-            buttons.forEach(function(b) { b.classList.remove('active'); });
+            buttons.forEach(function(b) { b.classList.remove('active'); b.setAttribute('aria-pressed', 'false'); });
             this.classList.add('active');
+            this.setAttribute('aria-pressed', 'true');
 
             items.forEach(function(item) {
                 var cats = item.getAttribute('data-categories') || '';

src/templates/books.html

@@ -3,14 +3,15 @@
 <div class="foregroundContent">
   <h2>"You can't judge a book by its cover but you can judge a person by their bookshelf" - Me, today.</h2>
   <h3>My Favorites</h3>
-  <div class='flex wrap boxed'>
+  <div class='flex wrap boxed' role="list" aria-label="Favorite books">
     {% for i in var.books.selection %}
-    <div>
+    <div role="listitem">
-      <a href="#'{{i}}'">
+      <a href="#'{{i}}'" aria-label="View review of {{ i }}">
         <img
           class="bookcover"
           alt="{{ i }} cover"
           src="{{ url_for('static', filename=('photos/books/' + var.books.books[i].filename))}}"
+          loading="lazy"
         />
       </a>
     </div>
@@ -18,9 +19,9 @@
   </div>
   <h3>All Reviews</h3>
   <p>Hover to reveal review<br />Read to reveal KNOWLEDGE</p>
-  <div class="booklist flex wrap">
+  <div class="booklist flex wrap" role="list" aria-label="Book reviews">
     {% for i in var.books.books %}
-    <div id="'{{i}}'" class="bookReview">
+    <div id="'{{i}}'" class="bookReview" role="listitem" aria-label="Review of {{ i }}">
       <div class='fullHeight flex'>
         <div>
           <div class='heightBox'>
@@ -28,6 +29,7 @@
               class="bookcover"
               alt="{{ i }} cover"
               src="{{ url_for('static', filename=('photos/books/' + var.books.books[i].filename))}}"
+              loading="lazy"
             />
           </div>
         </div>
@@ -36,7 +38,7 @@
             <h4 class='nomargin'>{{ i }}</h4>
             <p class='nomargin'>{{ var.books.books[i].review }}</p>
           </div>
-          <a href="{{ var.books.books[i].link }}"><p>Book Source</p></a>
+          <a href="{{ var.books.books[i].link }}" rel="noopener noreferrer" aria-label="Buy or learn more about {{ i }}">Book Source</a>
         </div>
       </div>
     </div>

src/templates/header.html

@@ -14,7 +14,7 @@
     <link rel="preconnect" href="https://cdn.jsdelivr.net" />
     <meta name="description" content="{{ var['description'] }}" />
     <meta property="og:title" content="Andrew Simonson" />
-    <meta name="og:description" content="{{ var['description'] }}" />
+    <meta property="og:description" content="{{ var['description'] }}" />
     <meta property="og:type" content="website" />
     <meta
       property="og:image"
@@ -32,6 +32,29 @@
     <meta name="twitter:image:alt" content="some example picture idk" />
     <meta name="twitter:site" content="@asimonson1125" />
 
+    <!-- Structured data for SEO -->
+    <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "Person",
+      "name": "Andrew Simonson",
+      "url": "https://asimonson.com",
+      "sameAs": [
+        "https://github.com/asimonson1125",
+        "https://www.linkedin.com/in/simonsonandrew"
+      ],
+      "jobTitle": "Data Scientist",
+      "worksFor": {
+        "@type": "Organization",
+        "name": "Ecolab"
+      },
+      "alumniOf": {
+        "@type": "CollegeOrUniversity",
+        "name": "Rochester Institute of Technology"
+      }
+    }
+    </script>
+
     <!-- Global site tag (gtag.js) - Google Analytics (deferred for performance) -->
     <script
       async
@@ -59,12 +82,13 @@
   </head>
   {% block header %}
   <body onpopstate="backButton()">
+    <a class="skip-link" href="#root">Skip to content</a>
     <div id="loading-bar"></div>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <main id='map'></main>
+    <main id='map' aria-label="Main content"></main>
     <div id="contentStuffer">
-      <div class="header">
+      <header class="header">
-        <div id="name-container" onclick="goto('home')">
+        <div id="name-container" onclick="goto('home')" onKeyDown="if(event.key==='Enter'||event.key===' ')goto('home')" role="button" tabindex="0" aria-label="Go to home">
           <div class="line name">
             <span class="textGrad">{# Andrew Simonoson #}</span>
           </div>
@@ -74,30 +98,32 @@
           src="{{ url_for('static', filename='icons/menu.svg')}}"
           alt="menu"
           id="menu"
+          role="button"
+          aria-label="Toggle navigation menu"
+          aria-expanded="false"
+          aria-controls="navBar"
           onClick="toggleMenu()"
+          onKeyDown="if(event.key==='Enter'||event.key===' ')toggleMenu()"
         />
         <div class="navControl">
-          <div class="navBar">
+          <nav id="navBar" class="navBar" role="menubar" aria-label="Main navigation">
-            <div onClick="goto('home')" class="navElement">
+            <div onClick="goto('home')" onKeyDown="if(event.key==='Enter'||event.key===' ')goto('home')" role="menuitem" tabindex="0" class="navElement">
               <p>Home</p>
             </div>
-            <div onclick="goto('about')" class="navElement">
+            <div onClick="goto('projects')" onKeyDown="if(event.key==='Enter'||event.key===' ')goto('projects')" role="menuitem" tabindex="0" class="navElement">
-              <p>About</p>
-            </div>
-            <div onClick="goto('projects')" class="navElement">
               <p>Work</p>
             </div>
-            <div onclick="goto('status')" class="navElement">
+            <div onclick="goto('status')" onKeyDown="if(event.key==='Enter'||event.key===' ')goto('status')" role="menuitem" tabindex="0" class="navElement">
               <p>Status</p>
             </div>
+          </nav>
         </div>
-        </div>
+      </header>
-      </div>
       {% endblock %} {% block content%}
       <div id="root">{% include var['template'] %}</div>
       {% endblock %} {% block footer %}
       <div id="footerSpacer"></div>
-      <div class="footer">{% include 'partials/socials.html' %}</div>
+      <footer class="footer" role="contentinfo">{% include 'partials/socials.html' %}</footer>
       {% endblock %}
     </div>
   </body>

src/templates/partials/skills.html

@@ -1,6 +1,6 @@
 {% macro expandSkill(dict, name, classes="") %}
 <div class='skill {{ classes }}' data-length='{{ dict[name]|length }}'>
-    <div onclick='activeSkill(this)' class='skillname'>{{ name }}</div>
+    <div onclick='activeSkill(this)' onKeyDown="if(event.key==='Enter'||event.key===' ')activeSkill(this)" role='button' tabindex='0' aria-expanded='false' class='skillname'>{{ name }}</div>
 {% if dict[name]|length > 0 %}
     <div class='skill-children'>
         <div class='skill-children-inner'>
@@ -14,7 +14,7 @@
 {% endmacro %}
 
 {% macro skills(skills) %}
-<div id="skillTree">
+<div id="skillTree" role='tree' aria-label='Skills'>
     {% for skill in skills %}
     {% set classes = "" %}
     {% if skill == skills|first %}

src/templates/partials/socials.html

@@ -1,6 +1,12 @@
-<div class='socials'>
+<div class='socials' role='contentinfo' aria-label='Social links'>
-    <a href='https://github.com/asimonson1125'><img alt='Github' src="{{ url_for('static', filename='icons/github.svg') }}" /></a>
+    <a href='https://github.com/asimonson1125' aria-label='GitHub profile' rel='noopener noreferrer'>
-    <a href='https://www.linkedin.com/in/simonsonandrew/'><img alt='LinkedIn' src="{{ url_for('static', filename='icons/linkedin.svg') }}" /></a>
+        <img alt='' src="{{ url_for('static', filename='icons/github.svg') }}" />
-    <a href='mailto:asimonson1125@gmail.com'><img alt='E-mail' src="{{ url_for('static', filename='icons/email.svg') }}" /></a>
+    </a>
-    <div id='vertLine'></div>
+    <a href='https://www.linkedin.com/in/simonsonandrew/' aria-label='LinkedIn profile' rel='noopener noreferrer'>
+        <img alt='' src="{{ url_for('static', filename='icons/linkedin.svg') }}" />
+    </a>
+    <a href='mailto:asimonson1125@gmail.com' aria-label='Send an email'>
+        <img alt='' src="{{ url_for('static', filename='icons/email.svg') }}" />
+    </a>
+    <div id='vertLine' aria-hidden='true'></div>
 </div>

src/templates/projects.html

@@ -7,7 +7,6 @@
         <h2>Projects &amp; experiments</h2>
     </div>
   </div>
-  <div id="desktopSpacer"></div>
   <div class="homeSubContent">
     <div class="foregroundContent">
 

src/templates/status.html

@@ -3,14 +3,14 @@
 <div class="foregroundContent">
   <h2 class='concentratedHead'>Service Status Monitor</h2>
 
-  <div class="info-box">
+  <div class="info-box" role="region" aria-label="Status overview">
     <div class='flex spaceBetween'>
       <div>
-        <span id="lastUpdate">Last checked: Loading...</span>
+        <span id="lastUpdate" aria-live="polite">Last checked: Loading...</span>
         <br />
-        <span id="nextUpdate">Next check: --</span>
+        <span id="nextUpdate" aria-live="polite">Next check: --</span>
       </div>
-      <button id="refreshBtn" onclick="refreshStatus()">Refresh Now</button>
+      <button id="refreshBtn" onclick="refreshStatus()" aria-label="Refresh service status now">Refresh Now</button>
     </div>
     <br/>
 
@@ -32,10 +32,10 @@
   </div>
 
   <!-- Overall Status Bar -->
-  <div class="info-card summary-card" id="overallStatus">
+  <div class="info-card summary-card" id="overallStatus" role="status" aria-live="polite">
     <div class="summary-content">
       <div class="summary-indicator">
-        <span class="summary-icon loading">&#x25D0;</span>
+        <span class="summary-icon loading" aria-hidden="true">&#x25D0;</span>
         <div>
           <h3 class="summary-title">Checking Systems...</h3>
           <h5 id="summary-subtitle">Loading service status</h5>
@@ -43,45 +43,45 @@
       </div>
       <div class="flex spaceBetween">
         <div class="metric-box">
-          <span class="metric-number" id="onlineCount">--</span>
+          <span class="metric-number" id="onlineCount" aria-label="Online services">--</span>
           <span class="metric-label">Online</span>
         </div>
         <div class="metric-box">
-          <span class="metric-number" id="totalCount">--</span>
+          <span class="metric-number" id="totalCount" aria-label="Total services">--</span>
           <span class="metric-label">Total</span>
         </div>
       </div>
     </div>
   </div>
 
-  <div class="card-grid">
+  <div class="card-grid" role="list" aria-label="Service status cards">
     {% for service in var.services %}
-    <a href="{{ service.url }}">
+    <a href="{{ service.url }}" class="info-card-link" id="status-{{ service.id }}" role="listitem">
-      <div class="info-card" id="status-{{ service.id }}">
+      <div class="info-card">
         <div class="card-header">
           <h3>{{ service.name }}</h3>
           <div class="state-indicator">
-            <span class="state-dot loading"></span>
+            <span class="state-dot loading" aria-label="Status: Loading..."></span>
             <span class="state-text">Loading...</span>
           </div>
         </div>
         <div class="card-body">
           <div class="metric-row">
             <span class="metric-label">Response Time:</span>
-            <span class="metric-value" id="time-{{ service.id }}">--</span>
+            <span class="metric-value" id="time-{{ service.id }}" aria-live="polite">--</span>
           </div>
           <div class="metric-row">
             <span class="metric-label">Status Code:</span>
-            <span class="metric-value" id="code-{{ service.id }}">--</span>
+            <span class="metric-value" id="code-{{ service.id }}" aria-live="polite">--</span>
           </div>
           <div class="metric-row">
             <span class="metric-label">Total Checks:</span>
-            <span class="metric-value" id="checks-{{ service.id }}">--</span>
+            <span class="metric-value" id="checks-{{ service.id }}" aria-live="polite">--</span>
           </div>
         </div>
         <div class="card-footer">
           <div class="detail-label">Uptime:</div>
-          <div class="detail-values" id="uptime-{{ service.id }}">Loading...</div>
+          <div class="detail-values" id="uptime-{{ service.id }}" aria-live="polite">Loading...</div>
         </div>
       </div>
     </a>