Overview

I built the front end of YourLightingSource.com from scratch, using one of the custom XOLogic themes I had previously developed as a foundation. I kept the site tightly aligned with the client’s brand while rebuilding and customizing the markup, styles, and interactions so the final product is a fast, maintainable, and user-friendly site tailored to their needs.

My role

I led the front-end implementation end-to-end: adapting the XOLogic theme’s layout and component system, authoring semantic HTML, hand-crafting the CSS for responsive layouts, and adding interactive behavior with jQuery.

Tech stack

HTML5 — semantic, accessible markup and organized templates/components.
CSS — modular, responsive styling (mobile-first layout using Flexbox / Grid patterns).
jQuery — DOM interactions and UI behavior (sliders, lightboxes, form enhancement, smooth UI transitions).

Process

Theme adaptation — used an XOLogic theme I had built as the starting point for layout, design patterns, and reusable components, then stripped and reworked pieces to match the Your Lighting Source content and brand.
Markup & structure — created semantic HTML templates (product/landing sections, navigation, footers) with a maintainable folder/component structure.
Styling — implemented a responsive, mobile-first stylesheet, organized for reuse and easy overrides.
Interactions — added jQuery-driven behaviors (gallery/slider, on-page navigation, accessible modals/lightbox, and client-side form enhancements) to improve UX without heavy frameworks.
QA & optimization — cross-device and cross-browser testing, accessibility checks, and performance tweaks (minified assets, optimized images, sensible DOM updates).

Results

The site is a polished, responsive front end that preserves the XOLogic theme’s best patterns while being custom-fit to Your Lighting Source. It delivers clear product presentation, smooth interactions, and a maintainable codebase that’s easy to iterate on. See it live: https://www.yourlightingsource.com