Component Architecture: Astro and React Components

src/components/
├── analitycs/
│   └── Analitics.astro
├── effects/
│   ├── LogoLoop.jsx
│   └── Particles.jsx
├── icons/
│   └── tec/
│       ├── frontend/       (Astro.astro, Css.jsx, Expo.astro, Html.jsx, React.jsx, Tailwind.jsx, Vue.jsx, …)
│       ├── backend/        (Express.jsx, Laravel.jsx, Node.jsx, SpringBoot.astro, …)
│       ├── db/             (ElasticSearch.jsx, Mysql.jsx, SQLite.astro, Supabase.astro, …)
│       ├── langs/          (Java.astro, Javascript.jsx, PhP.astro, Python.astro, Typescript.jsx, …)
│       └── tools/          (Docker.jsx, Git.jsx, Netlify.astro, …)
├── layout/
│   └── Header.astro
├── sections/
│   ├── Hero.astro
│   ├── Experience.astro
│   ├── Projects.astro
│   ├── Stack.astro
│   ├── Education.astro
│   └── AboutMe.astro
└── ui/
    ├── buttons/
    │   └── SocialButton.astro
    ├── cards/
    │   ├── CertificateCard.astro
    │   ├── EducationCard.astro
    │   ├── ExperienceCard.astro
    │   ├── ProjectCard.astro
    │   └── TechCard.astro
    └── labels/
        └── TechLabel.astro

interface Props {
  project: {
    title: string;        // Project display name
    description: string;  // Short project summary
    github: string;       // GitHub repository URL
    repository: string;   // Link label text (locale-aware, e.g. "View Repository")
    image: ImageMetadata; // Astro image asset (imported at the section level)
    tags: Array<{
      icon: AstroComponent | JSXComponent; // Tech icon component
      label: string;                        // Technology name
      color: string;                        // Background colour for the tag badge
    }>;
  };
}

interface Props {
  title: string;          // Category section heading
  items: Array<{
    icon: Component;      // SVG icon component from src/components/icons/
    title: string;        // Technology name (e.g. "React", "Node.js")
  }>;
  cols?: string;          // Optional Tailwind grid-cols class (default: "grid-cols-2 sm:grid-cols-3")
  class?: string;         // Optional additional CSS class applied to the card wrapper
  particleBaseSize?: number; // Particle dot size (default: 80)
}

interface Props {
  position: string;       // Job title
  company: string;        // Employer name
  duration: string;       // Date range string
  description: string[];  // Bullet-point responsibility list
}

interface Props {
  href: string;   // External link URL
  label: string;  // Button text (hidden on small screens via `hidden sm:block`)
}

interface Props {
  icon: Component;   // Icon component (e.g. a React or Astro SVG component)
  label: string;     // Technology name
  color: string;     // CSS colour value for the badge background
}

interface Props {
  particleCount?: number;         // Number of particles (default: 200)
  particleSpread?: number;        // Spread radius (default: 10)
  speed?: number;                 // Animation speed multiplier (default: 0.1)
  particleColors?: string[];      // Hex colour array for particle palette
  moveParticlesOnHover?: boolean; // Shift particles on mouse move (default: false)
  particleHoverFactor?: number;   // Multiplier for hover displacement offset (default: 1)
  alphaParticles?: boolean;       // Smooth alpha blending vs hard circle (default: false)
  particleBaseSize?: number;      // Base point size in pixels (default: 100)
  sizeRandomness?: number;        // Per-particle size variation (default: 1)
  cameraDistance?: number;        // Camera Z offset (default: 20)
  disableRotation?: boolean;      // Disable scene rotation (default: false)
  pixelRatio?: number;            // Device pixel ratio (default: 1)
  className?: string;             // Container CSS class
}

interface Props {
  logos: Array<{ node: ReactNode; title: string }>; // Items to loop
  speed?: number;            // Pixels per second (default: 120)
  direction?: "left" | "right" | "up" | "down"; // Scroll direction (default: "left")
  logoHeight?: number;       // Item height in px (default: 28)
  gap?: number;              // Gap between items in px (default: 32)
  pauseOnHover?: boolean;    // Pause animation on hover
  hoverSpeed?: number;       // Custom speed on hover (overrides pauseOnHover)
  fadeOut?: boolean;         // Render edge fade gradients
  scaleOnHover?: boolean;    // Scale individual items on hover
}

<body>
  <Analitics />
  ...
</body>

export const trackEvent = (name, params = {}) => {
  if (window.gtag) {
    window.gtag("event", name, params);
  }
};