{"id":15161015,"url":"https://github.com/intummadee/portfolio-react","last_synced_at":"2026-02-19T16:03:56.472Z","repository":{"id":245423801,"uuid":"814552998","full_name":"Intummadee/PortFolio-React","owner":"Intummadee","description":"Deploying portfolio website using Netlify. ๋࣭ ⭑⚝","archived":false,"fork":false,"pushed_at":"2024-07-03T12:34:06.000Z","size":42789,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-09T23:33:31.803Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Intummadee.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-13T08:28:28.000Z","updated_at":"2024-07-03T12:34:25.000Z","dependencies_parsed_at":"2024-10-10T11:01:14.271Z","dependency_job_id":"2c53cc74-5f11-40b0-972a-622891f40d48","html_url":"https://github.com/Intummadee/PortFolio-React","commit_stats":{"total_commits":59,"total_committers":2,"mean_commits":29.5,"dds":0.288135593220339,"last_synced_commit":"c9bc72687d29c1da453b9f43b268d494be7be3ce"},"previous_names":["intummadee/git_react"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Intummadee%2FPortFolio-React","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Intummadee%2FPortFolio-React/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Intummadee%2FPortFolio-React/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Intummadee%2FPortFolio-React/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Intummadee","download_url":"https://codeload.github.com/Intummadee/PortFolio-React/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240035644,"owners_count":19737602,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2024-09-26T23:44:00.345Z","updated_at":"2025-10-05T17:54:26.425Z","avatar_url":"https://github.com/Intummadee.png","language":"JavaScript","readme":"\n\n\n\u003cdiv align=\"center\"\u003e\n \u003ch1\u003e✨ PortFolio-React \u003cimg src=\"https://giffiles.alphacoders.com/158/158308.gif\" width=\"70px\"\u003e ✨\u003c/h1\u003e\n\u003ca href=\"https://github.com/Ileriayo/markdown-badges\"\u003e\u003cimg src=\"https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge\u0026logo=react\u0026logoColor=%2361DAFB\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/Ileriayo/markdown-badges\"\u003e\u003cimg src=\"https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge\u0026logo=javascript\u0026logoColor=%23F7DF1E\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/Ileriayo/markdown-badges\"\u003e\u003cimg src=\"https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge\u0026logo=tailwind-css\u0026logoColor=white\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/Ileriayo/markdown-badges\"\u003e\u003cimg src=\"https://img.shields.io/badge/threejs-black?style=for-the-badge\u0026logo=three.js\u0026logoColor=white\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/Ileriayo/markdown-badges\"\u003e\u003cimg src=\"https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge\u0026logo=vite\u0026logoColor=white\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/Ileriayo/markdown-badges\"\u003e\u003cimg src=\"https://img.shields.io/badge/netlify-%23000000.svg?style=for-the-badge\u0026logo=netlify\u0026logoColor=#00C7B7\" /\u003e\u003c/a\u003e\n\u003ch3\u003e▶ Visit : \u003ca href=\"https://main--portfolio-intummadee.netlify.app\" target=\"_blank\"\u003ePortFolio-React\u003c/a\u003e \u003c/h3\u003e\n\u003c/div\u003e\n\n\n\u003cimg width=\"100%\" height=\"60%\" src=\"https://github.com/Intummadee/GIT_React/blob/main/assets_me/screen1.png?raw=true\"\u003e\n\u003cimg width=\"100%\" height=\"60%\" src=\"https://github.com/Intummadee/GIT_React/blob/main/assets_me/screen2.png?raw=true\"\u003e\n\u003cimg width=\"100%\" height=\"60%\" src=\"https://github.com/Intummadee/GIT_React/blob/main/assets_me/screen4.png?raw=true\"\u003e\n\n## Getting Started\nTo get started, follow these steps:\n1. Clone this repository using `git clone https://github.com/Intummadee/PortFolio-React.git`\n2. Install dependencies using `npm install`\n3. Run the app using `npm start`\n\n## Tech Stack :\n- **Frontend:** HTML, CSS, React Js, Java Script, TailwindCSS\n- **Library:** React\n- **Version Control:** Git and GitHub\n- **Hosting:** Netlify\n- **Code Editor and tools**: VS Code\n\n---\n\n\u003cdetails\u003e \n  \u003csummary\u003e\u003ch2\u003e 🍹 Dependency \u003c/h2\u003e\u003c/summary\u003e\n\n \n  \u003ch3\u003eInitial Project Setup\u003c/h3\u003e\n  \u003cul\u003e\n   \u003cli\u003e \u003cb\u003e\u003ci\u003enpm create vite@latest ./ -- --template react\u003c/i\u003e\u003c/b\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\n\n  \u003ch3\u003eTailwind CSS Setup\u003c/h3\u003e\n  \u003cul\u003e\n   \u003cli\u003e \u003cb\u003e\u003ci\u003enpm install -D tailwindcss\u003c/i\u003e\u003c/b\u003e\u003c/li\u003e\n   \u003cli\u003e \u003cb\u003e\u003ci\u003enpx tailwindcss init\u003c/i\u003e\u003c/b\u003e\u003c/li\u003e\n   \u003cli\u003e \u003cb\u003e\u003ci\u003enpm install --legacy-peer-deps -D tailwindcss postcss autoprefixer\u003c/i\u003e\u003c/b\u003e\u003c/li\u003e\n   \u003cli\u003e \u003cb\u003e\u003ci\u003enpx tailwindcss init -p\u003c/i\u003e\u003c/b\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\n\n  \u003ch3\u003eThree.js and related libraries\u003c/h3\u003e\n  \u003cul\u003e\n   \u003cli\u003e \u003cb\u003e\u003ci\u003enpm install --legacy-peer-deps @react-three/fiber\u003c/i\u003e\u003c/b\u003e : installs React Three Fiber, a React renderer for Three.js.\u003c/li\u003e\n   \u003cli\u003e \u003cb\u003e\u003ci\u003enpm install --legacy-peer-deps @react-three/drei\u003c/i\u003e\u003c/b\u003e : installs Drei, a collection of useful helpers for React Three Fiber.\u003c/li\u003e\n   \u003cli\u003e \u003cb\u003e\u003ci\u003enpm install --legacy-peer-deps maath\u003c/i\u003e\u003c/b\u003e : a math helper library often used with Three.js.\u003c/li\u003e\n   \u003cli\u003e \u003cb\u003e\u003ci\u003enpm install three\u003c/i\u003e\u003c/b\u003e : This installs Three.js, a popular 3D graphics library for the web.\u003c/li\u003e\n  \u003c/ul\u003e\n\n  \n  \u003ch3\u003eUI and Animation\u003c/h3\u003e\n  \u003cul\u003e\n   \u003cli\u003e \u003cb\u003e\u003ci\u003enpm install --legacy-peer-deps react-vertical-timeline-component\u003c/i\u003e\u003c/b\u003e : a React component for creating vertical timelines.\u003c/li\u003e\n   \u003cli\u003e \u003cb\u003e\u003ci\u003enpm install --legacy-peer-deps framer-motion\u003c/i\u003e\u003c/b\u003e : Framer Motion, a popular animation library for React.\u003c/li\u003e\n   \u003cli\u003e \u003cb\u003e\u003ci\u003enpm install react-parallax-tilt\u003c/i\u003e\u003c/b\u003e : creating tilt hover effects.\u003c/li\u003e\n  \u003c/ul\u003e\n\n  \u003ch3\u003eRouting\u003c/h3\u003e\n  \u003cul\u003e\n   \u003cli\u003e \u003cb\u003e\u003ci\u003enpm install --legacy-peer-deps react-router-dom\u003c/i\u003e\u003c/b\u003e : used for handling routing in React applications.\u003c/li\u003e\n  \u003c/ul\u003e\n\n  \u003ch3\u003eEmail handling\u003c/h3\u003e\n  \u003cul\u003e\n   \u003cli\u003e \u003cb\u003e\u003ci\u003enpm install --legacy-peer-deps @emailjs/browser\u003c/i\u003e\u003c/b\u003e : a library for sending emails directly from JavaScript.\u003c/li\u003e\n  \u003c/ul\u003e\n\n  \u003ch3\u003eVideo playback\u003c/h3\u003e\n  \u003cul\u003e\n   \u003cli\u003e \u003cb\u003e\u003ci\u003enpm install react-player\u003c/i\u003e\u003c/b\u003e : React Player, a component for playing various types of media\u003c/li\u003e\n  \u003c/ul\u003e\n  \n \n  \n\u003c/details\u003e\n\n---\n\n## 🌴 How to Run\n- Located in the PortFolio-React folder and use this command \n```\nnpm run dev\n```\n\n---\n\n### 🥥 Structure or pattern\n\n- Component\n```JS\nimport React from 'react'\nconst Experience = () =\u003e {\n  return (\n    \u003cdiv\u003eExperience\u003c/div\u003e\n  )\n}\nexport default Experience\n```\n\n- Map\n\u003cimg width=\"50%\" height=\"200\"  src=\"https://github.com/Intummadee/GIT_React/blob/main/assets_me/img_4.png?raw=true\"\u003e\n\n---\n\n### 🍉 My Favorite class in TailwindCSS\n```h-screen``` - to make an element span the entire height of the viewport.\n- https://tailwindcss.com/docs/height#viewport-height\n\n\n```h-dvh``` - to make an element span the entire height of the viewport\n\n```green-pink-gradient``` - to make a gradient\n\n```w-1/2 , w-fit```\n\n```absolute inset-0```\n\n```flex flex-wrap```\n\n```drop-shadow-xl```\n\n```\u003cbr className='sm:block hidden' /\u003e``` \n\u003cdiv align=\"center\"\u003e\n\u003cimg width=\"70%\" height=\"200\"  src=\"https://github.com/Intummadee/GIT_React/blob/main/assets_me/img_6.png?raw=true\"\u003e\n\u003c/div\u003e\n\n---\n\n\u003cdetails\u003e \n  \u003csummary\u003e\u003ch2\u003e ⛱️ Technique \u003c/h2\u003e\u003c/summary\u003e\n  \u003ch5\u003e\u003cb\u003e\u0026 nbsp;\u003c/b\u003e abbreviation for \"non-breaking space\" from Navbar.jsx\u003c/h5\u003e \n\n\n- 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.\n\u003cdiv align=\"center\"\u003e\n\u003cimg width=\"45%\" height=\"200\"  src=\"https://github.com/Intummadee/GIT_React/blob/main/assets_me/img_1.png?raw=true\"\u003e\n\u003cimg width=\"45%\" height=\"200\"  src=\"https://github.com/Intummadee/GIT_React/blob/main/assets_me/img_2.png?raw=true\"\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\n- can use the JS below instead of the \u003ca\u003e tag.\n\u003cdiv align=\"center\"\u003e\n\u003cimg width=\"60%\" height=\"200\"  src=\"https://github.com/Intummadee/GIT_React/blob/main/assets_me/img_3.png?raw=true\"\u003e\n\u003c/div\u003e\n\n- Link Tag\n\u003cdiv align=\"center\"\u003e\n\u003cimg width=\"65%\" height=\"300\"  src=\"https://github.com/Intummadee/GIT_React/blob/main/assets_me/image5.png?raw=true\"\u003e\n\u003c/div\u003e\n\u003c/details\u003e\n\n---\n\n## Ref\n\u0026emsp; https://techicons.dev/icons/\n\n\u0026emsp; https://www.iconfinder.com/\n\n\u0026emsp; https://www.npmjs.com/package/react-player (playing youtube)\n\n\u0026emsp; https://www.fffuel.co/llline/\n\n\u0026emsp; https://tailwindcss.com/ \n\n\u0026emsp; https://sketchfab.com/3d-models/stylized-mangrove-greenhouse-4ad533f838f44fa583683ab7939c6aa1 (3d Model)\n\n\n\n\u003cbr\u003e\n\u003cdiv\u003e \n \u003ca href=\"https://www.linkedin.com/in/intummadee-maliyam-800856226/\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/-LinkedIn-%230077B5?style=for-the-badge\u0026logo=linkedin\u0026logoColor=white\" target=\"_blank\"\u003e\u003c/a\u003e\n \u003ca href = \"mailto:intummadee@gmail.com\"\u003e\u003cimg src=\"https://img.shields.io/badge/-Gmail-%23333?style=for-the-badge\u0026logo=gmail\u0026logoColor=white\" target=\"_blank\"\u003e\u003c/a\u003e\n \u003ca href=\"https://github.com/Intummadee?tab=repositories\" target=\"_blank\"\u003e\u003cimg alt=\"All Repositories\" title=\"All Repositories\" src=\"https://img.shields.io/badge/-All%20Repos-2962FF?style=for-the-badge\u0026logo=koding\u0026logoColor=white\"/\u003e\u003c/a\u003e\n \u003ca href = \"https://discordapp.com/users/802492085419769856\"\u003e\u003cimg src=\"https://img.shields.io/badge/Discord-5865F2?style=for-the-badge\u0026logo=discord\u0026logoColor=white\" target=\"_blank\"\u003e\u003c/a\u003e\n\u003c/div\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fintummadee%2Fportfolio-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fintummadee%2Fportfolio-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fintummadee%2Fportfolio-react/lists"}