Sohause

A 4-page static company site for Sohause, a Medan-based software house. Rebuilt from a Bootstrap 4 + jQuery template into a zero-dependency vanilla HTML/CSS/JS site. Serves as both a client portfolio and lead generation page for local businesses seeking software development.

Problem

The original site shipped 4 CDN scripts (jQuery, Bootstrap CSS+JS, Popper) and 160KB of framework CSS for a simple brochure site with no dynamic UI. Hardcoded hex values across 371 lines of SCSS made systematic theming impossible. Every page carried the full Bootstrap payload for a handful of grid and navbar utilities.

Approach

• Stripped all 4 CDN dependencies; replaced Bootstrap's grid with a custom 12-column flexbox system (~60 lines) matched to the project's actual layout needs.

• Introduced 11 CSS custom properties as a design token layer, replacing 30+ scattered hex values with semantic names (--color-primary, --color-line). All pages reference the same tokens.

• Replaced jQuery scroll-reveal with IntersectionObserver, including a synchronous fallback for unsupported browsers. Vanilla JS handles nav toggle with click-outside dismissal.

• Wired prefers-reduced-motion and :focus-visible at the global CSS level — no framework required for accessibility.

Impact

• 100% of external frontend dependencies removed (4 CDNs to 0)

• CSS payload reduced 89% (160KB to 17KB), 3 fewer HTTP requests per page

• Visual identity unified through token system — changing brand colors requires editing only :root values