> ## Documentation Index
> Fetch the complete documentation index at: https://alan-ramirez-dev.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 🎯 Project Introduction

> Interactive central ecosystem and microservices orchestrator (Frontend).

Welcome to the documentation of my web development portfolio!

This project acts as a central HUB designed under a static and modular architecture, serving as an integration point for four independent microservices. Its purpose is to demonstrate my capabilities in software engineering, design patterns, and full-stack deployments integrating multiple technologies.

## 🚀 Project Features & Advanced UX

<CardGroup cols={2}>
  <Card title="Static Hybrid Architecture" icon="bolt">
    Static Site Generation (SSG) with Astro to ensure near-instant load times and optimal performance.
  </Card>

  <Card title="Islands of Interactivity" icon="react">
    Integration of dynamic React components hydrated via `client:load` for efficient client-side state management.
  </Card>

  <Card title="Microservices Consumption" icon="network">
    Standardized communication contracts under strict versioning (`/api/v1/`) interacting with Java and PHP backends.
  </Card>

  <Card title="Web Accessibility (a11y)" icon="accessibility">
    ARIA attributes and native HTML semantics to support keyboard navigation and screen readers.
  </Card>
</CardGroup>

## 🛠️ Tech Stack

| Technology       | Project Purpose                                                 |
| :--------------- | :-------------------------------------------------------------- |
| **Astro**        | Static Site Generation (SSG), content collections, and routing  |
| **React**        | Interactive components, hydration, and complex state management |
| **Tailwind CSS** | Global styles with pure CSS variables under a dark palette      |
| **Axios**        | HTTP clients configured with security interceptors              |

## 📈 Featured Case Studies

The HUB integrates and orchestrates multiple microservices (deployed independently) into a single fluid interface:

<AccordionGroup>
  <Accordion title="1. Interactive Sandbox: Transactional Engine" icon="workflow">
    * **Live Cloud Integration:** Consumption of asynchronous requests under REST semantics towards a robust backend in Spring Boot 3 (Java 21).
    * **Defensive Reactive UI:** Emits *Custom Events* to freeze global navigation during active network cycles.
    * **Integrated Network Logger:** Observability module coupled to the interface that visually displays the complete lifecycle of HTTP exchanges.
  </Accordion>

  <Accordion title="2. Dynamic Report Generator" icon="file-spreadsheet">
    * **Context Consistency:** Dynamic injection of the client's time zone (`Intl.DateTimeFormat().resolvedOptions().timeZone`) into the PHP rendering engine.
    * **Perimeter UX:** Prevention of Race Conditions by intercepting HTTP 429 (Rate Limiting) codes.
  </Accordion>

  <Accordion title="3. ETL Pipeline: Mass Ingestion" icon="arrow-right-left">
    * **Smart Network Synchronization:** Defensive frontend that actively polls the health of the backend engine.
    * **SQL Terminal:** Embedded interactive console that evaluates system robustness and the simulated backend WAF.
  </Accordion>

  <Accordion title="4. Micro-Frontend: Identity Access Management (IAM)" icon="user-cog">
    * **Access Control:** PHP backend consumption (Laravel 13) evaluating roles (`admin`, `auditor`, `operator`).
    * **Smart HTTP Client:** Axios interceptors for automatic and secure JWT injection.
    * **Integrated Experience:** Authentication components operating as a Single Page Application (SPA).
  </Accordion>
</AccordionGroup>

## 💻 Development Commands

All commands are executed from the project root using `pnpm`:

```bash theme={null}
# Install dependencies
pnpm install

# Start local server (localhost:4321)
pnpm dev

# Build static site optimized for production
pnpm build

# Preview build locally
pnpm preview
```