change design, begin adding work

ryan-parag · Mar 10, 2021 · cc82378 · cc82378
1 parent 21faed3
commit cc82378
Show file tree

Hide file tree

Showing 17 changed files with 598 additions and 270 deletions.
diff --git a/components/Accordion/index.js b/components/Accordion/index.js
@@ -0,0 +1,76 @@
+import React, { useState } from 'react'
+import { designTokens } from '@components/Theme/designTokens'
+import styled, { css } from 'styled-components'
+import { ChevronDown } from 'react-feather'
+
+const ContainerStyles = css`
+  border: 1px solid var(--grey200);
+  border-radius: ${designTokens.space[2]};
+  margin-bottom: ${designTokens.space[4]};
+  position: relative;
+  box-shadow: 0px 1px 3px rgba(0,0,0,0.12);
+  transition: all 120ms ease-out 0s;
+`
+
+const AccordionContainer = styled.div`
+  ${ContainerStyles}
+`
+
+const AccordionControl = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: ${designTokens.space[3]} ${designTokens.space[4]};
+  font-size: ${designTokens.fontSizes[1]};
+  cursor: pointer;
+  width: 100%;
+  appearance: none;
+  background: transparent;
+  border-bottom: 1px solid var(--grey200);
+  font-weight: ${designTokens.fontWeights.bold};
+  transition: all 120ms ease-out 0s;
+  &:hover, &:focus {
+    color: var(--grey700);
+  }
+  .icon {
+    transition: all 200ms ease-out 0s;
+  }
+  .open {
+    transform: rotate(180deg);
+  }
+`
+
+const AccordionBody = styled.div`
+  padding: ${designTokens.space[3]} ${designTokens.space[4]};
+  color: var(--grey700);
+  p {
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+  }
+`
+
+const Accordion = ({children, label, open}) => {
+
+  const [active, setActive] = useState(open)
+
+  return(
+    <AccordionContainer>
+      <AccordionControl role="button" onClick={() => setActive(!active)}>
+        {label}
+        <ChevronDown size="20" className={active ? 'icon open' : 'icon closed'}/>
+      </AccordionControl>
+      {
+        active ? (
+          <AccordionBody>
+            {children}
+          </AccordionBody>
+        )
+        :
+        null
+      }
+    </AccordionContainer>
+  )
+}
+
+export default Accordion
diff --git a/components/ContactBox/index.js b/components/ContactBox/index.js
@@ -1,22 +1,30 @@
 import React from 'react'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 import { designTokens } from '@components/Theme/designTokens'
 import { Send } from 'react-feather'
 
-const ContactContainer = styled.a`
+export const ContainerStyles = css`
   padding-top: ${designTokens.space[5]};
   display: flex;
   flex-direction: column;
   align-items: start;
   border: 1px solid var(--grey200);
   border-radius: ${designTokens.space[2]};
-  margin-bottom: ${designTokens.space[6]};
+  margin-bottom: ${designTokens.space[4]};
   position: relative;
   box-shadow: 0px 1px 3px rgba(0,0,0,0.12);
   transition: all 120ms ease-out 0s;
   @media screen and (max-width: ${designTokens.breakpoints[4]}) {
     padding-top: ${designTokens.space[6]};
   }
+`
+
+const ContactContainerLink = styled.a`
+  ${ContainerStyles}
+  margin-bottom: ${designTokens.space[6]};
+  @media screen and (max-width: ${designTokens.breakpoints[4]}) {
+    padding-top: ${designTokens.space[6]};
+  }
   &:hover, &:focus {
     text-decoration: none;
     img {
@@ -25,9 +33,22 @@ const ContactContainer = styled.a`
   }
 `
 
-const ContactTitle = styled.h3`
+const ContactContainer = styled.div`
+  margin-top: ${designTokens.space[6]};
+  ${ContainerStyles}
+`
+
+const ContactH3 = styled.h3`
+  margin-top: 0;
+  margin-bottom: ${designTokens.space[3]};
+`
+
+const ContactH2 = styled.h2`
+  margin-top: 0;
+`
+
+const ContactH1 = styled.h1`
   margin-top: 0;
-  margin-bottom: ${designTokens.space[2]};
 `
 
 const ContactContent = styled.div`
@@ -94,16 +115,54 @@ const ImgContainer = styled.div`
   }
 `
 
-export default function ContactBox() {
+const ProfileImageFlares = styled.div`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: transparent;
+  user-select: none;
+  &:before, &:after {
+    content: '';
+    position: absolute;
+    top: -${designTokens.space[5]};
+    right: -${designTokens.space[2]};
+    width: ${designTokens.space[4]};
+    height: ${designTokens.space[4]};
+    display: block;
+    background: var(--secondaryTransparent);
+    border-radius: 50%;
+  }
+  &:after {
+    top: 0;
+    right: -${designTokens.space[4]};
+    width: ${designTokens.space[3]};
+    height: ${designTokens.space[3]};
+    background: var(--tertiaryTransparent);
+  }
+`
+const ContactLink = styled.a`
+  display: inline-flex;
+  align-items: center;
+  border-radius: calc(${designTokens.space[1]}/2);
+  transition: all 120ms ease-out 0s;
+  &:hover, &:focus {
+    background: var(--primaryTransparent);
+    box-shadow: 0px 0px 0px ${designTokens.space[2]} var(--primaryTransparent);
+  }
+`
+
+const ContactBox = () => {
   return(
-    <ContactContainer href="mailto:[email protected]">
+    <ContactContainerLink href="mailto:[email protected]">
       <ImgContainer>
         <img src="/static/thanks.png"/>
       </ImgContainer>
       <ContactContent>
-        <ContactTitle>
+        <ContactH3>
           Hey, I'm Ryan!
-        </ContactTitle>
+        </ContactH3>
         <p>
           I'm a product designer - currently based in Tampa, FL. If you're looking for help or would like to chat, reach out!
         </p>
@@ -112,6 +171,43 @@ export default function ContactBox() {
         <Send size="20"/>
         Send me an email!
       </ContentFooter>
+    </ContactContainerLink>
+  )
+}
+
+export const ContactAbout = ({img, title, children}) => {
+  return(
+    <ContactContainer>
+      {
+        img ? (
+          <ImgContainer>
+            <img src={img}/>
+            <ProfileImageFlares/>
+          </ImgContainer>
+        )
+        :
+        null
+      }
+      <ContactContent>
+        {
+          title ? (
+            <ContactH1>
+              {title}
+            </ContactH1>
+          )
+          :
+          null
+        }
+        {children}
+      </ContactContent>
+      <ContentFooter>
+       <ContactLink href="mailto:[email protected]">
+        <Send size="20"/>
+          Send me an email!
+       </ContactLink>
+      </ContentFooter>
     </ContactContainer>
   )
-}
+}
+
+export default ContactBox
diff --git a/components/Footer/index.js b/components/Footer/index.js
@@ -2,11 +2,11 @@ import React from 'react'
 import Link from 'next/link'
 import styled from 'styled-components'
 import { designTokens } from '../Theme/designTokens'
-import Logo from '@components/Logo'
+import { LogoWithLabel } from '@components/Logo'
 import { Button, ButtonAnchorTag } from '@components/Button'
 import { GitHub, Dribbble, Codepen, Send } from 'react-feather'
 
-const IconLink = styled.a`
+export const IconLink = styled.a`
   align-items: center;
   background: transparent;
   border: none;
@@ -72,20 +72,16 @@ const FooterListItem = styled.li`
   a {
     font-size: ${designTokens.fontSizes[1]};
     color: var(--grey600);
+    padding: ${designTokens.space[1]} ${designTokens.space[1]} ${designTokens.space[1]} 0;
     transition: all 120ms ease-out 0s;
     &:hover, &:focus {
-      color: var(--primaryDark);
-      background: var(--primaryTransparent);
-      box-shadow: 0 0 0 ${designTokens.space[2]} var(--primaryTransparent);
+      background: var(--grey100);
+      padding-left: ${designTokens.space[3]};
+      box-shadow: inset ${designTokens.space[1]} 0px 0px var(--primary);
     }
   }
 `
 
-const FooterLogo = styled.div`
-  display: inline-flex;
-  align-items: center;
-`
-
 const FooterWide = styled.div`
   grid-column-start: 1;
   grid-column-end: 3;
@@ -116,24 +112,6 @@ const FooterLink = ({link}) => {
   )
 }
 
-const LogoLink = () => {
-  return(
-    <Link href="/">
-      <a>
-        <FooterLogo>
-          <div style={{
-            width: designTokens.space[5],
-            marginRight: designTokens.space[2]
-          }}>
-            <Logo/>
-          </div>
-          <strong>Ryan's Notes</strong>
-        </FooterLogo>
-      </a>
-    </Link>
-  )
-}
-
 const DescriptionSection = () => {
 
   const clearStorage = () => {
@@ -168,7 +146,7 @@ const DescriptionSection = () => {
 
   return(
     <FooterWide>
-      <LogoLink/>
+      <LogoWithLabel logo/>
       <IconBar>
         <Button small onClick={clearStorage}>Reset Theme</Button>
         {
@@ -198,9 +176,9 @@ export default function Footer() {
       href: '/notes',
       outbound: false
     },{
-      name: 'Create a Theme',
-      href: '/create-theme',
-      outbound: false
+      name: 'Portfolio/Work',
+      href: 'https://ryanparag.com',
+      outbound: true
     }
   ]
 
@@ -214,21 +192,21 @@ export default function Footer() {
       href: '/worksheets',
       outbound: false
     },{
-      name: 'RSS',
-      href: '/rss',
+      name: 'Create a Theme',
+      href: '/create-theme',
       outbound: false
     }
   ]
 
   const list3 = [
     {
-      name: 'Portfolio/Work',
-      href: 'https://ryanparag.com',
-      outbound: true
-    },{
       name: 'About',
       href: '/about',
       outbound: false
+    },{
+      name: 'RSS',
+      href: '/rss',
+      outbound: false
     }
   ]