About

A premium system build with Penny at the center.

WildCard DEV is designed to feel like a high-end holographic interface: cinematic enough to be memorable, structured enough to stay dependable, and polished enough to carry a true flagship identity.

This phase keeps the rebuilt foundation intact and focuses on how the site feels in use. The contact lane becomes easier to understand, quicker to act on, and more polished under mouse, keyboard, and touch without introducing risky interaction patterns.

What changes in this phase

The biggest changes land in the contact experience: clearer action grouping, elevated Penny routing, stronger interactive language, and safer responsive behavior for high-intent actions like email, calling, texting, and profile visits.

Web Design

Premium layouts, polished framing, and brand-driven interfaces that feel deliberate instead of improvised.

Web Development

Stable self-contained architecture with clean single-file organization that remains easy to maintain and expand.

Assistant-Led UX

Penny is treated as part concierge, part executive interface, and part branded intelligence rather than a decorative add-on.

Brand Systems

Blue and violet establish the system. Penny’s signature pink marks the moments where the intelligence inside that system takes control.

Resume / Experience

Leadership, systems thinking, and proof of execution — inside a branded profile surface that actually fits the site.

System profile // live

Actual executive profile image integrated directly into the resume surface for a cleaner identity lane.

Matthew Tobaben // Full-Stack Developer // Owner, WildCard DEV

Building systems that think, respond, and perform — where it actually matters.

Self-taught full-stack developer with an operations leadership background, focused on stable architecture, responsive UI systems, business-minded execution, and platforms designed to perform cleanly under real-world use.

WildCard DEV leadership Mobile-first system design PayPal operations background Brand-integrated UX
Recovered value $67K+ Recovered through audit analysis, discrepancy identification, and process correction in financial operations.
Build mode Full-stack From architecture and interface design through deployment, iteration, and production-minded refinement.
Platform focus Responsive systems Desktop, phone, very small screen, and smartwatch-aware behavior are treated as product requirements.
Operating style Execution over theory Stable delivery, maintainability, and long-term usability are prioritized over surface-level flash.

Experience / execution lane

Owner / Lead Developer — WildCard DEV October 2024 - Present

Architected and developed a flagship business platform as a cohesive, system-level experience instead of a traditional brochure site. Built a self-contained single-page architecture with holographic panel systems, branded assistant integration, and production-minded interaction design.

Operations Leadership — PayPal High-volume financial operations

Recovered more than $67,000 through audit analysis and process correction, while managing accuracy-sensitive workflows, surfacing trend issues, and supporting reliable execution under compliance-driven conditions.

Earlier operational foundation State of Nebraska · Omaha Work Staffing · Commerce Bank

Built discipline across labor, warehouse, sanitation, banking, and customer-facing environments — strengthening adaptability, process awareness, safety mindset, and dependable follow-through.

System highlights

  • Designed the WildCard DEV platform as a unified, branded system with fake-page navigation, premium interaction framing, and a single-file architecture.
  • Built responsive experiences for desktop, mobile, and smartwatch-aware contexts instead of treating small screens as an afterthought.
  • Integrated Penny as a communication and reference layer to create continuity across contact flow, user guidance, and business follow-up.
  • Favors clean structure, minimal dependency load, stable UI behavior, and future-ready hooks for automation, onboarding, payments, and QR-driven continuity.

Core strengths

System architecture Responsive UI Mobile-first thinking Process optimization Operational discipline Brand-integrated UX Interactive interface design Execution under pressure

Tech stack / tools

  • Languages: JavaScript, HTML5, CSS3, SQL
  • Frontend: responsive UI systems, animated interaction layers, branded interface design
  • Backend: Node.js, API integration, backend logic architecture
  • Tools: GitHub, VS Code, Vercel, DevTools, Runway AI

Education / development track

  • Midland University — Code Academy (completed)
  • Metropolitan Community College — Business Management (in progress)
  • Metropolitan Community College — Computer Science (in progress)
  • Metropolitan Community College — Forklift Certification

Penny — communication and reference node

Penny handles the communication lane for this profile: references, clarification, follow-up, and routing. She keeps the process organized, direct, and on-brand without forcing hiring teams into a scattered contact experience.

Reference coordination Follow-up handling Communication routing
Portfolio / Holo Stage

The real spinner is back: orbital motion, drag steering, inertia, and a proper flagship showcase.

This pass ports the original behavior model forward into the rebuilt architecture instead of falling back to another premium-but-static layout. The stage now uses a scoped 3D-feeling ring with translateZ-style placement, continuous auto-rotation, drag steering, inertial release, and graceful auto-spin recovery.

Tony Stark inspired / motion restored

Landing wow-factor refined as a true interactive holo spinner

The current working spinner remains the base, but the subsystem is tightened up here with a more stable readout footprint, calmer desktop steering, and cleaner supporting identity pieces around the stage.

Core System Panel Panel 01
Drag or swipe to steer the ring. Release for inertia. Use the wheel over the stage to widen or tighten the orbit.
Core System Panel System glow / blue-violet

WildCard DEV flagship shell

Stable single-page architecture, fake-page navigation, and premium framing still anchor the entire site. This card keeps the build foundation in the front position even while the ring is moving.

Front card Panel 01
Mode Flagship shell / stable base
Flagship interface Panel 01

WildCard DEV core experience

The spinner is now the primary wow-factor again, but the supporting glass cards still keep the portfolio lane readable when users want calmer browsing below the main stage.

Service showcase Panel 02

Client-facing presentation lane

Motion is back where it belongs: in the centerpiece. The supporting cards now reinforce that story instead of trying to replace it.

Penny signature panel Panel 03

Penny command intelligence

Penny remains visually distinct in orbit and in the supporting panel stack, preserving her role as the heart of the brand rather than a color accent inside the system.

Expansion route Panel 04

Watch, QR, and future utility flows

The supporting grid still protects future utility lanes, but now they live underneath a centerpiece that actually moves the way the original reference intended.

True motion, scoped safely

Pointer, swipe, and wheel interaction are limited to the spinner subsystem so the rest of the page keeps the same stable navigation and section behavior.

Brand-consistent glow language

Blue and violet still define the main system stage, while Penny’s pink lane stays clearly separated both in orbit and in the supporting information stack.

Responsive simplification

Desktop gets the strongest orbit depth. Smaller screens reduce radius and density while preserving the same interactive logic instead of flattening everything into static cards.

Contact / Penny Office

Penny now feels like the premium intelligence running the room.

Penny Office Executive Assistant Layer
Online WildCard System
Penny Presence

Controlled. Confident. Polished. A little dangerous in a perfectly professional way.

Penny is the premium assistant presence of WildCard DEV. She is not filler, not a gimmick, and not just a contact form skin. She is the interface voice that makes the system feel personal, high-end, and unmistakably alive.

Pink-forward identity Executive-assistant energy Stable on small screens
Role Front desk intelligence Guides contact, tone, and first impressions.
Signal Pink control layer Distinct from the base blue/violet system.
Client Intake

Clear first-contact routing for proposals, builds, rescue work, and premium branded experiences without making visitors hunt for the right lane.

Fast Response Paths

Phone, text, and email all stay visible and tappable, with stronger feedback so the site feels intentional instead of passive.

Brand Tone Control

Penny’s lane stays elevated, pink-forward, and controlled so the contact experience feels polished rather than generic.

Penny’s office now emphasizes decision clarity: the fastest route, the cleanest written route, and the future utility route are all visible immediately, while the interaction layer stays safe, lightweight, and mobile-friendly.

Contact WildCard DEV

Choose the lane that fits how you like to move. Email handles fuller project detail, text keeps things quick, and the direct line stays visible when speed matters.

Matt Tobaben Primary build lane
matt@wildcarddev.com (402) 915-0789
CEO Full Stack Development Project Intake
E Partner lane
SpaceBeth@wildcarddev.com Partner / developer / collaborative build force
Partner Development
Company line Fastest response lane
(402) 915-0789 Primary direct contact for current site, app, and rescue-build inquiries.
On phones, every primary contact control remains thumb-friendly and visible without requiring hover.
Penny’s pink lane highlights priority actions, while the rest of the system keeps the blue/violet WildCard DEV framing intact.

Leave a message for Penny

Send the polished version here. This keeps the current contact flow dependable while making the intake experience feel more like a premium concierge handoff than a generic form.

Email, phone, text, and form pathways all stay live here, but this lane is tuned for the cleanest handoff when you want to explain exactly what you need.

Watch Experience

A clearer wearable demo lane with room for Penny-first utility later.

Future-facing / small-screen intentional

The watch section now reads like a real product preview instead of a placeholder.

This pass keeps the architecture stable and the navigation untouched, while giving the wearable lane a more deliberate shell, clearer framing, and safer content density across desktop, phone, and very narrow widths.

Wearable-first thinking Future QR-ready Penny-adjacent
Live watch concept shell

What improved in 6A

The shell feels more intentional, the supporting copy explains the product lane more clearly, and the layout now reads like a future-facing wearable demo instead of a parking spot.

Why it stays lightweight

The stable Phase 5 navigation and section logic remain untouched. This is a visual and structural lift, not a risky interaction rewrite.

Built to stay clean at narrow widths. The watch lane keeps its place in the flagship architecture so later Penny-triggered shortcuts, branded QR entry points, wearable contact flows, and utility surfaces have a dependable home without forcing another structural rebuild.
Quick-action QR cards for resume, business card, and contact handoff flows.
Penny concierge prompts that feel native to a tiny screen instead of squeezed down from desktop.
Device-aware demo containers for square and circular wearable presentation later on.
Future-facing structure only

Lightweight hook containers are now in place for the next expansion pass.

These are intentionally framed as safe placeholders instead of active features, so the flagship build gains clean destinations for later QR utilities, avatar upgrades, Penny interaction lanes, Stripe-related flows, and watch-linked handoff content without disturbing the current navigation or interaction model.

QR feature staging

Structured tiles now reserve space for future resume, business card, and direct-contact QR surfaces without forcing those assets into the live layout yet.

QR HooksSafe container for branded QR art, link targets, and scan-first layouts later.

Avatar / media upgrade containers

Dedicated shells are now present for future Matt, E, and Penny media upgrades so richer holographic stills or video assets have a predictable landing zone.

Avatar HooksPrepared for higher-end stills, short loops, and later cinematic overlays.

Stripe / integration framing

The layout now includes a clearly non-functional integration lane so future Stripe-backed deposits, paid build requests, or service checkout flows can be introduced without reworking the section structure again.

Stripe preferred Request intake Payment status Client handoff
Payment / Integration HooksReserved for future processor UI, status copy, and protected next-step messaging.

Advanced Penny + watch-linked slots

Small, structured placeholders now mark where later concierge prompts, wearable quick actions, and watch-to-site continuity cards can plug in without creating layout clutter at tiny widths.

Penny SlotReserved for higher-touch assistant prompts, task routing, and contextual micro-copy.
Watch-linked future contentReserved for mirrored cards, wearable triggers, and companion-flow summaries.