Home Components: Hero, Intro Panel, and Typewriter

The home page is composed of three tightly coupled components — Home, Home2, and Type — all located in src/components/Home/. Together they produce the full landing experience: a two-column hero with an animated typewriter and a dental illustration, followed by an introduction panel with a tilt avatar and social links. Two utility components, Particle and Pre, complete the page-level experience alongside ScrollToTop, which is mounted globally in App.js.

Home (hero section)

Home.js is the page-level wrapper rendered at the / route. It mounts the <Particle> background, then lays out a Bootstrap <Row> with two columns inside a home-content container. The left column (md={7}) contains the greeting heading, the owner name, and the <Type> typewriter component:

src/components/Home/Home.js

<h1 style={{ paddingBottom: 15 }} className="heading">
  Hola!{" "}
  <span className="wave" role="img" aria-labelledby="wave">
    👋🏻
  </span>
</h1>

<h1 className="heading-name">
  Soy
  <strong className="main-name"> NAYELLI LIZHETT AGUILAR LOPEZ</strong>
</h1>

<div style={{ padding: 50, textAlign: "left" }}>
  <Type />
</div>

The className="main-name" class applies color: #cd5ff8 from style.css, giving the owner name its distinctive purple tint. To update the name, replace the text inside the <strong> tag. The right column (md={5}) renders the hero illustration image:

src/components/Home/Home.js

import homeLogo from "../../Assets/dentista.png";

<img
  src={homeLogo}
  alt="home pic"
  className="img-fluid"
  style={{ maxHeight: "450px" }}
/>

After the two-column row, <Home2 /> is rendered directly below to produce the intro panel section.

The hero image (src/Assets/dentista.png) can be swapped by replacing the file with your own image — keeping the filename — or by updating the import homeLogo path at the top of Home.js to point to a new asset.

Type (typewriter)

Type.js wraps the typewriter-effect library to cycle through a list of service strings below the owner name. The full component source is:

src/components/Home/Type.js

import React from "react";
import Typewriter from "typewriter-effect";

function Type() {
  return (
    <Typewriter
      options={{
        strings: [
          "Consultoria",
          "Limpiezas",
          "Extraciones",
          "",
        ],
        autoStart: true,
        loop: true,
        deleteSpeed: 50,
      }}
    />
  );
}

export default Type;

The options object controls every aspect of the animation:

Option	Value	Description
`strings`	`["Consultoria", "Limpiezas", "Extraciones", ""]`	Text phrases cycled in the hero. Add, remove, or reorder entries freely.
`autoStart`	`true`	Begins typing immediately on component mount.
`loop`	`true`	Restarts the cycle from the first string after the last one is deleted.
`deleteSpeed`	`50`	Milliseconds between each character deletion. Lower values delete faster.

To add new services, append strings to the strings array. To slow the deletion animation, increase deleteSpeed (e.g. 100).

Home2 (intro panel)

Home2.js renders the business introduction section directly below the hero. It uses a two-column Bootstrap layout inside a home-about-section container. Left column (md={8}) — contains the section heading and a multi-paragraph body with className="purple" spans for highlighted keywords:

src/components/Home/Home2.js

<h1 style={{ fontSize: "2.6em" }}>
  CONOCE SOBRE<span className="purple"> DENTAL </span>
</h1>
<p className="home-about-body">
  Especializados en tratamientos dentales correctivos y estéticos...
  <b className="purple"> cómodas instalaciones </b>
  ...
  <b className="purple">estándares de calidad.</b>
  ...
  <b className="purple">pacientes</b>
  ...
  <b className="purple"> blanqueamientos, endodoncia</b>
</p>

Edit the heading text and paragraph copy directly in Home2.js to reflect your own business description. Wrap any word in <b className="purple"> or <span className="purple"> to apply the accent color. Right column (md={4}) — renders a react-parallax-tilt wrapped avatar image:

src/components/Home/Home2.js

import myImg from "../../Assets/homeImg.png";
import Tilt from "react-parallax-tilt";

<Col md={4} className="myAvtar">
  <Tilt>
    <img src={myImg} className="img-fluid" alt="avatar" />
  </Tilt>
</Col>

Replace src/Assets/homeImg.png with your own avatar or business photo to update this image. Social links row — a full-width row below the two columns renders four social icon anchors. All four href values are currently empty strings and must be filled in:

src/components/Home/Home2.js

<ul className="home-about-social-links">
  <li className="social-icons">
    <a href="" target="_blank" rel="noreferrer" className="icon-colour home-social-icons">
      <AiFillGithub />
    </a>
  </li>
  <li className="social-icons">
    <a href="" target="_blank" rel="noreferrer" className="icon-colour home-social-icons">
      <AiOutlineTwitter />
    </a>
  </li>
  <li className="social-icons">
    <a href="" target="_blank" rel="noreferrer" className="icon-colour home-social-icons">
      <FaLinkedinIn />
    </a>
  </li>
  <li className="social-icons">
    <a href="" target="_blank" rel="noreferrer" className="icon-colour home-social-icons">
      <AiFillInstagram />
    </a>
  </li>
</ul>

Replace each href="" with the appropriate profile URL. The same four icons also appear in the Footer — see /customization/content for a checklist of every location where social hrefs need updating.

Particle background

Particle.js renders a react-tsparticles canvas that floats behind the page content on the Home, Projects, About, and Resume pages.

src/components/Particle.js

import Particles from "react-tsparticles";

function Particle() {
  return (
    <Particles
      id="tsparticles"
      params={{
        particles: {
          number: {
            value: 160,          // Total particles on screen
            density: { enable: true, value_area: 1500 },
          },
          line_linked: {
            enable: false,       // No connecting lines between particles
            opacity: 0.03,
          },
          move: {
            direction: "right",  // All particles drift to the right
            speed: 0.05,         // Very slow drift speed
          },
          size: { value: 1 },    // Tiny 1px dots
          opacity: {
            anim: {
              enable: true,
              speed: 1,
              opacity_min: 0.05, // Fades down to near-invisible
            },
          },
        },
        interactivity: {
          events: {
            onclick: { enable: true, mode: "push" }, // Click adds a particle
          },
          modes: {
            push: { particles_nb: 1 }, // One particle added per click
          },
        },
        retina_detect: true, // Doubles resolution on retina displays
      }}
    />
  );
}

Key configuration options at a glance:

Key	Default	Effect
`particles.number.value`	`160`	Total number of particles rendered
`particles.move.direction`	`"right"`	Direction of drift (`"left"`, `"top"`, `"bottom"`, `"none"`)
`particles.move.speed`	`0.05`	Drift speed; increase for faster movement
`line_linked.enable`	`false`	Set to `true` to draw lines between nearby particles
`opacity.anim.enable`	`true`	Enables fade-in/fade-out animation on each particle
`retina_detect`	`true`	Renders at device pixel ratio for sharp visuals on high-DPI screens

Pre (preloader)

Pre.js is a minimal preloader screen that overlays the entire viewport while the app hydrates.

src/components/Pre.js

function Pre(props) {
  return <div id={props.load ? "preloader" : "preloader-none"}></div>;
}

id="preloader" — the element is visible; style.css gives it a full-screen overlay.
id="preloader-none" — style.css sets opacity: 0 and visibility: hidden, making it invisible without unmounting.

In App.js, a setTimeout of 1200 ms flips load from true to false after the app mounts:

src/App.js

const [load, upadateLoad] = useState(true);

useEffect(() => {
  const timer = setTimeout(() => {
    upadateLoad(false);
  }, 1200);

  return () => clearTimeout(timer);
}, []);

To adjust how long the preloader is visible, change the 1200 value (milliseconds).

ScrollToTop

ScrollToTop.js uses React Router’s useLocation hook to watch for route changes and immediately scrolls the browser window back to the top-left corner (0, 0) whenever the pathname changes.

src/components/ScrollToTop.js

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
}

The component renders nothing to the DOM (returns null) and is mounted once inside <Router> in App.js, directly after <Navbar />. It requires no configuration.

Get Started

Customization

Components

Deployment

Home Components: Hero, Intro Panel, and Typewriter

Home (hero section)

Type (typewriter)

Home2 (intro panel)

Particle background

Pre (preloader)

ScrollToTop

Build docs developers (and LLMs) love

Get Started

Customization

Components

Deployment

Documentation Index

​Home (hero section)

​Type (typewriter)

​Home2 (intro panel)

​Particle background

​Pre (preloader)

​ScrollToTop

Build docs developers (and LLMs) love

Home (hero section)

Type (typewriter)

Home2 (intro panel)

Particle background

Pre (preloader)

ScrollToTop