Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/luislopez-stack/landing-pages/llms.txt

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

The Footer component sits at the bottom of every page and is rendered once inside App.js, outside the <Routes> block, so it appears on all routes automatically. Its file lives at src/components/Footer.js. The component auto-computes the current calendar year using new Date().getFullYear(), so the copyright notice never goes stale.

​
Structure

The footer uses a single Bootstrap <Container fluid> with one <Row> split across three equal md={4} columns:
src/components/Footer.js
function Footer() {
  let date = new Date();
  let year = date.getFullYear();

  return (
    <Container fluid className="footer">
      <Row>
        <Col md="4" className="footer-copywright">
          <h3>Designed and Developed by </h3>
        </Col>
        <Col md="4" className="footer-copywright">
          <h3>Copyright © {year} LZ</h3>
        </Col>
        <Col md="4" className="footer-body">
          {/* social icons */}
        </Col>
      </Row>
    </Container>
  );
}
ColumnContent
Left (footer-copywright)Static heading: “Designed and Developed by”
Center (footer-copywright)Auto-generated copyright line: © LZ
Right (footer-body)Row of four social icon anchor links

​
Social icons

The four icons are rendered as a <ul className="footer-icons"> list. Each href is currently an empty string and must be filled in before going live:
src/components/Footer.js
<ul className="footer-icons">
  <li className="social-icons">
    <a href="" style={{ color: "white" }} target="_blank" rel="noopener noreferrer">
      <AiFillGithub />
    </a>
  </li>
  <li className="social-icons">
    <a href="" style={{ color: "white" }} target="_blank" rel="noopener noreferrer">
      <AiOutlineTwitter />
    </a>
  </li>
  <li className="social-icons">
    <a href="" style={{ color: "white" }} target="_blank" rel="noopener noreferrer">
      <FaLinkedinIn />
    </a>
  </li>
  <li className="social-icons">
    <a href="" style={{ color: "white" }} target="_blank" rel="noopener noreferrer">
      <AiFillInstagram />
    </a>
  </li>
</ul>
Replace each href="" with the appropriate profile URL:
Icon componentNetworkhref to fill in
AiFillGithubGitHubYour GitHub profile URL, e.g. https://github.com/your-username
AiOutlineTwitterTwitter / XYour Twitter profile URL, e.g. https://twitter.com/your-handle
FaLinkedinInLinkedInYour LinkedIn profile URL, e.g. https://linkedin.com/in/your-profile
AiFillInstagramInstagramYour Instagram profile URL, e.g. https://instagram.com/your-handle

​
Updating copyright

The year is generated dynamically — no manual updates are ever needed:
src/components/Footer.js
let date = new Date();
let year = date.getFullYear();

// Used in JSX:
<h3>Copyright © {year} LZ</h3>
To change the initials LZ to your own name or brand, replace LZ with any string. For example:
src/components/Footer.js
<h3>Copyright © {year} Dental Nayelli</h3>
To update the “Designed and Developed by” attribution in the left column, edit the <h3> text in the first <Col>.

​
CSS

The footer’s background and text color are controlled by the .footer class in src/style.css:
src/style.css
.footer {
  background-color: rgb(10, 4, 22);
  color: white !important;
}
To change the footer background, update the background-color value. To use a solid brand color, try:
src/style.css
.footer {
  background-color: #744cfa;
  color: white !important;
}

​
Resume / ResumeNew component

The Resume page is served at the /resume route and is implemented in src/components/Resume/ResumeNew.js. It renders a PDF inline using the react-pdf library. How it works:
  • pdfjs.GlobalWorkerOptions.workerSrc is set to the pdfjs-dist CDN worker so the PDF engine loads without a local build step.
  • A width state variable is initialized to 1200 and set to window.innerWidth once on mount via a useEffect with an empty dependency array. There is no resize event listener — the value is read a single time when the component first renders.
  • The width value controls the scale prop passed to <Page>: 1.7 for desktop viewports and 0.6 for narrow (mobile) screens, ensuring the PDF is readable at any size.
  • The PDF source is imported directly from src/Assets/Soumyajit_Behera-BIT_MESRA.pdf.
Swapping the PDF: Replace the file at src/Assets/Soumyajit_Behera-BIT_MESRA.pdf with your own CV or document — keeping the same filename — or update the import at the top of ResumeNew.js:
src/components/Resume/ResumeNew.js
// Before
import pdf from "../../Assets/Soumyajit_Behera-BIT_MESRA.pdf";

// After — point to your own file
import pdf from "../../Assets/your-cv.pdf";
Download button: The page renders two identical download buttons — one above and one below the inline PDF viewer — so visitors can open the CV without scrolling. Each button uses href={pdf} and target="_blank" to open the PDF in a new browser tab:
src/components/Resume/ResumeNew.js
<Button
  variant="primary"
  href={pdf}
  target="_blank"
  style={{ maxWidth: "250px" }}
>
  <AiOutlineDownload />
  &nbsp;Download CV
</Button>
There is no download attribute and no wrapping <a> tag. The Bootstrap <Button> renders directly as an anchor when given an href prop, and target="_blank" causes the PDF to open in a new tab rather than triggering a file download prompt.
The /resume route is linked from the Resumen nav item in the Navbar, but that link currently uses an external href="" instead of a React Router <Link to="/resume">. See the Navbar docs for instructions on switching it to an internal link.
See /customization/content for a complete checklist of all href="" locations that need updating — including the four social links in both Footer.js and Home2.js.

Build docs developers (and LLMs) love

Get started for freeTalk to us