Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Emmanuel-Mtz-777/My-Personal-Portfolio/llms.txt

Use this file to discover all available pages before exploring further.

The Hero section is the very first thing visitors see when they land on the portfolio. It introduces Emmanuel Martínez — known online as Leviek — as a Full Stack Web Developer, anchors his location in Aguascalientes, Mexico, and immediately offers direct social contact links and CV download buttons. A full-viewport animated particle background renders behind his profile image, loading eagerly so the page feels alive from the first frame.

​
Content structure

All visible copy is sourced from src/langs/en.json (or es.json when the active locale is Spanish) under the top-level hero key. The four fields that drive the Hero’s text are shown below exactly as they appear in the English content file: 
// src/langs/en.json — hero key
{
  "hero": {
    "greeting":    "Hi! I'm Emmanuel Martínez",
    "role":        "Full Stack Web Developer",
    "description": "Passionate about web development, backend architecture, and containerized environments. I enjoy building complete applications from the user interface to the server, developing APIs, integrating services, and creating solutions focused on performance, organization, and scalability using a wide range of technologies.",
    "location":    "Aguascalientes, Mexico 🇲🇽"
  }
}
The component reads the locale at runtime (Astro.currentLocale) and selects the matching JSON object, so every text node in the section is fully bilingual with zero duplication of markup.

​
Component file

src/components/sections/Hero.astro The section lives inside a <section id="home"> element and is composed of two main columns:
  • Left column — heading (h1 greeting), role title (h2), description paragraph, location line, social buttons, and CV action buttons.
  • Right column — the developer’s profile photo (Yo.webp) layered on top of the OGL particle canvas.

​
Social buttons

Three social links are rendered with src/components/ui/buttons/SocialButton.astro, each wrapping an inline SVG icon:
ButtonDestination
GitHubhttps://github.com/Emmanuel-Mtz-777
LinkedInProfile URL for Humberto Emmanuel Rosales Martínez
Gmailmailto:hemmanuelmtz777@gmail.com
The section also renders two CV buttons — Descargar CV (download) and Ver CV (open in new tab) — whose target PDF switches between the Spanish and English variants via the getCVFile() helper.

​
Particles effect (OGL / WebGL)

The animated background is powered by src/components/effects/Particles.jsx, a React 19 component that bootstraps a full WebGL scene using the OGL library (Renderer, Camera, Geometry, Program, Mesh). Key implementation details:
  • Particles are scattered in 3D space using a unit-sphere distribution and animated each frame by a custom GLSL vertex shader.
  • Colors are sampled randomly from a configurable palette — in the Hero the palette is ["#06B6D4", "#3B82F6", "#9333EA", "#EC4899"] (cyan → blue → purple → pink).
  • The component accepts props for particleCount, particleSpread, speed, particleBaseSize, alphaParticles, disableRotation, and pixelRatio, making it fully reusable across other sections (e.g. TechCard).
  • The canvas is hidden on mobile (hidden md:block) to preserve battery life on small screens.
Hero-specific Particles configuration: 
<Particles
  client:load
  particleColors={["#06B6D4", "#3B82F6", "#9333EA", "#EC4899"]}
  particleCount={200}
  particleSpread={10}
  speed={0.6}
  particleBaseSize={120}
  alphaParticles={false}
  disableRotation={false}
  pixelRatio={1}
/>

​
LogoLoop effect (rAF-based)

The portfolio ships a reusable horizontally scrolling logo marquee component at src/components/effects/LogoLoop.jsx. This React component drives its animation entirely with requestAnimationFrame and exponential-smoothing velocity (controlled by SMOOTH_TAU = 0.25) — no GSAP dependency — to produce a fluid, butter-smooth scroll rather than a CSS animation. It supports:
  • Configurable speed and direction (left | right | up | down).
  • pauseOnHover / hoverSpeed for interactive deceleration.
  • fadeOut gradient overlays on both edges.
  • scaleOnHover per-item zoom on mouse entry.
  • Automatic copy-count calculation so the track always fills the container width regardless of viewport size.
  • ResizeObserver integration to recalculate layout when the container or logos change size.
The LogoLoop component is memo-wrapped and exposes a stable displayName = 'LogoLoop' for React DevTools. The component file exports both a named export (LogoLoop) and a default export.

Build docs developers (and LLMs) love

Get started for freeTalk to us