Iconic Icons

I wanted to use social links in my portfolio, which led to a fun hunt for icons. The idea is that you can just click on the iconic icons / logos for each of these companies and link to my portfolio.

The Best Source

So the best source of icons I found was Simple Icons. They have a ton of variety, it's free to download as they should be, and they are all SVG. I was making that Italian chef air kissing gesture all day in joy. Check them out.

There are so many of them that I think I will also use these for my about section to show things I know, and it keeps a kind of nice design language going.

Styling with Glamor

The site also features the main color for each, which is cool because I could make a nice halo-on-hover effect for the social icons in the footer. I am using glamor and glamorous in Gatsby so the CSS syntax is not your standard fare - these cool packages have you input CSS selectors and values as objects / key-value pairs.

What is nice is you can also import stylesheets into Gatsby so you are writing CSS rules in 3-4 different ways in the same project. I say that is nice because I am sold on the concept of writing CSS for components so you are React-like but for more static pages like my contact page, it's just not worth writing a one-off page as React components.

The CSS

Without further ado, here is my CSS for the hover-on halo animation:

let bottomPulsate = css.keyframes('bottomPulsate', {
  '0%': { opacity: 0.85, textShadow: `0 0 20px #ff0000` },
  '25%': { opacity: 0.55, textShadow: `0 0 25px #bb3322` },
  '50%': { opacity: 0.75, textShadow: `0 0 20px #dd2222` },
  '75%': { opacity: 0.55, textShadow: `0 0 25px #aa4433` },
  '100%': { opacity: 0.85, textShadow: `0 0 20px #ff0000` },
});

let iconImg = css({
  width: 20,
  height: 20,
});

let iconLinkedIn = css({
  "&:hover": {
    background: `rgba(0, 119, 181, 0.75)`,
    boxShadow: `0 0 6px 2px rgba(0, 119, 181, 0.8)`
  },
});

let iconGithub = css({
  "&:hover": {
    background: `rgba(24, 23, 23, 0.3)`,
    boxShadow: `0 0 6px 3px rgba(24, 23, 23, 0.5)`
  },
});

let iconTwitter = css({
  "&:hover": {
    background: `rgba(29, 161, 242, 0.75)`,
    boxShadow: `0 0 6px 3px rgba(29, 161, 242, 0.8)`
  },
});

The pattern continues for other social platforms, each with their brand colors and custom hover effects.