Web engineering case study

Building the portfolio as a product.

A static, responsive portfolio designed to demonstrate engineering depth without hiding the story behind a framework, a template, or decorative motion.

By Nadeeja NirmalaDesign and implementationUpdated 14 August 2026

What did the portfolio need to prove?

The site had to make infrastructure, Android, and web work feel like one coherent professional story. It also had to prove the web-development claim through its own implementation: semantic content, robust responsive behavior, purposeful motion, accessibility, crawlability, and a deployment path that stays understandable.

My roleInformation architecture, visual system, front-end implementation, QA, and deployment
ConstraintsStatic hosting, no front-end framework, mobile-first resilience, and public source

A small, inspectable web system

The site uses static HTML for the primary content, a shared CSS design system, and a compact JavaScript layer for navigation, progressive content enhancement, form handling, and animation. That keeps the work crawlable and useful even when animation is unavailable.

Each discipline has a focused canonical page, distinct search metadata, internal links, and structured data connected to a stable author entity. The public repository makes the implementation directly inspectable.

Inspect the source on GitHub

How motion supports the story

Motion establishes pacing and spatial relationships, but it must never decide whether content exists. The implementation respects reduced-motion preferences, keeps headings semantically present, and treats scroll animation as progressive enhancement over a readable static document.

The visual system uses a restrained set of color accents to distinguish disciplines while preserving one shared typography, spacing, contrast, and component language.

How the build was verified

  1. Automated route checks validated titles, descriptions, canonicals, heading structure, and JSON-LD.
  2. Internal-link resolution checked every local destination.
  3. Responsive checks covered 320, 390, 820, 1024, and 1440-pixel viewports.
  4. Browser checks watched for console errors, overflow, broken images, and layout shifts.
  5. Keyboard, reduced-motion, and mobile-menu behavior were checked as distinct interaction paths.
  6. The final production URLs, robots file, sitemap, and Search Console submission were verified live.

What the measured result shows

Automated matrix45 / 45 passed
Layout stability0.000 CLS
Google discovery9 URLs before this page

The original nine-page crawl passed at all five tested widths with no broken internal links, horizontal overflow, or JSON-LD parsing errors. A later performance audit measured 2.99-second mobile LCP under simulated 4G and 4x CPU slowdown, which exposed a first-paint animation issue. The heading now renders immediately and motion is layered on afterward.

Nadeeja NirmalaIT Manager and hands-on engineer working across infrastructure, Android, and the web. View background and credentials.
Related product workAndroid platform engineeringExploreAll engineering case studies