About

Who Am I?

I'm Logan, currently training in Computer Science at Weber State University with an emphasis on applied mathematical modeling and a complex systems lens. The technology behind this site is highlighted below, if that doesn't appeal to you check out my photo gallery or book recommendations through the nav bar above.

Technical Architecture

Technology Stack

This site is a pure static website built with semantic HTML5, CSS3, and vanilla JavaScript (ES6+). There are no build tools, frameworks, or runtime dependencies. The site is deployed directly from source files to Netlify's CDN, ensuring minimal latency and maximum reliability. All code is written in standard web technologies without transpilation or bundling.

Responsive Design System

The layout employs a mobile-first responsive design approach with breakpoints at 768px (tablet) and 475px (mobile). CSS Grid and Flexbox provide flexible layouts that adapt to various screen sizes. Media queries handle device-specific styling adjustments, and images are constrained with max-width properties to prevent pixelation on wide displays. The design maintains a maximum container width for optimal readability on large monitors.

Performance Strategy

Images below the fold use the native loading="lazy" attribute for deferred loading. Static assets (images, stylesheets, JavaScript) are served with long-term cache headers (max-age=31536000, immutable) via Netlify configuration. Scroll event handlers use requestAnimationFrame for efficient throttling. The site leverages browser-native features rather than external libraries to minimize payload size and execution overhead.

Accessibility Implementation

The site conforms to WCAG 2.1 Level AA standards through semantic HTML5 elements, comprehensive ARIA labeling, skip navigation links, and full keyboard navigation support. Form inputs dynamically update aria-invalid attributes based on validation state. Interactive elements maintain minimum 44×44px touch targets. Focus management is implemented in modal dialogs, and screen reader announcements are provided for dynamic content changes.

JavaScript Module Organization

Client-side functionality is divided into discrete, single-purpose modules: darkmode.js manages theme persistence via localStorage and system preference detection, gallery.js implements a full-screen lightbox with keyboard navigation, books.js handles dynamic content rendering from JSON with search and filtering, and main.js provides shared utilities including scroll-to-top functionality and form validation. All modules use modern DOM APIs and event delegation patterns.

Deployment Infrastructure

The site is hosted on Netlify's global CDN with security headers configured via netlify.toml: X-XSS-Protection, X-Content-Type-Options, Referrer-Policy, and X-Frame-Options. Form submissions are processed through Netlify Forms, a serverless form handling service that requires no backend code. The deployment pipeline is a direct file transfer with no build step, ensuring immediate updates and eliminating build-time errors.

Site Structure & Data Flow

File Organization

The codebase follows a conventional static site structure with clear separation of concerns:

  • HTML Pages: The root index.html serves as the homepage, while additional pages reside in /templates/. Each HTML file is self-contained with embedded JSON-LD structured data for search engine optimization. No server-side rendering or templating engine is used.
  • Stylesheet Architecture: CSS is split into reset_style.css for browser normalization and style.css for application styles. CSS custom properties (variables) define the design system, including colors, spacing, and typography. Dark mode is implemented through a .dark-mode class on the document root that overrides CSS variable values, eliminating the need for duplicate style rules.
  • JavaScript Modules: Each JavaScript file in /js/ handles a specific domain: theme management, gallery interactions, dynamic content rendering, and shared utilities. Modules are loaded via standard <script> tags with defer attributes to ensure non-blocking execution. No module bundler or loader is required.
  • Data Management: Book recommendations are stored as JSON in /data/books.json and fetched client-side via the Fetch API. The books.js module parses this data and dynamically generates HTML, enabling content updates without modifying template files. A MutationObserver ensures search functionality initializes only after content is rendered.
  • Asset Organization: Images are categorized: gallery thumbnails in /images/gallery/, page headers in /images/, and document files in /files/. This structure enables granular cache control policies and optimizes asset delivery.

Feature Implementation Details

Dark Mode System

The dark mode implementation detects system preferences via window.matchMedia('(prefers-color-scheme: dark)') and stores user overrides in localStorage. Theme switching occurs through toggling a .dark-mode class on document.documentElement, which cascades CSS variable overrides throughout the stylesheet. The system listens for system preference changes but only applies them when no explicit user preference exists.

Gallery Lightbox

The lightbox is implemented as a dynamically created modal dialog with full ARIA support. It provides keyboard navigation (arrow keys for navigation, ESC for dismissal), touch-friendly controls, and automatic fallback to thumbnail images if full-size versions fail to load. Focus is trapped within the modal when open, and the previous focus is restored upon closure. The implementation uses event delegation and a single persistent error handler to manage image loading failures.

Dynamic Content Rendering

Book recommendations are loaded asynchronously from /data/books.json and rendered into the DOM via JavaScript. The rendering process creates semantic HTML structures with proper heading hierarchy and ARIA labels. A client-side search implementation filters books by title and author in real-time, with category sections and headings dynamically shown or hidden based on search results. The search interface includes keyboard shortcuts (Ctrl/Cmd+K to focus) and a clear button for user convenience.

Form Processing

The contact form uses Netlify Forms, which processes submissions serverlessly without requiring backend code. The form includes client-side validation that provides immediate visual and programmatic feedback through aria-invalid attributes. Form state is validated on input, blur, and submit events to ensure data quality before transmission. Netlify handles spam filtering, email delivery, and submission storage automatically.

↑