ProjectsJune 7, 2026

Quick Metal Shop: ArquiExpo 2026 Interactive Gallery Application

Overview

For ArquiExpo 2026, Puerto Rico's premier annual convention for the architecture and construction sector, Quick Metal Shop needed a high-impact digital experience for their stand. I designed, developed, and deployed a custom-built, vertically-oriented interactive touchscreen web application in under 48 hours. The system allowed attendees to explore the company's full catalog of 285 architectural panel variants and real-world project portfolio in a tactile, visually impressive way on a large vertical touchscreen display.

The Challenge

The constraints were significant:

No existing application or base code to build on.
A hard deadline of 48 hours before the convention.
A substantial catalog containing 285 product images (all at 1080×1080 resolution).
A vertical touch interface context that had to perform flawlessly under heavy usage, including on mobile browsers.

Any lag or layout failure would be a public-facing brand embarrassment at the industry's flagship event.

Strategic Solution

Ideation & Architecture

I began by using Gemini 3.1 Pro to rapidly structure the application's conceptual architecture, defining the user experience flows, content hierarchy, and interaction model before writing a single line of code.

Development Stack

To compress the timeline and achieve high performance, I chose:

Google AntigravityClaudeNext.jsJavaScriptNetlify

Google Antigravity (with Claude Sonnet 4.6 as the AI coding agent): leveraged for accelerated full-stack scaffolding and intelligent code generation.
Next.js: framework for fast rendering and clean component architecture.
CSS + JavaScript: custom styling and vertical interaction logic.
Netlify: deployment platform, enabling instant continuous deployment.

Core Application Features

The gallery was engineered with two distinct viewing modes for the architectural panel catalog:

Single-image mode: full-screen, one-at-a-time navigation for focused product exploration.
Grid gallery mode: multi-panel overview for browsing and comparison.

Both modes were built to accommodate the full 285-image catalog without performance degradation, maintaining smooth 60fps interaction on the vertical touchscreen interface.

Critical Technical Problem-Solving: iOS Safari Rendering

One of the most significant engineering challenges emerged during QA: the application was rendering incorrectly on iPhone (Safari browser). This was a critical failure point given that attendees would be accessing the experience on mobile devices throughout the event. I diagnosed and resolved the iOS Safari-specific layout and rendering conflicts (such as vertical height adjustments and touch event handling quirks), ensuring full visual fidelity and interaction parity across all device contexts. The final application is fully responsive regardless of device, orientation, or browser engine. Responsive Design and iOS Optimization

Results & Impact

Development TimelineUnder 48 Hours

Catalog Size285 Panel Variants

Cross-Platform Compatibility100% (iOS Safari Resolved)

Interactive ModesSingle-Image & Grid Gallery

Infrastructure OverheadZero (Netlify Serverless)

Delivered a production-ready application in under 48 hours from concept to live deployment, with no external development support.
Showcased 285 architectural panel variants in a polished, dual-mode gallery experience optimized for vertical touchscreen interaction.
Contributed directly to ArquiExpo 2026 stand recognition as one of the strongest presences at the event.
Demonstrated full-stack agility: ideation with Gemini, accelerated development with Claude as a coding agent, clean deployment on Netlify, an end-to-end modern development workflow executed under real event pressure.

Live Application: arquiexpoqms.netlify.app

Related projects

Quick Metal Shop & Dakoma Roofing: AI-Powered Ad Creatives

3.92xROAS

How a lean, one-person production pipeline, built entirely on AI avatars, cloned voices, and rapid editing, replaced traditional video shoots and drove measurable results across two brands, two industries, and two ad objectives.

Read case study

Quick Metal Shop: The Brand Comes to Life

How a brand manual built from the ground up became one of the standout booths at ArquiExpo 2026, and a corporate video carried by a fully original soundtrack, composed with AI.

Read case study

Quick Metal Shop: Building a Marketing Department From the Ground Up

Establishing a complete full-stack marketing department and digital infrastructure from scratch, including brand manual, CRM automation, paid media, and AI content engines.

Read case study

Dakoma Roofing: Freelance Rebranding & Digital Automation

Complete brand overhaul, digital channel modernization, AI-powered SEO automation, and premium ad creative production for a B2C roofing and construction services provider.

Read case study

ATV Riders: WhatsApp Lead Automation with Kommo CRM

200+leads/day

End-to-end WhatsApp automation system built for a high-volume ATV dealership, filtering 200+ daily Meta leads through an intelligent chatbot, routing only sales-ready prospects to the commercial team.

Read case study

LeadBot AI: WhatsApp Automation for Lead Qualification

85%conversations automated

AI-powered WhatsApp chatbot that automated 85% of customer conversations, delivering qualified B2B leads to sales 24/7 without adding headcount.

Read case study

Building This Portfolio: AI-Assisted Development in Practice

<2mindeploy time

How I designed, built, and deployed a production-grade Next.js portfolio using AI agents as my development team, and what that says about the future of technical work.

Read case study