# Hervis Electrical Design — Website Licensed electrician website for Giusseppe / Hervis Electrical Design, serving Polk County & Highlands County, FL. **Live URL:** https://herviselectricaldesign.com **Phone:** 754-276-6920 **Email:** giusseppe@herviselectricaldesign.com --- ## Project Structure ``` / ├── index.html ← Home page ├── services.html ← Services detail page ├── reviews.html ← Review Rewards program ├── about.html ← About Giusseppe ├── contact.html ← Contact + inquiry form ├── css/ │ └── style.css ← Global stylesheet (no frameworks) ├── js/ │ └── main.js ← Global JavaScript (vanilla, no dependencies) ├── api/ ← Empty — reserved for future AI agent integration ├── fonts/ ← Add Speed font files here (.woff2, .woff) ├── sitemap.xml ← SEO sitemap ├── robots.txt ← Search engine directives ├── vercel.json ← Vercel deployment config + CORS headers ├── .env.example ← Environment variable template ├── .gitignore ← Git exclusions (includes .env) └── README.md ← This file ``` --- ## How to Run Locally No build step required — pure HTML/CSS/JS. ### Option 1: VS Code Live Server (recommended) 1. Install the **Live Server** extension in VS Code 2. Open the project folder in VS Code 3. Right-click `index.html` → **Open with Live Server** 4. Site opens at `http://127.0.0.1:5500` ### Option 2: Python HTTP server ```bash cd "Website HED" python3 -m http.server 5500 # Open: http://localhost:5500 ``` ### Option 3: Node.js (npx) ```bash cd "Website HED" npx serve . # Follow the URL shown in terminal ``` --- ## Environment Variables Setup 1. Copy `.env.example` to `.env`: ```bash cp .env.example .env ``` 2. Fill in your real values in `.env` 3. **Never commit `.env` to git** — it's in `.gitignore` Key variables to set: - `GOOGLE_REVIEW_URL` — from your Google Business Profile - `EMAILJS_*` or `FORMSPREE_ENDPOINT` — for the contact form - `GOOGLE_ANALYTICS_ID` — for GA4 tracking --- ## How to Deploy to Vercel ### First Deployment 1. Push the project to a private GitHub repository (see below) 2. Go to [vercel.com](https://vercel.com) and sign in with GitHub 3. Click **New Project** → Import your repository 4. Configure: - **Framework Preset:** Other - **Root Directory:** `.` (current directory) - **Build Command:** (leave empty) - **Output Directory:** `.` 5. Add Environment Variables in **Settings → Environment Variables**: ``` BUSINESS_EMAIL = giusseppe@herviselectricaldesign.com GOOGLE_REVIEW_URL = https://g.page/r/YOUR_ID/review EMAILJS_SERVICE_ID = service_xxxxxxx EMAILJS_TEMPLATE_ID = template_xxxxxxx EMAILJS_PUBLIC_KEY = your_key ``` 6. Click **Deploy** — Vercel gives you a `.vercel.app` URL instantly ### Subsequent Deployments Every push to the `main` branch auto-deploys. No manual action needed. --- ## How to Connect a Custom Domain 1. In Vercel, go to your project → **Settings → Domains** 2. Click **Add Domain** → Enter `herviselectricaldesign.com` 3. Vercel shows you DNS records to add. Go to your domain registrar (GoDaddy, Namecheap, etc.) 4. Add the records: - **A Record:** `@` → `76.76.21.21` - **CNAME:** `www` → `cname.vercel-dns.com` 5. Wait 5–30 minutes for DNS propagation 6. Vercel auto-provisions HTTPS/SSL — no action needed --- ## Contact Form Setup The form in `index.html` and `contact.html` currently shows a success toast via JavaScript simulation. To wire it to real email delivery: ### Option A: EmailJS (no server, free tier) 1. Sign up at [emailjs.com](https://emailjs.com) 2. Create a service (Gmail) and a template 3. Get your Service ID, Template ID, and Public Key 4. Add to `.env` and update `js/main.js` form submit handler: ```js // In initForms(), replace the simulate block with: emailjs.send(serviceId, templateId, formData, publicKey) ``` ### Option B: Formspree (easiest, no code) 1. Sign up at [formspree.io](https://formspree.io) 2. Create a form → get endpoint URL 3. Change each `
` tag to: ```html ``` --- ## Google Reviews Embed To show live Google Reviews on the homepage: 1. Set up your **Google Business Profile** at [business.google.com](https://business.google.com) 2. Get your **Place ID** from [maps.googleapis.com/maps/api/place/findplacefromtext](https://developers.google.com/maps/documentation/places/web-service/place-id) 3. Use [Elfsight Google Reviews widget](https://elfsight.com/google-reviews-widget/) (paid) or embed directly with Google Maps embed 4. Replace the `` placeholder in `index.html` --- ## Google Review QR Code The QR code on `reviews.html` is auto-generated from the `data-url` attribute on `#qr-container`. To update it: 1. Get your **Google Business review link** from Google Business Profile dashboard → "Get more reviews" 2. Update the `data-url` in `reviews.html`: ```html
``` --- ## Review Counter The "147 happy families" counter is editable: In `index.html`, find: ```html 147 ``` Change `147` (both in `data-counter` and the text) to your actual number. Same in `reviews.html`. --- ## Speed Font The "Speed" font is referenced in `css/style.css` with a `@font-face` declaration: ```css @font-face { font-family: 'Speed'; src: url('../fonts/Speed.woff2') format('woff2'), url('../fonts/Speed.woff') format('woff'); } ``` To activate: 1. Add your `Speed.woff2` and `Speed.woff` files to the `/fonts/` directory 2. The headings and logo will automatically use the Speed font If you don't have the font files, the fallback (`Impact, Arial Black, sans-serif`) is used automatically. --- ## Add/Replace Photos Photos are placeholder `div` elements with `` comments. Search for: | Comment | Location | |-------------------------------|--------------------| | `` | `about.html` | | `` | `about.html` | | `` | `services.html` | | `` | `services.html` | | ``| `services.html` | | `` | `services.html` | | `` | `services.html` | | ``| `services.html` | | `` | `services.html` | | `` | `services.html` | | `` | `about.html`, `contact.html` | | `` | `index.html` | | `` | `index.html` `` | | ``| `reviews.html` | --- ## Initialize GitHub Repository ```bash cd "Website HED" # Initialize git git init git add . git commit -m "Initial commit: Hervis Electrical Design website" # Create private repo on GitHub (requires GitHub CLI) gh repo create hervis-electrical-design --private --source=. --remote=origin --push # OR manually: # 1. Go to github.com → New repository → hervis-electrical-design → Private # 2. Follow the "push an existing repository" instructions shown ``` --- ## Future API Integration The `/api` folder is ready for serverless functions. When you're ready to add backend features: - Vercel supports `/api/*.js` serverless functions natively - Example: `/api/contact.js` to handle form submissions server-side - The `vercel.json` already includes CORS headers for `https://herviselectricaldesign.com` --- ## SEO Checklist - [x] Meta title + description per page - [x] Local keywords: "electrician Lakeland FL", "panel upgrade Polk County", "EV charger installation Winter Haven FL", "24 hour electrician Polk County" - [x] Semantic HTML5 structure (`