Vivere Web is a boutique web development agency based in Western Colorado, founded by Joseph Sutliff. Every project is built 100% custom — no templates, no drag-and-drop builders, no WordPress bloat — just clean, hand-coded HTML, CSS, and JavaScript deployed on enterprise-grade Cloudflare infrastructure.
Vivere builds sites the way large agencies charge $15,000–$25,000 to build — and delivers them at a fraction of that cost because there's no account management layer, no project management overhead, and no outsourcing. You work directly with Joe from day one.
| Factor | Vivere Custom Build | WordPress / Squarespace |
|---|---|---|
| Page Speed | 82–95 Lighthouse score standard | 40–65 typical (plugin bloat) |
| Security | No CMS attack surface, no plugin vulnerabilities | Constant patching required; #1 hacked platform |
| Hosting Cost | Cloudflare Pages — free tier covers most small sites | $15–$75/month ongoing |
| You Own It | Full code handoff — no platform dependency | Locked to platform; migrate = rebuild |
| Load Time | Sub-2 second typical LCP | 4–8 seconds common with plugins |
| SEO Control | Full schema, canonical, structured data — no limitations | Limited by theme; requires paid SEO plugins |
| Custom Features | Built exactly as needed — no workarounds | Plugin-dependent; often imperfect solutions |
What makes working with Vivere different from hiring a dev shop, using a website builder, or posting on Upwork. These aren't marketing claims — they're structural advantages built into how Vivere operates.
Additional site builds are scoped individually based on complexity, page count, backend requirements, and brand scope. Each project is quoted after a discovery conversation — no two builds are identical, and pricing reflects the actual work involved, not a package that may over- or under-serve your needs.
The Top it off site is a full multi-page custom build on the Vivere Master Framework v2 — a production-ready design system built and refined across multiple client sites. Here's exactly what was delivered:
| File | Lines | Description |
|---|---|---|
| styles.css | 1,101 | Full design system — brand tokens, all layouts, depth/3D effects, animations, responsive breakpoints, WCAG AA accessibility |
| index.html | 414 | Full homepage — hero, live flavor board, floating stat cards, dark feature bento, acai split, Mimi's section, testimonials, pull-quote, visit cards, contact form + Google Map |
| menu.html | 256 | 5-category sample menu with schema markup, tags, pricing layout, allergen disclaimer |
| grand-opening.html | 240 | Grand Opening event page — Event schema, announcement banner, dark bento, details cards, CTA |
| script.js | 241 | Custom cursor, card tilt, hero parallax, stat counters, back-to-top, sticky mobile CTA, View Transitions API, live board fetch, mobile nav |
| about.html | 185 | Brand story, dual split sections, values cards, CTA |
| staff.html | 167 | KV-backed live flavor board editor — staff only, no PIN currently (re-enable ready) |
| legal.html | 159 | Disclaimers & privacy — allergen, cross-contamination, FDA/nutrition, liability, privacy, Colorado governing law |
| flavors-set.js | 83 | Serverless API write endpoint — brute-force lockout code present, PIN logic ready to re-enable |
| flavors-get.js | 40 | Serverless public read endpoint — feeds live board on homepage |
| Config & infra | ~73 | wrangler.toml, robots.txt (13 AI crawlers blocked), sitemap, _headers, _redirects, 404 |
Beyond the core build, the site received a comprehensive design and experience pass that moves it well beyond a standard template look — the kind of polish that sets a brand apart from competitors using off-the-shelf site builders:
Current site structure with visual block representation of each page's section layout.
A detailed breakdown of every technique used and why it matters for the business. These are the features that separate this build from a template site — and the reason standard agency quotes for this scope run $12,000–$18,000.
| Feature | What It Does | Business Value | Type |
|---|---|---|---|
| Live Flavor Board | Staff update today's flavors from a mobile-friendly panel. Homepage reads the current board in real time via a serverless API. | Customers see today's actual offerings before they visit. Reduces repeat "what do you have today?" calls. Differentiates from competitors with static menus. | Backend |
| Cloudflare KV Storage | Key-Value database at the edge — globally distributed, sub-millisecond reads. No server, no subscription, no database cost. | Zero ongoing infrastructure cost. Data lives on Cloudflare's network — same reliability as AWS or Azure at $0/month for this scale. | Backend |
| Serverless API Functions | Two Cloudflare Pages Functions: a public GET endpoint (homepage board) and a POST endpoint (staff updates). Brute-force rate limiting and PIN auth are built-in and ready to enable. | Fully custom backend logic without a server. Scales to any traffic level. Security layer prevents unauthorized edits. | Backend |
| WebP Image Optimization | Hero image converted from 24MB PNG → 131KB WebP (99.5% size reduction). Açaí photo: 1.69MB → 82KB. Uses <picture> element for modern/legacy fallback. | LCP (Largest Contentful Paint) dropped from 121 seconds to 3.8 seconds. Page load speed directly impacts Google rankings and customer bounce rate. | Performance |
| Custom Lerp Cursor | A hot-pink cursor trails the mouse with a smooth 14% interpolation per animation frame, expanding on hover over interactive elements. | Signature brand interaction that feels premium and memorable. Signals craft and attention to detail to every desktop visitor. | Animation |
| Card Tilt + Magnetic Buttons | Cards respond to mouse position with a 3D perspective tilt (±10°). Primary buttons magnetically attract the cursor within a proximity range (±35% offset). | Interaction polish that high-end brands use to signal quality. Creates a tactile, premium feel that keeps visitors engaged and increases CTA click rates. | Animation |
| View Transitions API | Page-to-page navigation uses Chrome's native View Transitions API for silky cross-fade transitions between pages — no JavaScript framework required. | Makes the site feel like a native app rather than a series of page loads. Chrome 126+ (majority of desktop users). Silent fallback on other browsers. | Animation |
| Scroll Reveal Animations | IntersectionObserver triggers staggered fade-up animations on sections as they enter the viewport. GPU-accelerated transforms — zero layout thrash. | Creates a dynamic scrolling experience that guides attention and keeps visitors moving down the page. Industry standard for modern brands. | Standard |
| JSON-LD Structured Data | Machine-readable schema markup identifies the business as a CafeOrCoffeeShop with address, hours, price range, and menu sections to Google. | Enables rich results in Google Search (star ratings, hours, address in the SERP). Directly boosts local SEO and foot traffic from search. | SEO |
| Open Graph + Twitter Cards | Every page has complete OG meta tags — title, description, image, URL. Social share previews display correctly on Facebook, iMessage, Slack, etc. | When customers share the site link, it previews with the business name and branding — not a blank link. Free branding on every social share. | SEO |
| WCAG AA Accessibility | Full audit completed: color contrast ratios tested, touch targets sized to 44px minimum, skip links, ARIA labels, semantic HTML, screen reader safe. | Legal compliance (ADA). Broader audience reach including screen reader users. Lighthouse A11y score: 93. Improves overall SEO signal. | A11y |
| AI Bot Blocking | robots.txt blocks 13 AI crawlers: GPTBot, ClaudeBot, Google-Extended, PerplexityBot, Meta ExternalAgent, Bytespider, Amazonbot, and more. | Prevents AI systems from training on the business's content without permission. Protects menu copy, brand voice, and unique content from scrapers. | Security |
| Cloudflare CDN + Edge | Site assets are distributed across Cloudflare's global network. Cache headers optimized per asset type. Free SSL, DDoS protection, and bot management included. | Fast loads globally, not just locally. Enterprise security at zero hosting cost. Uptime backed by Cloudflare's 99.99% SLA. | Infra |
| content-visibility: auto | Footer uses CSS content-visibility to skip rendering until the user scrolls near it. Reduces initial paint work for the browser. | Micro-optimization that adds up to measurably faster perceived performance — the kind of detail that separates a 70-score site from a 90+ score site. | Performance |
Lighthouse scores run on the staging deployment. All pages audited across four dimensions: Performance, Accessibility, Best Practices, and SEO.
⚠️ SEO scores of 69 are expected on staging URLs — Cloudflare Pages automatically injects an X-Robots: noindex header on preview deployments. On the production domain, SEO will score 100.
Homepage (index.html)
Menu & About
The current build is a solid foundation. These are high-value additions worth discussing — each can be added post-launch without rebuilding anything.
All Vivere builds are quoted against a transparent tier system based on complexity, page count, and features. For reference, here is where the Top it off build sits in the market.
| Tier | Scope | Standard Price | Timeline |
|---|---|---|---|
| Tier 1 | Single landing page + contact form | $1,750 – $2,500 | 1–2 weeks |
| Tier 2 | 4–6 page business site — this build's base scope | $2,500 – $4,500 | 2–3 weeks |
| Tier 3 | 7–12 pages + blog + GSAP animations | $4,500 – $7,000 | 3–4 weeks |
| Tier 4 | Custom functionality — booking, e-commerce, portals | $7,000 – $9,500 | 3–5 weeks |
| Tier 5 | Full-service — strategy + design + build + launch | $9,500 – $12,500 | 4–6 weeks |
| Tier 6 | Web application, custom backend, multi-site | $12,500+ | Scoped |
The Top it off build includes a live serverless backend (KV + Functions), which technically crosses into Tier 3–4 territory. At standard pricing, this build would quote at $4,500 – $6,500 given the backend work, custom animations, and image optimization pipeline included.
| Scope Item | Agency Hours | Agency Rate | Estimated Cost |
|---|---|---|---|
| Custom design system + CSS | 20–30 hrs | $95–$150/hr | $1,900 – $4,500 |
| 7 HTML pages, responsive | 32–48 hrs | $95–$150/hr | $3,040 – $7,200 |
| Serverless backend (KV live board) | 10–16 hrs | $125–$175/hr | $1,250 – $2,800 |
| Staff admin panel | 8–12 hrs | $125–$175/hr | $1,000 – $2,100 |
| Animations (cursor, tilt, magnetic) | 10–15 hrs | $100–$150/hr | $1,000 – $2,250 |
| Image optimization pipeline | 3–5 hrs | $95–$125/hr | $285 – $625 |
| SEO, schema, robots, sitemap | 4–6 hrs | $75–$125/hr | $300 – $750 |
| CF Pages deploy + DNS | 2–4 hrs | $75–$125/hr | $150 – $500 |
| Lighthouse audit + A11y fixes | 4–6 hrs | $95–$125/hr | $380 – $750 |
| Total | 93–142 hrs | — | $9,305 – $21,475 |
Because Top it off Smoothie Cafe is a wholesale partner of Mimi's Sweet Treats — carrying Mimi's ice cream at the counter and featured on this site — this build is priced as a partner project, not a standard client engagement.
| Pricing Tier | Rate | Price | You Save |
|---|---|---|---|
| Standard Rate | Full price — new client | $4,750 | — |
| Partner Rate — 15% off | Wholesale partner, single site | $4,038 | $712 |
| Multi-Site Rate — 20% off | 2+ sites built together (e.g. TIO + Mimi's refresh) | $3,800 | $950 |
The 15% partner rate applies because of the Mimi's wholesale relationship and the co-promotion built into this site. The 20% multi-site rate applies if a second site is scoped at the same time — for example, a Mimi's Sweet Treats site refresh or any additional Vivere build.
| Add-on | What's Included | Price |
|---|---|---|
| Google Business Profile Setup | Full GBP optimization — photos, description, categories, Q&A, review strategy guide | $200 |
| Real Menu Data Entry | Replace all sample menu items with actual names, descriptions, prices, and tags | $150 |
| Photo Gallery Page | Lightbox grid page with product/interior shots (client provides photos) | $250 |
| Online Order Integration | Square or Toast embed or custom lightweight order form | $350 – $600 |
| Blog / Recipes Section | Simple blog structure, 3 seed posts, SEO-optimized for local smoothie searches | $400 |
| Staff PIN Re-enable | Restore PIN security on the flavor board editor — 30 minutes of work | Complimentary |
After launch, the site is yours. A care plan keeps it fast, accurate, and up to date — without paying hourly every time you need a change.
For a small business with a live backend (the flavor board), the Standard plan at $150/month is the sweet spot — covers menu updates, hours changes, seasonal content, and performance monitoring without overpaying for enterprise-level service.
Ad-hoc hourly rate without a retainer: $125/hr · 1-hour minimum · no priority scheduling.
A food & beverage business carries real-world risk — allergic reactions, health claims, and customer data all create exposure if they aren't handled carefully on the website. This build includes a layer of protection that most small-business sites simply don't have, designed to reduce liability and present the brand responsibly. This is risk mitigation built into the site, not an afterthought.
| Protection | What It Does | Where It Lives |
|---|---|---|
| Allergen & Cross-Contamination Notice | Clearly states that products are made in a shared kitchen and may contact common allergens, and directs guests to inform staff — a standard, expected food-service safeguard. | Footer (every page) + dedicated box at the bottom of the menu |
| Disclaimers & Privacy Page | A full, dedicated legal page covering allergens, nutrition/health, liability, pricing, intellectual property, privacy, and governing law. | legal.html, linked in the footer of every page |
| Nutrition / Health Disclaimer | Clarifies that "boosts" and nutrition references are informational only, not medical claims, and have not been evaluated by the FDA — protecting against health-claim exposure. | legal.html |
| Limitation of Liability | Limits responsibility for allergic reactions and adverse effects "to the fullest extent permitted by Colorado law," with an "as-is" website provision. | legal.html |
| Privacy Policy | Explains that contact-form data is used only to respond to inquiries and is never sold — increasingly expected by customers and platforms. | legal.html |
| Colorado Governing Law | Establishes the State of Colorado and Mesa County courts as the governing jurisdiction for the site's terms. | legal.html |
Marketing copy can quietly create legal exposure. Absolute words like "100%," "always," and "guaranteed" can be read as binding promises — and a single off-spec cup can turn a slogan into a complaint. Every page was reviewed and reworded to stay confident and on-brand while avoiding unprovable guarantees:
| Before | After |
|---|---|
| "100% Real Fruit" | "Real Fruit · Blended Fresh" |
| "made with real fruit and nothing artificial" | "crafted to order with real fruit and simple ingredients" |
| "real fruit, never powders or syrupy shortcuts" | "we focus on real fruit and skip the powders and syrupy shortcuts" |
| "Real Fruit, Always" | "Real Fruit, Front and Center" |
| "Better-For-You" | "Lighter Options" |
| "Cold-pressed, made daily" · "Natural caffeine kick" | "Cold-pressed and made fresh" · "A little caffeine kick" |
Menu labels such as "vegan" and "dairy-free" are presented as a general guide, with a clear instruction to confirm with staff — protecting the cafe if a recipe or supplier changes.
Important: The disclaimers and privacy language provided are a strong, professional starting template tailored to a Grand Junction, Colorado food business — not legal advice. We recommend a brief review by a licensed Colorado attorney before launch, and the legal page itself carries a visible note to that effect. Vivere can incorporate any wording your attorney prefers at no extra design cost.
Confirms the project and retains Joe's time. No work begins without this.
Due after client review and approval. Domain connected and live after final payment.
Retainer billing: 1st of month. Cancel anytime with 30 days notice.
staging.top-it-off.pages.dev — walk through on your device
Review this report, confirm or adjust add-ons and care plan
Domain selection unlocks all canonical, sitemap, and OG updates
Phone, hours, email, real menu items, founder story
Confirms final build and launch timeline
Production deploy, domain live, GBP updated
Still placeholder on the live site: phone number, hours, email address, real menu items and pricing, founder story, GA4 ID, EmailJS credentials, and domain. All ready to swap in — waiting on client to provide.