Freelancers using HTML5 in EdmondsFreelancers using HTML5 in Edmonds
ProjectsPeople
Salish Hawk Studios 's avatar
Salish Hawk Studios
Seattle, USA
Crafting High-Conversion UI/UX for Wellness & AI Platforms
New to Contra
Crafting High-Conversion UI/UX for Wellness & AI Platforms
Cover image for šəq̕ʷəb — Shatterpoint: Sovereign Somatic
šəq̕ʷəb — Shatterpoint: Sovereign Somatic Grounding Engine Project Type: Full-Stack Web Application / Mobile PWA Development & UI/UX Design Role: Lead Product Architect, Frontend Developer & Cultural Systems Designer Live Demo: [Insert Your Vercel / Live App Link Here] Executive Summary šəq̕ʷəb — Shatterpoint is a mobile-first, non-pharmaceutical somatic grounding application designed to down-regulate nervous system hyper-vigilance, quiet intrusive racing thoughts, and offer rapid sensory reset during moments of anxiety or overload. By uniting authentic Coast Salish formline artwork, 6Hz acoustic theta brainwave entrainment, and motor-kinetic visual rhythm gameplay, šəq̕ʷəb bridges indigenous cultural heritage with modern neuro-somatic grounding mechanics. The Problem: Generic Tools & Sensory Overload When individuals—especially youth and neurodivergent users—experience acute panic, PTSD triggers, or sensory overload, standard mental health applications often fail due to three core flaws: High Cognitive Load: Text-heavy, clinical interfaces with multi-step menus increase anxiety rather than reducing it. Pathologizing Labels: UI elements that force users to self-diagnose with clinical labels (e.g., "ADHD Mode" or "OCD Mode") create social stigma and medicalized friction. Lack of Somatic Catharsis: Passive breathing apps lack physical interaction, leaving excess kinetic energy and frustration unreleased in the body. The Solution & Core Features šəq̕ʷəb delivers an immediate, zero-barrier sensory interface built entirely on a single non-scrolling 100vh viewport console. Authentic Coast Salish Vector Architecture Instead of generic arcade shapes, active targets use precision-rendered Coast Salish formline vector elements (⁠.svg⁠ Path2D graphics):  Positive Targets (Good Nodes): Sweeping, open cyan/teal formline trigons that build focus streaks and expand visual presence.  Negative Targets (Intrusive Noise): Constricted crimson spiked trigons that train tap-inhibition and motor discipline.  Write & Release Target: A traditional red-split U-form block providing a wide, stable cradle for cathartic text shatter mechanics. "Write & Release" Cathartic Text Shatter Users type frustrating thoughts, anger, or intrusive stressors into a local modal. The engine locks the text upright into the center cradle of a dedicated U-form target block. Upon tapping the block:  A full-screen radial shockwave fires across the canvas.  The frustration text shatters into a 60+ particle character burst that vaporizes in 360 degrees.  Local memory immediately purges the string, providing cognitive defusion and somatic release. Acoustic 6Hz Theta Brainwave Entrainment Integrated low-frequency 6Hz binaural acoustic beats and rhythmic audio pulses gently encourage brainwaves to synchronize with natural theta frequencies (4–8Hz)—the state naturally produced during deep meditation and light sleep. Youth-Safe Somatic State Selection Replaces clinical diagnostic labels with dignified, body-centered state choices:  Steady Grounding: Gentle target pacing paired with soft acoustic theta tones.  High Energy / Quick Focus: Elevated contrast and rapid target spawning for high restless energy.  Rhythmic Cadence: Predictable, steady cadence designed for rhythmic flow states. Therapeutic & Neurological Mechanisms  Cognitive Defusion: Translating abstract, distressing thoughts into physical visual targets that can be shattered breaks rumination loops.  Visual-Rhythmic Focal Lock: Tracking moving formline targets re-engages the prefrontal cortex, pulling focus away from amygdala-driven fight-or-flight states.  Somatic Discharge: Combining haptic feedback, wood-crack auditory cues, and physical tap interactions releases pent-up kinetic arousal.  Nervous System Down-Regulation: Continuous exposure to 6Hz theta entrainment helps soothe hyper-vigilance without requiring complex breathing routines. Technical Stack & Architecture  Frontend Framework: React 18, TypeScript, Tailwind CSS  Render Engine: HTML5 Canvas API with custom Path2D SVG vector rendering loops  Audio Engine: Web Audio API with binaural 6Hz tone synthesizer & ambient audio channels  Mobile / PWA: Standalone Progressive Web App manifest with zero-scroll ⁠100vh⁠ viewport constraint and touch event gesture locks (⁠touch-action: none⁠)  Deployment & CI/CD: Vercel automated release pipeline Key Highlights & Results  100% Single-Viewport UX: Zero vertical scrolling on mobile devices, ensuring zero-friction access during panic states.  Sub-100ms Reaction Time: Lightweight vector canvas rendering maintains 60 FPS performance on low-end mobile devices.  Cultural Parity: 1:1 alignment between onboarding instruction keys and active gameplay assets using native SVG vectors.  Dignified & Safe: Meets non-medical legal disclaimers while offering youth-safe, non-pathologizing sensory control.
1
1
106
Cover image for VigX: Real-Time Sports Analytics & Arbitrage Terminal
VigX: Real-Time Sports Analytics & Arbitrage Terminal
0
0
Cover image for Case Study: Decibel 12 (db12fans.com (http://db12fans.com)) ...
Case Study: Decibel 12 (db12fans.com (http://db12fans.com)) Building the Ultimate Digital Home for Seattle Seahawks Fan Culture Executive Summary Decibel 12 is an independent, high-performance web platform designed specifically for Seattle Seahawks supporters ("12s"). Built to bridge the gap between stadium energy, community identity, and modern interactive web features, the platform combines real-time game-day tracking, interactive AI score predictions, custom Coast Salish-inspired superfan character branding, and community-driven content vaults. The Challenge Seattle Seahawks fans are globally recognized for setting world-record decibel levels, yet fan engagement tools are often fragmented across generic social media platforms, temporary group chats, and outdated forums. The primary objectives for Decibel 12 were: Establish an Authentic Digital Identity: Root the design language in authentic Pacific Northwest and Coast Salish artistic geometry rather than generic sports templates. Streamline Game-Day Utility: Create a centralized hub for local watch spots, tailgate directories, and live countdowns ahead of the season opener. Engage Community-Driven Content: Build secure, moderated photo vaults and interactive recognition systems (Fan & Pet of the Week, Hall of Fame) without relying on cluttered ad networks. Deliver Fast, Frictionless Auth: Implement seamless passwordless authentication (Magic Links) that feel modern and trustworthy. Key Features & Platform Architecture 1. Game Day Hub & Countdown Engine Real-time countdown clock synced to kickoff schedules. Interactive directory featuring local PNW sportsbooks, SODO tailgate basecamps, and partner venues (Touchdown's Sports Bar, Hatback Bar & Grille). 2. 12s Game Day Photo Vault & Moderation Community image repository for tailgates, custom outfits, and fan pets. Tech: Client-side NSFWJS filtering (TensorFlow.js) for automated pre-upload image moderation, backed by Supabase Storage and dynamic likes counter triggers. 3. Fan Authorities & Hall of Fame Dedicated tribute section honoring iconic superfans and community legends (Patti "Mama Blue" Hammond, Lorin "Big Lo" Sandretzky, Save Our Seahawks, Blue Thunder Drumline). Integrated community support features to drive awareness and fundraising for local fan figures facing medical recovery. 4. Interactive Engagement: "12s vs. The Machine AI" Weekly score prediction module allowing fans to lock in game outcomes and compare football IQ against predictive analytics models on the "Wall of Sound" leaderboard. 5. Superfan Character Branding Services Dedicated portal ("Build Your Superfan Identity") connecting fans with custom character design, gear sculpting, and formline artwork concepting for stadium outfits. Tech Stack & Execution Domain Technology / Tool Frontend Framework Next.js / React / TypeScript / Tailwind CSS Backend & Storage Supabase (PostgreSQL, Realtime Auth, Storage Buckets) Email Delivery Resend (Authenticated Custom SMTP Domain) Image Moderation NSFWJS / TensorFlow.js Content Production CapCut Desktop / Envato Elements / Rive Deployment Vercel Results & Impact Launch Readiness: Fully deployed ahead of the season opener against New England, complete with an automated multi-channel social media launch kit. Brand Integrity: Custom Coast Salish formline artwork and action-green visual identity created a distinct platform identity recognized across local fan networks. Zero-Friction Onboarding: Fully branded email delivery via custom Resend SMTP routing, eliminating spam flags and delivering single-click magic link logins.
2
0
109
Cover image for Digital Front Door Modernization for Wellness Clinics
Digital Front Door Modernization for Wellness Clinics
0
10
HTML5(1)
Garrett Mohammadioun's avatar
Garrett Mohammadioun
Seattle, USA
Backend & Frontend Engineer | Performance Expert
TOP_INDEPENDENT

Top

Backend & Frontend Engineer | Performance Expert
Cover image for Disk Usage Viewer (Web Development)
Disk Usage Viewer (Web Development)
0
37
Cover image for Sublime Text Plugin (Software Tools)
Sublime Text Plugin (Software Tools)
0
32
Cover image for Centroid (Native Application Development)
Centroid (Native Application Development)
0
16
Placeholder project card media
View more →
HTML5(1)
Lucero Gonzales Gandolfo's avatar
Lucero Gonzales Gandolfo
Seattle, USA
Turning Designs into Stunning Web Pages
Turning Designs into Stunning Web Pages
Cover image for Order taking SPA Woow pastry
Order taking SPA Woow pastry
0
19
Cover image for Social network page YAMI
Social network page YAMI
0
14
Cover image for Data Consumer POKECOMPANY
Data Consumer POKECOMPANY
0
29
Placeholder project card media
View more →
HTML5(3)
Andre Gruber's avatar
Andre Gruber
Seattle, USA
Graphic & Web design with a human touch
Graphic & Web design with a human touch
Cover image for D.R. Horton
D.R. Horton
0
22
Cover image for Danish Decks
Danish Decks
0
21
Cover image for Ferment Boulder
Ferment Boulder
0
36
Placeholder project card media
View more →
HTML5(1)
Chia-en Tseng's avatar
Chia-en Tseng
Seattle, USA
Obsession: UX and Frontend
Obsession: UX and Frontend
Cover image for Ann-c-Tseng/CalendarViewer
Ann-c-Tseng/CalendarViewer
0
8
Cover image for Ann C. Tseng | Groovy Groceries
Ann C. Tseng | Groovy Groceries
0
3
Cover image for Ann C. Tseng | Noteable
Ann C. Tseng | Noteable
0
5
Placeholder project card media
View more →
HTML5(1)
Dara Pressley's avatar
Dara Pressley
Bothell, USA
Design leader who still ships: UX, strategy, working code.
New to Contra
Design leader who still ships: UX, strategy, working code.
Cover image for Merging Two Data Sites Around the Survey
Merging Two Data Sites Around the Survey
0
0
Cover image for CustomInk — UX Lead, Mobile-First E-Commerce & Design Lab
CustomInk — UX Lead, Mobile-First E-Commerce & Design Lab
0
1
Cover image for Office of Population Affairs (OPA)
Office of Population Affairs (OPA)
0
1
Cover image for SAMHSA’s Center for Behavioral Health Statistics and Quality
SAMHSA’s Center for Behavioral Health Statistics and Quality
0
2
HTML5(1)
Megan Moeller's avatar
Megan Moeller
Edmonds, USA
Web Developer Extraordinaire
Web Developer Extraordinaire
Cover image for Van's Home Center
Van's Home Center
0
14
Cover image for Xbox Design Lab
Xbox Design Lab
0
14
Cover image for Elo Touch
Elo Touch
0
18
Cover image for Home - Holy GRAIL Botanicals
Home - Holy GRAIL Botanicals
0
10
HTML5(2)