Skip to main content

​
Overview

The Footer component provides a clean, simple footer with social media links to connect with the developer on LinkedIn and GitHub.

​
Purpose

  • Provide social media connection points
  • Complete the page layout
  • Encourage visitor engagement
  • Display professional social profiles

​
Component Structure

footer.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-footer',
  imports: [],
  templateUrl: './footer.html',
  styleUrl: './footer.css'
})
export class Footer {

}
The Footer component is presentational only with no TypeScript logic.

​
HTML Template

<footer class="py-10">
  <p class="text-gray-600 dark:text-gray-300 text-sm font-normal leading-normal px-4 pb-4">
    Conéctate conmigo en LinkedIn y GitHub
  </p>
  
  <div class="flex gap-4 px-4">
    <!-- LinkedIn Link -->
    <a class="flex flex-col items-center justify-center gap-2 text-center w-24 p-3 rounded-lg bg-white dark:bg-background-dark border border-gray-200 dark:border-primary/20 hover:border-primary dark:hover:border-primary transition-colors"
       href="http://www.linkedin.com/in/jhonny-diaz-centeno-567225378" 
       target="_blank">
      <div class="text-primary">
        <!-- LinkedIn SVG icon -->
      </div>
      <p class="text-gray-700 dark:text-gray-300 text-sm font-medium leading-normal">LinkedIn</p>
    </a>
    
    <!-- GitHub Link -->
    <a class="flex flex-col items-center justify-center gap-2 text-center w-24 p-3 rounded-lg bg-white dark:bg-background-dark border border-gray-200 dark:border-primary/20 hover:border-primary dark:hover:border-primary transition-colors"
       href="https://github.com/JhonnyDiaz4753" 
       target="_blank">
      <div class="text-primary">
        <!-- GitHub SVG icon -->
      </div>
      <p class="text-gray-700 dark:text-gray-300 text-sm font-medium leading-normal">GitHub</p>
    </a>
  </div>
</footer>

​
LinkedIn

Profile URL: http://www.linkedin.com/in/jhonny-diaz-centeno-567225378 
<a href="http://www.linkedin.com/in/jhonny-diaz-centeno-567225378" target="_blank">
  <div class="text-primary">
    <svg fill="currentColor" height="24px" viewBox="0 0 256 256" width="24px">
      <path d="M216,24H40A16,16,0,0,0,24,40V216a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V40A16,16,0,0,0,216,24Zm0,192H40V40H216V216ZM96,112v64a8,8,0,0,1-16,0V112a8,8,0,0,1,16,0Zm88,28v36a8,8,0,0,1-16,0V140a20,20,0,0,0-40,0v36a8,8,0,0,1-16,0V112a8,8,0,0,1,15.79-1.78A36,36,0,0,1,184,140ZM100,84A12,12,0,1,1,88,72,12,12,0,0,1,100,84Z"/>
    </svg>
  </div>
  <p>LinkedIn</p>
</a>

​
GitHub

Profile URL: https://github.com/JhonnyDiaz4753 
<a href="https://github.com/JhonnyDiaz4753" target="_blank">
  <div class="text-primary">
    <svg fill="currentColor" height="24px" viewBox="0 0 256 256" width="24px">
      <path d="M208.31,75.68A59.78,59.78,0,0,0,202.93,28,8,8,0,0,0,196,24a59.75,59.75,0,0,0-48,24H124A59.75,59.75,0,0,0,76,24a8,8,0,0,0-6.93,4,59.78,59.78,0,0,0-5.38,47.68A58.14,58.14,0,0,0,56,104v8a56.06,56.06,0,0,0,48.44,55.47A39.8,39.8,0,0,0,96,192v8H72a24,24,0,0,1-24-24A40,40,0,0,0,8,136a8,8,0,0,0,0,16,24,24,0,0,1,24,24,40,40,0,0,0,40,40H96v16a8,8,0,0,0,16,0V192a24,24,0,0,1,48,0v40a8,8,0,0,0,16,0V192a39.8,39.8,0,0,0-8.44-24.53A56.06,56.06,0,0,0,216,112v-8A58.14,58.14,0,0,0,208.31,75.68ZM200,112a40,40,0,0,1-40,40H112a40,40,0,0,1-40-40v-8a41.74,41.74,0,0,1,6.9-22.48A8,8,0,0,0,80,73.83a43.81,43.81,0,0,1,.79-33.58,43.88,43.88,0,0,1,32.32,20.06A8,8,0,0,0,119.82,64h32.35a8,8,0,0,0,6.74-3.69,43.87,43.87,0,0,1,32.32-20.06A43.81,43.81,0,0,1,192,73.83a8.09,8.09,0,0,0,1,7.65A41.72,41.72,0,0,1,200,104Z"/>
    </svg>
  </div>
  <p>GitHub</p>
</a>

<a class="flex flex-col items-center justify-center gap-2 text-center w-24 p-3 rounded-lg bg-white dark:bg-background-dark border border-gray-200 dark:border-primary/20 hover:border-primary dark:hover:border-primary transition-colors"
   href="..." 
   target="_blank">
  
  <!-- Icon Container -->
  <div class="text-primary">
    <svg fill="currentColor" height="24px" viewBox="0 0 256 256" width="24px">
      <!-- Icon path -->
    </svg>
  </div>
  
  <!-- Label -->
  <p class="text-gray-700 dark:text-gray-300 text-sm font-medium leading-normal">
    Platform Name
  </p>
</a>

​
Card Styling

​
Layout

  • flex flex-col - Vertical stack (icon above label)
  • items-center justify-center - Center alignment
  • w-24 - Fixed width (96px)
  • gap-2 - Spacing between icon and label

​
Visual Design

  • rounded-lg - Rounded corners
  • p-3 - Internal padding
  • border - Border outline
  • Theme-aware backgrounds and borders

​
Hover State

hover:border-primary dark:hover:border-primary
  • Border changes to primary color on hover
  • transition-colors for smooth animation
The fixed width w-24 ensures both cards are the same size regardless of label length.

​
Call-to-Action Text

<p class="text-gray-600 dark:text-gray-300 text-sm font-normal leading-normal px-4 pb-4">
  Conéctate conmigo en LinkedIn y GitHub
</p>
  • Friendly invitation to connect
  • Muted color to not overpower the links
  • Bottom padding separates from link cards

​
Accessibility

  • target="_blank" opens links in new tabs
  • Clear, descriptive labels
  • Adequate touch target sizes (96px wide)
  • SVG icons with proper viewBox and sizing
  • High contrast text colors
Consider adding rel="noopener noreferrer" to external links for security:
<a href="..." target="_blank" rel="noopener noreferrer">

​
Dark Mode Support

  • Background: dark:bg-background-dark
  • Border: dark:border-primary/20
  • Hover border: dark:hover:border-primary
  • Text: dark:text-gray-300
  • Icon maintains primary color in both themes

​
Layout Behavior

  • Links displayed horizontally with gap-4 spacing
  • Responsive: Maintains horizontal layout on all screen sizes
  • Centered icon and text in each card

​
Icon Details

Icons use Phosphor icon set with:
  • 24px × 24px size
  • 256 × 256 viewBox
  • currentColor fill (inherits from parent’s text-primary)
  • Consistent visual weight

​
Future Enhancements

Consider adding more social links or contact methods:
  • Email contact
  • Twitter/X profile
  • Portfolio website
  • Blog or Medium
Keep the card-based design consistent for any new additions.

Build docs developers (and LLMs) love

Get started for freeTalk to us