✨ PortFolio-React ✨

▶ Visit : PortFolio-React

Getting Started

To get started, follow these steps:

1. Clone this repository using git clone https://github.com/Intummadee/PortFolio-React.git
2. Install dependencies using npm install
3. Run the app using npm start

Tech Stack :

• Frontend: HTML, CSS, React Js, Java Script, TailwindCSS
• Library: React
• Version Control: Git and GitHub
• Hosting: Netlify
• Code Editor and tools: VS Code

---

🍹 Dependency

Initial Project Setup

• npm create vite@latest ./ -- --template react

Tailwind CSS Setup

• npm install -D tailwindcss
• npx tailwindcss init
• npm install --legacy-peer-deps -D tailwindcss postcss autoprefixer
• npx tailwindcss init -p

Three.js and related libraries

• npm install --legacy-peer-deps @react-three/fiber : installs React Three Fiber, a React renderer for Three.js.
• npm install --legacy-peer-deps @react-three/drei : installs Drei, a collection of useful helpers for React Three Fiber.
• npm install --legacy-peer-deps maath : a math helper library often used with Three.js.
• npm install three : This installs Three.js, a popular 3D graphics library for the web.

UI and Animation

• npm install --legacy-peer-deps react-vertical-timeline-component : a React component for creating vertical timelines.
• npm install --legacy-peer-deps framer-motion : Framer Motion, a popular animation library for React.
• npm install react-parallax-tilt : creating tilt hover effects.

Routing

• npm install --legacy-peer-deps react-router-dom : used for handling routing in React applications.

Email handling

• npm install --legacy-peer-deps @emailjs/browser : a library for sending emails directly from JavaScript.

Video playback

• npm install react-player : React Player, a component for playing various types of media

---

🌴 How to Run

• Located in the PortFolio-React folder and use this command

npm run dev

---

🥥 Structure or pattern

• Component

import React from 'react'
const Experience = () => {
  return (
    <div>Experience</div>
  )
}
export default Experience

• Map

---

🍉 My Favorite class in TailwindCSS

h-screen - to make an element span the entire height of the viewport.

• https://tailwindcss.com/docs/height#viewport-height

h-dvh - to make an element span the entire height of the viewport

green-pink-gradient - to make a gradient

w-1/2 , w-fit

absolute inset-0

flex flex-wrap

drop-shadow-xl

<br className='sm:block hidden' />

---

⛱️ Technique

& nbsp; abbreviation for "non-breaking space" from Navbar.jsx

• The 2 functions below have the same results, but in the lower method, if you use (), there is no need to write the word return.

• can use the JS below instead of the tag.

• Link Tag

---

Ref

  https://techicons.dev/icons/

  https://www.iconfinder.com/

  https://www.npmjs.com/package/react-player (playing youtube)

  https://www.fffuel.co/llline/

  https://tailwindcss.com/

  https://sketchfab.com/3d-models/stylized-mangrove-greenhouse-4ad533f838f44fa583683ab7939c6aa1 (3d Model)