57 lines
1.9 KiB
JavaScript
57 lines
1.9 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
|
|
import '@/css/Footer.css';
|
|
import { faGithub } from '@fortawesome/free-brands-svg-icons';
|
|
|
|
const Footer = () => {
|
|
const [heart, setHeart] = useState('💜');
|
|
|
|
useEffect(() => {
|
|
const hearts = ["❤️", "💛", "🧡", "💚", "💙", "💜"];
|
|
const randomHeart = () => hearts[Math.floor(Math.random() * hearts.length)];
|
|
|
|
const interval = setInterval(() => {
|
|
setHeart(randomHeart());
|
|
}, 3000);
|
|
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
return (
|
|
<footer className="footer d-flex flex-column align-items-center gap-5 pt-5 px-4">
|
|
<div className="footer-columns w-100" style={{ maxWidth: '900px' }}>
|
|
<div className="footer-column">
|
|
<h4 className="footer-title">Contacto</h4>
|
|
<div className="contact-info p-4">
|
|
<a
|
|
href="https://github.com/Gallardo7761"
|
|
target="_blank"
|
|
className='text-break d-block'
|
|
rel="noopener noreferrer"
|
|
>
|
|
<FontAwesomeIcon icon={faGithub} className="fa-icon me-2 " />
|
|
Gallardo7761
|
|
</a>
|
|
<a href="mailto:jose@miarma.net" className="text-break d-block">
|
|
<FontAwesomeIcon icon={faEnvelope} className="fa-icon me-2" />
|
|
jose@miarma.net
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="footer-bottom w-100 py-5 text-center">
|
|
<h6 id="devd" className='m-0'>
|
|
Hecho con <span className="heart-anim">{heart}</span> por{' '}
|
|
<a href="https://gallardo.dev" target="_blank" rel="noopener noreferrer">
|
|
Gallardo7761
|
|
</a>
|
|
</h6>
|
|
</div>
|
|
</footer>
|
|
);
|
|
};
|
|
|
|
export default Footer;
|