A content-rich website for BannerVC

A modern web application built with ◆ by
The Lossless Group
SSG and Styles with Astro and Tailwind CSS v4 for BannerVC

Modern site generation, presentations, styling, testing, and 3D graphics.

What's New in v0.0.6

All Three Portfolio Companies Live

Impulse Space is now pulling 139 jobs via the Pinpoint JSON API — including structured salary data that Greenhouse and Ashby don't provide. All three portfolio companies are live with zero custom scraping needed.

192 live job listings across 3 portfolio companies, updated daily.

Universal Snippet Sanitization

Job board APIs return descriptions in wildly different formats — HTML entities (Greenhouse), plain text with boilerplate (Ashby), raw HTML with comment nodes (Pinpoint). The scraper now runs a universal sanitization pass on all snippets regardless of provider: decode entities, strip HTML tags, extract unique content past boilerplate headings. Every card shows clean, role-specific text.

What's New in v0.0.5

Portfolio-Wide Job Aggregator

Banner.vc now aggregates open positions across its entire portfolio — automatically, daily, and for free.

Instead of paying Getro or Portfolio Jobs thousands per year for a job board widget, the site scrapes portfolio company careers pages directly. All three portfolio companies use hosted job boards with free public JSON APIs (Greenhouse, Ashby, Pinpoint).

192 live job listings across 3 portfolio companies, updated daily.

How it works:

1. pnpm validate:careers — Build-time script that verifies each portfolio company's careers URL is reachable and auto-detects their job board provider (Greenhouse, Ashby, Lever, etc.)
2. pnpm scrape:jobs — Fetches live job data from provider APIs, normalizes it to a common schema, deduplicates against prior runs, and writes jobs.json + jobs-meta.json
3. Astro renders the /jobs page statically from that data at build time

Zero extra dependencies. Scripts run on Node 22's native TypeScript support (--experimental-strip-types). No tsx, no ts-node, no bundler.

Smart snippet extraction. Job descriptions typically start with 300+ words of identical company boilerplate. The scraper detects section headings like "Responsibilities" and starts the preview snippet from the unique content — so every card shows what actually differentiates the role.

What you see at /jobs:

• Company tabs with mode-aware logos (light/dark) and job count badges
• Jobs grouped by portfolio company with OG image banners
• Medium-sized cards showing title, department, location, seniority, and a unique snippet
• "Apply" links that open the original posting in a new tab

Component library (pick your favorite):

Clients pick their preferred card size and layout in src/config/jobs.ts.

Portfolio companies in this release:

Full spec: See context-v/specs/Portfolio-Wide-Job-Aggregator.md in the astro-knots repo for architecture, data models, scraping strategy, component specifications, and future plans including "Put Your Name in the Arena" — a candidate pipeline where job seekers connect via LinkedIn and the VC firm curates warm introductions to portfolio hiring managers.

Brand Color Migration

The site's primary color has been migrated from crimson red to Banner Blue (#0052E6) across all three theme modes:

• All semantic tokens (--color-primary, --color-ring, effect tokens)
• Header navigation underlines and dropdown hover states
• Card borders, glows, and shadow effects
• Job component accents (tags, badges, CTAs, tab underlines)

The color system remains fully token-driven — change --color-brand-blue in emblem-theme.css and everything follows.

Dependency Updates

All dependencies bumped to latest:

Features

Multi-Mode Theme System

A sophisticated theming engine that adapts to user preference with three distinct visual modes:

• Light Mode — Clean, professional aesthetics with ivory backgrounds and blue accents
• Dark Mode — Bold, confident design featuring deep navy backgrounds with vibrant highlights
• Vibrant Mode — High-impact expressive styling with dramatic glows and maximum contrast

The theme system uses semantic CSS tokens that cascade automatically — change one color and watch the entire interface adapt. Mode preferences persist across sessions via localStorage.

Developer Changelog

A polished changelog system for tracking development progress, inspired by Linear, Notion, and GitHub Releases:

• Timeline View — Stripe-inspired vertical timeline grouped by month with animated interactions
• Cards View — Filterable card grid with category badges and gradient headers
• Releases View — GitHub-style collapsible release notes with version tags

Each entry supports rich markdown with:

• Aurora-X syntax highlighting for beautiful code blocks
• Mermaid diagram rendering for flowcharts and architecture visuals
• Claude AI attribution badges for AI-augmented development
• Tag-based filtering and shareable view URLs

Visit /changelog to explore the development timeline.

Design System Hub

An internal reference for collaborators documenting the complete theming system:

• Theme Tokens — Brand colors, semantic tokens, effect tokens across all modes
• Visual Swatches — Color palette with CSS variable names and hex values
• Mode Comparison — Side-by-side token values for light, dark, and vibrant
• Usage Examples — Syntax-highlighted code showing CSS variables, Tailwind classes, and helper utilities

Visit /design-system to explore the documentation.

Flare: Three.js Visual Effects

A collection of animated WebGL visual effects for hero backgrounds and decorative elements:

• PlanetRising — Dotted sphere with configurable lighting, parallax, and breathing animation
• EclipseEnding — Crescent illumination effect with sharp falloff and slow rotation
• BannerFlag — Animated brand icon with thick wavy lines and tilted flagpole

Each Flare component is configurable, performant, responsive, and theme-aware.

Visit /design-system/flare to explore the effects gallery.

Built With

• Astro 6 — Lightning-fast static site generation
• Tailwind CSS 4 — Utility-first styling with custom theme integration
• Three.js — WebGL-powered 3D graphics and animations
• Shiki 4 — VS Code-quality syntax highlighting
• Node 22 — Native TypeScript execution for build scripts
• Content Collections — Type-safe markdown with Zod schemas

Commands

All commands are run from the root of the project: