Focused components
Base and demo layouts own page shells. Disclosure, navigation, breadcrumbs, service cards, service templates, and art-directed media each have a clear semantic responsibility.
Self-initiated frontend case study
Building an honest, performance-budgeted fictional energy demo
Lumen Coast Energy is not a client or trading business. I created this concept to demonstrate how a polished small-business interface can remain accessible, technically disciplined, and explicit about what is fictional.
The brief
Make a credible interface without manufacturing credibility
The design problem was deliberately awkward: create the clarity and depth expected from a home-energy website without inventing a customer, installation, review, accreditation, address, award, partner, or performance claim.
The result separates a real, indexable portfolio case study from seven crawlable but non-indexable fictional demo routes. Every demo page carries the same visible disclosure, and the estimator is presented as a synthetic comparison rather than a quote or recommendation.
- Project status
- Working portfolio concept
- Production output
- 10 static routes
- Runtime framework
- None
- Third-party scripts
- Zero
Responsive implementation
One content hierarchy, composed for wide and narrow screens
These are real captures of the local production preview on 11 August 2026. They show the fictional demo homepage—not a design mockup or a live customer site.
Implementation approach
Constraints were translated into reusable boundaries
Define truth and route contracts
Shared configuration centralises routes, the exact fictional disclosure, service content, estimator defaults, and performance budgets before presentation is added.
Build semantic static pages
Astro layouts provide metadata, landmarks, the shared demo shell, and optimized local images while sending HTML by default.
Add one progressive interaction
A small page-specific TypeScript module updates the estimator. The approved synthetic example remains readable without it.
Structured content
The three service routes read from one typed data structure, so navigation labels, metadata, cross-links, images, and limitations stay consistent without flattening their distinct content.
Local asset pipeline
One Manrope WOFF2 subset and repository-owned raster assets are processed locally. Astro generates explicit dimensions and responsive AVIF/WebP candidates without runtime image services.
Accessibility decisions
Native behavior first, enhancement where it adds meaning
- One useful h1 and one main landmark on every HTML route.
- A first-focus skip link and visible two-pixel focus outline.
- A native details/summary mobile menu with text and icon state.
- Labels, hints, linked inline errors, and a single polite estimator status announcement.
- Forty-eight-pixel controls, responsive text, and reduced-motion behavior in the shared stylesheet.
Honest technical SEO
Index the evidence, not the fictional business
- This case study emits
index,followand is the only route included in the sitemap. - Demo routes emit
noindex,followand remain allowed in robots.txt so crawlers can read that directive. - The project gateway and 404 are also non-indexable; the gateway canonical points here.
- No LocalBusiness, review, rating, address, or offer structured data is published for the fictional company.
Local builds may use a portfolio.example origin. The deployed Pages build requires PUBLIC_SITE_URL and usesian-decesare-portfolio.pages.dev.
Estimator transparency
Deterministic by design, deliberately limited in meaning
Four non-personal inputs run entirely in the browser. The interface validates number fields, explains invalid states beside the field, and never asks for contact or property-identifying information.
- Synthetic current annual cost
- €1,440
- Illustrative solar cost
- €900
- Illustrative solar + battery cost
- €720
- Illustrative annual reduction
- €540–€720
How the synthetic model works
Monthly cost is multiplied by 12 and rounded to the nearest €10. Roof area is converted to a bounded factor capped at 35 m², then combined with daytime-use percentage in a bounded solar-reduction heuristic. Selecting battery adds a smaller fixed adjustment.
Identical inputs always return identical outputs. Unit tests lock the approved fixture, battery selection, invalid-number fallback, input boundaries, result ordering, and currency formatting.
Measured implementation evidence
Production-build evidence
Measurements below come from the local static build validator, a headless Chrome sweep, and one Lighthouse 13.4.1 mobile-mode run on 11 August 2026. A separate live Pages sweep passed all 60 route/viewport combinations with a 102.41 KB maximum pre-scroll transfer. These are lab measurements—not field data, real-user monitoring, or PageSpeed Insights results.
- Lighthouse performance
- 100
- Lighthouse accessibility
- 100
- Lighthouse best practices
- 100
- Lighthouse SEO
- 100
Single local lab run against the indexable case-study route in Chrome 151; scores can vary between runs. The fictional demo also scored 100 for performance, accessibility, and best practices. Its SEO score was 69 because Lighthouse correctly detected the intentionalnoindex directive.
| Measure | Budget | Current local result | Status |
|---|---|---|---|
| Largest page JavaScript, gzip | < 20 KB | 1.33 KB | Automated pass |
| CSS, gzip | < 35 KB | 6.32 KB | Automated pass |
| Largest mobile hero candidate | < 120 KB | 31.87 KB | Automated pass |
| Largest desktop hero candidate | < 180 KB | 100.63 KB | Automated pass |
| Maximum local viewport transfer | < 300 KB | 100.29 KB | Browser probe pass |
| Self-hosted WOFF2 files | 1 | 1 | Automated pass |
| Third-party runtime resources | 0 | 0 | Browser probe pass |
What the browser sweep covered
Headless Chrome loaded 10 routes at five target widths plus one 200% reflow simulation, producing 60 route-and-viewport results with no recorded failure. The probe checked HTTP status, horizontal overflow, one h1/main, first-focus skip link, minimum control size, accessible names, reduced-motion baseline, third-party requests, transfer budget, mobile-menu keyboard operation, and estimator error recovery.
Outcomes and tradeoffs
A stronger artifact because its limits are part of the design
- A realistic multi-route information architecture without a fabricated client history or service claim.
- An estimator whose assumptions, exclusions, static fallback, and synthetic fixture are visible and tested.
- A small static delivery model with local responsive images, one font file, and zero third-party runtime scripts.
- Indexing behavior that sends portfolio intent to the real work while keeping fictional commercial pages out of search results.
Tradeoffs
What I would test or extend next
- Native HTML and minimal JavaScript keep delivery small, but the project intentionally avoids richer app-style state and motion.
- The estimator is easy to audit because it is synthetic; it is intentionally unsuitable for real product or financial choices.
- No analytics means there is no real-user performance or behavior evidence—and no third-party tracking cost.
- Missing audited reference exports prevent a final pixel-level comparison against the named visual boards.