Freelancers using HTML5 in PoulsboFreelancers using HTML5 in Poulsbo
ProjectsPeople
Healing Hawk Studios 's avatar
Healing Hawk Studios
proSeattle, 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
35
Cover image for An interactive, mobile-first arcade game
An interactive, mobile-first arcade game featuring 4 unique game modes, advanced collision detection, real-time score math, and dynamic visual transitions. Built with smooth client-side animation loops to ensure zero latency at 60fps. Proves high-level state control, physics modeling, and complex mathematical event handling in modern web environments.
0
50
Cover image for Mobile-First UX Redesign for C2 Detailing
Mobile-First UX Redesign for C2 Detailing
0
0
Cover image for 🚀 Just deployed a custom
🚀 Just deployed a custom lead-generation web app for J.B. Construction NW in Marysville, WA. Most contractor sites lose after-hours leads because static contact forms take too long to get a response. We built a solution that solves that: ⚡ 90-second interactive preliminary budget estimator 📱 Instant SMS lead dispatching directly to the crew lead's phone 🖼️ Custom before/after transformation slider for high-ticket proof Built with Base44, React, Tailwind, and Twilio SMS integration. Check out the case study on Contra: https://prudent-peak-roof-flow.base44.app/ #WebDevelopment #ReactJS #ContractorMarketing #UIUX #Base44 #HealingHawkStudios
0
6
HTML5(2)
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
30
Cover image for Sublime Text Plugin (Software Tools)
Sublime Text Plugin (Software Tools)
0
24
Cover image for Centroid (Native Application Development)
Centroid (Native Application Development)
0
15
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
14
Cover image for Social network page YAMI
Social network page YAMI
0
11
Cover image for Data Consumer POKECOMPANY
Data Consumer POKECOMPANY
0
24
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
15
Cover image for Danish Decks
Danish Decks
0
14
Cover image for Ferment Boulder
Ferment Boulder
0
26
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
1
Cover image for Ann C. Tseng | Noteable
Ann C. Tseng | Noteable
0
5
Placeholder project card media
View more →
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
13
Cover image for Elo Touch
Elo Touch
0
17
Cover image for Home - Holy GRAIL Botanicals
Home - Holy GRAIL Botanicals
0
10
HTML5(2)
Frankie Leyva III's avatar
Frankie Leyva III
Seattle, USA
Creative Web Developer & Fullstack Engineer
Creative Web Developer & Fullstack Engineer
Cover image for Developer Portfolio
Developer Portfolio
0
3
Cover image for IntroMe.Me
IntroMe.Me
0
2
Cover image for Seek Adventure Seattle
Seek Adventure Seattle
0
8
Cover image for U DupBop
U DupBop
0
2
HTML5(1)