Skip to main content

​
Footer Component

The Footer component provides a clean, responsive footer section with social media links and a call-to-action for connecting.

​
Overview

Located in src/components/Footer.tsx, this component features:
  • Responsive layout (column on mobile, row on desktop)
  • Multiple social/contact action buttons
  • Fixed bottom positioning on mobile
  • Copyright notice with dynamic year
  • Minimal, modern design with accent colors

​
Props

The Footer component accepts no props - it’s a static component with hardcoded content. 
const Footer: React.FC = () => {
  // No props
};

​
Usage

import Footer from './components/Footer';

function App() {
  return (
    <div>
      {/* Your page content */}
      <Footer />
    </div>
  );
}

​
Structure

The footer consists of three main sections:

​
1. Header Section

Displays the “Let’s Connect” heading with a decorative star symbol: 
// From Footer.tsx:7-14
<div className="flex items-center space-x-4 mb-6 md:mb-0">
  <div className="text-xl md:text-2xl">✱</div>
  <div>
    <h2 className="text-lg md:text-xl lg:text-2xl font-light leading-tight">
      Let&apos;s <span className="font-semibold">Connect</span>
    </h2>
  </div>
</div>

​
2. Action Buttons

Four prominent call-to-action buttons with different accent colors:
​
Email Me
link
Orange button linking to [email protected]
bg-orange-500 hover:bg-orange-600
​
LinkedIn
link
Lime/green button linking to LinkedIn profile
bg-lime-400 hover:bg-lime-500 text-black
​
X (Twitter)
link
Blue button linking to X/Twitter profile
bg-blue-500 hover:bg-blue-600
​
GitHub
link
Transparent/glass button linking to GitHub profile
bg-white/10 hover:bg-white/20 border border-white/20
Centered copyright text with dynamic year: 
// From Footer.tsx:48-50
<div className="text-center text-gray-600 text-xs pb-6">
  © {new Date().getFullYear()} Ethan Clinick. All rights reserved.
</div>
The footer includes these hardcoded links: 
const socialLinks = {
  email: 'mailto:[email protected]',
  linkedin: 'https://www.linkedin.com/in/ethanclinick',
  twitter: 'https://x.com/EthanClinick',
  github: 'https://github.com/eclinick'
};
All external links use target="_blank" and rel="noopener noreferrer" for security and proper new tab behavior.

​
Responsive Behavior

The footer adapts to different screen sizes:
  • Vertical stack layout
  • Full-width buttons
  • Bottom margin of 16 (mb-16) to account for mobile navigation
  • Smaller text sizes (text-sm)
  • Buttons in column layout
Responsive classes breakdown: 
// From Footer.tsx:6
flex flex-col md:flex-row items-center justify-between

// From Footer.tsx:15
flex flex-col sm:flex-row gap-3 sm:gap-4 w-full sm:w-auto

// From Footer.tsx:5
mt-16 md:mt-24 mb-16 md:mb-0

​
Styling Details

Key style characteristics:
  • Background: Pure black (bg-black)
  • Border: Top border with gray-800
  • Spacing: Generous padding with responsive values
  • Buttons: Rounded-full for pill shape
  • Typography: Mix of font-light and font-semibold for contrast

​
Button Color Scheme

Each button has a unique color for visual hierarchy: 
// Primary action (Email)
bg-orange-500 hover:bg-orange-600 text-white

// Secondary action (LinkedIn)
bg-lime-400 hover:bg-lime-500 text-black

// Social (X/Twitter)
bg-blue-500 hover:bg-blue-600 text-white

// Code/Developer (GitHub)
bg-white/10 hover:bg-white/20 text-white border-white/20

​
Customization

To customize the footer:
  1. Update contact links: Edit URLs in Footer.tsx:17-43
  2. Change button colors: Modify Tailwind classes for each <a> tag
  3. Add/remove buttons: Add or remove button elements in the flex container
  4. Update copyright name: Change “Ethan Clinick” in Footer.tsx:49
  5. Modify heading: Edit the “Let’s Connect” text in Footer.tsx:11
// Modified version with different links
<footer className="w-full bg-black border-t border-gray-800 mt-16">
  <div className="container mx-auto px-6 py-12 flex flex-col md:flex-row items-center justify-between">
    <div className="flex items-center space-x-4 mb-6 md:mb-0">
      <div className="text-2xl">✱</div>
      <h2 className="text-2xl font-light">
        Get In <span className="font-semibold">Touch</span>
      </h2>
    </div>
    <div className="flex gap-4">
      <a href="mailto:[email protected]" className="bg-purple-500 hover:bg-purple-600 text-white font-semibold px-6 py-2 rounded-full transition-colors">
        Contact
      </a>
      {/* More custom buttons */}
    </div>
  </div>
  <div className="text-center text-gray-600 text-xs pb-6">
    © {new Date().getFullYear()} Your Name. All rights reserved.
  </div>
</footer>

​
Accessibility

  • All links have descriptive text (no icon-only buttons)
  • Color contrast meets WCAG standards
  • Responsive text sizing for readability
  • Semantic HTML with <footer> element
The footer has mt-16 md:mt-24 mb-16 md:mb-0 margins. The bottom margin (mb-16) is specifically for mobile layouts where there might be a fixed navigation. Adjust these values based on your layout needs.

​
Dependencies

The Footer component has zero external dependencies - it uses only React and Tailwind CSS.

Build docs developers (and LLMs) love

Get started for freeTalk to us