Portfolio-2023-v2

Preview

portfolio.mp4

Objective

This portfolio is crafted using the distinguished React.js framework.

UI / UX Design Objective

How your project achieves the desired functionality?

Technical Objective

To have well-structured component architecture in order to manage code complexitiy and promote code reuse. To follow best practices, easy to read and understand source codes. To separate logic into sub-logics for the easier maintenance and modifications.

• Use of React Hooks

  • useState
  • useContext
  • createContext
  • useEffect
  • useLayoutEffect
  • useCallback
  • useImperativeHandle
  • useRef
  • forwardRef

• Use of third-party libraries

  • Tailwind CSS
  • React Icons
  • GSAP
  • clsx
  • body-scroll-lock-upgrade

Dependencies

• tailwindcss, postcss, autoprefixer
  npm install -D tailwindcss postcss autoprefixer

• react-icons
  npm install react-icons --save

• clsx
  npm install --save clsx

• gsap
  npm install gsap

• react-remove-scroll
  npm install react-remove-scroll

• DOMPurify
  npm install dompurify

Assets

Fonts

• Google Fonts

  • Montserrat
  • Cabin
  • Fredoka
  • Limelight

• Other Fonts

  • Radditya Signature
  • Travel November

Images

• Coffee Background Image by @Engin_Akyurt (pixabay.com)
• Coffe Cup Image by Paulina Adamkiewicz (Codepen)
• Smoke Image by @trananhtuat (Github)

Vector Images

• Coffee mug cup vector illustration by Asya Mullakhmetova (istockphoto.com)
• Idea light bulb vector illustration by Polina Tomtosova (istockphoto.com)

Other Assets

• Coffee cup spiral text SVG path by distillocaffe.com
• All icons by react-icons

Environment

• Vite.js

Run App

npm run dev

For Production

npm run build