# How TekTinkers.com is built

Public notes for anyone who wants to borrow, steal, remix, or learn from [tektinkers.com](https://tektinkers.com/).

This document covers the **public site**: HTML structure, CSS, JavaScript, and the small JSON endpoints the front-end already calls. It does **not** include login credentials, crypto, network information, internal topography/topology, databases, or other private infrastructure.

- Live site: https://tektinkers.com/
- This write-up: https://tektinkers.com/built.html
- Markdown copy: https://tektinkers.com/built.md

You may save, scrape, print, or mirror this page. Techniques here are meant to be reused.

Brand logos and character art still belong to their projects. Reuse the **methods**. Ask before republishing those images as your own brand.

The portal at [portal.tektinkers.com](https://portal.tektinkers.com/built.html) has its own notes.

---

## What this includes

- Polar palette, type, sticky header, footer
- Homepage sections (hero, education, experience, volunteer, projects)
- Theme switcher (Default / Spooky / Holiday)
- Public subpages: Gaming, Gamer Garage, AI Arcade Games, 404 mini-game
- Live TinkersCraft status badge (public JSON only)
- Optional page-view ping (public JSON only)

## What this leaves out

- Login credentials: usernames, passwords, API keys, cookies, session secrets
- Crypto, certificates, and other secrets
- Network information: IPs, internal hostnames, firewalls, reverse-proxy config, server topography/topology
- Databases, CMS, feed ingest internals
- Server OS and anything behind auth
- Step-by-step attack or exploit material

If a file is already served to browsers (HTML, CSS, JS, images), you can fetch it directly. That is the intended public source.

---

## Stack

Most pages are **static HTML** plus shared CSS and JS.

| Piece | Role |
| --- | --- |
| `index.html` | Homepage |
| `css/style.css` | Polar palette, header, footer, homepage layout |
| `js/script.js` | Year, themes, optional track ping, Minecraft status |
| `gaming/index.html` | Gaming directory |
| `gamergarage/` | Gallery page + public image-list JSON |
| `ai-arcade-games/` | Browser mini-games |
| `404/` | Custom 404 with a tiny paddle game |
| PHP under `/api/` | Small public JSON the front-end already calls |

No framework, no bundler. Cache-bust with `?v=` on CSS after changes.

---

## Public files you can fetch

- https://tektinkers.com/
- https://tektinkers.com/css/style.css
- https://tektinkers.com/js/script.js
- https://tektinkers.com/gaming/
- https://tektinkers.com/gamergarage/
- https://tektinkers.com/ai-arcade-games/
- Images under https://tektinkers.com/images/

JSON the front-end already calls:

- `GET /api/mc_server_status.php` → `{ "online": true, "players": 3 }`
- `POST /api/track.php` → `{ "path": "/" }` (skipped if Do Not Track is on)
- `GET /gamergarage/php/list_gallery.php` → `{ "albums": [ { "name", "slug", "images": [ { "full", "thumb" } ] } ] }`

Those endpoints are read-only (or a tiny path ping). They do not expose accounts or admin surfaces.

---

## Palette

CSS variables live in `css/style.css`.

| Token | Hex | Use |
| --- | --- | --- |
| Polar deep | `#065758` | Page background |
| Polar ice | `#E2F0EF` | Body text |
| Polar mist | `#A9D4D6` | Muted text |
| Polar sea | `#82C3C5` | Secondary accent |
| Polar coral | `#C46960` | Accent, footer “How it's built” |

```css
:root {
  --bg: #065758;
  --text: #E2F0EF;
  --muted: #A9D4D6;
  --accent: #C46960;
  --accent-2: #82C3C5;
}
```

---

## Page chrome

Sticky `header` with `.nav` and the brand mark. Homepage also has a **Themes** menu. Footer `.foot` is centered: copyright plus a coral, undecorated **How it's built** link to `/built.html`.

Holiday mode can show an extra footer line and string lights on the header. That is CSS (`body.holiday-on`), not a second site.

---

## Theme switcher

`js/script.js` adds `spooky-on` or `holiday-on` on `body`.

- **Default** — polar teal
- **Spooky** — October by calendar; swaps some images from `/images/themes/spooky/`
- **Holiday** — day after Thanksgiving through 15 January; `/images/themes/holiday/`

A saved pick in `localStorage` only sticks for the current season. A new October or holiday window falls back to the calendar default.

---

## Homepage

Ordinary HTML sections with fragment ids (`#education`, `#experience`, `#volunteer`, `#projects`, `#ai-disclaimer`). The hero is a two-column grid (text + illustration) that stacks on small screens.

Outbound buttons (Portal, Zemew, Gaming) are just links.

---

## Subpages

**Gaming** (`/gaming/`) — same header/footer chrome, page-specific sections for Discord, games, bots, Twitch links.

**Gamer Garage** (`/gamergarage/`) — gallery grid. JS asks the public list endpoint, then shows thumbs and a lightbox.

**AI Arcade Games** (`/ai-arcade-games/`) — canvas games in the browser. Scores can save to a small public leaderboard JSON. Game code is in `/ai-arcade-games/games/`.

**404** (`/404/`) — short message plus a paddle mini-game. Keep the ball alive to “win.”

---

## Borrowing recipes

**Polar page:** CSS variables on `:root`, sticky header, max-width container, coral accent buttons.

**Seasonal theme:** calendar check + `body` class + optional image swap from `/images/themes/{name}/`.

**Footer credit line:** one coral link, `text-decoration: none`, pointing at your own `/built.html`.

Copy CSS/JS from the live URLs above. Change art, names, and URLs to yours.

---

Last updated: 26 August 2026. These notes are updated when the public tektinkers.com pages change.