We do not drag-and-drop this portal! We pro-code it. Every template. Every style. Every animation. Bootstrap 5, modern CSS, PAC CLI workflow, version controlled like a real product (pulling it down locally for better control as well).

The front-end is built for performance and maintainability. CSS Variables for theming, change `–cccp-red` once, the whole site updates. BEM-style naming for scalable components. SVG data URIs for the golden star pattern and noise texture, so that we are not burning HTTP requests on background images. Responsive design from mobile using Bootstrap’s grid and custom Flexbox where it matters.

Dashboard quota cards pull live Dataverse data through Liquid templates, but the presentation is pure client-side Bootstrap. Progress bars. Badges. Color-coded top borders, amber for wheat, green for potatoes, orange for carrots. All styled with CSS variables for consistency. The search? Bootstrap modal with keyboard accessibility and proper focus management. No dropdown that overlaps the banner.

As mentioned, we used PAC CLI to download the portal, coded it locally in VS Code with all our extensions and dev tools, then pushed it back to Power Pages. That workflow gets you pixel-perfect layouts, semantic HTML, proper ARIA labels, and a UI that scales.

The result: a portal that looks clean at 2am, loads fast, and doesn’t make the committee squint to read production quotas. Modern client-side architecture. Maintainable code. Great UX.

#ClientSideSalsa

The image above showcases responsive design for mobile phones.