Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/intummadee/portfolio-react
Deploying portfolio website using Netlify. ๋࣭ ⭑⚝
https://github.com/intummadee/portfolio-react
3d 3d-models build-tool email front front-end-development frontend-web motion netlify portfolio portfolio-website react react-router reactjs tailwind tailwindcss three vite
Last synced: 29 days ago
JSON representation
Deploying portfolio website using Netlify. ๋࣭ ⭑⚝
- Host: GitHub
- URL: https://github.com/intummadee/portfolio-react
- Owner: Intummadee
- Created: 2024-06-13T08:28:28.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-07-03T12:34:06.000Z (4 months ago)
- Last Synced: 2024-09-26T23:43:51.393Z (about 1 month ago)
- Topics: 3d, 3d-models, build-tool, email, front, front-end-development, frontend-web, motion, netlify, portfolio, portfolio-website, react, react-router, reactjs, tailwind, tailwindcss, three, vite
- Language: JavaScript
- Homepage:
- Size: 40.8 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 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
```JS
import React from 'react'
const Experience = () => {
return (
)
}
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```
```
```
---
⛱️ 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)
