Skip to main content

​
Overview

The Footer component displays copyright information and a link to the source code repository. It’s styled with Spotify theme colors and centered layout. File: src/app/components/Footer.tsx

​
Component

src/app/components/Footer.tsx
import React from "react";

export default function Footer() {
  return (
    <div className="max-lg:col-span-1  max-lg:row-span-1 col-span-6 items-center text-center mb-10">
      <p className="text-spotify-light-gray max-md:text-sm">
        &copy; Luan&apos;s portfolio {new Date().getFullYear()}, designed by{" "}
        <a
          href="https://x.com/luaan_ng"
          className="text-spotify-green font-semibold underline"
          target="_blank"
          rel="noopener noreferrer"
        >
          Luan
        </a>
      </p>
      <p className="text-spotify-light-gray max-md:text-sm mt-5">
        Built with NextJS, TailwindCSS, and Aceternity UI. Check out the source
        code{" "}
        <a
          target="_blank"
          href="https://github.com/LuaanNguyen/portfolio"
          className="text-spotify-green font-semibold underline"
          rel="noopener noreferrer"
        >
          here
        </a>
        .
      </p>
    </div>
  );
}

​
Features

Dynamic Year

Copyright year updates automatically using new Date().getFullYear()

External Links

Links to X (Twitter) profile and GitHub repository with proper target="_blank" and rel="noopener noreferrer"

Responsive Text

Text size adjusts for mobile devices using max-md:text-sm

Spotify Styling

Uses Spotify green for links and light gray for body text

​
Usage

The Footer is imported in the main page component:
src/app/page.tsx
import Footer from "./components/Footer";

export default function Home() {
  return (
    <main>
      {/* ... other components ... */}
      <Footer />
    </main>
  );
}

​
Styling

The footer uses Tailwind CSS classes with Spotify theme colors:
  • Text Color: text-spotify-light-gray for body text
  • Link Color: text-spotify-green for interactive links
  • Layout: CSS Grid spanning 6 columns, centered alignment
  • Spacing: Bottom margin of mb-10, top margin between paragraphs mt-5

​
Grid Layout

Within the main grid layout:
  • Desktop: col-span-6 (full width)
  • Mobile: max-lg:col-span-1 max-lg:row-span-1

​
Accessibility

  • Proper rel="noopener noreferrer" on external links for security
  • target="_blank" opens links in new tab
  • Semantic HTML with paragraph tags
  • Accessible apostrophe: &apos;
The Footer component is simple but essential for providing attribution and source code access. It’s always visible at the bottom of the page.

Build docs developers (and LLMs) love

Get started for freeTalk to us