test

src/app.py

@@ -70,6 +70,7 @@ 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

@@ -551,17 +551,15 @@ tr {
 }
 
 #skillTree {
-  border-left: var(--accent) solid 3px;
   border-radius: 0.5em;
-  background: rgba(var(--bg-card-rgb), 0.85);
+  background: rgba(var(--bg-card-rgb), 0.6);
   font-size: x-large;
   margin-bottom: 10px;
-  padding: 1em;
+  padding: 1em 1.25em;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
 .skill {
-  padding: .2em;
+  padding: 0.2em 0;
   color: var(--text-heading);
 }
 
@@ -594,21 +592,26 @@ tr {
 
 .skill > .skillname {
   text-decoration: underline;
+  text-underline-offset: 2px;
   cursor: pointer;
-  transition: color 0.2s ease, padding-left 0.2s ease;
+  transition: color 0.2s ease;
   padding: 0.2em 0;
+  display: inline-block;
 }
 
 .skill > .skillname:hover {
-  padding-left: 0.3em;
+  color: #ddd;
 }
 
 .skill > .skillname::after {
-  content: " >";
+  content: " \2192";
+  font-size: 0.85em;
+  margin-left: 0.2em;
+  text-decoration: none;
 }
 
 .skill.activeSkill > .skillname::after {
-  content: " <";
+  content: " \2190";
 }
 
 .skill[data-length="0"].activeSkill > .skillname, .skill[data-length="0"] > .skillname:hover, .skill.activeSkill > .skillname:hover {
@@ -628,8 +631,8 @@ tr {
 /* Project List Grid */
 .projectList {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(340px, 480px));
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-  gap: 1.5em;
+  gap: 1.25em;
   width: 100%;
 }
 
@@ -637,61 +640,26 @@ tr {
 .project {
   position: relative;
   background: rgba(var(--bg-card-rgb), 0.92);
-  border: 1px solid rgba(var(--accent-rgb), 0.15);
+  border: 1px solid var(--border-subtle);
-  border-left: 3px solid rgba(var(--accent-rgb), 0.75);
+  border-radius: 0.75em;
+  overflow: hidden;
   display: flex;
   flex-direction: column;
-  overflow: hidden;
+  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
-  transition: border-color 0.3s ease, box-shadow 0.3s ease;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
-}
-
-/* Corner bracket: top-right */
-.project::before {
-  content: '';
-  position: absolute;
-  top: -1px;
-  right: -1px;
-  width: 18px;
-  height: 18px;
-  border-top: 2px solid rgba(var(--accent-rgb), 0.5);
-  border-right: 2px solid rgba(var(--accent-rgb), 0.5);
-  z-index: 5;
-  pointer-events: none;
-  transition: border-color 0.3s ease;
-}
-
-/* Corner bracket: bottom-left */
-.project::after {
-  content: '';
-  position: absolute;
-  bottom: -1px;
-  left: 2px;
-  width: 18px;
-  height: 18px;
-  border-bottom: 2px solid rgba(var(--accent-rgb), 0.5);
-  border-left: 2px solid rgba(var(--accent-rgb), 0.5);
-  z-index: 5;
-  pointer-events: none;
-  transition: border-color 0.3s ease;
 }
 
 .project:hover {
-  border-color: rgba(var(--accent-rgb), 0.45);
+  border-color: rgba(var(--accent-rgb), 0.35);
-  border-left-color: rgb(var(--accent-rgb));
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
-  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(var(--accent-rgb), 0.08);
+  transform: translateY(-2px);
-}
-
-.project:hover::before,
-.project:hover::after {
-  border-color: rgba(var(--accent-rgb), 0.9);
 }
 
 /* Project Image */
 .projImageWrap {
   position: relative;
   width: 100%;
-  height: 200px;
+  height: 180px;
   overflow: hidden;
   background: #0c0c0c;
   flex-shrink: 0;
@@ -702,140 +670,89 @@ tr {
   height: 100%;
   object-fit: cover;
   object-position: center top;
-  filter: saturate(0.6) brightness(0.7);
+  filter: brightness(0.88);
-  transition: filter 0.5s ease, transform 0.5s ease;
+  transition: filter 0.3s ease;
   display: block;
 }
 
 .project:hover .projImageWrap img {
-  filter: saturate(0.85) brightness(0.85);
+  filter: brightness(1);
-  transform: scale(1.04);
-}
-
-/* Scanlines overlay */
-.projImageWrap::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: repeating-linear-gradient(
-    0deg,
-    transparent,
-    transparent 3px,
-    rgba(0, 0, 0, 0.1) 3px,
-    rgba(0, 0, 0, 0.1) 4px
-  );
-  z-index: 2;
-  pointer-events: none;
-}
-
-/* Gradient fade into card body */
-.projImageWrap::after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 55%;
-  background: linear-gradient(to bottom, transparent, rgba(var(--bg-card-rgb), 0.98));
-  z-index: 3;
 }
 
 /* Placeholder for projects without an image */
 .projImagePlaceholder {
   width: 100%;
   height: 100%;
-  background-image:
+  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.06) 25%, transparent 25%) -4px 0,
-    repeating-linear-gradient(
+              linear-gradient(225deg, rgba(var(--accent-rgb), 0.06) 25%, transparent 25%) -4px 0,
-      45deg,
+              linear-gradient(315deg, rgba(var(--accent-rgb), 0.06) 25%, transparent 25%) 4px 0,
-      rgba(var(--accent-rgb), 0.04) 0px,
+              linear-gradient(45deg, rgba(var(--accent-rgb), 0.06) 25%, transparent 25%) 4px 0;
-      rgba(var(--accent-rgb), 0.04) 1px,
+  background-size: 8px 8px;
-      transparent 1px,
+  background-color: rgba(30, 30, 30, 0.6);
-      transparent 8px
-    ),
-    repeating-linear-gradient(
-      -45deg,
-      rgba(var(--accent-rgb), 0.04) 0px,
-      rgba(var(--accent-rgb), 0.04) 1px,
-      transparent 1px,
-      transparent 8px
-    );
 }
 
-/* Status Badge */
+/* Status indicator (inline, in card body) */
-.proj-status-badge {
+.proj-status {
-  position: absolute;
-  top: 0.75em;
-  right: 0.75em;
-  z-index: 4;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.45em;
-  padding: 0.25em 0.65em 0.25em 0.5em;
-  font-family: 'Courier New', Courier, monospace;
-  font-size: 0.62rem;
-  font-weight: 700;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-  border: 1px solid currentColor;
-  background: rgba(0, 0, 0, 0.65);
-}
-
-.proj-status-badge.complete  { color: var(--status-online); }
-.proj-status-badge.WIP       { color: var(--status-degraded); }
-.proj-status-badge.incomplete { color: var(--status-offline); }
-
-.status-indicator {
   display: inline-block;
-  width: 6px;
+  font-size: 0.68rem;
-  height: 6px;
+  font-weight: 600;
-  border-radius: 50%;
+  letter-spacing: 0.06em;
-  color: inherit;
+  text-transform: uppercase;
-  background: currentColor;
+  padding: 0.15em 0.5em;
-  box-shadow: 0 0 6px currentColor;
+  border-radius: 0.2em;
   flex-shrink: 0;
 }
 
-.proj-status-badge.complete .status-indicator {
+.proj-status.complete  { color: var(--status-online); background: rgba(76, 175, 80, 0.1); }
-  animation: statusPulse 2.5s ease-in-out infinite;
+.proj-status.WIP       { color: var(--status-degraded); background: rgba(255, 193, 7, 0.1); }
-}
+.proj-status.incomplete { color: var(--status-offline); background: rgba(244, 67, 54, 0.1); }
-
-.proj-status-badge.WIP .status-indicator {
-  animation: statusPulse 0.9s ease-in-out infinite;
-}
-
-.proj-status-badge.incomplete .status-indicator {
-  opacity: 0.45;
-}
-
-@keyframes statusPulse {
-  0%, 100% { opacity: 1; box-shadow: 0 0 6px currentColor; }
-  50%       { opacity: 0.2; box-shadow: none; }
-}
 
 /* Project Content */
 .projContent {
-  padding: 1.1em 1.4em 1.4em 1.2em;
+  padding: 1.2em 1.4em 1.4em;
   display: flex;
   flex-direction: column;
   flex: 1;
-  gap: 0.6em;
+  gap: 0.5em;
+}
+
+.projTitleRow {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.75em;
 }
 
 .project h3 {
   margin: 0;
-  font-size: 1.05rem;
+  font-size: 1rem;
-  font-weight: 700;
+  font-weight: 600;
   color: var(--text-heading);
-  letter-spacing: 0.02em;
+  line-height: 1.35;
-  line-height: 1.3;
+}
-  display: block;
+
-  border-bottom: none;
+/* Project category tags */
+.projTags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35em;
+}
+
+.proj-tag {
+  font-size: 0.65rem;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  text-transform: capitalize;
+  padding: 0.1em 0.45em;
+  border-radius: 0.2em;
+  color: var(--text-secondary);
+  background: rgba(var(--accent-rgb), 0.06);
 }
 
 .projDesc {
-  font-size: 0.83rem;
+  font-size: 0.82rem;
-  line-height: 1.65;
+  line-height: 1.6;
-  color: rgba(236, 235, 235, 0.65);
+  color: var(--text-secondary);
   margin: 0;
   flex: 1;
 }
@@ -852,47 +769,29 @@ tr {
 .proj-link {
   display: inline-flex;
   align-items: center;
-  gap: 0.45em;
+  gap: 0.4em;
-  padding: 0.3em 0.8em 0.3em 0.6em;
+  color: var(--text-secondary);
-  border: 1px solid rgba(var(--accent-rgb), 0.35);
-  background: rgba(var(--accent-rgb), 0.07);
-  color: rgba(236, 235, 235, 0.75);
   text-decoration: none;
-  font-family: 'Courier New', Courier, monospace;
+  font-size: 0.8rem;
-  font-size: 0.68rem;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
-}
-
-.proj-link::before {
-  content: '>';
-  color: rgba(var(--accent-rgb), 0.7);
-  font-weight: 700;
   transition: color 0.2s ease;
 }
 
 .proj-link:hover {
-  background: rgba(var(--accent-rgb), 0.18);
+  color: var(--text-heading);
-  border-color: rgba(var(--accent-rgb), 0.7);
+  text-decoration: underline;
-  color: #ecebeb;
-}
-
-.proj-link:hover::before {
-  color: rgb(var(--accent-rgb));
 }
 
 .proj-link img.projectLink {
-  height: 0.9em;
+  height: 1em;
   width: auto;
-  filter: invert(1) opacity(0.75);
+  filter: invert(1) opacity(0.65);
   padding: 0;
   margin: 0;
-  transition: filter 0.2s ease;
+  transition: filter 0.2s ease, opacity 0.2s ease;
 }
 
 .proj-link:hover img.projectLink {
-  filter: invert(1);
+  filter: invert(1) opacity(0.9);
 }
 
 .grow {
@@ -1004,8 +903,8 @@ tr {
 
 .homeSubContent {
   background-color: rgba(var(--bg-card-rgb), 0.85);
-  padding: 2em 8em;
+  padding: 2.5em 6em;
-  border-top: solid 4px rgba(var(--accent-rgb), 0.5);
+  border-top: solid 2px rgba(var(--accent-rgb), 0.25);
   border-radius: 0.5em 0.5em 0 0;
   box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
 }
@@ -1327,7 +1226,7 @@ tr {
 @media screen and (max-width: 1400px) {
 
   .projectList {
-    grid-template-columns: repeat(auto-fill, minmax(280px, 420px));
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   }
 
   #homepage {
@@ -1459,9 +1358,6 @@ tr {
     margin: auto;
   }
 
-  .projDesc {
-    margin: 0;
-  }
   .col {
     width: 100%;
     margin-bottom: 0;
@@ -1550,6 +1446,145 @@ tr {
   font-size: 1rem;
 }
 
+/* Timeline */
+.timeline {
+  position: relative;
+  padding-left: 2em;
+}
+
+.timeline::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 2px;
+  background: linear-gradient(to bottom, rgba(var(--accent-rgb), 0.05), rgba(var(--accent-rgb), 0.7) 10%, rgba(var(--accent-rgb), 0.7) 90%, rgba(var(--accent-rgb), 0.05));
+}
+
+.timeitem {
+  position: relative;
+  margin-bottom: 1.5em;
+  transition: .4s;
+  overflow-y: clip;
+  height: auto;
+  max-height: 500px;
+}
+
+.timeitem::before {
+  content: '';
+  position: absolute;
+  left: -2.15em;
+  top: 0.5em;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--bg-base);
+  border: 2px solid rgba(var(--accent-rgb), 0.6);
+  z-index: 1;
+  transition: background 0.25s ease, border-color 0.25s ease;
+}
+
+.timeitem:hover::before {
+  background: rgba(var(--accent-rgb), 0.4);
+  border-color: var(--accent);
+}
+
+.timeitem-inner {
+  position: relative;
+  padding: 1em 1.25em;
+}
+
+.timeitem-header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25em;
+  margin-bottom: 0.5em;
+}
+
+.timeitem-header strong {
+  color: var(--text-heading);
+  font-size: 1.05rem;
+}
+
+.timeitem-header .datetext {
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+  font-family: 'Courier New', Courier, monospace;
+}
+
+.timeitem-content {
+  color: var(--text-body);
+  font-size: 0.9rem;
+  line-height: 1.6;
+  margin-bottom: 0.75em;
+}
+
+.timeitem-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4em;
+}
+
+.tag {
+  display: inline-block;
+  padding: 0.15em 0.6em;
+  border-radius: 0.25em;
+  font-size: 0.7rem;
+  font-family: 'Courier New', Courier, monospace;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  border: 1px solid rgba(var(--accent-rgb), 0.35);
+  color: var(--text-secondary);
+  background: rgba(var(--accent-rgb), 0.07);
+}
+
+.tag.pinned {
+  border-color: rgba(var(--accent-rgb), 0.7);
+  background: rgba(var(--accent-rgb), 0.15);
+  color: var(--text-heading);
+}
+
+.tag.experience { color: #6cb4ee; }
+.tag.education { color: #8bc34a; }
+.tag.technical { color: #ce93d8; }
+
+/* Timeline filter buttons */
+.timeline-filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+  margin-bottom: 1.5em;
+}
+
+.filter-btn {
+  padding: 0.35em 0.9em;
+  border: 1px solid rgba(var(--accent-rgb), 0.3);
+  border-radius: 0.25em;
+  background: transparent;
+  color: var(--text-secondary);
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 0.78rem;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+}
+
+.filter-btn:hover, .filter-btn.active {
+  border-color: rgba(var(--accent-rgb), 0.7);
+  background: rgba(var(--accent-rgb), 0.12);
+  color: var(--text-heading);
+}
+
+.filter-btn.active {
+  border-color: var(--accent);
+}
+
+.timeitem.hidden {
+  display: none;
+}
+
 /* Summary Card */
 .summary-card {
   padding: 2em;

src/static/json/pages.json

@@ -5,6 +5,12 @@
         "description": "Andrew Simonson's Digital Portfolio home",
         "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",

src/static/json/timeline.json

@@ -1,18 +1,53 @@
 {
-    "Co-op @ Dow Chemical": {
+    "Data Scientist @ Ecolab": {
+        "classes": "pinned experience technical",
+        "date": "01/2024 - Present",
+        "content": "Primary model developer of RushReady from inception through multimillion-dollar product commercialization. Engineered near-real-time data platform with Delta Live Tables and automated MLOps lifecycle. Built explainable anomaly detection with XGBoost/SHAP attribution, increasing speed of service by 20%. Represented Ecolab in Microsoft's 100-member AI accelerator program."
+    },
+    "Data Scientist / Data Engineer": {
         "classes": "pinned experience technical",
         "date": "01/2023 - 05/2023",
-        "content": "Spring 2023 Semester Co-op under Dow Chemical's Global Reactive Chemicals team in Analytical Sciences. Responsibilities included management of chemical compatability data and tool creation for parsing, generating, and submitting reports."
+        "content": "Co-op under Dow Chemical's Global Reactive Chemicals team in Analytical Sciences. Independently built reactive chemistry analysis Flask app encoding adiabatic correction and exotherm-detection logic. Replaced 4 legacy VBA tools with an object-model abstraction architecture. Product became the interdepartmental data standard, saving >1,020 hours (~0.65 FTE) annually."
+    },
+    "Rochester Institute of Technology — M.S.": {
+        "classes": "pinned education technical",
+        "date": "01/2023 - 12/2026",
+        "content": "Data Science M.S. with dual cluster in Data Science and AI. Capstone Fall 2026. Certified by Databricks in ML Model Deployment, Retrieval Agents, and MLOps. Certified by Microsoft in Data Analysis Career Essentials and Docker Foundations."
+    },
+    "Rochester Institute of Technology — B.S.": {
+        "classes": "pinned education technical",
+        "date": "08/2021 - 12/2024",
+        "content": "Computer Science B.S. (GPA 3.63, Dean's List) with a minor in International Relations. Active member of Computer Science House — built and maintained web services for 80+ members, presented seminars on web scraping, analytics, and GIS."
+    },
+    "UCSanDiegoX Data Science MicroMasters": {
+        "classes": "education technical",
+        "date": "2024",
+        "content": "Completed MicroMasters program in Data Science through UC San Diego on edX."
     },
     "Started Portfolio": {
         "classes": "",
         "date": "08/26/2021",
         "content": "I started building this website on this day. I wish I could say I was farther along than I am."
     },
-    "Rochester Institute of Technology": {
+    "Human vs AI Code Smell Study": {
-        "classes": "pinned education technical",
+        "classes": "technical",
-        "date": "08/2021 - 12/2024",
+        "date": "2024 - 2025",
-        "content": "Studying in Rochester Institute of Technology's Computer Science BS program with a minor in International Relations."
+        "content": "Analyzed 85K+ code definitions comparing AI vs human code maintainability via static analysis and non-parametric statistics. Found AI code carries 3-4x more structural debt invisible to reviewers."
+    },
+    "Generalized Trust Review": {
+        "classes": "technical",
+        "date": "2023 - 2024",
+        "content": "Cross-national correlation analysis of media and science trust across 128 countries with subgroup OLS regression. Found trust transfer attenuates 5.7x in low press-freedom regimes."
+    },
+    "Antietam Watershed Monitoring": {
+        "classes": "technical",
+        "date": "2023",
+        "content": "ArcGIS choropleth dashboard monitoring stream temps and biotic indices across Upper Potomac sub-watersheds. Flags exceedances of healthy stream conditions for state environmental review."
+    },
+    "Hackathon Awards": {
+        "classes": "technical",
+        "date": "2023 - 2024",
+        "content": "CSHacks - Best Use of AI (Paychex). Tiger Games - Social Impact Winner. HACK.COMS '24 - Accessibility Winner."
     },
     "Pretzel & Pizza Creations": {
         "classes": "experience",
@@ -27,11 +62,11 @@
     "Boonsboro High School": {
         "classes": "education",
         "date": "09/2016 - 06/2021",
-        "content": "Graduated high school with highest honors.\nMember of National Honor Society, Academic Team County Champions. Participated in Physics Olympics, Robotics Club, and scored at state championships in Cross Country and Track and Field (4x800, 800)."
+        "content": "Graduated high school with highest honors. Member of National Honor Society, Academic Team County Champions. Participated in Physics Olympics, Robotics Club, and scored at state championships in Cross Country and Track and Field (4x800, 800)."
     },
-    "Vex Robotics Team Lead/Club Preisdent": {
+    "Vex Robotics Team Lead/Club President": {
         "classes": "technical",
         "date": "10/2015 - 04/2021",
-        "content": "Led 5 teams through middle and high school to VEX Robotics Competitions, elevating Boonsboro from county group-stage elimination to its first state championship participation. Reorganized club and set up its first interface with the community + sponsors"
+        "content": "Led 5 teams through middle and high school to VEX Robotics Competitions, elevating Boonsboro from county group-stage elimination to its first state championship participation. Reorganized club and set up its first interface with the community + sponsors."
     }
 }

src/templates/about.html

@@ -0,0 +1,73 @@
+{% block content %}
+<div class="foreground"></div>
+<div class="relative">
+  <div id="nametag" class="flex" data-aos="fade-up">
+    <div>
+        <h1 class="textGrad">About</h1>
+        <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>
+
+        <div class="timeline" id="timeline">
+            {% for name, item in var['timeline'].items() %}
+            <div class="timeitem" data-categories="{{ item.classes }}">
+                <div class="timeitem-inner boxed">
+                    <div class="timeitem-header">
+                        <span class="datetext">{{ item.date }}</span>
+                        <strong>{{ name }}</strong>
+                    </div>
+                    <div class="timeitem-content">
+                        {{ item.content | safe }}
+                    </div>
+                    {% if item.classes %}
+                    <div class="timeitem-tags">
+                        {% for cls in item.classes.split() %}
+                        <span class="tag tag-{{ cls }}">{{ cls | replace('_', ' ') | title }}</span>
+                        {% endfor %}
+                    </div>
+                    {% endif %}
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+    </div>
+  </div>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const buttons = document.querySelectorAll('.filter-btn');
+    const items = document.querySelectorAll('.timeitem');
+
+    buttons.forEach(function(btn) {
+        btn.addEventListener('click', function() {
+            var filter = this.getAttribute('data-filter');
+            buttons.forEach(function(b) { b.classList.remove('active'); });
+            this.classList.add('active');
+
+            items.forEach(function(item) {
+                var cats = item.getAttribute('data-categories') || '';
+                if (filter === 'all' || cats.indexOf(filter) !== -1) {
+                    item.classList.remove('hidden');
+                } else {
+                    item.classList.add('hidden');
+                }
+            });
+        });
+    });
+});
+</script>
+{% endblock %}

src/templates/header.html

@@ -81,12 +81,15 @@
             <div onClick="goto('home')" class="navElement">
               <p>Home</p>
             </div>
+            <div onclick="goto('about')" class="navElement">
+              <p>About</p>
+            </div>
+            <div onClick="goto('projects')" class="navElement">
+              <p>Work</p>
+            </div>
             <div onclick="goto('status')" class="navElement">
               <p>Status</p>
             </div>
-            <div onclick="goto('projects')" class="navElement">
-              <p>Work</p>
-            </div>
           </div>
         </div>
       </div>

src/templates/partials/project.html

@@ -7,12 +7,19 @@
     {% else %}
       <div class="projImagePlaceholder"></div>
     {% endif %}
-    <div class="proj-status-badge {{ status }}">
-      <span class="status-indicator"></span>{{ status }}
-    </div>
   </div>
   <div class="projContent">
-    <h3>{{ title }}</h3>
+    <div class="projTitleRow">
+      <h3>{{ title }}</h3>
+      <span class="proj-status {{ status }}">{{ status }}</span>
+    </div>
+    {% if classes %}
+    <div class="projTags">
+      {% for cls in classes.split() %}
+        {% if cls != 'pinned' %}<span class="proj-tag">{{ cls }}</span>{% endif %}
+      {% endfor %}
+    </div>
+    {% endif %}
     <p class="projDesc">{{ content }}</p>
     {% if links %}
     <div class="projLinks">

src/templates/projects.html

@@ -1,68 +1,60 @@
 {% block content %}
 <div class="foreground"></div>
-<div class="foregroundContent">
+<div class="relative">
-    <div class="flex equalitems vertOnMobile">
+  <div id="nametag" class="flex" data-aos="fade-up">
-        <div>
+    <div>
-            <div>
+        <h1 class="textGrad">Work</h1>
-                <h2 class="concentratedHead">About Me<p><sup>Data Scientist, Amateur SysAdmin, Polymath</sup></p></h2>
+        <h2>Projects &amp; experiments</h2>
-                <p>
-                    I'm Andrew Simonson<!--, CEO of the anti-thermodynamics syndicate.-->,
-                    a <strong>Data Scientist at Ecolab</strong> and a graduate Data
-                    Science student at
-                    <strong>Rochester Institute of Technology</strong>, having
-                    recently completed the <b>Computer Science BS</b> program
-                    (international relations minor) with a focus on probability
-                    theory.
-                    <!-- <br />
-                    <br />
-                    I started in ~2017, reverse engineering probablistic logic
-                    models in games and developing interfaces to recreate my
-                    findings for friends. Now I develop tracable AI built on
-                    deductive reasoning, maintaning scientific methodology in an
-                    industry obsessed with implicit rules and exclusive empiricism.
-                    As the analysis grew more sophisticated, so too did the tech
-                    stack - to the point that I now manage most services, like this
-                    website, end to end, container image to insight visual.
-                    
-                    With substantial development and systems operation expertise, I
-                     am capable of working with small teams that require many critical 
-                     functions, from devops to analytical platforms, to artificial 
-                     intelligence implementations, to all be handled by the same person.  
-                     Looking for an analyst who can create and operate the full digital 
-                     stack on your crack team of scientists?  You've come to the right place.
-                    -->
-                    <br />
-                    <br />
-                    I get bored and throw random stuff on this website.<br/>
-                    This is what unprofessional development looks like.
-                </p>
-            </div>
-            <br/>
-            <br/>
-            <h4 class='concentratedHead'>
-                I also have a
-                <a href="certs">certifications page</a>
-                and a
-                <a href="Resume_Simonson_Andrew.pdf" target="_blank">resume</a>
-                for unexplained reasons.
-            </h4>
-        </div>
-        <div id="skills">
-            <h2 id="skillstag">Technologies</h2>
-            {% from 'partials/skills.html' import skills %} {{
-            skills(var['skillList']) }}
-        </div>
     </div>
+  </div>
+  <div id="desktopSpacer"></div>
+  <div class="homeSubContent">
+    <div class="foregroundContent">
+
+      <!-- About / Intro -->
+      <div style="max-width: 52em; margin-bottom: 3em;">
+          <p>
+              I'm Andrew Simonson<!--, CEO of the anti-thermodynamics syndicate.-->,
+              a <strong>Data Scientist at Ecolab</strong> and a graduate Data
+              Science student at
+              <strong>Rochester Institute of Technology</strong>, having
+              recently completed the <b>Computer Science BS</b> program
+              (international relations minor) with a focus on probability
+              theory.
+              <br/>
+              <br/>
+              I get bored and throw random stuff on this website.<br/>
+              This is what unprofessional development looks like.
+          </p>
+          <br/>
+          <p style="color: var(--text-secondary); font-size: 0.9rem;">
+              I also have a
+              <a href="certs">certifications page</a>
+              and a
+              <a href="Resume_Simonson_Andrew.pdf" target="_blank">resume</a>
+              for unexplained reasons.
+          </p>
+      </div>
+
+      <!-- Skills -->
+      <div id="skills" style="margin-bottom: 3.5em;">
+          <h2>Technologies</h2>
+          {% from 'partials/skills.html' import skills %} {{
+          skills(var['skillList']) }}
+      </div>
+
+      <!-- Projects -->
+      <h2>Projects</h2>
+      <div class="projectList">
+          {% from 'partials/project.html' import project %} {% for i in
+          var["projects"] %} {{ project(i, var["projects"][i]["classes"],
+          var["projects"][i]["status"], var["projects"][i]["bgi"],
+          var["projects"][i]["content"], var["projects"][i]["links"]) }} {% endfor
+          %}
+      </div>
 
-    <br />
-    <h2 class="concentratedHead">Projects</h2>
-    <div class="projectList">
-        {% from 'partials/project.html' import project %} {% for i in
-        var["projects"] %} {{ project(i, var["projects"][i]["classes"],
-        var["projects"][i]["status"], var["projects"][i]["bgi"],
-        var["projects"][i]["content"], var["projects"][i]["links"]) }} {% endfor
-        %}
     </div>
+  </div>
 </div>
 
 {% endblock %}