Update requirements.txt

Dockerfile

@@ -1,10 +1,34 @@
-FROM python:3.10-bullseye
+# Use a slimmer base image to reduce image size and pull times
+FROM python:3.10-slim-bullseye
 LABEL maintainer="Andrew Simonson <asimonson1125@gmail.com>"
 
+# Set environment variables for better Python performance in Docker
+ENV PYTHONDONTWRITEBYTECODE=1 \
+    PYTHONUNBUFFERED=1 \
+    PIP_NO_CACHE_DIR=1
+
 WORKDIR /app
 
+# Create a non-root user for security
+RUN groupadd -r appuser && useradd -r -g appuser appuser
+
+# Copy only the requirements file first to leverage Docker layer caching
+COPY src/requirements.txt .
+
+# Install dependencies as root, but then switch to the non-root user
+RUN pip install -r requirements.txt
+
+# Copy the rest of the source code
 COPY src/ .
 
-RUN pip install --no-cache-dir -r requirements.txt
+# Ensure the appuser owns the app directory
+RUN chown -R appuser:appuser /app
 
-CMD [ "gunicorn", "--bind", "0.0.0.0:8080", "app:app"]
+# Switch to the non-root user for better security
+USER appuser
+
+# Expose the port (Gunicorn's default or specified in CMD)
+EXPOSE 8080
+
+# Start Gunicorn
+CMD ["gunicorn", "--bind", "0.0.0.0:8080", "app:app"]

README.md

@@ -1,11 +1,92 @@
-# I made a uhh website
-So people can see how excellent my coding standards are.
+# Personal Portfolio & Service Monitor
 
-* Style: 5/10
-* Originality: 3/10
-* Security: Yes*
-* Viruses: not included
+A Flask-based website for my personal portfolio and a service monitoring dashboard. This project handles dynamic project showcases, automated service health tracking, and production-ready optimizations.
 
-You gotta uhh `pip3 install -r requirements.txt` and `python3 app.py` that thing
+## Features
 
-Docker compose configured to expose at `localhost:8080`
+- **Content Management**: Pages like projects, books, and skills are managed via JSON files in the `static` directory.
+- **Service Monitoring**: Background health checks for external services with uptime statistics stored in PostgreSQL.
+- **Optimizations**: 
+    - HTML, CSS, and JS minification via `Flask-Minify`.
+    - MD5-based cache busting for static assets.
+    - Configurable cache-control headers.
+- **Security**: Pre-configured headers for XSS protection and frame security.
+- **Deployment**: Ready for containerized deployment with Docker and Gunicorn.
+
+## Tech Stack
+
+- **Backend**: Python 3.12, Flask
+- **Frontend**: Vanilla CSS/JS, Jinja2
+- **Database**: PostgreSQL (optional, for monitoring history)
+- **Infrastructure**: Docker, docker-compose
+
+## Project Structure
+
+```text
+.
+├── src/
+│   ├── app.py              # Application entry point
+│   ├── monitor.py          # Service monitoring logic
+│   ├── config.py           # Environment configuration
+│   ├── templates/          # HTML templates
+│   ├── static/             # CSS, JS, and JSON data
+│   └── requirements.txt    # Python dependencies
+├── Dockerfile              # Container definition
+├── docker-compose.yml      # Local stack orchestration
+└── STATUS_MONITOR_README.md # Monitoring system documentation
+```
+
+## Getting Started
+
+### Using Docker
+
+To run the full stack (App + PostgreSQL):
+
+1. **Clone the repository**:
+   ```bash
+   git clone https://github.com/asimonson1125/asimonson1125.github.io.git
+   cd asimonson1125.github.io
+   ```
+
+2. **Start services**:
+   ```bash
+   docker-compose up --build
+   ```
+
+3. **Access the site**:
+   Visit [http://localhost:8080](http://localhost:8080).
+
+### Local Development
+
+To run the Flask app without Docker:
+
+1. **Set up a virtual environment**:
+   ```bash
+   python3 -m venv .venv
+   source .venv/bin/activate
+   ```
+
+2. **Install dependencies**:
+   ```bash
+   pip install -r src/requirements.txt
+   ```
+
+3. **Run the application**:
+   ```bash
+   cd src
+   python3 app.py
+   ```
+   *Note: status monitor is by default disabled outside of its container cluster*
+
+## Service Monitoring
+
+The monitoring system in `src/monitor.py` tracks service availability. It:
+- Runs concurrent health checks every hour.
+- Calculates uptime for various windows (24h, 7d, 30d).
+- Provides a status UI at `/status` and a JSON API at `/api/status`.
+
+See [STATUS_MONITOR_README.md](./STATUS_MONITOR_README.md) for more details.
+
+## License
+
+This project is personal property. All rights reserved.

src/requirements.txt

@@ -1,23 +1,23 @@
-blinker==1.8.2
-certifi==2024.7.4
-charset-normalizer==3.3.2
-click==8.1.7
-Flask==3.0.3
-Flask-Minify==0.48
-gunicorn==22.0.0
+blinker==1.9.0
+certifi==2026.1.4
+charset-normalizer==3.4.4
+click==8.3.1
+Flask==3.1.3
+Flask-Minify==0.50
+gunicorn==25.1.0
 htmlminf==0.1.13
-idna==3.7
+idna==3.11
 itsdangerous==2.2.0
-Jinja2==3.1.4
+Jinja2==3.1.6
 jsmin==3.0.1
 lesscpy==0.15.1
-MarkupSafe==2.1.5
-packaging==24.1
+MarkupSafe==3.0.3
+packaging==26.0
 ply==3.11
-rcssmin==1.1.2
-requests==2.32.3
-six==1.16.0
-urllib3==2.2.2
-Werkzeug==3.0.3
-xxhash==3.4.1
-psycopg2-binary==2.9.9
+psycopg2-binary==2.9.11
+rcssmin==1.2.2
+requests==2.32.5
+six==1.17.0
+urllib3==2.6.3
+Werkzeug==3.1.6
+xxhash==3.6.0

src/static/css/App.css

@@ -1840,3 +1840,38 @@ tr {
 .text-muted {
   color: #888 !important;
 }
+/* SPA Loading Bar */
+#loading-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 3px;
+  background: linear-gradient(90deg, var(--accent) 0%, #fff 50%, var(--accent) 100%);
+  background-size: 200% 100%;
+  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.6);
+  z-index: 2000;
+  width: 0%;
+  opacity: 0;
+  transition: width 0.4s cubic-bezier(0.1, 0.05, 0.1, 1), opacity 0.3s ease;
+  pointer-events: none;
+}
+
+#loading-bar.visible {
+  opacity: 1;
+}
+
+#loading-bar.active {
+  width: 70%;
+  animation: loading-shimmer 2s infinite linear;
+}
+
+#loading-bar.finish {
+  opacity: 0;
+  width: 100%;
+  transition: width 0.2s ease, opacity 0.4s ease 0.1s;
+}
+
+@keyframes loading-shimmer {
+  from { background-position: 200% 0; }
+  to { background-position: -200% 0; }
+}

src/static/js/responsive.js

@@ -14,29 +14,40 @@ function toggleMenu(collapse) {
 }
 
 async function goto(location, { push = true } = {}) {
-  let response;
+  const loadingBar = document.getElementById('loading-bar');
+  
+  if (loadingBar) {
+    loadingBar.style.width = ''; // Clear inline style from previous run
+  }
+
+  let loadingTimeout = setTimeout(() => {
+    if (loadingBar) {
+      loadingBar.classList.remove('finish');
+      loadingBar.classList.add('active');
+      loadingBar.classList.add('visible');
+    }
+  }, 150);
+
   try {
-    response = await fetch("/api/goto/" + location, {
+    const response = await fetch("/api/goto/" + location, {
       credentials: "include",
       method: "GET",
       mode: "cors",
     });
+
     if (!response.ok) {
-      console.error(`Navigation failed: HTTP ${response.status}`);
-      return;
-    }
-  } catch (err) {
-    console.error("Navigation fetch failed:", err);
-    return;
+      throw new Error(`HTTP ${response.status}`);
     }
 
+    // Wait for the full body to download - this is usually the slow part
+    const [metadata, content] = await response.json();
+    
     document.dispatchEvent(new Event('beforenavigate'));
 
-  const [metadata, content] = await response.json();
     const root = document.getElementById("root");
     root.innerHTML = content;
 
-  // Re-execute scripts injected via innerHTML (browser ignores them otherwise)
+    // Re-execute scripts
     root.querySelectorAll("script").forEach(function(oldScript) {
       const newScript = document.createElement("script");
       Array.from(oldScript.attributes).forEach(function(attr) {
@@ -59,6 +70,23 @@ async function goto(location, { push = true } = {}) {
     if (push) {
       history.pushState(null, null, metadata["canonical"]);
     }
+
+  } catch (err) {
+    console.error("Navigation failed:", err);
+  } finally {
+    clearTimeout(loadingTimeout);
+    if (loadingBar && loadingBar.classList.contains('active')) {
+      loadingBar.classList.add('finish');
+      loadingBar.classList.remove('active');
+      setTimeout(() => {
+        if (!loadingBar.classList.contains('active')) {
+          loadingBar.style.width = '0%';
+          loadingBar.classList.remove('finish');
+          loadingBar.classList.remove('visible');
+        }
+      }, 500);
+    }
+  }
 }
 
 function backButton() {

src/static/js/status.js

@@ -1,4 +1,8 @@
-let statusIntervalId = null;
+// Use a global to track the interval and ensure we don't stack listeners
+if (window.statusIntervalId) {
+  clearInterval(window.statusIntervalId);
+  window.statusIntervalId = null;
+}
 
 async function fetchStatus() {
   try {
@@ -17,7 +21,8 @@ async function fetchStatus() {
 function updateStatusDisplay(data) {
   if (data.last_check) {
     const lastCheck = new Date(data.last_check);
-    document.getElementById('lastUpdate').textContent = `Last checked: ${lastCheck.toLocaleString()}`;
+    const lastUpdateEl = document.getElementById('lastUpdate');
+    if (lastUpdateEl) lastUpdateEl.textContent = `Last checked: ${lastCheck.toLocaleString()}`;
   }
 
   if (data.next_check) {
@@ -28,11 +33,12 @@ function updateStatusDisplay(data) {
     }
   }
 
+  if (data.services) {
     data.services.forEach(function(service) {
       updateServiceCard(service);
     });
-
     updateOverallStatus(data.services);
+  }
 
   const refreshBtn = document.getElementById('refreshBtn');
   if (refreshBtn) {
@@ -65,36 +71,38 @@ function updateServiceCard(service) {
   const uptimeDisplay = document.getElementById(`uptime-${service.id}`);
   const checksDisplay = document.getElementById(`checks-${service.id}`);
 
-  timeDisplay.textContent = service.response_time !== null ? `${service.response_time}ms` : '--';
+  if (timeDisplay) timeDisplay.textContent = service.response_time !== null ? `${service.response_time}ms` : '--';
 
+  if (codeDisplay) {
     if (service.status_code !== null) {
       codeDisplay.textContent = service.status_code;
     } else {
       codeDisplay.textContent = service.status === 'unknown' ? 'Unknown' : 'Error';
     }
+  }
 
   card.classList.remove('online', 'degraded', 'offline', 'unknown');
 
   switch (service.status) {
     case 'online':
-      stateDot.className = 'state-dot online';
-      stateText.textContent = 'Operational';
+      if (stateDot) stateDot.className = 'state-dot online';
+      if (stateText) stateText.textContent = 'Operational';
       card.classList.add('online');
       break;
     case 'degraded':
     case 'timeout':
-      stateDot.className = 'state-dot degraded';
-      stateText.textContent = service.status === 'timeout' ? 'Timeout' : 'Degraded';
+      if (stateDot) stateDot.className = 'state-dot degraded';
+      if (stateText) stateText.textContent = service.status === 'timeout' ? 'Timeout' : 'Degraded';
       card.classList.add('degraded');
       break;
     case 'offline':
-      stateDot.className = 'state-dot offline';
-      stateText.textContent = 'Offline';
+      if (stateDot) stateDot.className = 'state-dot offline';
+      if (stateText) stateText.textContent = 'Offline';
       card.classList.add('offline');
       break;
     default:
-      stateDot.className = 'state-dot loading';
-      stateText.textContent = 'Unknown';
+      if (stateDot) stateDot.className = 'state-dot loading';
+      if (stateText) stateText.textContent = 'Unknown';
       card.classList.add('unknown');
   }
 
@@ -114,6 +122,8 @@ function updateServiceCard(service) {
 
 function updateOverallStatus(services) {
   const overallBar = document.getElementById('overallStatus');
+  if (!overallBar) return;
+
   const icon = overallBar.querySelector('.summary-icon');
   const title = overallBar.querySelector('.summary-title');
   const subtitle = document.getElementById('summary-subtitle');
@@ -125,33 +135,37 @@ function updateOverallStatus(services) {
   const degraded = services.filter(function(s) { return s.status === 'degraded' || s.status === 'timeout'; }).length;
   const offline = services.filter(function(s) { return s.status === 'offline'; }).length;
 
-  onlineCount.textContent = online;
-  totalCount.textContent = total;
+  if (onlineCount) onlineCount.textContent = online;
+  if (totalCount) totalCount.textContent = total;
 
   overallBar.classList.remove('online', 'degraded', 'offline');
-  icon.classList.remove('operational', 'partial', 'major', 'loading');
+  if (icon) icon.classList.remove('operational', 'partial', 'major', 'loading');
 
   // Determine overall status
   if (online === total) {
-    // All systems operational
     overallBar.classList.add('online');
+    if (icon) {
       icon.classList.add('operational');
       icon.textContent = '\u2713';
-    title.textContent = 'All Systems Operational';
-    subtitle.textContent = `All ${total} services are running normally`;
+    }
+    if (title) title.textContent = 'All Systems Operational';
+    if (subtitle) subtitle.textContent = `All ${total} services are running normally`;
   } else if (offline >= Math.ceil(total / 2)) {
-    // Major outage (50% or more offline)
     overallBar.classList.add('offline');
+    if (icon) {
       icon.classList.add('major');
       icon.textContent = '\u2715';
-    title.textContent = 'Major Outage';
-    subtitle.textContent = `${offline} service${offline !== 1 ? 's' : ''} offline, ${degraded} degraded`;
+    }
+    if (title) title.textContent = 'Major Outage';
+    if (subtitle) subtitle.textContent = `${offline} service${offline !== 1 ? 's' : ''} offline, ${degraded} degraded`;
   } else if (offline > 0 || degraded > 0) {
-    // Partial outage
     overallBar.classList.add('degraded');
+    if (icon) {
       icon.classList.add('partial');
       icon.textContent = '\u26A0';
-    title.textContent = 'Partial Outage';
+    }
+    if (title) title.textContent = 'Partial Outage';
+    if (subtitle) {
       if (offline > 0 && degraded > 0) {
         subtitle.textContent = `${offline} offline, ${degraded} degraded`;
       } else if (offline > 0) {
@@ -159,12 +173,14 @@ function updateOverallStatus(services) {
       } else {
         subtitle.textContent = `${degraded} service${degraded !== 1 ? 's' : ''} degraded`;
       }
+    }
   } else {
-    // Unknown state
+    if (icon) {
       icon.classList.add('loading');
       icon.textContent = '\u25D0';
-    title.textContent = 'Status Unknown';
-    subtitle.textContent = 'Waiting for service data';
+    }
+    if (title) title.textContent = 'Status Unknown';
+    if (subtitle) subtitle.textContent = 'Waiting for service data';
   }
 }
 
@@ -191,23 +207,23 @@ function refreshStatus() {
 }
 
 function initStatusPage() {
-  if (statusIntervalId !== null) {
-    clearInterval(statusIntervalId);
+  if (window.statusIntervalId) {
+    clearInterval(window.statusIntervalId);
   }
   fetchStatus();
-  statusIntervalId = setInterval(fetchStatus, 60000);
+  window.statusIntervalId = setInterval(fetchStatus, 60000);
 }
 
-// Clean up polling interval when navigating away via SPA
-document.addEventListener('beforenavigate', function() {
-  if (statusIntervalId !== null) {
-    clearInterval(statusIntervalId);
-    statusIntervalId = null;
+function cleanupStatusPage() {
+  if (window.statusIntervalId) {
+    clearInterval(window.statusIntervalId);
+    window.statusIntervalId = null;
   }
-});
+  document.removeEventListener('beforenavigate', cleanupStatusPage);
+}
 
-if (document.readyState === 'loading') {
-  document.addEventListener('DOMContentLoaded', initStatusPage);
-} else {
+document.addEventListener('beforenavigate', cleanupStatusPage);
+
+if (document.getElementById('overallStatus')) {
   initStatusPage();
 }

src/templates/header.html

@@ -59,6 +59,7 @@
   </head>
   {% block header %}
   <body onpopstate="backButton()">
+    <div id="loading-bar"></div>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <main id='map'></main>
     <div id="contentStuffer">