Client
Mauro Marchisio del Rivero
Role
Full-Stack No-Code Developer
Year
2026
Tools
Antigravity, MCP, Firebase, Skills
Multimodal Design & Vibe Coding
The development of mauromarchisio.com is more than the creation of a high-impact web portfolio; it is a practical, successful experiment in the Vibe Coding paradigm. The platform was conceived, designed, and developed by orchestrating workflows with different artificial intelligence agents, demonstrating how AI can actively contribute to architectural decisions, UX/UI design, performance optimization, and continuous deployment.
The "Vibe Coding" Paradigm
Unlike traditional web development focused purely on writing syntax, this platform was built by directing specialized autonomous agents. The process centered on system architecture, product direction, and validating outcomes through structured natural-language instructions: Role-based agent orchestration: The AI agents were assigned specific personas (Product Engineer, Site Reliability Engineer, Design Lead). Each operated under its own business rules and strict quality thresholds (Definition of Done), preventing code from being merged when requirements—such as minimum performance—were not met. Automated micro-skills ("Skills"): Pre-programmed skills were used for critical tasks. The SEO Auditor skill autonomously analyzed the site's hierarchy and proposed semantic and internal-linking improvements. The Committer skill maintained a clean Git history following the Conventional Commits standard. Convergent development cycle: The site evolved conversationally. Each component passed through an iterative Diagnosis > Implementation > Refactoring loop led by AI under constant human strategic supervision.
Strategic Technology Stack
To ensure top-tier performance and comply with the self-imposed rules of "Library Minimalism" and an "SRE Performance Budget," the following stack was selected with speed and security as priorities: Frontend: Next.js 14+ (App Router) and React 19, using server-side capabilities to improve SEO and reduce loading times. Styles & UI: Tailwind CSS 4.0. The design prioritizes dark glassmorphism interfaces, subtle gradients, and CSS-only transitions instead of relying on heavy third-party animation libraries. Backend & Storage: A serverless architecture with Firebase (Firestore) for agile data persistence and Firebase Storage for media hosting. Security & Authentication: Firebase Auth manages restricted access through secure tokens, protecting administration routes and endpoints without exposing sensitive data.
Key Features and Architecture
1. Custom Administration Panel (Custom CMS) Off-the-shelf systems such as WordPress were ruled out. Instead, a modern, secure, fully custom private administration panel (/admin) was developed within the same repository. Intuitive Bento Grid Management: A modular interface for editing, adding, reordering through structured drag-and-drop, and removing services and tools from the main layout without touching a single line of code. Dynamic Multimodal Portfolio: An advanced CRUD system for projects and reels. It supports asynchronous uploads of native videos (.mp4/.webm) and images directly to Firebase Storage, editable "Content Blocks" for the narrative of each case study, and fine-grained control over how much space every item occupies in the grid. Live Editing and Global Settings: Full control over strategic copy, including the homepage hero text, SEO metadata, and dynamic elements such as social media links.
2. High Performance and User Experience (UI/UX) Zero Layout Shift (CLS): A carefully calculated structure prevents visual jumps during asynchronous loading through skeleton states and strict dimensions. Fluid Micro-interactions: Haptic feedback, glow-effect hover animations, instant-access contact modals, and an immersive native reels player. 3. Automated Semantic SEO Metadata and Robots: Automated, dynamic generation of Open Graph metadata, Twitter Cards, sitemap.xml, and robots.txt for the App Router. Agent-Optimized Content: Copy, heading structure (H1/H2), and keyword density were iteratively audited by LLMs specialized in semantic SEO.
Conclusion
This project embodies the emerging role of the Multimodal Designer & Vibe Coder. The ability to conceive a high-standard visual experience and translate it organically into production code—using AI models as a tactical execution engine—helps dissolve the technical barrier between the creative idea and the functional product, while preserving rigorous architectural standards.
Up next
Next project