✨ PortFolio-React ✨

▶ Visit : PortFolio-React

Getting Started

To get started, follow these steps:

Clone this repository using git clone https://github.com/Intummadee/PortFolio-React.git
Install dependencies using npm install
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

🍉 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)

intummadee / portfolio-react Goto Github PK

portfolio-react's Introduction