Zac Batten Inefy workbench

Work

Professional projects, working pages, and build notes.

A complete project index for hiring review: flagship case studies first, then supporting pages, browser experiments, and notes that explain the implementation decisions.

Quick routes

Skills demonstrated by shipped projects

I do not list tools in isolation. Each skill below links to code, a public build, or a technical writeup.

Skill area Python automation Project evidence: MovieBot shows Twitch voting, OBS WebSocket control, token refresh, reconnect handling, source-linked implementation notes, and a public pytest suite. Skill area Map-based field UI Project evidence: TraverseOps shows a MapLibre-style field flow with sample asset records, inspections, work orders, imports, and reports. Skill area Frontend state and Canvas Project evidence: Web Paint shows vanilla JavaScript tool state, Canvas 2D rendering, undo/redo, import/export, zoom, and mobile controls. Skill area Interactive browser mechanics Project evidence: Interactive Lab shows Canvas games, keyboard/touch input, LocalStorage scores, pause/resume loops, and status text. Skill area GitHub Pages polish Project evidence: Portfolio build notes show page structure, metadata, keyboard checks, reduced motion, and review paths.

01 / Project comparison

Compare scope, stack, and links quickly.

Use this matrix for a fast hiring scan before opening the deeper case studies or public pages.

Comparison of Zac Batten portfolio projects by project type, stack, demonstrated skills, public page, source, and case study.
Project Type Stack What it demonstrates Public page Source Case study
TraverseOps Field-operations map and work-order sample app HTML, CSS, JavaScript, MapLibre-style UI, sample data Asset-status filtering, selected-asset context, field crew/supervisor screens, inspections, work orders, imports, and reports. Open app Not public yet Read case study
MovieBot / StreamCinema Python Twitch chat voting and OBS automation bot Python, TwitchIO, OBS WebSocket, OAuth, local files Vote collection, OBS playback automation, token refresh, reconnect handling, vote changes, tie resolution, movie folder scanning, and pytest coverage for config/bot logic. Movie Night GitHub Read case study
Web Paint Browser canvas drawing editor HTML, CSS, JavaScript, Canvas API Drawing modes, undo/redo history, import/export, zoom, canvas resizing, and UI state for tools, colors, brush size, and status output. Open tool Source Read case study
Judy Batten Wellness Live client wellness website HTML, CSS, JavaScript, GitHub Pages, SEO Responsive client-site structure, service navigation, calm visual system, metadata, contact paths, and mobile-first implementation. Live site Private repo Project card
Movie Library Client-side voting catalog for MovieBot HTML, CSS, JavaScript, bundled data, Clipboard API Public-domain search and filters, copy-to-clipboard vote commands, lazy-loaded posters, no-JS fallback content, and labeled controls. Open Library Source Read listing
Interactive Lab Canvas games and browser experiments HTML, CSS, JavaScript, Canvas API, LocalStorage, keyboard/touch input Scoring, collision, movement, restart behavior, keyboard/touch controls, status updates, localStorage best scores, pause/resume states, and reduced-motion support. Open lab Repo Experiment index
Portfolio Site GitHub Pages portfolio and case-study system HTML, CSS, JavaScript, GitHub Pages, SEO, accessibility Semantic HTML, reusable CSS patterns, recruiter paths, case studies, notes, Open Graph previews, sitemap, reduced motion, and focus states. Homepage GitHub Build note

02 / Flagship case studies

Flagship professional work.

Projects with hiring signal: product shape, implementation detail, and links a reviewer can open.

Public sample app / case study

TraverseOps — Field Operations Map & Work Orders

A map-first field app for hydrant-style assets, inspections, work orders, imports, reports, and team roles.

Problem: Field teams need a direct way to see asset status, assign work, and move from map context to operational tasks.

What I built

I built a sample app for asset records, role-based screens, map filtering, imports, inspections, and work-order handoffs.

  • MapLibre-style asset map with status filtering and selected-asset context.
  • Inspection and work-order screens for field crew and supervisor-style roles.
  • Import/reporting flow designed around municipal-style sample asset operations.
MapLibreJavaScriptSample dataGitHub Pages
Case StudyPublic App
Public repo / live showcase

StreamCinema Vote Bot — Twitch Chat Voting + OBS Automation

A Python automation bot that lets Twitch chat vote on public-domain movies and controls OBS playback for stream movie nights.

Problem: Running a movie night manually is repetitive, hard to coordinate, and easy to interrupt while streaming.

What I built

I built the Twitch chat voting flow, movie selection logic, OBS WebSocket playback control, token handling, reconnect behavior, and companion catalog links.

  • Python/TwitchIO command handling for vote collection and vote changes.
  • OBS WebSocket integration for playback automation.
  • Token refresh, reconnect handling, tie resolution, and local movie folder scanning.
PythonTwitchIOOBS WebSocketpytest
Case StudyGitHubTestsMovie NightMovie Library
Live browser tool

Web Paint — Browser Canvas Drawing Tool

A vanilla JavaScript canvas editor with drawing tools, text, shapes, undo/redo, import/export, zoom, and responsive controls.

Problem: Browser drawing tools need fast canvas interaction, predictable tool state, and controls that stay usable across desktop and touch screens.

What I built

I built the canvas rendering flow, tool state management, history stack, import/export behavior, keyboard shortcuts, and mobile control layout.

  • Canvas drawing modes for pencil, eraser, shapes, fill, and text.
  • Undo/redo history, image import/export, zoom, and canvas resizing.
  • UI state management for color, brush size, active tool, and status output.
CanvasJavaScriptLocalStorageGitHub Pages
Case StudyOpen ToolSource

03 / Supporting projects

Smaller project surfaces that support the main work.

Pages and utilities that round out the portfolio: search, GitHub Pages structure, metadata, and recruiter paths.

Live client site / private repo

Judy Batten Wellness — Client Wellness Website

A wellness website for Judy Batten's massage therapy, Reiki, Yin Yoga, doula support, workshops, and training offerings.

Problem: A wellness practitioner needs a calm site that explains services and turns visitor intent into direct contact.

Live Site
Supporting live page

Movie Library — Public-Domain Voting Catalog

A searchable public-domain movie catalog that supports the StreamCinema bot by helping viewers find movies and copy vote commands.

Problem: Viewers need a simple way to browse eligible movies and submit valid vote commands without guessing titles.

Open LibraryMovieBot Case StudyMovie Night
GitHub Pages site

Portfolio Site — Developer Portfolio

A hand-built portfolio for software projects, case studies, technical notes, metadata, and recruiter paths.

Problem: A hiring portfolio needs to explain technical work quickly while staying fast, keyboard-friendly, indexable, and easy to maintain.

Build NotesGitHubView Source
Browser experiments

Interactive Lab — Browser Games & JavaScript Experiments

A collection of browser tools and games framed as small interaction, Canvas, input, state, and keyboard experiments.

Problem: Browser games need visible controls, reliable state, responsive layouts, and enough polish for code review.

Open Interactive LabPlay GamesView Source

04 / Site polish

Technical care visible in the site itself.

Small implementation details that help reviewers navigate, share, crawl, and inspect the portfolio without a build system or backend.

GitHub Pages structure

Deployable as plain files.

Hosting
GitHub Pages serves HTML, CSS, JavaScript, images, sitemap, and robots files without a custom backend.
No-JS fallbacks
Key pages keep HTML fallback content where rendering or filtering depends on JavaScript, including the Movie Library catalog path.
Security headers
Pages include a Content Security Policy meta tag that limits script, style, image, frame, connection, media, and worker sources.
Review experience

Built for sharing and scanning.

Metadata
Major pages include unique titles, descriptions, Open Graph tags, Twitter card metadata, sitemap entries, and structured project context.
Media loading
Project screenshots and poster-heavy surfaces use lazy loading, async decoding, explicit dimensions, and reserved image boxes to reduce layout shift.
Accessibility
Skip links, focus states, keyboard-friendly navigation, labeled controls, status updates, and reduced-motion support are part of the implementation.

05 / Interactive experiments

Lab highlights that support the main project story.

Three small builds show browser mechanics without crowding the core portfolio: Canvas drawing state, arcade input, grid logic, LocalStorage, and keyboard/touch controls.

View all experiments
Live browser tool

Web Paint — Browser Canvas Drawing Tool

A vanilla JavaScript canvas editor with drawing tools, text, shapes, undo/redo, import/export, zoom, and responsive controls.

Open ToolCase StudySource
Arcade loop

Asteroid Drift

Canvas arcade loop with thrust, shooting, shields, randomized spawns, collisions, waves, and touch controls.

PlayGitHub
Logic game

Minefield Sweep

Keyboard-friendly mine puzzle with delayed mines, recursive reveal, flag mode, timers, and labeled cells.

PlayGitHub

06 / Site and build notes

Implementation notes behind the portfolio.

Short build logs that connect the visible pages to implementation decisions, QA checks, and next improvements.

Build log

Portfolio cleanup pass

A build note on homepage positioning, CTA hierarchy, metadata, resume paths, and selected-work framing.

Read NoteHomepage
Build log

MovieBot stream surface split

A build note on separating the stream room from the searchable catalog and linking both to the Python bot.

Read NoteMovie Night
Build log

TraverseOps public framing

A build note on field assets, inspections, work orders, imports, reports, public-data limits, and production risks.

Read NoteCase Study

Next step

Need the shorter path?

For a hiring scan, start with TraverseOps, MovieBot, and Web Paint. For availability and contact details, use the resume or email links.

View resume Email Zac Case studies