Building renkara.com: A Corporate Site in the Age of AI

About the author: I'm Charles Sieg, a cloud architect and platform engineer who builds apps, services, and infrastructure for Fortune 1000 clients through Vantalect. If your organization is rethinking its software strategy in the age of AI-assisted engineering, let's talk.

On March 28, 2026, I committed the first file for renkara.com. Twelve days later, the site had 54 pages, a WebGL particle animation system, a complete 18-year company timeline with 60+ milestones, 14 tool showcase pages with lightbox screenshot galleries, legacy product pages with original artwork from 2008, a blog, dark mode, and a build pipeline that minifies everything to a deployable dist/ directory. No framework. No SSR. No CMS. Pure HTML, CSS, and JavaScript.

This post is about how the site was built, what makes the timeline and tools sections distinctive, and why a static architecture was the right choice for a corporate presence.

The Architecture Decision

renkara.com is a static HTML site. No React. No Next.js. No Astro. Every page is a standalone HTML file with shared CSS and JavaScript loaded via standard <link> and <script> tags. The build pipeline is four Node.js scripts: one for timeline generation from markdown, one for HTML/CSS/JS minification, one for image optimization via sharp, and one for generating tool icons from Lucide SVG glyphs.

The decision was deliberate. A corporate website does not need hydration, client-side routing, or a virtual DOM. It needs fast loads, reliable rendering, and zero JavaScript dependencies in the critical path. The entire site loads in under 2 seconds on a 3G connection. The CSS is a single file. The JavaScript is two files (main.js for interactions, mesh-gradient.js for the WebGL hero).

Static does not mean simple. The design system has 40+ CSS custom properties covering a full color palette, typography scale, spacing grid, radius scale, shadows, and animation timings. Every page supports light and dark mode via a data-theme attribute toggled by a sun/moon button in the navigation. The theme persists in localStorage and respects prefers-color-scheme on first visit.

The Timeline

The timeline is the heart of the site. It tells the story of Renkara Media Group from February 2008 (when Apple announced the iPhone SDK) through April 2026 (when AccelaStudy AI launches). Sixty-plus entries span 18 years of product launches, milestones, patents, and pivots.

Each timeline entry has a date, title, body text, and optional image. The layout alternates left and right along a vertical spine with a fill line that tracks scroll progress. Tags categorize entries: Launch (green), IP (blue), Milestone (purple), Innovation (teal), Tool (amber). Images are lazy-loaded and some trigger lightbox galleries with prev/next navigation showing original App Store screenshots from 2008 through 2013.

The content is rich with specific detail. The Chuck Norris cease-and-desist letter from Patton Boggs LLP in December 2008. The $2,420 daily sales record on January 10, 2010, when Flashcard Champion hit #1 in Paid Education. iPhraseBook selected as iPad App of the Week globally in April 2011, built with HarperCollins licensed content. The Parse shutdown in 2017 that forced a complete cloud rewrite. KanjiPictoGraphix developed in partnership with Michael Rowley, author of the acclaimed Kanji Pict-O-Graphix books.

These are not marketing bullet points. They are the actual history, with dates, dollar amounts, partner names, and screenshots to prove it. A timeline like this cannot be generated; it has to be curated from 18 years of records, emails, press releases, and App Store Connect screenshots.

The timeline CSS is its own stylesheet (timeline.css) with responsive behavior: on desktop, entries sit side by side with the spine between them; on mobile, everything stacks vertically. The timeline fill animation uses a CSS custom property driven by JavaScript IntersectionObserver, coloring the spine as the user scrolls through the years.

The Tools Section

The tools page organizes 14 internal applications into four logical groups: Development and Operations, Marketing and Communications, Finance and Business, and Productivity. Each tool card shows the tool's generated icon (rendered from Lucide SVG glyphs in 8 sizes via a Node.js script), a category eyebrow, the tool name, a one-sentence description, and a "Learn more" link to a detail page.

Each tool detail page is a full showcase. A hero section with the tool's accent color. A screenshot gallery with theme-aware images (light screenshots in light mode, dark screenshots in dark mode, swapped automatically via a data-theme-img attribute and JavaScript). Lightbox zoom with keyboard navigation. A feature grid. Technical specifications. Integration points with other tools in the fleet.

The icon generation pipeline is worth noting. Every tool icon starts as a Lucide glyph ID and an accent color. A Node.js script renders each glyph onto light and dark backgrounds at 8 sizes (16px favicon through 1024px retina) using canvas. The output is 14 icons x 8 sizes x 2 themes = 224 icon variants, all generated from a single configuration object. When a tool's icon concept changes, one npm run build:icons regenerates everything.

The screenshot galleries use a data-gallery attribute pattern for grouping. Each tool has 4-17 screenshots captured in both light and dark mode via Playwright automation. The screenshots show real data seeded by custom scripts that generate plausible content (not lorem ipsum), so every screenshot tells a story about actual functionality.

The WebGL Hero

The most visually distinctive element is the animated mesh gradient in hero sections. Three thousand particles flow right-to-left with organic wave motion, rendered via Three.js with custom vertex and fragment shaders. Connection lines draw between nearby particles (capped at 5,000 for performance). The mouse position influences particle behavior, creating a subtle interactive effect.

The gradient is theme-aware: light mode uses a navy-blue-slate palette; dark mode shifts to deeper blues with cyan accents. The animation respects prefers-reduced-motion by checking the media query before initializing. Three.js loads lazily from CDN only when a hero section with the gradient class enters the viewport. When the hero scrolls out of view, the animation pauses to save GPU cycles.

The shader code is inline in mesh-gradient.js. The vertex shader applies sinusoidal displacement based on time and particle position. The fragment shader renders soft circular particles with a glow falloff. The connection lines use a separate line geometry that updates each frame, culling connections beyond a distance threshold.

The Build Pipeline

Four scripts handle the transformation from source to deployable output:

1. build-timeline.js: Reads timeline.md (markdown source) and injects the rendered HTML into timeline.html at a marked insertion point. This was later simplified; timeline.html became its own source of truth.
2. build.js: Minifies all HTML (html-minifier-terser), CSS (cssnano via PostCSS), and JavaScript (terser). Copies images and other assets verbatim. Outputs everything to dist/.
3. optimize-images.js: Runs sharp on all images in the images directory. Resizes, compresses, and converts where appropriate.
4. generate-tool-icons.js: Renders Lucide glyphs to PNG at 8 sizes in light and dark variants.

The deployment target is S3 + CloudFront. Staging goes to staging.renkara.com and production to renkara.com. Both use npm run deploy:staging or npm run deploy:prod, which sync the dist/ directory to S3 and create a CloudFront invalidation.

What I Would Not Change

The static architecture was correct. Every page is a single HTTP request for HTML, one for CSS, and two for JavaScript. There is no client-side routing, no loading spinners, no hydration delay. The entire site works with JavaScript disabled (minus the theme toggle and gradient animation). Search engines see complete HTML on first request.

The custom CSS approach was also correct. A single 600-line stylesheet with well-named custom properties provides full dark mode, responsive behavior, and consistent spacing without any framework overhead. Tailwind would have added build complexity and made the HTML harder to read. CSS Modules would have required a build step for every page change. Plain CSS with custom properties is the right tool for a 54-page static site.

The WebGL gradient was worth the complexity. It gives the site an identity that a stock hero image or CSS gradient cannot. The performance cost is minimal (lazy loading + pause when offscreen) and the visual impact is immediate. Corporate sites that look corporate get forgotten. This one does not.