Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/nicolasgrajaleshoyos/portafolio/llms.txt

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

The Footer component closes the portfolio page with a slim, centred bar in the site’s dark background colour. It requires no props and no state — its only logic is a single call to new Date().getFullYear() that ensures the copyright year is always current without any manual update. Below the copyright line sits a short motivational tagline in a slightly muted, smaller font.

​
Props

Footer accepts no external props and holds no state.

​
Behavior

​
Dynamic copyright year

The year displayed in the copyright notice is computed once at render time: 
const currentYear = new Date().getFullYear();
This means the footer will always read the correct year as soon as the page is rendered, even if the portfolio remains deployed across multiple years without code changes.

​
Tagline

The line beneath the copyright reads: 
si lo puedes soñar lo puedes programar .
It is rendered at text-xs with opacity-70 to keep it visually secondary to the copyright text.

​
Full Component Source

import React from 'react';

const Footer: React.FC = () => {
  const currentYear = new Date().getFullYear();

  return (
    <footer className="bg-dark text-slate-400 py-8">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <p className="text-sm">
          &copy; {currentYear} Nicolas Grajales. Todos los derechos reservados.
        </p>
        <p className="text-xs mt-2 opacity-70">
          si lo puedes soñar lo puedes programar .
        </p>
      </div>
    </footer>
  );
};

export default Footer;

​
Styling tokens

ClassValue / purpose
bg-darkTailwind custom token #0f172a — matches the page’s darkest background
text-slate-400Muted grey for all text in both light and dark modes
text-sm0.875 rem — copyright line
text-xs0.75 rem — tagline
opacity-70Slightly fades the tagline relative to the copyright

​
Usage Example

Footer is placed outside <main> in App.tsx, as the final child of the root flex column: 
import Footer from '@/components/Footer';

const App: React.FC = () => (
  <div className="flex flex-col min-h-screen">
    <Header theme={theme} toggleTheme={toggleTheme} />
    <main className="flex-grow">
      <Hero />
      <About />
      <Projects />
      <Contact />
    </main>
    <Footer />
  </div>
);
The root <div> uses flex flex-col min-h-screen and <main> uses flex-grow, so the Footer is always pushed to the very bottom of the viewport even on short content pages.

​
Customization

Edit the name inline in the copyright paragraph:
<p className="text-sm">
  &copy; {currentYear} Your Name. Todos los derechos reservados.
</p>
Replace the string in the second <p> tag:
<p className="text-xs mt-2 opacity-70">
  Build things that matter.
</p>
The bg-dark token is defined in tailwind.config.js. To use a different colour without touching the config, replace the class directly:
bg-slate-950   /* near-black Tailwind default */
bg-zinc-900    /* warm-dark alternative */

Build docs developers (and LLMs) love

Get started for freeTalk to us