Skip to main content

​
Overview

The Footer component provides a simple, clean site footer displaying developer credit and copyright information. It features a minimalist design with centered text and a dark color scheme consistent with the portfolio’s overall aesthetic. Location: src/components/Footer/Footer.jsx

​
Key Features

Minimal Design

Clean, distraction-free footer with only essential information

Responsive Layout

Stacks on mobile, horizontal on desktop for optimal space usage

Dynamic Copyright

Automatically displays current year using JavaScript Date object

Internationalized

Credits and copyright text adapt to selected language

​
Component Structure

function Footer() {
  const { t } = useTranslation()

  return (
    <footer className="border-t border-slate-800 bg-slate-950/80 py-6">
      <div className="mx-auto flex max-w-6xl flex-col items-center gap-2 px-6 text-center text-xs text-slate-400 sm:flex-row sm:justify-between sm:text-sm">
        <p>
          {t("footer.develop")}
        </p>
        <p>
          © {new Date().getFullYear()} · {t("footer.rights")}
        </p>
      </div>
    </footer>
  )
}

export default Footer

​
Layout Structure

​
Footer Container

<footer className="border-t border-slate-800 bg-slate-950/80 py-6">
Styling:
  • Border top: border-t border-slate-800 creates subtle divider from main content
  • Background: bg-slate-950/80 semi-transparent dark background
  • Padding: py-6 (1.5rem vertical padding)

​
Content Container

<div className="mx-auto flex max-w-6xl flex-col items-center gap-2 px-6 text-center text-xs text-slate-400 sm:flex-row sm:justify-between sm:text-sm">
Properties:
  • Max width: max-w-6xl (1152px) matches other sections
  • Layout: Flexbox with responsive direction
  • Alignment: Centered on mobile, space-between on desktop
  • Typography: text-xs → text-sm (responsive sizing)
  • Color: text-slate-400 (muted gray)

​
Content Elements

​
Developer Credit

<p>
  {t("footer.develop")}
</p>
Output:
  • English: “Developed by Federico Moretto”
  • Spanish: “Desarrollado por Federico Moretto”

​
Copyright Notice

<p>
  © {new Date().getFullYear()} · {t("footer.rights")}
</p>
Output:
  • English: ”© 2026 · All rights reserved”
  • Spanish: ”© 2026 · Todos los derechos reservados”
The new Date().getFullYear() method automatically retrieves the current year, ensuring the copyright date is always up-to-date without manual updates.

​
Translation Keys

KeyEnglishSpanish
footer.developDeveloped by Federico MorettoDesarrollado por Federico Moretto
footer.rightsAll rights reservedTodos los derechos reservados

​
Styling Details

​
Color Scheme

Background

bg-slate-950/80Very dark gray with 80% opacity

Border

border-slate-800Subtle top border divider

Text

text-slate-400Muted gray for unobtrusive text

​
Typography

font-size: 0.75rem;  /* text-xs = 12px */
text-align: center;

​
Spacing

py-6          // 1.5rem (24px) vertical padding
gap-2         // 0.5rem (8px) gap between text elements
px-6          // 1.5rem (24px) horizontal padding

​
Responsive Behavior

Mobile (< 640px):
┌─────────────────────────────────┐
│  Developed by Federico Moretto  │
│  © 2026 · All rights reserved   │
└─────────────────────────────────┘
       ↑ Centered, stacked

Desktop (≥ 640px):
┌──────────────────────────────────────────────────┐
│ Developed by...      © 2026 · All rights reserved│
└──────────────────────────────────────────────────┘
  ↑ Left                              Right ↑
Mobile (default):
  • flex-col: Vertical stacking
  • items-center: Horizontally centered
  • text-center: Center-aligned text
  • text-xs: 12px font size
  • gap-2: 8px spacing between items
Desktop (sm: breakpoint):
  • sm:flex-row: Horizontal layout
  • sm:justify-between: Space between items
  • sm:text-sm: 14px font size
  • Text alignment naturally becomes left/right due to flex layout

​
Accessibility

  • Semantic HTML: Proper <footer> landmark element
  • Readable text: Sufficient contrast ratio for text-slate-400 on dark background
  • Font sizing: Minimum 12px text size meets readability standards
  • No interactive elements: Pure informational content, no accessibility concerns

​
Design Philosophy

Minimal Footprint

Small, unobtrusive design doesn’t distract from main content or compete for attention

Professional Polish

Proper footer with credits and copyright adds professional finish to portfolio

Consistent Styling

Matches overall dark theme with slate colors and semi-transparent backgrounds

Future-Proof

Dynamic year calculation eliminates need for annual updates

​
Complete Component Example

import { useTranslation } from "react-i18next"

function Footer() {
  const { t } = useTranslation()

  return (
    <footer className="border-t border-slate-800 bg-slate-950/80 py-6">
      <div className="mx-auto flex max-w-6xl flex-col items-center gap-2 px-6 text-center text-xs text-slate-400 sm:flex-row sm:justify-between sm:text-sm">
        <p>
          {t("footer.develop")}
        </p>
        <p>
          © {new Date().getFullYear()} · {t("footer.rights")}
        </p>
      </div>
    </footer>
  )
}

export default Footer

​
Integration Example

import Footer from "./components/Footer/Footer"

function App() {
  return (
    <>
      <Header />
      <main>
        <Hero />
        <About />
        <Skills />
        <Works />
        <ProjectsView />
        <Contact />
      </main>
      <Footer />
    </>
  )
}
The Footer should be placed outside the <main> element but inside the root app container for proper semantic HTML structure.

​
Customization

To customize footer text, update the translation files: 
{
  "footer.develop": "Your custom developer credit",
  "footer.rights": "Your custom copyright text"
}

​
Adding Links

If you want to add links to social media or other sites: 
<footer className="border-t border-slate-800 bg-slate-950/80 py-6">
  <div className="mx-auto flex max-w-6xl flex-col items-center gap-4 px-6 text-center text-xs text-slate-400 sm:flex-row sm:justify-between sm:text-sm">
    <p>{t("footer.develop")}</p>
    
    {/* Social links */}
    <div className="flex gap-4">
      <a href="https://github.com/username" className="hover:text-slate-200 transition">
        <i className="bi bi-github" />
      </a>
      <a href="https://linkedin.com/in/username" className="hover:text-slate-200 transition">
        <i className="bi bi-linkedin" />
      </a>
    </div>
    
    <p>© {new Date().getFullYear()} · {t("footer.rights")}</p>
  </div>
</footer>

​
Comparison with Other Portfolio Footers

Pros:
  • Clean, uncluttered
  • Fast to render
  • Easy to maintain
  • Focuses on content above
Cons:
  • Limited information
  • No social links
  • No additional navigation

​
Performance

  • Lightweight: Minimal DOM elements (1 footer, 1 div, 2 paragraphs)
  • No external assets: No images or external scripts
  • No JavaScript: Static content after initial render
  • Fast render: Simple structure renders instantly

​
Browser Support

  • Date.getFullYear(): Supported in all modern browsers and IE 5+
  • Flexbox: Supported in all modern browsers
  • Tailwind classes: Cross-browser compatible utility classes

​
Dependencies

  • react-i18next: Translation management
  • Tailwind CSS: Utility styling
The footer component is extremely simple and has no complex dependencies. It’s one of the most stable and maintenance-free components in the application.

Build docs developers (and LLMs) love

Get started for freeTalk to us