Project

ClaytonRye.com

Digital archive preserving an award-winning documentary filmmaker's legacy

A digital archive of my father's five decades of documentary filmmaking, built for his 77th birthday and designed for long-term preservation.

AstroTypeScriptTailwind CSSSchema.orgAccessibility
Visit SiteRead the write-up
Screenshot of ClaytonRye.com

01 — The Problem

My father's five decades of award-winning documentary work on civil rights and social justice had no permanent digital home. His films, including works now archived in university collections, risked being forgotten as physical media deteriorates and streaming platforms change.

02 — The Solution

Built an archival website as a 77th birthday gift, designed for long-term preservation. The site documents his complete filmography, military service, and academic career with WCAG AA accessibility, Schema.org markup for discoverability, and static generation for reliability.

The Results

  • Complete digital archive of five decades of documentary work
  • WCAG AA accessibility compliance
  • Schema.org structured data for researcher discoverability
  • Static site architecture ensuring long-term preservation
12+
Documentaries Archived
<1s
Load Time

ClaytonRye.com is a digital archive of Clayton Rye’s work as an award-winning documentary filmmaker, Vietnam War veteran, and Professor Emeritus at Ferris State University. I built it as a birthday gift. It gathers five decades of documentary work focused on civil rights and social justice.

Accessibility Features

Documentary Film

An archive of civil rights documentaries spanning five decades.

WCAG AA color contrast: 4.5:1
Focus indicators visible
Semantic HTML structure

Tab through the buttons to see focus rings. The site uses semantic HTML and Schema.org markup for discoverability.

Key Features

  • Filmography: Documentation of his award-winning documentaries, including the Detroit Civil Rights Trilogy
  • Archival Design: Built for long-term preservation and accessibility
  • Performance Optimized: Static site generation with minimal JavaScript
  • WCAG AA Compliant: Full accessibility with semantic HTML and keyboard navigation
  • Structured Data: Schema.org markup for discoverability by researchers and educators

The Documentary Legacy

Clayton Rye’s films preserve historical records:

  • Ten Vietnam Vets: First-hand accounts from fellow veterans, now in university archives
  • Jim Crow’s Museum: PBS documentary exploring racist memorabilia as educational tools
  • Detroit Civil Rights Trilogy: Three pivotal stories from Michigan’s civil rights history

Technical Implementation

The site demonstrates several patterns for archival web design:

  • Astro Static Generation: Pre-rendered HTML for instant loading
  • Responsive Images: Modern formats (WebP, AVIF) with optimization
  • Theme Switching: Light/dark/system mode with localStorage persistence
  • Video Integration: Lightweight lite-youtube component for embedded content

Read the full story: Building ClaytonRye.com for My Father’s 77th Birthday

Was this helpful?

Want to learn more?

Ask can answer questions about this project's implementation, technologies, and more.