CCT — Study Materials

Multilingual slide decks for university classes, featuring interactive SVG diagrams and code examples.

Structure • Getting started • Subjects • Adding content • Stack

Structure

index.html                    ← subject catalog
subjects.json                 ← subject metadata
shared/                       ← shared across all subjects
  css/slides.css
  js/app.js                   ← generic slide renderer (ESM)
  engines/venn.js              ← SVG Venn diagram engine
maths/                        ← one directory per subject
  index.html                  ← lesson catalog
  lessons.json
  01-set-theory/
    {pt,en,es}.html           ← shell per language
    data/{pt,en,es}.json      ← slide content

Content lives in JSON files per language. Numeric data stays the same across languages — only strings are translated.

Getting started

npm install
npm run dev

The root catalog lists all subjects. Each subject has its own lesson catalog with language links.

Subjects

Subject	Lessons
Matemática Computacional	1

Adding content

New subject:

1. Create <subject>/ with index.html and lessons.json
2. Add entry to subjects.json

New lesson:

1. Create <subject>/<id>/ with data/{pt,en,es}.json
2. Copy an HTML shell, update <title>, lang, data-lang
3. Add entry to <subject>/lessons.json

Tip

app.js is generic — it renders any lesson that follows the JSON structure. No code changes needed to add content.

Stack

Component	Technology
Rendering	Vanilla JS (ESM)
Diagrams	Runtime-generated SVG (engines/venn.js)
Data	Per-language JSON
Styling	Pure CSS (1440×810px, 16:9)
Fonts	DM Sans, Space Grotesk, JetBrains Mono
Dev server	Vite (HMR)

Important

This is unofficial study material created by students with AI assistance. It does not represent the official position of the institution or its professors.