Added files

.github/workflows/deploy.yml

@@ -0,0 +1,51 @@
+name: Deploy
+
+on:
+ push:
+ branches:
+ - main
+
+jobs:
+ build:
+ name: Build
+ runs-on: ubuntu-latest
+
+ steps:
+ - name: Checkout repo
+ uses: actions/checkout@v3
+
+ - name: Setup Node
+ uses: actions/setup-node@v3
+ with:
+ node-version: 16
+
+ - name: Install dependencies
+ uses: bahmutov/npm-install@v1
+
+ - name: Build project
+ run: npm run build
+
+ - name: Upload production-ready build files
+ uses: actions/upload-artifact@v2
+ with:
+ name: production-files
+ path: ./dist
+
+ deploy:
+ name: Deploy
+ needs: build
+ runs-on: ubuntu-latest
+ if: github.ref == 'refs/heads/main'
+
+ steps:
+ - name: Download artifact
+ uses: actions/download-artifact@v2
+ with:
+ name: production-files
+ path: ./dist
+
+ - name: Deploy to GitHub Pages
+ uses: peaceiris/actions-gh-pages@v3
+ with:
+ github_token: ${{ secrets.GITHUB_TOKEN }}
+ publish_dir: ./dist

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -0,0 +1,156 @@
+# 3D React Portfolio
+
+
+# [Personal Portfolio - 3D React Portfolio](https://shinchancode.github.io/3d-react-portfolio/)
+<b>Created a responsive react website using amazing features of CSS, HTML and Javascript framework React with 3D graphics and animations. I have used ThreeJS 3D Developer tools for this Portfolio.
+
+Implemented my own Portfolio as Website, Where I have added all my projects and experiences. I have hosted it with the help of github gh-pages. I keep on making changes accordingly.</b>
+
+![3D Portfolio](https://github.com/shinchancode/3d-react-portfolio/blob/main/Images/1.png)
+
+## View Live Demo
+<pre><center><a href="https://shinchancode.github.io/3d-react-portfolio/"><b>https://shinchancode.github.io/3d-react-portfolio/</b></a></center></pre>
+
+
+## Introduction
+The most impressive websites in the world use 3D graphics and animations to bring their content to life. See here how to build your own ThreeJS 3D Developer Portfolio today! 
+
+In this project, you'll use these technologies:
+- **ThreeJS** - an incredibly powerful 3D graphics library that enables you to render and animate captivating 3D models with ease.
+- **React Three Fiber** - a widely adopted library that seamlessly integrates ThreeJS into React, allowing you to create stunning 3D graphics while harnessing the full potential of React's capabilities.
+- **TailwindCSS** - a highly popular utility-first CSS styling framework that empowers you to craft visually stunning websites with minimal effort.
+- **Framer Motion** - the go-to library for adding captivating animations to your React websites, breathing life into your creations and making them truly stand out.
+
+### This portfolio contains:
+
+- Load, customize, and create visually impressive 3D models and geometries. We'll also see to manipulate various lighting setups and understand how to position objects effectively within a 3D space.
+- Implement industry-standard best practices, making our code reusable and scalable through techniques like Higher Order Components (HOCs), enhancing the efficiency and maintainability of our projects.
+- Incorporate a functional email form on our website, allowing visitors to easily reach out to you, thus enhancing user engagement and interactivity.
+- Ensuring that our website exhibits optimal responsiveness across all devices, offering a seamless user experience. Additionally, you'll learn to optimize our site's performance using techniques such as Suspense and Preload.
+- Prepare to embark on an exciting journey that will transform you into a skilled ThreeJS 3D Developer, enabling you to create visually stunning and interactive web experiences that will leave a lasting impression on audience.
+
+ <hr>
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+### `npx create-react-app`
+
+To start with react app
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http:https://localhost:3000](http:https://localhost:3000) to view it in your browser.
+
+The page will reload when you make changes.\
+You may also see any lint errors in the console.
+
+### `npm i node-sass`
+
+Node-sass is a library that provides binding for Node.js to LibSass, the C version of the popular stylesheet preprocessor, Sass.\
+See the section about [running tests](https://github.com/sass/node-sass) for more information.
+
+### `npm i ityped`
+
+Enter in any string, and watch it type at the speed you've set, backspace what it's typed,\
+and begin a new sentence for however many strings you've set.
+
+See the section about [deployment](https://unpkg.com/[email protected]) for more information.
+
+### `npm i @material-ui/core`
+### `npm i @material-ui/core`
+
+React components for faster and easier web development. Build your own design system, or start with Material Design.
+
+See the section about [MUI Documentation](https://mui.com/) for more information.
+
+
+### `npm run build`
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+Other libraries and dependencies which needs to be installed before working on the project
+
+### `npm create vite@latest ./ -- --template react`
+### `npm install -D tailwindcss`
+### `npx tailwindcss init`
+### `npm install --legacy-peer-deps @react-three/fiber @react-three/drei maath react-tilt react-vertical-timeline-component @emailjs/browser framer-motion react-router-dom`
+### `npm run dev`
+
+### `npm install --legacy-peer-deps -D postcss autoprefixer`
+### `npx tailwindcss init -p`
+### `npm install --save-dev sass`
+### `npm i ityped`
+### `npm install --legacy-peer-deps three`
+
+
+### `npm install react-icons --save`
+### `npm install --legacy-peer-deps react-parallax-tilt`
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Deployment
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+<hr>
+
+## [SnapShots in Laptop View](https://shinchancode.github.io/3d-react-portfolio/)
+
+![3D Portfolio Laptop](https://github.com/shinchancode/3d-react-portfolio/blob/main/Images/1.png)
+
+![3D Portfolio Laptop](https://github.com/shinchancode/3d-react-portfolio/blob/main/Images/2.png)
+
+![3D Portfolio Laptop](https://github.com/shinchancode/3d-react-portfolio/blob/main/Images/3.png)
+
+![3D Portfolio Laptop](https://github.com/shinchancode/3d-react-portfolio/blob/main/Images/4.png)
+
+![3D Portfolio Laptop](https://github.com/shinchancode/3d-react-portfolio/blob/main/Images/5.png)
+
+![3D Portfolio Laptop](https://github.com/shinchancode/3d-react-portfolio/blob/main/Images/6.png)
+
+<hr>
+
+## [SnapShots in Mobile View](https://shinchancode.github.io/3d-react-portfolio/)
+
+<div align="center">
+<img src="https://github.com/shinchancode/3d-react-portfolio/blob/main/Images/p1.jpg" width="250px" height="400"/>
+
+<img src="https://github.com/shinchancode/3d-react-portfolio/blob/main/Images/p2.jpg" width="250px" height="400"/>
+
+<img src="https://github.com/shinchancode/3d-react-portfolio/blob/main/Images/p3.jpg" width="250px" height="400"/>
+</div>
+<br>
+
+<div align="center">
+<img src="https://github.com/shinchancode/3d-react-portfolio/blob/main/Images/p4.png" width="250px" height="400"/>
+
+<img src="https://github.com/shinchancode/3d-react-portfolio/blob/main/Images/p5.png" width="250px" height="400"/>
+
+<img src="https://github.com/shinchancode/3d-react-portfolio/blob/main/Images/p6.png" width="250px" height="400"/>
+</div> 
+
+### Connect with me:
+
+[<img align="left" alt="codeSTACKr.com" width="22px" src="https://img.icons8.com/?size=512&id=n9d0Hm43JCPK&format=png" />][website]
+[<img align="left" alt="codeSTACKr | Twitter" width="22px" src="https://img.icons8.com/fluency/48/twitter.png" />][twitter]
+[<img align="left" alt="codeSTACKr | LinkedIn" width="22px" src="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/linked-in-alt.svg" />][linkedin]
+[<img align="left" alt="codeSTACKr | Instagram" width="22px" src="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/instagram.svg" />][instagram]
+
+<br />
+
+[website]: https://shinchancode.github.io/3d-react-portfolio/
+[twitter]: https://twitter.com/CodeShinchan
+[instagram]: https://www.instagram.com/aarti.rathiii
+[linkedin]: https://www.linkedin.com/in/aarti-rathi-a6031814b/

index.html

@@ -0,0 +1,19 @@
+<!-- 
+ Name : Aarti Rathi
+ Wesbite : https://shinchancode.github.io/3d-react-portfolio/
+-->
+
+
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <link rel="icon" type="image/svg+xml" href="/ar.png" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Aarti Rathi</title>
+ </head>
+ <body>
+ <div id="root"></div>
+ <script type="module" src="/src/main.jsx"></script>
+ </body>
+</html>