13 / Design

Site Design & Architecture

A technical brief on the intent, design systems, optimizations, and security policies governing this digital archive.

Design Philosophy

Intentional Simplicity This site looks simple because it is built for content focus, high information density, and absolute readability. It deliberately avoids heavy web assets, unneeded Javascript modules, or distracting visual effects that delay reading or waste mobile bandwidth.

Editorial Grid & Typography Using a typography-first print aesthetic, layout width is strictly locked to 68ch (~680px) for optimal line length. Plus Jakarta Sans handles titles, code, and content contextually to maintain typographic rhythm.

Systemic Theme Adaptation Five bespoke themes (Light, Dark, Paper, Pista, Amber) are constructed via standard CSS variables in tokens.css, preventing Flash of Unstyled Content (FOUC) through script execution in the document head.

Security & Privacy

Content Security Policy (CSP) A strict CSP meta tag prevents cross-site scripting (XSS) and unauthorized code injections by strictly locking down script, style, connection, and image source domains to approved origins (e.g. self, google tag manager).

GDPR-Compliant Cookie Gating No analytics script is loaded, and no tracking cookie is placed until explicit consent is given. User consent state persists in secure same-site cookies, and electing to decline automatically purges all active Google Analytics cookies from the browser.

Local-First Storage Policies All state (like color theme and welcome status checks) is handled strictly on the user's client using standard API methods. No telemetry or behavior profiling is sent to external databases.

SEO & Performance

JSON-LD Structured Data The home page carries structured schema tags declaring profile metadata, alumni records, and social indices, helping search crawlers understand associations accurately.

Semantic DOM Hierarchy The site adheres strictly to WCAG accessibility recommendations and HTML5 semantic elements (aside, main, nav, section, article), enabling clean screen-reading and improved indexing rankings.

OpenGraph & Social Previews Optimized preview metadata (Twitter Cards and OG tags) is declared per-page with unified assets to ensure crisp visual summaries when sharing links.

Future Roadmap

Server-Side CSP & HSTS Moving CSP rules to dynamic server HTTP response headers (via Cloudflare Workers) to enforce HSTS (HTTP Strict Transport Security) and cache control parameters.

Client-Side Search Indexing Integrating a localized, lightweight search engine (like Lunr.js or FlexSearch) to allow users to search project logs, research summaries, and notes fully offline.

Next-Gen Media Delivery Automating WebP/AVIF media format transcoding via build scripts, matching browser support dynamically to further reduce image payloads on slower networks.