Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/iwinser117/react-portafolio/llms.txt

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

Hector Portfolio is a personal brand site built by Iwinser Sanchez to centralize his professional identity in a single, fast web experience. It is a React 18 single-page application bundled with Webpack 5 that brings together a professional profile, a filterable project gallery, a technical blog, and a direct-contact form — all wrapped in a bilingual (English / Spanish) interface with switchable dark and light themes. The live deployment is available at iwinsersanchez.netlify.app.

​
What the Portfolio Does

The application presents four core areas of content through client-side routing powered by React Router DOM v6:
  • Home (/) — Landing page with sequential sections covering the professional introduction, an about section, skills overview, contact form, and footer.
  • Projects (/aplicaciones) — Gallery of highlighted projects with text search, category filtering, demo links, repository links, and visual adaptation to the active color theme.
  • Blog (/blog) — Paginated list of technical articles loaded from a local JSON data source.
  • Blog Post (/blog/:slug) — Individual article view rendered from the slug parameter.

​
Key Technical Highlights

  • Dark / Light Mode — A DarkModeProvider context wraps the entire application and exposes the current theme to every component tree without prop drilling.
  • Bilingual Support (EN / ES) — i18next and react-i18next handle all UI strings through en.json and es.json locale files. Language switching is available at runtime without a page reload.
  • Contact Form via EmailJS — The contact form uses @emailjs/browser to send messages directly from the browser using a service key stored in the Email_key environment variable.
  • Responsive Design — Layout adapts across screen sizes using react-bootstrap and mdb-react-ui-kit alongside custom CSS stylesheets.
  • Webpack Path Aliases — Absolute-style imports such as @components, @pages, and @styles keep import paths clean throughout the codebase.

​
Tech Stack

TechnologyRole
React 18UI rendering and component model
React Router DOM v6Client-side routing
i18next + react-i18nextInternationalization (EN / ES)
Webpack 5Bundling, aliases, dev server
MUI v6 (@mui/material)Material Design component library
@emailjs/browserBrowser-side email delivery
react-bootstrap + mdb-react-ui-kitResponsive layout utilities
date-fnsDate formatting and manipulation
SweetAlert2Alert and notification dialogs
lucide-react + react-iconsIcon sets

​
Explore the Documentation

Local Setup

Clone the repo, install dependencies, and spin up the Webpack dev server in under two minutes.

Project Structure

Understand the directory layout, Webpack aliases, and module conventions used across the codebase.

Dark / Light Theme

Learn how DarkModeProvider supplies theme state to the entire component tree via React Context.

Internationalization

See how i18next and locale JSON files power the bilingual EN / ES experience.

Build docs developers (and LLMs) love

Get started for freeTalk to us