local review resolutions, no content change

2026-09-22 11:35:33 -05:00 · 2026-08-23 00:42:42 -05:00
parent 9fc5bfe9c7
commit 78aa49c0f3
11 changed files with 125 additions and 67 deletions
--- a/src/app.py
+++ b/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 ──────────────────────────────────────────────────
--- a/src/static/css/App.css
+++ b/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;
+}
--- a/src/static/js/responsive.js
+++ b/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");
  }
 }
--- a/src/static/json/pages.json
+++ b/src/static/json/pages.json
@@ -1,16 +1,10 @@
 {
    "home": {
        "template": "home.html",
-        "title": "Andrew Simonson - Portfolio Home",
-        "description": "Andrew Simonson's Digital Portfolio home",
+        "title": "Andrew Simonson - Data Scientist & Researcher",
+        "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",
-        "description": "Recent projects by Andrew Simonson on his lovely portfolio website :)",
+        "title": "Projects & Research - Andrew Simonson",
+        "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",
-        "description": "Certificates and Awards Listing",
+        "title": "Certifications & Awards - Andrew Simonson",
+        "description": "Data science, DevOps, and entrepreneurship certifications earned by Andrew Simonson.",
        "canonical": "/certs"
    }
 }
--- a/src/templates/about.html
+++ b/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">
-            <button class="filter-btn active" data-filter="all">All</button>
-            <button class="filter-btn" data-filter="experience">Experience</button>
-            <button class="filter-btn" data-filter="education">Education</button>
-            <button class="filter-btn" data-filter="technical">Technical</button>
+        <div class="timeline-filters" role="toolbar" aria-label="Filter timeline entries">
+            <button class="filter-btn active" data-filter="all" aria-pressed="true">All</button>
+            <button class="filter-btn" data-filter="experience" aria-pressed="false">Experience</button>
+            <button class="filter-btn" data-filter="education" aria-pressed="false">Education</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') || '';
--- a/src/templates/books.html
+++ b/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>
-      <a href="#'{{i}}'">
+    <div role="listitem">
+      <a href="#'{{i}}'" aria-label="View review of {{ i }}">
        <img
          class="bookcover"
-          alt="{{i}} cover"
+          alt="{{ i }} cover"
          src="{{ url_for('static', filename=('photos/books/' + var.books.books[i].filename))}}"
+          loading="lazy"
        />
      </a>
    </div>
@@ -18,16 +19,17 @@
  </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'>
            <img
              class="bookcover"
-              alt="{{i}} cover"
+              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>
--- a/src/templates/header.html
+++ b/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">
-        <div id="name-container" onclick="goto('home')">
+      <header class="header">
+        <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">
-            <div onClick="goto('home')" class="navElement">
+          <nav id="navBar" class="navBar" role="menubar" aria-label="Main navigation">
+            <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">
-              <p>About</p>
-            </div>
-            <div onClick="goto('projects')" class="navElement">
+            <div onClick="goto('projects')" onKeyDown="if(event.key==='Enter'||event.key===' ')goto('projects')" role="menuitem" tabindex="0" 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>
-          </div>
+          </nav>
        </div>
-      </div>
+      </header>
      {% 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>
--- a/src/templates/partials/skills.html
+++ b/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 %}
--- a/src/templates/partials/socials.html
+++ b/src/templates/partials/socials.html
@@ -1,6 +1,12 @@
-<div class='socials'>
-    <a href='https://github.com/asimonson1125'><img alt='Github' src="{{ url_for('static', filename='icons/github.svg') }}" /></a>
-    <a href='https://www.linkedin.com/in/simonsonandrew/'><img alt='LinkedIn' src="{{ url_for('static', filename='icons/linkedin.svg') }}" /></a>
-    <a href='mailto:asimonson1125@gmail.com'><img alt='E-mail' src="{{ url_for('static', filename='icons/email.svg') }}" /></a>
-    <div id='vertLine'></div>
+<div class='socials' role='contentinfo' aria-label='Social links'>
+    <a href='https://github.com/asimonson1125' aria-label='GitHub profile' rel='noopener noreferrer'>
+        <img alt='' src="{{ url_for('static', filename='icons/github.svg') }}" />
+    </a>
+    <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>
--- a/src/templates/projects.html
+++ b/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">

--- a/src/templates/status.html
+++ b/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 }}">
-      <div class="info-card" id="status-{{ service.id }}">
+    <a href="{{ service.url }}" class="info-card-link" id="status-{{ service.id }}" role="listitem">
+      <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>