portfolio-fm

this project was bootstrapped using:

npx create-react-app client --template @chakra-ui/typescript

screens

• home/project page
• aboutMe/contact page

animations

• menu
  • stagger children
  • dropdown pullup
  • link hover effect
• home
  • fade in / fade out
  • react router animations for each page
• project card
  • animate layout
  • animate prescence modal
• image slideshow
  • animate precense images
  • buttons hover click
  • wrap image array
• links / icons hover and click

components

• home/project page

  • greeting
  • recent projects
    • layout header
    • project
      • header / links
      • title
      • image slideshow
      • description
      • tech-stack
        • circle-button
        • modals
  • layout page-links

• aboutMe/contact page

  • title
  • layout header (shared)
  • paragraph text
  • profile image
  • get in touch
    • contact links
  • layout page-links (shared)

• menu

  • hamburger button
    • dropdown box
      • links

page state

using sanity CMS

• [_] projects demo link github link project images subjects { [ { subject_title, subject_description, subject_image?, subject_code? } }

• [_] links twitter link github link linkdin link email

UI Theme

• extended theme from Chakra UI
  • [] colors
  • [] font
    • [] weight, size,
    • [] family
  • [] links
  • [] transitions

Mobile media query

hard-code about me / profile image