Real electrical work. A clearer first impression.

The starting point

Carry the experience forward.

The existing site contained useful service information, customer testimonials, local service pages, and an archive of project photos. The rebuild needed to preserve that material while replacing the legacy PHP foundation.

The plan was straightforward: explain the services, show the work, answer the questions, and make it easy to ask for an estimate. Real project photos and customer feedback do a lot of that explaining.

A consistent identity

A recognizable brand. A clearer path.

The refined lightning-bolt logo now carries through the header, footer, and branded social-sharing card. Blue accents, italic service labels and buttons, and a voltage-pulse navigation indicator bring the business’s identity into the new design.

Navigation groups services, project categories, service areas, and resources. Phone and estimate actions stay easy to find, while the mobile layout gives the content room to breathe. Softer photo corners and consistent content panels tie the public pages together.

Built around customer needs

Help visitors find the right service.

The homepage brings panel replacement, EV charging, and LED lighting into focus, with dedicated pages that explain those services. Remodels, new construction, and commercial electrical work remain part of the wider service offering.

The service pages share a practical structure: explain the work, walk through the planning steps, answer common questions, and offer a relevant estimate link. Service-area pages give Bay Area coverage a clear home, with resources and customer testimonials providing additional context.

Customer experience, in context

Show the service. Support it with real reviews.

Panel replacement, EV charging, and LED lighting pages now pair relevant customer reviews from official Yelp embeds. Topic labels help visitors connect each review to the work they are considering.

Links lead to the expanded Testimonials page, with direct Yelp links available for the original reviews.

Show the work

An archive becomes a portfolio.

I curated photographs from the original project archive and prepared optimized images for the new site. Visitors can filter the collection by the categories represented in its photos, including lighting, residential, commercial, outdoor, construction, and equipment work. Category choices update the page URL, so a filtered view can be bookmarked or shared.

The redesigned photo viewer gives each image room, with a caption, position in the collection, and clear Previous, Next, and Close controls. Keyboard navigation and touch swipes let customers move through the selected category without losing their place.

Keep the portfolio current

Posting a project shouldn’t become a project.

The gallery now runs on a dedicated Supabase database and image store. Authorized staff can upload photos, edit titles and accessible descriptions, assign categories and confirmed cities, and arrange the display order. They can publish new work or hide a photo without editing the website’s source code. The refreshed upload interface accepts a dropped or selected photo, previews it before upload, and lets the editor remove or replace the selection.

Uploads are validated, optimized into WebP images, and stripped of embedded metadata. Hidden photos are excluded from public image delivery and site placements. Imported photo identities and existing gallery links are preserved as the collection moves from an archive into a managed portfolio.

Confirmed city assignments also connect relevant photos to service-area galleries, so local pages can show actual work from that area.

One image library

Put the right work in the right place.

A dedicated Site Images tool lets the team choose the homepage’s three hero slides and featured project photos, along with service illustrations and the About Us image. The same managed collection supplies the gallery and these placements.

The homepage slideshow includes slide selectors and a pause control, and respects reduced-motion preferences. Hiding a photo removes it from public placements rather than bringing back an old archived version.

Tools for the team

Editing access with clear boundaries.

Staff sign in using an email code, with no public account registration. Owners can add accounts, assign editing tools, and suspend, archive, or restore access. Editors receive access to the tools their responsibilities require. Expandable edit forms now include Cancel controls that discard unsaved changes and return focus to the form heading.

Permissions are enforced on the server and in the database, while revision checks protect against conflicting saves. The result is a focused way to maintain project photography without turning every site update into a development task.

Make the next step useful

Start with the project details.

The rebuilt estimate form asks about the project type, location, service needed, preferred timing, and scope of work. Customers can optionally attach a photo or plan rather than trying to describe everything in words.

The form is built for email delivery, with validation, a spam-trap field, bot checks, and attachment checks. Uploaded files are handled in memory for delivery rather than placed in a public download folder. Phone and email alternatives remain visible beside the form.

Estimate delivery was tested with the business owner, who confirmed receipt. The form gives the team useful project details before the first conversation.

The work behind the pages

Keep the useful connections.

The rebuild preserves established service-area routes and maps selected old PHP and article addresses to relevant new pages. Page metadata, a sitemap, and canonical URLs support the public site.

The Next.js foundation combines a versioned GitHub-to-Vercel workflow with database-backed photo management. Code changes remain versioned, while everyday image updates happen through staff tools. Articles remain in the repository, and customer reviews use official Yelp embeds.