add social links animations

dapids · Jan 3, 2021 · 107b07b · 107b07b · vercel · Jan 3, 2021
1 parent 5939436
commit 107b07b
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 17 deletions.
diff --git a/components/Header/index.tsx b/components/Header/index.tsx
@@ -5,7 +5,7 @@ import { Link } from 'components/Link'
 import { Body } from 'components/Typography/Body'
 import { Display } from 'components/Typography/Display'
 import { HeadingSmall } from 'components/Typography/HeadingSmall'
-import { useViewportSize } from 'components/useViewportSize'
+import { useViewportSize } from 'hooks/useViewportSize'
 import styled from 'styled-components'
 
 const Container = styled(Flex)`
@@ -18,20 +18,26 @@ const IconsContainer = styled(Flex)`
 
 const IconLink = styled(Link)`
   align-items: center;
-  background-color: #e6e6e6;
+  border: 2px solid #e6e6e6;
   border-radius: 50%;
-  box-shadow: inset 0 0 0 35px #e6e6e6;
+  background: #e6e6e6;
+  box-shadow: inset 0 0 0 0px #222;
+  color: #222;
   display: flex;
-  height: 50px;
+  height: 55px;
   justify-content: center;
-  line-height: 50px;
-  margin: 0 8px;
-  transition: color 0.3s;
-  width: 50px;
+  line-height: 55px;
+  margin: ${({ small }: { small: boolean }) => (small ? '0 8px' : '0 0 0 16px')};
+  transition: all 0.3s;
+  width: 55px;
+
+  &:hover {
+    box-shadow: inset 0 0 0 35px #222;
+    color: #e6e6e6;
+  }
 `
 
 const Icon = styled(FontAwesomeIcon)`
-  color: #222;
   height: 30px;
 `
 
@@ -50,19 +56,24 @@ export const Header = () => {
 
       <Flex align={rightAlign}>
         <IconsContainer direction="row">
-          <IconLink href="//github.com/dapids" rel="nofollow" target="_blank">
+          <IconLink href="//github.com/dapids" rel="nofollow" small={viewportSize === 'small'} target="_blank">
             <Icon icon={faGithub} size="3x" />
           </IconLink>
-          <IconLink href="//facebook.com/dapids" rel="nofollow" target="_blank">
+          <IconLink href="//facebook.com/dapids" rel="nofollow" small={viewportSize === 'small'} target="_blank">
             <Icon icon={faFacebook} size="3x" />
           </IconLink>
-          <IconLink href="//instagram.com/dapids17" rel="nofollow" target="_blank">
+          <IconLink href="//instagram.com/dapids17" rel="nofollow" small={viewportSize === 'small'} target="_blank">
             <Icon icon={faInstagram} size="3x" />
           </IconLink>
-          <IconLink href="//linkedin.com/in/dapids" rel="nofollow" target="_blank">
+          <IconLink href="//linkedin.com/in/dapids" rel="nofollow" small={viewportSize === 'small'} target="_blank">
             <Icon icon={faLinkedin} size="3x" />
           </IconLink>
-          <IconLink href="//twitter.com/dapidsorrentino" rel="nofollow" target="_blank">
+          <IconLink
+            href="//twitter.com/dapidsorrentino"
+            rel="nofollow"
+            small={viewportSize === 'small'}
+            target="_blank"
+          >
             <Icon icon={faTwitter} size="3x" />
           </IconLink>
         </IconsContainer>

diff --git a/components/SectionBlock/index.tsx b/components/SectionBlock/index.tsx
@@ -1,7 +1,7 @@
 import { Flex } from 'components/Flex'
 import { Body } from 'components/Typography/Body'
 import { HeadingSmall as HeadingSmallBase } from 'components/Typography/HeadingSmall'
-import { useViewportSize } from 'components/useViewportSize'
+import { useViewportSize } from 'hooks/useViewportSize'
 import { ReactChild } from 'react'
 import styled from 'styled-components'
 

diff --git a/components/SectionTitle/index.tsx b/components/SectionTitle/index.tsx
@@ -1,5 +1,6 @@
 import { Heading as HeadingBase } from 'components/Typography/Heading'
 import styled from 'styled-components'
+import { makeKebabCase } from 'utils/makeKebabCase'
 
 const Heading = styled(HeadingBase)`
   margin-bottom: 48px;
@@ -28,4 +29,6 @@ const Heading = styled(HeadingBase)`
   }
 `
 
-export const SectionTitle = ({ children }: { children: string }) => <Heading>{children}</Heading>
+export const SectionTitle = ({ children }: { children: string }) => (
+  <Heading id={makeKebabCase(children)}>{children}</Heading>
+)
diff --git a/components/Sections/AboutMe/index.tsx b/components/Sections/AboutMe/index.tsx
@@ -3,7 +3,7 @@ import { Link } from 'components/Link'
 import { SectionTitle } from 'components/SectionTitle'
 import { Body } from 'components/Typography/Body'
 import { Mark } from 'components/Typography/Mark'
-import { useViewportSize } from 'components/useViewportSize'
+import { useViewportSize } from 'hooks/useViewportSize'
 import styled from 'styled-components'
 
 const PictureWrapper = styled(Flex).attrs({

diff --git a/components/useViewportSize/index.ts → hooks/useViewportSize/index.ts b/components/useViewportSize/index.ts → hooks/useViewportSize/index.ts
diff --git a/utils/makeKebabCase/index.ts b/utils/makeKebabCase/index.ts
@@ -0,0 +1 @@
+export const makeKebabCase = (text: string) => text.toLocaleLowerCase().replace(/\W/g, '-')
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export const makeKebabCase = (text: string) => text.toLocaleLowerCase().replace(/\W/g, '-')