Alex Stevovich Web Development (2022)

The following is an abbreviated scope of work. A full itemized scope is listed at the conclusion of this article.

alexstevovich.com is a deeply personal project as much as it is a technical one. It represents a deliberate reorientation of my career toward strategic and directorial work, grounded in the polymathic execution mastery that defines my practice. The site needed to carry that argument on its own: not by trimming my work to a curated highlight reel, but by presenting the full context, the range, the depth, and the volume of what I have built and made across every domain I work in.

The design philosophy follows from this. The site is allowed to be comprehensive and at times obtuse. It is not optimized for casual browsing and does not pretend to be. The content is technical, specialized, and broad in ways that are rarely all relevant to a single viewer. Instead the architecture assumes that most visitors arrive at a specific linked article and the site's relational structure then surfaces related content that viewer is likely to find interesting. Long list views are embraced rather than avoided. The full archive is visible. Nothing is hidden to maintain a cleaner surface impression.

This is not a portfolio in the conventional sense. It is a living record.

The visual identity reflects this ambition. The site operates in both light and dark modes with full component support across both.

A foundational requirement of the platform was scalability to a degree rarely considered in personal site design. The site launched with thousands of content pages and is architected around a projected ceiling of 100,000 articles over its operational lifetime, which I anticipate aligning with my natural lifespan. Within this range, the core engineering requirement was O(1) content scaling: adding an article must carry no escalating build cost, no performance degradation, and no requirement for full site rebuilds. Individual articles can be built, edited, and deployed in isolation.

The site's content is organized into a corpus, a large unified repository where articles exist as self-contained units of Marle JSON documents accompanied by their associated media. This structure makes the data straightforward to source control, preserving all writing, metadata, and assets that constitute the archive. A collection of Python optimization and mass editing scripts provides tooling for working across this body of content efficiently. A promotion script advances corpus data to the web archive data seed when ready.

The site functions as a relational database. Articles are aware of each other and cross-reference related content. On hot reload, the site ingests its data seed and assembles all relational data in a single build step, producing a fully cross-referenced archive from one unified source. CSS and JavaScript are bundled and optimized as part of this build step as well.

The server is built on Fastify, configured to behave as close to a static server as possible. Static assets including images are served as a static server would handle them, keeping the system simple and performant despite the dynamic nature of the content.

Pages are rendered server-side through Lydio, my custom HTML rendering framework, utilizing server-side rendering over I/O rather than loading from disk. For large content types with many articles, a templated Lydio page reads Marle JSON documents at runtime, producing individual article renders from a single template. This eliminates the need for full static site rebuilds when individual articles are edited and allows dynamic components and engagement features to function in real time.

The runtime renderer dynamically identifies which JavaScript libraries are required based on the components present on each rendered page and delivers only those libraries, keeping page weight minimal and avoiding unnecessary script loading across the archive.

The site organizes content across a set of semantic types built on Marle articles: Portfolio, Projects, Writing, Products, People, Practices, and Capabilities. Writing and Portfolio carry further divisions by discipline, broad domain, and series. These types are interconnected and their relational data is assembled at hot reload through cross-referencing of the core data seed.

Beyond semantic types, the site supports a range of resource views for specific content formats. Docs are multipage documents used primarily for API tutorials and technical guides. Repos are hierarchical file listings. Posts are short-form written content and images. General articles are untyped updates and references. Interfaces are embedded calculators, generators, and interactive tools, transposed and expanded from the interface library developed for Midnight Citylights, now integrated into the unified platform.

Interface modules leverage client-side JavaScript for calculations achievable in the browser and server-side API calls for more complex operations including true random generation, advanced mathematics, and image generation. The runtime renderer identifies required JavaScript dependencies per page and loads them dynamically.

alexstevovich.com absorbed the technology and content of CSKY, Midnight Citylights, and Fractal Bouquet, representing a second generation of the core display systems developed across those platforms. Three.js integration for interactive 3D asset display was carried forward and enhanced. The proprietary image comparison slider developed for Fractal Bouquet was integrated and refined, allowing draggable before/after comparison of production work including shader passes, texture variations, and lighting stages. Marle article display was developed to a second generation with full light and dark mode support and novel effects leveraging runtime rendering.

The archival figure display system, originally developed for CSKY to handle the presentation of design work built around fine art, was carried forward and extended to serve the broader archive.

A custom image parser was developed to deliver aspect ratio information lazily and on demand to the runtime renderer. This means all images across the archive are aspect-ratio-known at render time, producing layouts that require no reflow or redraw as images load. The solution operates with no build step and adds no overhead regardless of archive scale, satisfying the O(1) scalability requirement for image-rich content.

An automated audit system was developed as a set of external scripts operating independently from the website server. The system leverages a locally run large language model through Ollama, currently Qwen3, to passively browse and audit the site for missing data, typographic errors, and content mistakes. The audit can be run on demand in the background without affecting site performance. The use of a local model means the process carries no API cost and no external data exposure. The specific model is intentionally abstracted and subject to change as better local options emerge, with the system designed to be model-agnostic.

A fully responsive layout was implemented across all content types and display formats to ensure consistent presentation across screen sizes and devices.

Structured metadata including Schema.org markup was implemented across all relevant page and content types. Semantic HTML, descriptive metadata, and logical pagination support search indexing across a large and varied archive. The site architecture supports both human navigation and deep search engine crawlability at scale.

The site was developed with attention to accessibility standards throughout. Clear semantic structure, descriptive image metadata, and consistent navigation patterns were prioritized across all content types and display formats.

Some of the artwork displayed on the website as figures represents design layouts showcasing the artwork of other fine artists. In these cases artwork is copyright of their respective rights holders.