Portfolio Skills

This page is a living technical record of skills, tools, and engineering practices demonstrated in this project.

Project Overview

• Project Type: Creative Coding / Generative Art
• Primary Runtime: Node.js
• Rendering Library: p5.js
• Primary Implementation Language: TypeScript

At a Glance

• Current sketch count (wired to runtime): 1
• CI runtime coverage: 3 Node.js versions (20.x, 22.x, 24.x)
• Automation workflows: 4 GitHub Actions workflows (build, test, security analysis, deployment)
• Documentation approach: Source-linked evidence + generated API docs

Skills and Tooling Inventory

• Programming Languages: TypeScript, JavaScript, HTML, CSS, Markdown, YAML
• Runtime & Libraries: Node.js, p5.js
• TypeSafety & Validation: TypeBox, Zod
• Testing: Vitest
• Bundling: webpack
• Code Quality: ESLint
• Documentation: TypeDoc
• Site Generation: Bundler, Jekyll, Liquid
• Dependency Management: npm, GitHub Dependabot
• Versioning & Platform: Git, GitHub
• CI/CD: GitHub Actions, GitHub Pages, CodeQL
• Environment Management: n, rbenv
• Development Environments: WebStorm, Visual Studio Code
• AI-Assisted Development: GitHub Copilot

Capability Record

• Interface-driven architecture for sketch implementations
• Class-based visual logic organized around p5 lifecycle hooks
• Typed entrypoint composition and runtime binding
• Schema-driven type definitions using TypeBox and Zod
• Runtime type validation via discriminator pattern across multiple schema libraries
• Static validator utilities for number and string types
• Parameterized unit testing with Vitest
• CI-based lint, build, and test verification
• Automated static site deployment and project documentation generation
• AI-assisted feature development and pair programming using GitHub Copilot agentic workflows

Detailed Technical Notes

Interface-driven sketch model

• A shared Sketch interface defines the implementation contract for sketch modules.
• This keeps sketch integration consistent and reduces coupling between entrypoint and sketch logic.
• Evidence:
  • src/lib/sketch/sketch.ts

Entrypoint composition

• Application startup instantiates a sketch implementation and binds its main function to p5.
• This keeps orchestration logic centralized and minimal.
• Evidence:
  • src/main.ts

Sketch implementation pattern

• Sketch behavior is encapsulated in class methods mapped to p5 lifecycle hooks (setup, draw).
• This supports focused iteration on visual behavior while preserving shared conventions.
• Evidence:
  • src/sketches/00-hello-world/hello-world-sketch.ts

Quality validation workflows

• CI runs lint/build and test checks on push and pull_request to main.
• Build and test workflows run across multiple Node.js versions to improve compatibility confidence.
• Evidence:
  • .github/workflows/npm-build.yml
  • .github/workflows/npm-test.yml

Documentation and delivery workflows

• TypeDoc is configured for API documentation generation.
• GitHub Pages deployment is automated via Jekyll workflow configuration.
• Evidence:
  • typedoc.json
  • .github/workflows/gh-pages-jekyll.yml
  • docs/

AI-assisted development with GitHub Copilot

• GitHub Copilot is used for agentic coding workflows, including automated code generation, refactoring, and implementation of new features via natural language prompts.
• Copilot pair programming is used interactively during development to accelerate iteration and maintain code quality.
• Evidence:
  • .github/copilot-instructions.md

Schema-driven type definitions

• Runtime types for domain objects (Discriminable, Palette, PaletteColor, AspectRatioConfig) are derived directly from TypeBox or Zod schemas using Static<typeof Schema> or z.infer<typeof SCHEMA>.
• This eliminates duplication between the type definition and its validation logic and ensures that compile-time types and runtime validation stay in sync.
• Evidence:
  • src/lib/discriminator/discriminable.ts
  • src/lib/sketch/aspect-ratio/aspect-ratio-config.ts
  • src/lib/palette/palette.ts
  • src/lib/palette-color/palette-color.ts

Runtime type validation via discriminator pattern

• The Discriminator static class validates objects at runtime using a two-step approach: first checking a discriminator field for a type tag match, then applying the full TypeBox or Zod schema parse.
• This combines lightweight tag-based narrowing with exhaustive schema validation, and works uniformly across both schema libraries.
• Evidence:
  • src/lib/discriminator/discriminator.ts
  • src/lib/discriminator/discriminable.ts
  • src/lib/discriminator/discriminators.ts

Static validator utilities

• NumberValidator and StringValidator are static utility classes that expose reusable validation predicates and regular expression patterns (e.g., hex color format matching).
• Both classes use a private constructor with a runtime throw to prevent instantiation, ensuring they are always used as namespaces rather than objects.
• Evidence:
  • src/lib/number/number-validator.ts
  • src/lib/string/string-validator.ts

Parameterized unit testing with Vitest

• Unit tests use test.each for parameterized cases, covering valid and invalid inputs including boundary values (zero, negative numbers, non-finite values, empty strings, non-string types).
• Shared test input constants are centralized under test/utils/input/ and reused across test suites to keep coverage consistent.
• Evidence:
  • test/lib/number/number-validator.test.ts
  • test/lib/string/string-validator.test.ts
  • test/lib/discriminator/discriminator.test.ts
  • test/utils/input/