Phone: (207) 441-0190
Email: [email protected]
Service area: Augusta + ~25 miles (Hallowell, Gardiner, Winthrop, Waterville, Belgrade, Oakland, Sidney, Manchester, Readfield, Farmingdale, Randolph)

File tree

.
├── index.html              Landing — hero, trust bar, services preview, 2 testimonials, CTA
├── about.html              About Derek — bio, approach, credentials, service area
├── services.html           Services & prices — full service list, how-it-works
├── testimonials.html       All 5 testimonials
├── contact.html            Phone, email, hours, service area + contact form
├── css/
│   └── styles.css          The whole design system (one file, ~600 lines)
├── js/
│   └── main.js             Mobile nav, smooth scroll, contact-form handler
├── assets/
│   ├── logo.svg            Wordmark — "DIGITAL DUCT TAPE / COMPUTER REPAIR"
│   └── favicon.svg         Browser tab icon — small "DT" tape strip
└── README.md               You are here

No build step. No dependencies. Open index.html in a browser and it works.

Previewing locally

Just open index.html in any browser. For a more realistic preview (so that mailto: and asset paths behave like the deployed site), serve the folder with any static server:

# Python (most systems)
python3 -m http.server 8000

# or Node, if you have it
npx serve .

Then visit http://localhost:8000.

Editing content

The site is plain HTML, so to change any text or price, just open the relevant .html file in a text editor and edit it. There's no CMS, no Markdown processor, no template engine. What you see is what's on the site.

Common edits

Hours — search every page for 9:00am (it's in the footer and on the contact page).

Phone number — search every page for 2074410190 and (207) 441-0190. Replace all occurrences.

Email — search every page for [email protected]. Replace all occurrences.

Service prices — open services.html and edit each <article class="service"> block. The price lives inside <div class="service__price">…</div>.

Adding/removing a service — copy an existing <article class="service">…</article> block in services.html and edit it. To remove one, delete the whole block.

Testimonials — open testimonials.html. Each testimonial is one <article class="testimonial">…</article> block with three pieces:

the quote (inside <p class="testimonial__quote">)
the initials in the avatar circle (inside <span class="testimonial__avatar">)
the byline (inside <span> next to the avatar)

The 2 testimonials on the landing page (index.html) are inside the same kind of block — keep them in sync if you change wording.

Service-area towns — open any page and search for chips. Each <li>…</li> is one town. Add or remove freely.

Meta descriptions / page titles — each page has a <title> and a <meta name="description"> in the <head> near the top.

Editing the logo

The logo is assets/logo.svg. Two options:

Edit the SVG directly in a text editor or vector tool (Inkscape, Figma, Illustrator). Change the text "DIGITAL DUCT TAPE" / "COMPUTER REPAIR" inside the <text> elements.
Replace it with a different file (e.g. a real logo). Keep the filename logo.svg (or update the <img src="…"> references in all 5 HTML files).

Same idea for assets/favicon.svg.

Editing the design

All visual styling lives in css/styles.css. The top of the file has a :root { … } block with all the design tokens — colors, spacing, fonts, shadows. Change a token there and it cascades through the whole site.

Brand color — change --accent (the red). For a different palette entirely, edit --tape-silver, --tape-dark, --tape-light, --accent.
Font — change --font-sans and --font-mono.
Section spacing — change the --space-* tokens.

If you want a logo or photo of Derek to replace the placeholder gray tape-stripe box, swap <div class="photo-placeholder">…</div> for <img src="assets/derek.jpg" alt="Derek Vigue"> (or similar).

The contact form

The form on contact.html opens the visitor's email app with everything pre-filled. No backend required. Two things to know:

It only works if the visitor has a mail client configured. Most people do; a few on locked-down work computers don't. That's why the page also shows the phone number and email address prominently.
All submissions go to [email protected]. Change that by editing js/main.js near the bottom of the submit handler (search for mailto:[email protected]).

Upgrading to a real form backend

If you'd rather have submissions land in your inbox without depending on the visitor's mail client, swap the mailto: for one of these (free tier available for low volume):

FormSubmit (https://formsubmit.co) — zero signup. Change the form's action="https://formsubmit.co/[email protected]" and method="POST", then remove the e.preventDefault() line in js/main.js.
Formspree (https://formspree.io) — same idea, requires creating an account and using their endpoint.
Netlify Forms — works automatically if you deploy to Netlify. Just add data-netlify="true" to the <form> element.

The README of the form-submit service you pick will walk you through it.

Deploying

This is a static site. It runs anywhere that can serve files. Pick one:

GitHub Pages (free, easiest given this is already a GitHub repo)

Push this repo to GitHub (already done if you're reading this).
Go to Settings → Pages.
Under Source, choose Deploy from a branch → main / (root).
Save. Within a minute or two the site will be live at https://DDTMaine.github.io/Site/.

To use a custom domain (e.g. digitalducttape.com), add a CNAME file at the repo root with the domain on a single line, then point your DNS at GitHub's servers.

Netlify (free, drag-and-drop)

Go to https://app.netlify.com/drop.
Drag the project folder onto the page. Done.

Any regular web host

Upload every file in the folder to your web host's public_html (or equivalent) directory via FTP. Done.

Performance & accessibility notes

No tracking, no analytics, no fonts, no external requests. Page weight is well under 100 KB.
Works without JavaScript — the only thing that breaks is the contact form's mailto: shortcut (you can still click the phone or email links).
Mobile-first with breakpoints at 480px, 768px, and 880px.
Skip-to-content link, ARIA labels on icon-only buttons, prefers-reduced-motion respected, focus styles visible.
Color contrast meets WCAG AA on all body text and CTA buttons.

Things still on the to-do list

Real logo (the current SVG wordmark is a placeholder)
Real photo of Derek for the about page (currently a gray placeholder)
Real photo of the workshop
Real testimonials (the 5 on the site are realistic and varied but were written for launch — replace with verified customer quotes as you collect them)
An Open Graph image for nicer social-media link previews
Analytics (Plausible or Fathom, both privacy-friendly)
A real photo-driven hero image, if you want one
Google Business Profile integration once you have a verified listing

Open an issue or a PR — happy to help wire any of these up.