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.

The Home page is the primary entry point of Hector Portfolio. It renders a continuous single-scroll layout that takes a visitor from the animated hero banner through an about section and skills showcase all the way down to the contact form — all wrapped in a single dark-mode container. Every major content block is a standalone component, making the page easy to maintain and extend without touching the root file.

​
Route

PathComponent file
/src/pages/Home.jsx

​
Component Composition

Home.jsx renders the following components in order, all nested inside a single wrapper div: 
// src/pages/Home.jsx
import React from "react"
import "@styles/home.css"

import Nav        from "@components/Nav"
import Banner     from "@components/Banner"
import Acerca     from "@components/Acerca"
import Habilidades from "@components/Habilidades"
import BtnArriba  from "@buttons/BtnArriba"
import Formulario from "@components/Formulario"
import Aside      from "@components/Aside"
import Footer     from "@components/Footer"

const Home = () => {
  return (
    <>
      <div className="data-bs-theme-dark letra-home">
        <Nav />
        <Banner />
        <Acerca />
        <Habilidades />
        <BtnArriba />
        <Formulario />
        <Aside />
        <Footer />
      </div>
    </>
  )
}

​
Component descriptions

ComponentRole
NavNavigation bar with anchor links to #habilidades and #contactame, plus route links to /aplicaciones and /blog. Runs window.scrollTo(0, 0) on every location.pathname change and hides/shows itself on scroll.
BannerFull-viewport hero section displaying the developer name, title (FullStack Developer - BTP CPI), a short description, and action buttons linking to GitHub, LinkedIn, and the CV.
Acerca”About me” section (#acercademi). Renders the personal introduction paragraph, a personal-projects grid, a certifications paragraph, and a <Certifications /> component.
HabilidadesSkills section (#habilidades). Shows an auto-scrolling logo carousel for Front-end technologies and a second carousel for Back-end technologies, each preceded by a description paragraph.
BtnArribaFloating scroll-to-top button. Appears once the user scrolls past the fold and smoothly returns the page to the top when clicked.
FormularioContact form (#contactame) with fields for name, email, subject, and message. Sends mail via EmailJS. The form is toggled open/closed with a circular button and uses i18n keys from en.json / es.json.
AsideFixed side panel with a quick “Contact Me” shortcut link.
FooterPage footer with copyright information and social links.

​
Anchor Links

The Nav component provides in-page anchor links and route links. The #acercademi anchor link is not rendered by Nav — it exists as an id on the <Acerca /> section but is not exposed in the navigation bar.
LinkTypeTarget
#habilidadesAnchorSkills — <Habilidades /> (hidden on /aplicaciones and /blog)
#contactameAnchorContact — <Formulario />
/aplicacionesRouteProjects page (hidden when already on /aplicaciones)
/blogRouteBlog page (hidden when already on /blog)

​
Scroll Behaviour

Nav uses a useEffect with location.pathname as a dependency. On every route change it:
  1. Calls window.scrollTo(0, 0) to restore the scroll position to the top.
  2. Attaches a scroll event listener that hides the navbar (top: -50px) when scrolling down and reveals it (top: 0) when scrolling back up.
// inside Nav.jsx
useEffect(() => {
  window.scrollTo(0, 0);

  let prevScrollpos = window.pageYOffset;
  const handleScroll = () => {
    let currentScrollPos = window.pageYOffset;
    const navbar = document.getElementById("navbar");
    const n2 = document.getElementById("n2");

    if (prevScrollpos > currentScrollPos) {
      navbar.style.top = "0";
      n2.style.top = "0";
    } else {
      navbar.style.top = "-50px";
      n2.style.top = "-50px";
    }
    prevScrollpos = currentScrollPos;
  };

  window.addEventListener("scroll", handleScroll);
  return () => window.removeEventListener("scroll", handleScroll);
}, [location.pathname]);

​
Dark Mode Wrapper

The entire page content is wrapped in a div with the classes data-bs-theme-dark and letra-home. This enables Bootstrap’s dark theme tokens across all child components and applies the global font stack defined in home.css. 
<div className="data-bs-theme-dark letra-home">
  {/* all page components */}
</div>

​
CSS

The page imports its base styles from @styles/home.css: 
import "@styles/home.css"
This stylesheet is resolved via the @styles Vite path alias, which maps to src/styles/. It defines the letra-home font class and any page-level layout overrides.

​
Related Components

Banner

Hero section with developer title, description, and CTA buttons.

Skills

Auto-scrolling logo carousels for Front-end and Back-end technologies.

Certifications

Certifications and education timeline inside the About section.

Nav

Navigation bar with anchor links, route links, and scroll hide/show.

Build docs developers (and LLMs) love

Get started for freeTalk to us