Horacio Ontiveros

The Problem

Architectural portfolios demand extreme visual fidelity — massive, high-resolution imagery showcasing structural details. Traditional SPAs and heavy frameworks introduce massive Layout Shifts (CLS), poor Largest Contentful Paint (LCP) times, and fragmented SEO across regions, destroying both user experience and discoverability.

The Solution

Engineered a highly optimized, statically generated (SSG), multilingual platform from the ground up using Astro 5 and Vue.js 3. By coupling Astro’s island architecture with build-time image pipelines, the platform delivers zero-JS entry states, flawless layout integrity, and instant internationalization.

Island Architecture & Partial Hydration

Instead of forcing a monolithic JS bundle onto the client, interactive components are hydrated surgically:

• HeroSlider.vue uses deferred hydration (client:idle) to prioritize critical above-the-fold content loading.
• MasonryGallery.vue leverages client:visible, initializing the complex Macy.js dynamic grid only when scrolled into view — saving massive main-thread execution time.

Automated Binary & Asset Pipeline

To handle multi-megabyte architectural photographs, a build-time image processing pipeline was scripted using Sharp:

• Dynamically inspects metadata and enforces structural max-widths (1920px)
• Auto-generates lightweight next-gen formats (.webp, .avif)
• Hardcodes dynamic aspect ratios into the DOM, completely eliminating CLS

Context-Aware Asynchronous Multi-Filtering

An event-driven filtering system between static Astro elements and reactive Vue components: CustomEvent('projectFilter') dispatched through global window listeners. The masonry grid updates its state, executes DOM changes via nextTick, and forces layout recalculations exactly after each micro-interaction or slide transition.

i18n & Multi-Region SEO

• Multi-locale concurrent routing (/es/, /en/, /fr/)
• Automated language sitemap indexes with individual region injections (sitemap-en.xml, etc.)
• Strict JSON-LD Schema structures with deep contextual keywords like VisualArtwork and dynamic geo-targeted metadata

Results

Lighthouse 100/100 Mobile Performance Score. The platform loads in under 1 second while serving heavy visual components, dynamic multilingual routing, and responsive image sets that completely eliminated data overhead across all devices.

🚀 Case Study: Enterprise Logistics & Order Workflow Engine

Role: Lead Product Engineer (Architecture & UI)
Tech Stack: Python, FastAPI, React/UI, PostgreSQL (Supabase), Google Cloud Platform (Cloud Run), Docker, Asyncio.

🛑 The Problem

The client’s regional operations were bottlenecked by a manual, disjointed system. Processing logistics, calculating complex delivery polygons, applying dynamic pricing tiers, and notifying customers required multiple human touchpoints. This resulted in high operational latency and an increased margin for critical errors as the business tried to scale.

📐 The Architecture

I approached this challenge with a Design-to-Deployment mindset: mapping out a flawless user experience first, and then engineering a highly fault-tolerant, event-driven backend to support it.

⚙️ Technical Execution & Impact

1. Zero-Friction UI & Frontend
Leveraged my background in design to build an intuitive, reactive interface that abstracts the underlying complexity away from the operators, reducing training time to near zero.

2. Serverless Orchestration (GCP & Python)
Engineered a central OrderWorkflowManager using Python and FastAPI. The backend is containerized via a multi-stage Dockerfile and deployed on Google Cloud Run, heavily optimized to eliminate cold starts and maintain response times under 200ms.

3. Event-Driven & Async Processing
To prevent UI blocking during heavy operations, I implemented advanced asyncio patterns. While the system computes complex ray-casting for delivery polygons via Google Maps and executes ACID transactions to PostgreSQL, it simultaneously:

• Generates physical PDF receipts in memory and uploads them to Google Cloud Storage.
• Synchronizes deals and customer data with Pipedrive CRM.
• Triggers real-time WhatsApp Webhooks via Respond.io.

🏆 Business Results

Delivered a robust system covered by +100 unit tests (pytest + mocking) to guarantee zero downtime in production. The platform entirely digitized the organization’s regional workflow, transforming a slow, error-prone manual process into an automated, real-time logistics engine.

The Problem

Professional photographers operate with a fragmented workflow: one tool to deliver high-res client galleries, another to track client selections, and a completely separate CMS to update their public portfolio. This disconnect costs them hours of manual data entry and asset management per photoshoot.

The Solution

Architected and developed a centralized, subscription-based SaaS platform that unifies client delivery with portfolio generation. The system allows photographers to securely share galleries via access codes, lets clients curate their favorite shots, and automatically publishes approved images to an SEO-optimized public portfolio.

High-Performance Media Pipeline

Engineered an automated asset pipeline using Python/FastAPI. When a photographer uploads a raw, high-res image, the backend intercepts it, processes a lightweight .webp preview via Pillow, and uploads both the original and the optimized preview to Google Cloud Storage. To protect intellectual property, all image access is gated behind dynamically generated Signed URLs with strict expirations.

Concurrent Bulk Uploader (Vue 3)

To handle hundreds of multi-megabyte files without crashing the browser, I developed a custom Vue 3 upload component (GCSUploader.vue) that processes files in concurrent batches of three. It provides real-time, per-file progress tracking and instantly catches backend quota-exceeded errors (HTTP 403) to trigger premium upsell modals.

SaaS Monetization & Stripe Webhooks

Implemented a fully functional subscription engine using Stripe Webhooks: the backend listens for checkout.session.completed events to automatically upgrade users to the PRO tier. Complex business logic enforces database quotas (Free tier: 3 galleries vs. PRO: 50 galleries) and time-based access revocations.

Dark Mode UI & Dynamic Portfolios

Built an intuitive, Adobe-inspired dark mode interface using Tailwind CSS. Dynamic public portfolios feature JSON-LD schema generation for SEO and reactive lightbox galleries with keyboard navigation.

Unit Economics

Production-ready application with PostgreSQL Row-Level Security (RLS). The platform is architected to operate at a 90%+ profit margin on its subscription tiers: fractional-cent media hosting on Google Cloud Storage and serverless frontend deployments keep infrastructure costs practically at zero, capturing maximum revenue until hitting massive scale.

🚀 Case Study: Agenda Citara — Multi-tenant Scheduling SaaS & Real-Time Flow Control

Role: Lead Full Stack & Architecture Engineer
Tech Stack: Next.js 15 (App Router), Supabase (PostgreSQL, RLS, WebSockets), Tailwind CSS, Stripe (Metered Billing), Node.js (Baileys WA Socket), AWS S3.

🛑 The Problem

Service professionals (doctors, therapists, consultants) deal with rigid calendars. When a single appointment runs 15 minutes late, the rest of the day falls into chaos — crowded waiting rooms and frustrated clients. Additionally, automated WhatsApp reminders via traditional providers like Twilio consume high unit costs, eroding the profit margins of independent professionals.

📐 The Solution

I engineered a highly scalable, multi-tenant scheduling platform. Beyond standard booking features, Citara introduces a proprietary Real-Time Flow Control Module (MTR) that dynamically recalculates and shifts the entire day’s schedule if an appointment runs overtime. To solve the notification cost issue, I built a hybrid messaging architecture allowing users to either use official templates or bridge their personal WhatsApp via a custom decentralized microservice.

⚙️ Technical Execution & Architecture

1. MTR Engine & Dynamic Rescheduling
An algorithmic engine (/api/mtr/appointment/delay) intercepts delayed check-outs. When a session exceeds its allotted time, the system computes the minute offset, checks the user’s configured buffer limits, and cascades the delay across all subsequent appointments. Clients immediately receive an automated WhatsApp alert with their newly adjusted time.

2. Decoupled Hybrid WhatsApp Microservice
I architected a dual-channel messaging system to drastically reduce notification overhead. Users can opt for standard Twilio delivery, or connect their personal WhatsApp using a custom Node.js/Express microservice powered by @whiskeysockets/baileys. An AWS S3 synchronization pipeline persists authentication states across serverless container restarts — enabling zero-cost automated messaging directly from the professional’s own number.

3. Metered Overage Billing (Stripe Webhooks)
Engineered a complex Stripe integration handling flat-rate subscriptions (Pro/Premium) alongside usage-based metered billing. The backend tracks the monthly notification quota in PostgreSQL. If a user exceeds their limit, the system triggers a checkout.session.completed webhook to automatically append a metered overage item to their Stripe subscription, capping limits dynamically to prevent bill shock.

4. Real-time Database & Row-Level Security (RLS)
Secured the multi-tenant architecture using Supabase Row-Level Security, ensuring absolute data isolation between professionals. PostgreSQL logical replication (Supabase Realtime) broadcasts instant UI updates via WebSockets — the operator’s dashboard reflects appointment statuses without manual polling.

🏆 Business Results & Unit Economics

Delivered a high-margin SaaS platform. By offering the personal WhatsApp microservice, customer acquisition friction is reduced (no extra message fees), while power users naturally upgrade to Premium tiers for advanced reporting and MTR features. The serverless and edge-optimized architecture keeps infrastructural costs negligible, scaling profitably from day one.

Catalog Architecture

Hialuroniz represents an information system for health and wellness. The core of the project is a search and logical filtering engine that classifies hundreds of products based on wellness goals, allowing for systemic rather than just visual navigation.

Efficiency in Selection

• Intelligent Taxonomy: Development of a cross-category structure that optimizes the user’s purchase path, reducing the number of clicks needed to find specific health solutions.
• Asset Optimization: Implementation of advanced lazy loading, keeping the extensive catalog fluid even on limited mobile connections.

Commercial Impact

The efficient catalog architecture has resulted in a direct improvement in the conversion rate, making it easier for users to make informed decisions based on a clear and well-structured information system.

Systems Engineering

HiPets is a resource planning system (mini-ERP) verticalized for veterinary clinics. The solution integrates a distributed persistence engine via Supabase, making digital medical records securely and instantly available from any device on the clinic’s network.

Efficiency and Automation

• Inventory and Appointment Control: Automation of appointment workflows linked to the patient database, preventing manual errors in scheduling medical boosters.
• Reactive Backend: Implementation of a lightweight Python/Flask API deployed on GCP, designed for ultra-low response times in high-demand operational environments.

Implementation Results

The system centralizes administrative operations, reducing patient intake time by 30% and ensuring total control over digital clinical histories, vital for medical treatment continuity.

Information and Systems Architecture

The IJC project focused on creating a secure and distributed digital asset management system. The architecture is built on a Google Compute Engine environment under a hardened configuration to guarantee the integrity of critical announcements and documents.

Operational Efficiency

• Custom CMS: I developed a tailored administrative backend optimized for non-technical users, allowing vital information to be published in seconds and eliminating internal information silos.
• Database Architecture: Query optimization in MariaDB to support high volumes of concurrent traffic during official notice periods.

Service Impact

The digitalization of procedures and medical directories has reduced the flow of first-level telephone support, allowing the institute’s staff to focus on direct clinical care and more complex management.

Systems Integration

For Galau Consultoría, the system was designed as a lead generation platform. WordPress core was integrated with an advanced tracking layer through Google Tag Manager, allowing for the efficiency of each touchpoint in the talent selection workflow to be measured.

Funnel Efficiency

• Tracking Automation: Configuration of integrated Workspaces that allow data synchronization between the web portal and the team’s internal management tools.
• Low-Maintenance Architecture: Deployment on Google Compute Engine with backup policies and manual scaling, guaranteeing the portal’s operational stability.

Business Impact

The system has professionalized talent intake, allowing the consultancy to manage a larger volume of candidates without increasing its administrative load, thus improving the speed of response to its corporate clients.

Content Engineering

This project focused on creating a high-availability information distribution system. The architecture was optimized at the Apache server level to handle organic traffic spikes, using compression and efficient digital asset delivery techniques.

Efficiency and Technical SEO

• Semantic Architecture: Implementation of a data structure that allows search engines to index information with maximum efficiency, reducing the crawl budget consumed by each visit.
• Loading Performance: PHP pipeline optimization to ensure fast response times, vital for search engine positioning and user retention.

Operational Impact

The portal functions as a passive organic acquisition engine, generating thousands of monthly visits with minimal technical intervention, thanks to the system’s robustness and its initial core optimization.

Communication Systems

Centro AJI’s system was structured to facilitate a direct connection between users and health services. An integrated contact architecture was implemented to minimize operational friction, allowing support requests to reach center coordinators in a structured manner.

Management Efficiency

• Channel Automation: Integration of direct contact tools that eliminate intermediate steps in the communication chain, allowing for an immediate response in critical situations.
• Lightweight Architecture: Resource optimization for stable operation in shared hosting environments, maintaining site agility.

Results

A 24/7 operational channel that has allowed the center to expand its support capacity without needing to increase administrative staff dedicated to initial case reception.