How AI helped build this site

The design of this website was built with help from Claude, an AI assistant made by Anthropic, between October 7 and 9, 2026. Before that, every page was plain HTML that I wrote by hand, using the browser's default styling. This page documents what Claude did, what I decided, and what stayed entirely mine. AI help with specific weekly assignments is documented at the bottom of each week's page.

How we worked

I connected my local website folder (my git repository) to Claude through the Claude desktop app. Claude could then read my pages, edit files in that folder, and run git commands, asking for my approval before touching anything on my computer.

• Claude first redesigned only the home page and showed me a preview. I approved the direction and asked for the Garamond typeface before anything else changed.
• Claude then applied the same design to every other page.
• I reviewed each change in my browser. Claude made the git commits when I asked it to, and I pushed every change to the class server myself.

What Claude changed

One shared design

Claude wrote a single stylesheet, style.css, that every page uses, so the whole site now shares one look. Before, each page was styled separately (or not at all).

Typography and color

• Body text and headings in EB Garamond (my choice), with a clean sans-serif typeface for the menu and captions.
• A readable text column with comfortable line spacing. Later, at my request, Claude widened it so the text fills more of the page.
• A cool off-white background, dark text and a single blue accent color, plus an automatic dark mode for visitors whose computers use one.

Navigation and layout

• The same menu bar on every page, with the current page underlined.
• Previous and next links at the bottom of each weekly page.
• A layout that adapts to phone screens.
• At my request, a "Griffin Group" item in the menu bar, right after Home, that links to my research group's website (it opens in a new tab). It was first placed under my name on the home page, and moved to the menu at my request.

Home page

• My name in large type, with a numbered list of weekly assignments with photo thumbnails.
• The animated curve under my name, which is a free induction decay (FID), the signal measured in NMR, as a nod to my research. Claude generated it from a decaying sine wave. At my request, it was later slowed down and made to decay sooner.

Photos, videos and code

• Consecutive photos arranged automatically into a grid. Clicking a photo enlarges it. This is done by a small script, site.js.
• Videos and the 3D scan viewer sized to the page.
• Diagrams on white backgrounds with optional captions.
• Long code (like my Week 2 Arduino program) in a code box that starts collapsed, with a "Show full code" button.

Fixes

• Broken HTML on several pages: unclosed or nested headings, a menu outside the page body, and code tags closed in the wrong order.
• On Week 2, parts of my Arduino code were invisible because the browser read lines like #include <Wire.h> as HTML tags. They now display correctly.
• Inaccurate image descriptions (alt text, which screen readers read aloud), such as several photos labeled "Example of an NMR Probe", replaced with accurate ones.

What stayed mine

• All of my written documentation for the weekly assignments, the final project and the About page. Claude was told not to change my text, and it checked that every page's text was identical before and after the redesign.
• What goes on the site and where. Content changes, such as adding the NMR Motivation section to the Final Project page from my own document, removing Week 0 from the weekly list, and adding AI-use links to my weekly pages, were my requests. Claude carried them out.

Help with content

Besides the design, I asked Claude to explain some NMR background (what NMR measures, what spin is, and how to describe it to a general audience). I then wrote the NMR Motivation section on my Final Project page myself, with some wording adapted from those explanations. Claude also gave me advice on my final project scope and on using git and the terminal.

This page was drafted by Claude at my request and reviewed by me.