Social Highlight Cards

1import "./social-highlight-cards.css";2
3const socials = [4  { label: "Henrique Barone on LinkedIn", href: "https://www.linkedin.com/in/hbarone/", highlight: "#0a66c2", icon: "linkedin" },5  { label: "Henrique Barone on GitHub", href: "https://github.com/henriquegpb", highlight: "#f0f0f0", icon: "github" },6  { label: "Henrique Barone on Instagram", href: "https://www.instagram.com/henrique_barone/", highlight: "#e4405f", icon: "instagram" },7];8
9function SocialIcon({ name = "linkedin" }) {10  if (name === "linkedin") {11    return <svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M5.1 3.5a2.1 2.1 0 1 0 0 4.2 2.1 2.1 0 0 0 0-4.2ZM3.3 8.9h3.6V20H3.3V8.9Zm5.8 0h3.4v1.5h.1c.5-.9 1.6-1.9 3.5-1.9 3.7 0 4.4 2.4 4.4 5.6V20h-3.6v-5.1c0-1.2 0-2.8-1.7-2.8s-2 1.3-2 2.7V20H9.1V8.9Z" /></svg>;12  }13
14  if (name === "github") {15    return <svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M12 2C6.48 2 2 6.58 2 12.23c0 4.52 2.87 8.35 6.84 9.7.5.1.68-.22.68-.5v-1.9c-2.78.62-3.36-1.2-3.36-1.2-.46-1.19-1.11-1.5-1.11-1.5-.91-.64.07-.63.07-.63 1 .08 1.53 1.06 1.53 1.06.9 1.57 2.35 1.12 2.92.86.09-.67.35-1.12.64-1.38-2.22-.26-4.56-1.14-4.56-5.06 0-1.12.39-2.03 1.03-2.75-.1-.26-.45-1.31.1-2.74 0 0 .84-.28 2.75 1.05A9.36 9.36 0 0 1 12 6.84c.85 0 1.7.12 2.5.34 1.91-1.33 2.75-1.05 2.75-1.05.55 1.43.2 2.48.1 2.74.64.72 1.03 1.63 1.03 2.75 0 3.93-2.34 4.8-4.57 5.06.36.32.68.94.68 1.89v2.8c0 .28.18.6.69.5A10.25 10.25 0 0 0 22 12.23C22 6.58 17.52 2 12 2Z" /></svg>;16  }17
18  return <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="5" stroke="currentColor" strokeWidth="2" /><circle cx="12" cy="12" r="4" stroke="currentColor" strokeWidth="2" /><circle cx="17.4" cy="6.6" r="1.2" fill="currentColor" /></svg>;19}20
21export function SocialHighlightCards() {22  return (23    <nav className="social-highlight-cards" aria-label="Social links">24      {socials.map((social) => (25        <a26          className="social-highlight-card"27          href={social.href}28          key={social.href}29          target="_blank"30          rel="noreferrer"31          title={social.label}32          aria-label={social.label}33          style={{ color: social.highlight }}34        >35          <span className="social-highlight-card__glow" aria-hidden="true" />36          <span className="social-highlight-card__beam" aria-hidden="true" />37          <span className="social-highlight-card__icon"><SocialIcon name={social.icon} /></span>38        </a>39      ))}40    </nav>41  );42}

1.social-highlight-cards {2  display: flex;3  align-items: center;4  justify-content: center;5  gap: 14px;6}7.social-highlight-card {8  position: relative;9  isolation: isolate;10  display: grid;11  width: 64px;12  height: 64px;13  place-items: center;14  overflow: hidden;15  border: 1px solid rgba(255, 255, 255, .09);16  border-radius: 6px;17  background: #16171d;18  box-shadow:19    inset 0 1px 0 rgba(255, 255, 255, .035),20    0 1px 0 rgba(255, 255, 255, .08);21  text-decoration: none;22  transition:23    border-color 260ms cubic-bezier(.22, 1, .36, 1),24    background-color 260ms cubic-bezier(.22, 1, .36, 1);25}26.social-highlight-card__glow {27  position: absolute;28  z-index: -1;29  inset: 0;30  background: radial-gradient(31    ellipse 78% 92% at 50% -4%,32    color-mix(in srgb, currentColor 38%, transparent) 0%,33    color-mix(in srgb, currentColor 16%, transparent) 38%,34    transparent 76%35  );36  opacity: .2;37}38.social-highlight-card__beam {39  position: absolute;40  top: 4px;41  right: 8px;42  left: 8px;43  height: 4px;44  border-radius: 999px;45  background: currentColor;46  opacity: .3;47  transform: scaleX(.96);48  transition:49    transform 480ms cubic-bezier(.22, 1, .36, 1),50    opacity 480ms cubic-bezier(.22, 1, .36, 1);51}52.social-highlight-card__icon {53  display: grid;54  width: 30px;55  height: 30px;56  place-items: center;57  color: #0d0e13;58  opacity: .82;59  transform: scale(.96);60  transition:61    color 480ms cubic-bezier(.22, 1, .36, 1),62    opacity 480ms cubic-bezier(.22, 1, .36, 1),63    transform 480ms cubic-bezier(.22, 1, .36, 1);64}65.social-highlight-card__icon svg {66  width: 100%;67  height: 100%;68}69.social-highlight-card:hover,70.social-highlight-card:focus-visible {71  border-color: color-mix(in srgb, currentColor 28%, rgba(255, 255, 255, .08));72  background: #181920;73  box-shadow:74    inset 0 1px 0 rgba(255, 255, 255, .06),75    0 10px 24px rgba(0, 0, 0, .28),76    0 0 22px color-mix(in srgb, currentColor 12%, transparent);77}78.social-highlight-card:hover .social-highlight-card__glow,79.social-highlight-card:focus-visible .social-highlight-card__glow {80  opacity: 1;81}82.social-highlight-card:hover .social-highlight-card__beam,83.social-highlight-card:focus-visible .social-highlight-card__beam {84  opacity: 1;85  transform: scaleX(1);86}87.social-highlight-card:hover .social-highlight-card__icon,88.social-highlight-card:focus-visible .social-highlight-card__icon {89  color: inherit;90  opacity: 1;91  transform: scale(1);92}93.social-highlight-card:focus-visible {94  outline: 2px solid currentColor;95  outline-offset: 4px;96}97@media (max-width: 420px) {98  .social-highlight-cards {99  gap: 10px;100}101  .social-highlight-card {102  width: 56px;103  height: 56px;104}105  .social-highlight-card__icon {106  width: 27px;107  height: 27px;108}109}110@media (prefers-reduced-motion: reduce) {111  .social-highlight-card,112  .social-highlight-card__glow,113  .social-highlight-card__beam,114  .social-highlight-card__icon {115  transition-duration: .01ms;116}117}