Note: Cursor helped scaffold this website.
Construction is ongoing.
Who Am I?
I'm Logan, a CS student at Weber State University who likes applied math, complex systems, and using code to poke at how things behave. This page is just a simple rundown of how I put this site together — if you'd rather see something less nerdy, the photos and books pages in the nav bar are probably more fun.
Technical Architecture
Technology Stack
This is a small static site built with plain HTML, CSS, and a bit of vanilla JavaScript. I don’t use a framework or a build step here — it’s just files that get sent straight to Netlify, which hosts the site on their CDN.
Responsive Design
The layout is mobile-first and uses simple CSS Grid and Flexbox so it doesn’t fall apart on phones, tablets, or big monitors. I added a couple of basic breakpoints and keep images from stretching too far so things stay readable.
Performance
Most of the performance work here is just keeping things simple. Images that don’t need to load right away use the browser’s built-in lazy loading, and I lean on the browser’s native features instead of heavy libraries.
Accessibility
I’ve tried to keep the site reasonably accessible by using semantic HTML, basic ARIA labels, skip links, and keyboard-friendly navigation. I’m still learning here, so if you spot anything that could be better, I’m open to improving it.
JavaScript
The JavaScript is split into a few small files: one for dark mode, one for the gallery, one for the books page, and one for shared odds and ends like the back-to-top button and some light form checks. It’s all straightforward DOM code without any frameworks.
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 site is organized like a simple static project:
- HTML Pages:
index.htmlis the homepage, and the other pages live in/templates/. Each page is just a regular HTML file. - Styles: CSS is split into a small reset file and a main stylesheet. Dark mode is handled by toggling a single class and swapping a few CSS variables.
- JavaScript Files: The
/js/folder holds separate files for theme toggling, the gallery, the books page, and shared utilities. They’re loaded with plain<script>tags usingdefer. - Book Data: The book list lives in
/data/books.json, which the books script reads and turns into HTML so I can update recommendations without touching the template. - Assets: Images are grouped into folders for gallery displays, thumbnails, and page headers, and documents live in
/files/.
Feature Implementation Details
Dark Mode
Dark mode is handled by checking the system preference once, saving your choice in localStorage, and toggling a .dark-mode class on the root element. From there, CSS variables do the rest.
Gallery
The gallery uses a simple lightbox so you can click on thumbnails and see a larger version of each photo. It supports keyboard navigation and falls back to the small images if something goes wrong with loading.
Books Page
The books page pulls in a JSON file of my favorite non-fiction and renders it into the page with JavaScript. There’s a basic client-side search so you can quickly jump to specific titles or authors.
Contact Form
The contact form is handled by Netlify Forms, so there’s no custom backend code here. I added some light client-side validation to catch obvious mistakes before you hit submit.