Francisco Javier Guardado
I am a Full Stack Web Developer and DevOps Engineer specializing in decoupled Drupal 11 and Next.js architectures. I build professional, scalable web platforms using a component-driven philosophy — crafting custom Drupal modules, paragraph type systems, and self-registering React components that are portable, opt-in by design, and free of hardcoding. My stack includes Drupal 11, Next.js, TypeScript, Tailwind CSS, shadcn/ui, and a plug-and-play paragraph registry that powers dynamic content delivery via JSON:API. I deploy with confidence using Pantheon for Drupal hosting, GitHub for version control, and Vercel for Next.js — maintaining clean Dev, Test, and Live environments with full CI/CD pipelines. Every architectural decision I make prioritizes editor autonomy, code reusability, and professional standards that scale.
I build my websites by first creating my local environment
This screenshot shows my local environment showing my Next.js code and architecture and structural design I take of component creation.
My Pantheon Site
I build decoupled Drupal 11 + Next.js sites from the ground up — from provisioning cloud environments to deploying production-ready frontends. Here is how I set up this very site:
- Provisioned a Drupal 11 site on Pantheon with Dev, Test, and Live environments connected to a GitHub repository for automated deployments.
- Spun up a local development environment using DDEV, mirroring the Pantheon stack with a custom HTTPS domain, PHP, and MySQL — fully synced with the remote codebase via Git.
- Installed and configured key Drupal modules including Paragraphs, JSON:API, Decoupled Router, Pathauto, and custom modules fg_components and fg_megamenu — all managed via Composer and exported to config/sync for reproducibility.
- Built a decoupled Next.js frontend on Vercel connected to the Drupal JSON:API, with a plug-and-play paragraph registry, shared utility transformers, and a dynamic catch-all route that works with any content type automatically.
- Established a professional deployment workflow — code flows up from local to Dev to Test to Live via Git and Terminus, while content and files flow down from Live using Pantheon environment cloning.
My Vercel Setup
I deployed and configured the Next.js frontend on Vercel, connecting it directly to the live Drupal backend for seamless content delivery.
- Created a Vercel project connected to the GitHub repository, enabling automatic deployments on every push to the master branch.
- Configured the NEXT_PUBLIC_DRUPAL_BASE_URL environment variable in Vercel to point to the live Pantheon Drupal instance for production content delivery.
- Built a dynamic catch-all Next.js route that resolves any Drupal path via the Decoupled Router API — no content type hardcoding, works with any content type automatically.
- Implemented a static paragraph registry in TypeScript that auto-derives all JSON:API includes and routes any paragraph type to its React component — reliable in Next.js App Router production builds.
- Achieved full CI/CD pipeline — every git push triggers a Vercel production build, type-checked with TypeScript, compiled with Turbopack, and deployed globally on Vercel's edge network.
My Drupal Content
Every component on this site is built following a strict plug-and-play architecture from Drupal paragraph types to self-contained Next.js components, each piece is portable, opt-in, and free of hardcoding.
- Each component starts as a Drupal paragraph type — fields, color options, and form displays configured via PHP script, exported to config/sync, and committed to Git.
- On the Next.js side, each component has its own folder with a transformer, types file, layout, and wrapper — all driven by a single static registry that handles rendering and JSON:API includes automatically.
- Editors opt-in to components per content type via the Drupal UI — selecting which paragraph types are available per content type. No component is ever forced onto a content type.
- When creating a node, editors pick from available components, fill in the fields, and save — Next.js instantly renders the correct component with its color map and layout.
