Botchan
INDEX 00 / GIT ARCHITECTURE & NOTES

Botchan Learning Git topologies and modular software architectures from first principles.

A public notebook and commit graph by a beginner developer studying version control internals, directed acyclic graphs, and dependency-free web systems with plain HTML, CSS, Vanilla JavaScript, and Three.js.

INSPECTED COMMIT NODE BRANCH: main

merge: integrate arch/state-tree into main portfolio layout

COMMIT: c09f4a2 PARENTS: c07c4f1, c08e5a3 2026-10-24
01. Now Building 02. Read Learning Log
3D GIT DAG — 1 MAIN / 2 SIDE BRANCHES
MAIN FEATURE / ARCH
COMMIT SEQUENCE:
01

Now Building

CURRENT FOCUS
REPOSITORY / EXPERIMENT

git-dag-visualizer

STATUS: [in progress]

Constructing a zero-dependency Git commit graph parser and 3D spatial renderer. Focused on understanding how parent commit pointers form a directed acyclic graph (DAG), how three-way merges reconcile divergent side branches, and how to separate pure state data from rendering logic.

BRANCH: feat/webgl-graph STACK: VANILLA JS + THREE.JS r160 TARGET: GITHUB PAGES
02

Log

  • THREE.JS

    Decoupled scroll offset from the PerspectiveCamera by moving the parent THREE.Group along the Y-axis instead, preventing gimble and target conflicts with OrbitControls damping.

  • GIT

    Practiced resolving a non-fast-forward merge between main and two feature branches; mapped how merge commits store two parent SHA hashes in chronological order.

  • ARCHITECTURE

    Refactored portfolio state into a single declarative CONFIG object so both the WebGL 3D scene and the 2D SVG fallback read from identical commit node coordinates.

  • THREE.JS

    Added IntersectionObserver to pause the requestAnimationFrame loop when the hero canvas leaves the viewport, plus prefers-reduced-motion checks for accessibility.

  • GIT

    Learned the difference between git reset, git revert, and git checkout when inspecting historical commits in a detached HEAD state.

03

Projects

SELECTED REPOSITORIES
03.1 [in progress]

commit-graph-3d

Interactive 3D Git commit history visualizer built with Three.js v0.160.0 ES modules, OrbitControls, and an automatic 2D SVG fallback.

HTML · CSS · THREE.JS GitHub ↗
03.2 [learning]

state-tree-sandbox

Minimalist Vanilla JS architectural study comparing event-bus patterns, immutable state trees, and unidirectional data flow without frameworks.

VANILLA JS · ES MODULES GitHub ↗
03.3 [done]

git-worktree-notes

Plain-text field guide and shell script collection documenting branching workflows, rebasing diagrams, and clean commit hygiene.

GIT · SHELL · MARKDOWN GitHub ↗
04

Stack

CURRENTLY LEARNING
  • 01 HTML
    SEMANTIC DOCUMENT STRUCTURE & ACCESSIBILITY Landmarks, ARIA live regions, keyboard navigation, and zero-bundler ES module import maps.
  • 02 CSS
    CUSTOM PROPERTIES & 1PX ARCHITECTURAL GRIDS Theme tokens, responsive fluid typography, tabular numerals, and reduced-motion media queries.
  • 03 Git
    DIRECTED ACYCLIC GRAPHS & BRANCH TOPOLOGY Commit parent pointers, feature branch isolation, three-way merges, and history inspection.
  • 04 Three.js
    SCENE GRAPHS, RAYCASTING & ORBIT CONTROLS Object3D hierarchies, buffer geometries, dynamic material syncing, and viewport-aware rendering.