Public notes

How this portal is built

For anyone who wants to borrow, steal, remix, or learn from portal.tektinkers.com. This is the public page: HTML, CSS, JavaScript, and the small PHP JSON endpoints the front-end already calls. No login credentials, crypto, network information, internal topography, databases, or other private infrastructure.

Download Markdown portal-network.css portal-network.js Back to the starmap

What this includes

• Layout, palette, type, and page chrome
• Starmap views, hash URLs, crumbs, visit buttons
• SVG connector traces
• Canvas logo spheres (spin, lighting, readable facing)
• Corona / sun glow around hub globes
• Universe starfield: sage parallax layers from Astrozaar, no shooting stars (Universe, TekTinkers Galaxy, and behind the Zemew and Astro Gaming scene fields)
• Universe UFO Easter egg: Astrozaar ufo_02 crosses the main Universe view after 20 seconds
• Zemew starfield: stars, meteors, station, black hole
• Astro Gaming starfield: circular canvas field matching asrtogaming.com, plus the floating astronaut
• Live status badges (public JSON only)
• Reduced-motion and mobile behavior

Left out on purpose: login credentials, crypto, network information, internal topography/topology, databases, CMS ingest, server OS, and anything behind auth.

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

Stack

The portal is a static HTML page plus two small PHP JSON proxies. No framework, no bundler. Cache-bust with ?v= on CSS/JS after changes.

Fonts: Syne (display) and DM Sans (body).

Public files you can fetch

• https://portal.tektinkers.com/
• /css/style.css
• /css/portal-network.css
• /js/portal-network.js
• /js/mc-status.js
• Images under /images/ (including /images/ufo_02.png)

Status JSON (already called by the page):

• GET /api/mc_server_status.php — Minecraft Java status for the TinkersCraft badge
• GET /api/astrozaar_status.php — live player count for the Astrozaar.io badge

{ "online": true, "players": { "online": 3, "max": 20 } }

{ "online": true, "players": 7 }

Those endpoints are read-only JSON with a few seconds of cache. They do not expose accounts or admin surfaces.

Palette and type

CSS variables live in css/style.css.

:root {
  --bg-deep: #1a2826;
  --text: #f4e8c0;
  --accent-teal: #65a5a3;
  --accent-coral: #e25445;
  --accent-gold: #c78441;
  --accent-sage: #77866e;
  --font-display: "Syne", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
}

Page chrome

Behind the content: .bg-flares (blurred coral/gold/sage blobs), .grain (tiled noise), and .topo-particles (slow dots). Then a sticky header, a short hero (.gateway), the Universe map (.topo), and a footer. The public notes are linked from the footer in coral, with no underline. On desktop, Visit buttons overlay the top-right of the map so they do not push the constellation or the back control down.

The homepage is framed as the map of this digital world, not a directory of links. Hero copy: eyebrow TekTinkers Universe, title The map of this digital world, lead about zooming a galaxy and entering a world. The document title is TekTinkers Universe. Visit / Join buttons are how you leave a world on the map; they are not the page’s identity.

Starmap HTML contract

The map is #topo-map. Every planet or hub is a .node with data attributes:

Layout classes: node--live / node--soon, compass sides (node--west …), node--hub, node--star (current sun, applied in JS), node--sub (moons).

Desktop positions are CSS custom properties:

.topo__map[data-view="zemew"] .node[data-node="zemewstudios"] {
  --nx: 31%;
  --ny: 32%;
}

The node is position: absolute; left: var(--nx); top: var(--ny).

Marker types:

• Sphere: .node__marker.node__sphere.js-logo-sphere + wrap image + 128×128 canvas
• Photo: .node__marker.node__photo + object-fit: cover
• Icon: plain marker + transparent PNG (Astrozaar rocket)

Views and URL hash

js/portal-network.js keeps a VIEWS table. Internally the top view id is still galaxy (the URL hash is empty). Under the TekTinkers globe the caption is the usual TekTinkers label with Universe below it at 75% of the previous title size. In TekTinkers Galaxy the Network title is omitted, so the stack is TekTinkers plus Galaxy. Zooming a hub opens that network’s Galaxy (tektinkers, zemew, astrogaming). TekTinkers Galaxy includes Weather, Tools, Cloud, TinkersTunes (/images/tunes_sphere_wrap.png, two Subsonic logos on a slate wrap), Recall, and Gaming (/images/gaming_sphere_wrap.png, Twitch purple #9146ff with a controller on both faces, links to tektinkers.com/gaming). Top-right Visit buttons in that view cover the hub plus each of those spheres (#topo-visits-tektinkers).

setView(name) sets #topo-map[data-view], shows nodes whose data-in includes that view, marks the current sun, rebuilds crumbs and Visit buttons, starts view-only effects, and writes #tektinkers / #zemew / #astrogaming (Universe clears the hash).

.topo__map[data-view] .node { display: none; }
.topo__map[data-view="zemew"] .node[data-in~="zemew"],
.topo__map .node.is-in-view { display: flex; }

Below 1100px the map becomes a stacked list. prefers-reduced-motion: reduce freezes spins, starfield motion, the astronaut, and the UFO Easter egg.

Connector traces

An SVG overlay #topo-svg sits behind nodes (z-index: 1). JS draws a path from each visible node to its parent or to the current sun. Live links are a solid gradient; coming-soon links are dashed. Hover brightens related traces. data-bow="flip" mirrors that curve (Recall Arena).

Layer order, back to front: sage starfield canvas (0), Universe UFO (#topo-ufo, also 0, immediately after that canvas in the DOM), traces (1), hub / corona / flares (3), nodes / labels / buttons (4), then visit chrome (desktop overlay z-index: 8). The saucer therefore crosses in front of the stars and behind spheres, connecting lines, text, corona, flares, and Visit buttons.

Logo spheres

Any .js-logo-sphere with a source image and a canvas becomes a spinning globe.

Texture

• Default: billboard on a sphere. data-facing="readable" flips the back so text is not mirrored.
• data-map="wrap" — equirectangular wrap (weather, recall, gaming, TinkersTunes)
• data-spin-ms — milliseconds per revolution
• data-spin="-1" — reverse
• data-tilt — axial tilt in degrees
• data-zoom — crop in on a logo

Lighting

Each disk pixel has a normal. Light is either viewer (highlight in the middle) or hub sun (direction toward another globe’s on-screen box).

In Universe view Zemew and Astro Gaming take light from TekTinkers. In Zemew view the Zemew globe is viewer-lit; ZemewStudios and NachoNut take light from Zemew. In Astro Gaming view the hub is viewer-lit; the other globes take light from that sun.

Zemew, Astro Gaming, ZemewStudios, NachoNut, and Gaming mix the night value halfway toward full brightness so logos stay readable. Their CSS ::after shade is also halved. Specular blobs use --sun-x, --sun-y, --sun-shade.

Corona

.topo__hub-flames is a stack of blurred conic gradients and radial masks around the globe. The full .topo__hub-flames--grand corona (halo, wide glow, spinning core, rim, licks, and seven solar flares) is on the TekTinkers sun in Universe view, the Zemew sun in Zemew Galaxy, and the Astro Gaming sun in Astro Gaming Galaxy. In Universe view the Zemew and Astro Gaming globes use the same grand corona at half strength (.topo__hub-flames--soft: isolation: isolate, opacity 0.29 vs 0.58, flares use normal blend instead of screen) so TekTinkers stays the brightest sun. Flares on those two globes, and on the Zemew and Astro Gaming galaxy suns, are at half opacity of the TekTinkers jets. Their flare angles, delays, and lick rotation are offset so the three suns do not erupt in lockstep. In Astro Gaming Galaxy the flares use extra blur and normal blend (not screen) so they ease into the black circular field. The black-hole punch in Zemew uses the globe box, not the 28rem flame box, so the hole still passes behind the sphere.

Universe starfield

On every desktop galaxy view. Canvas #topo-universe-stars fills the map (left/top: 0; width/height: 100% — a canvas will not stretch from inset alone) with a radial fade around the constellation, behind traces and globes. No black fill — sage dots over the existing map. JS sizes the bitmap from the map box, not the canvas’s intrinsic 300×150 default. It sits behind the view-specific scene canvases (same z-index: 0, earlier in the DOM): #topo-zaar-stars in Zemew (Astrozaar artist’s corner) and #topo-astro-stars in Astro Gaming (the circular asrtogaming.com field). The fade uses a white-to-transparent mask (and mask-mode: alpha) so Chrome does not treat -webkit-mask-image as a luminance mask and punch the stars out.

The pattern matches astrozaar.io: three parallax layers at depths 0.3 / 0.6 / 1.0 (counts 90 / 120 / 150, the game’s 3:4:5 ratio scaled to the map), radius 0.5–2, alpha 0.3–1, twinkle 0.4 + 0.6 * abs(sin(t/400 + offset)). A slow camera drift makes nearer stars move faster. Colors are sage-family (#5d6a56, #77866e, #8d9c83, #c4d0b8) instead of the game’s white/cyan/pink/yellow. No shooting stars, meteors, or other props.

Universe UFO Easter egg

Main Universe view only (data-view="galaxy"), desktop, and not when prefers-reduced-motion is on. Markup is #topo-ufo, an <img> of /images/ufo_02.png placed immediately after #topo-universe-stars. After 20 seconds on Universe it makes a left→right or right→left pass, then later random passes (about 18–40 seconds apart). Leaving Universe resets the 20-second wait.

It uses Astrozaar’s green ufo_02 cruise, not the beam craft:

• Draw size 48 CSS px (the game’s in-arena size)
• tickSpeed = 4 + Math.random() * 2, speed (tickSpeed * 20) / 60 CSS px per ~16ms frame (~80–120 px/s)
• Heading wiggle is the game’s (Math.random() - 0.5) * 0.5, but only on the 20 tps server tick (not every animation frame) and clamped to about ±22° of the travel heading so the pass stays left→right or right→left
• Spawns off one side on a nearly horizontal heading, flips the sprite when going left, exits the far side
• pointer-events: none, same z-index: 0 as the star canvases, later in the DOM: in front of the sage stars, behind traces, globes, labels, buttons, corona, and flares

Hidden on the mobile list layout (max-width: 1099px).

Zemew starfield

Only in data-view="zemew" on desktop. Canvas #topo-zaar-stars sits behind the traces and in front of the sage Universe field.

Each frame: parallax stars, black hole (large, slow, counter-clockwise), meteors, space station, shooting stars, then a fade on all four canvas edges, then a soft punch-out where the Zemew corona sits so the hole passes behind the sun.

Speeds follow the Astrozaar menu field: rocks about 20–50 CSS px/s with a small tumble; station slower and unrotated; black hole slower still.

Four-edge fade uses destination-out linear gradients (~20% of the canvas) so objects ease in instead of clipping on a hard box.

Public sprites: /images/meteor02_128.png, meteor04_128.png, meteor05_128.png, spacestation_01.png, blackhole_03.png. Those are scene dressing from Astrozaar, not a license to ship the game.

Astro Gaming starfield

Only in data-view="astrogaming" on desktop. Canvas #topo-astro-stars sits behind traces and globes, and in front of the sage Universe field (z-index: 0).

The box is a centered square: left: 50%; top: 48%; with width and height both min(90vh, 70vw), then transform: translate(-50%, -50%). border-radius: 50% plus a CSS mask make it a soft circle instead of a clipped oval. Mask stops are white (not black): Chrome’s -webkit-mask-image is a luminance mask, so black would hide the whole field.

mask-image: radial-gradient(
  circle closest-side at 50% 50%,
  #fff 0%,
  #fff 40%,
  transparent 90%
);

The field matches asrtogaming.com: black fill, about 200 twinkling white stars with purple/cyan glow (#ad1fff / #39c1ed), and shooting stars from the edges with long colored tails. JS sizes the bitmap from the canvas box after the view is shown. The teal map grid (.topo__map::before) is hidden in this view so the field reads as space.

Astronaut

Astro Gaming view only. /images/astro_astronaut.png is absolutely positioned and bounced inside the map with a slow spin — same idea as the floater on asrtogaming.com. It sits with the starfield (z-index: 0, pointer-events: none), in front of the canvas pixels but behind traces, globes, coronas, and labels. Hidden with CSS except data-view="astrogaming".

Status badges (PHP, public contract)

js/mc-status.js finds #tc-mc-status and #az-arena-status, then fetches JSON every 5 seconds. Success → ONLINE plus a player count. Failure → OFFLINE.

PHP is only a read-only proxy: JSON content type, a few seconds of cache, probe a public game endpoint, return online and players. No database. No sessions.

If you reuse this, point the probe at your public game.

Borrowing recipes

• Constellation of links: nodes + data-in + data-parent + one data-view + CSS --nx/--ny.
• Spinning logo planet: square PNG, border-radius: 50%, canvas overlay, UV from a unit sphere, Lambert lighting.
• Sun from another planet: getBoundingClientRect() of both globes, build a light vector, set --sun-x / --sun-y.
• Starfield layer: one canvas, pointer-events: none, under SVG traces. Universe uses Astrozaar’s three depth layers and twinkle, in sage, with no streaks. Zemew fades edges in the draw loop with destination-out. Astro Gaming uses a square canvas, border-radius: 50%, and a circular mask-image so the field never shows a flat box edge. Mask gradients use white, not black — Chrome’s prefixed mask is luminance, and black would hide the canvas.
• Side-to-side Easter egg: an img after the star canvas, same z-index, cruise on a clamped heading, flip when going left.
• Live player badge: tiny JSON endpoint + 5s poll. Never put secrets in that JSON.

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

Reduced motion and mobile

• prefers-reduced-motion: reduce — no sphere spin, no starfield motion, astronaut parked, no UFO
• max-width: 1099px — vertical list, starfield and UFO hidden, no absolute constellation

Respect both if you fork the map.

Credits

• TekTinkers portal UI and this write-up: meant to be learned from
• Zemew, NachoNut, TinkersCraft, Astro Gaming: their own sites and marks
• Astrozaar meteors, station, black hole, and ufo_02: from the Astrozaar game, used here as scene dressing

Questions about reuse of art (not code): ask the project that owns the image.

Last updated: 26 August 2026. These notes are updated when the public portal page changes. Plain-text twin: /built.md.