Case Study & Site Architecture
Developer Portfolio & Writing Engine
A lightweight, performance-focused personal platform engineered with CSS Cascade Layers, custom design tokens, connected Schema.org `@graph` metadata, and sub-second rendering.
Sub-second paint performance with zero runtime render-blocking bottlenecks.
Pre-connected typography, critical path CSS, and minified production bundles.
Canonical URLs, semantic headings, sitemap indexing, and structured graph schemas.
Interconnected WebSite, Person, WebPage, and TechArticle entity nodes.
Engineering Goals & Philosophy
A modern developer portfolio must serve as a living demonstration of technical mastery. Rather than relying on heavy frontend frameworks or heavy JavaScript bundles, this platform was built using vanilla web standards—CSS Cascade Layers (@layer), design tokens, native ES modules, and a fully connected JSON-LD Schema graph.
Technical Architectural Highlights
-
CSS Cascade Layers & Design Tokens: Uses
@layer reset, tokens, layout, components, utilitiesto prevent specificity conflicts and enforce global design consistency across all subpages. -
Interconnected Knowledge Graph (`@graph` JSON-LD): Every page embeds a connected Schema.org graph linking the site (
WebSite), publisher (Person), page entity (WebPage/ProfilePage), and published case studies or articles. -
Build & Minification Pipeline: Integrated
esbuildcompilation pipeline inpackage.jsonproducing streamlined assets (style.min.cssandscript.min.js). -
LLM & Search Machine Readability: Fully structured
llms.txtfile and semantic heading hierarchy enabling AI agents and crawlers to accurately parse professional credentials and technical services.
Performance & Audit Evidence Report
Core Web Vitals Benchmark Report
| Audit Metric | Measured Result | Google Web Vitals Threshold | Audit Verdict |
|---|---|---|---|
| First Contentful Paint (FCP) | 0.5 seconds | < 1.8 seconds | GOOD (PASSED) |
| Speed Index | 0.7 seconds | < 3.4 seconds | GOOD (PASSED) |
| Largest Contentful Paint (LCP) | 0.8 seconds | < 2.5 seconds | GOOD (PASSED) |
| Total Blocking Time (TBT) | 0 ms | < 200 ms | GOOD (PASSED) |
| Cumulative Layout Shift (CLS) | 0.000 | < 0.100 | GOOD (PASSED) |
Verification & Related References
- Empirical Audit Evidence: Inspect valid Schema graph & JSON-LD validation logs
- Related Technical Article: Read the developer portfolio SEO architecture guide
- Author Profile & Bio: Learn more about the developer, Adrin Shrestha
- Related Case Study: View the Dice Roller architecture case study →