Trustiv Services — Website

Official marketing website for Trustiv Services, an HR/hiring consultancy, live at trustivservices.com. A static frontend with a small Supabase backend behind an admin panel, so the content that changes every week doesn't need a developer to update it.

---

Contents

• Why
• How it works
• What's on the site
• Running it locally
• Setting up the admin panel
• API keys in this repo
• What I'd add next
• License

Want a website like this for your own business? If you're looking to hire a team to design and build one, click here to get in touch.

Why

Trustiv's marketing pages themselves barely change — the services, the pricing, the "why us" copy is stable. What changes constantly is the content inside those pages: new testimonials, new job openings on the careers page, an announcement banner for a limited-time offer. Rebuilding this as a full dynamic site (Node backend, CMS, the works) would be overkill for a handful of tables that just need to be readable by anyone and editable by one admin.

So the site stays a plain static multi-page HTML/CSS/JS build — fast, simple, no build step, deployable anywhere. Only the parts that genuinely need to change without a code deploy (testimonials, announcements, job roles, the homepage "active roster" card) are backed by a small Supabase database and rendered client-side. Everything else is just HTML.

How it works

• Static pages (index.html, about.html, services.html, contact.html) are plain HTML/CSS, no backend involved.
• Dynamic sections (testimonials.html, careers.html, the homepage roster card, and the site-wide announcement bar) fetch their content from Supabase at page load via js/dynamic.js, and fall back to an empty/static state gracefully if the fetch fails.
• admin.html is a login-protected page (Supabase Auth) where the actual editing happens — add, edit, delete, or hide any testimonial, announcement, or job role, without touching a single HTML file.
• Row Level Security on every table enforces the split: anyone (anonymous) can read rows marked is_active = true; only an authenticated session can write, or see hidden/draft rows. This is enforced at the database level, not just hidden in the frontend — so even if someone reads the client-side JS, they can't write anything without logging in.

What's on the site

Home — Hero	Home — What We Help With
Home — Testimonials	About — Hero
About — Who We Work With	Services — Hero
Services — HR Operations	Services — Pricing Plans
Services — Positions Filled	Services — FAQ
Contact	Careers

(These screenshots predate the admin panel — testimonials, careers, and the announcement bar now render dynamically from Supabase, so the content shown may differ from what's live today.)

Also: fully responsive mobile-first layout, an auto-looping client-logo/testimonial marquee, a FAQ accordion, a "Read more" modal for long testimonials, and a contact form via Web3Forms that emails submissions directly with no backend involved.

Running it locally

No build step — it's plain HTML/CSS/JS:

python3 -m http.server 8000
# or: npx serve .

Then open http://localhost:8000. The dynamic sections (testimonials, careers, announcements) will pull live data from Supabase even when run locally, since js/config.js points at the production project.

Setting up the admin panel

The admin panel needs a Supabase project behind it. Full one-time setup (create the project, run the schema, create a login, drop the keys into js/config.js) is in ADMIN-SETUP.md — takes about 5–10 minutes. The two .sql files (supabase-schema.sql and supabase-schema-roster-update.sql) create the tables and the Row Level Security policies described above.

API keys in this repo

Two client-side keys are committed on purpose — both are meant to be public, not secrets:

• js/config.js → Supabase anon key, restricted entirely by the Row Level Security policies in supabase-schema.sql — it can read active rows and nothing else without a login
• contact.html → a Web3Forms site key, the same idea as a public Google Maps API key

If you fork this for your own site, swap both for your own keys from supabase.com and web3forms.com.

What I'd add next

• Regenerate the screenshots now that testimonials/careers/announcements are dynamic — the current ones are from before the admin panel existed
• Let the admin panel upload a photo alongside each testimonial, instead of just initials in a colored circle
• Turn the careers page into a lightweight applicant tracker — right now applications just go to email/a Google Form, so there's no record of who applied to what inside the admin panel itself
• Add basic page-view analytics (e.g. Plausible) so traffic on careers.html vs services.html can actually be compared

License

All rights reserved © Trustiv Services. Provided for reference/portfolio purposes — please don't reuse the branding, copy, or client logos without permission.