Spaces:
Running
Running
File size: 4,787 Bytes
ec87762 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 | class CustomFooter extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
:host {
display: block;
background: #0a0a0a;
border-top: 1px solid #262626;
padding: 4rem 1rem 2rem 1rem;
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
.footer-logo {
font-family: 'Fira Code', monospace;
font-size: 1.5rem;
font-weight: 700;
color: #EAB308;
margin-bottom: 1.5rem;
display: inline-block;
}
.footer-links {
display: flex;
justify-content: center;
gap: 2rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.footer-link {
color: #9ca3af;
text-decoration: none;
font-size: 0.9rem;
transition: color 0.3s ease;
}
.footer-link:hover {
color: #EAB308;
}
.social-icons {
display: flex;
justify-content: center;
gap: 1.5rem;
margin-bottom: 2rem;
}
.social-icon {
color: #52525b;
transition: all 0.3s ease;
}
.social-icon:hover {
color: #EAB308;
transform: translateY(-3px);
}
.copyright {
color: #52525b;
font-size: 0.875rem;
font-family: 'Fira Code', monospace;
padding-top: 2rem;
border-top: 1px solid #1f1f1f;
}
.heart {
color: #EAB308;
animation: pulse 1s ease infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.2); }
}
</style>
<footer>
<div class="footer-content">
<div class="footer-logo"><KV/></div>
<nav class="footer-links">
<a href="#hero" class="footer-link">Home</a>
<a href="#about" class="footer-link">About</a>
<a href="#skills" class="footer-link">Skills</a>
<a href="#projects" class="footer-link">Projects</a>
<a href="#contact" class="footer-link">Contact</a>
</nav>
<div class="social-icons">
<a href="#" class="social-icon" aria-label="GitHub">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
</a>
<a href="#" class="social-icon" aria-label="LinkedIn">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
</a>
<a href="#" class="social-icon" aria-label="Twitter">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
</a>
<a href="mailto:hello@kentvuong.com" class="social-icon" aria-label="Email">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
</a>
</div>
<div class="copyright">
<p>Built with <span class="heart">♥</span> by Kent Vuong © 2024</p>
</div>
</div>
</footer>
`;
}
}
customElements.define('custom-footer', CustomFooter); |