first commit

ritik2727 · Dec 16, 2021 · f34bda6 · f34bda6
1 parent 48a5072
commit f34bda6
Show file tree

Hide file tree

Showing 60 changed files with 16,387 additions and 1,171 deletions.
diff --git a/.gitignore b/.gitignore
@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.vercel
diff --git a/image/portofiorj.jpg b/image/portofiorj.jpg
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,12 +3,29 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.7.1",
+    "@emotion/styled": "^11.6.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/free-brands-svg-icons": "^5.15.4",
+    "@fortawesome/react-fontawesome": "^0.1.16",
+    "@mui/icons-material": "^5.2.4",
+    "@mui/material": "^5.2.4",
+    "@mui/styles": "^5.2.3",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
+    "framer-motion": "^5.5.3",
+    "lottie-react": "^2.1.0",
     "react": "^17.0.2",
+    "react-awesome-loaders": "^0.1.37",
     "react-dom": "^17.0.2",
+    "react-icons": "^4.3.1",
+    "react-lazy-named": "^1.2.2",
+    "react-lottie": "^1.2.3",
+    "react-router-dom": "^6.1.1",
     "react-scripts": "5.0.0",
+    "styled-components": "^5.3.3",
+    "typewriter-effect": "^2.18.2",
     "web-vitals": "^2.1.2"
   },
   "scripts": {
@@ -34,5 +51,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "sass": "^1.45.0"
   }
 }
diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/index.html b/public/index.html
@@ -2,19 +2,23 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link
+    rel="stylesheet"
+    href="https://fonts.googleapis.com/css?family=Pacifico|Raleway:100,400,400i,700|Roboto:300,400,500,700&display=swap"
+  />
+  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -24,20 +28,32 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+  <title>RJ | Portfolio</title>
+  <meta name="description" content="Self Developed personal website build with React.js">
+    <!-- Google / Search Engine Tags -->
+    <meta itemprop="name" content="RJ | Portfolio">
+    <meta itemprop="description" content="Self Developed personal website build with React.js">
+    <meta itemprop="image"
+      content="https://raw.githubusercontent.com/soumyajit4419/Portfolio/master/Images/readme-img.png?token=AK7VCIF5RYEUZZAURELPTAC76U6AK">
+
+    <!-- Facebook Meta Tags -->
+    <meta property="og:url" content="https://soumyajit.vercel.app">
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="RJ | Portfolio">
+    <meta property="og:description" content="Self Developed personal website build with React.js">
+    <meta property="og:image"
+      content="https://raw.githubusercontent.com/soumyajit4419/Portfolio/master/Images/readme-img.png?token=AK7VCIF5RYEUZZAURELPTAC76U6AK">
+
+    <!-- Twitter Meta Tags -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="RJ | Portfolio">
+    <meta name="twitter:description" content="Self Developed personal website build with React.js">
+    <meta name="twitter:image"
+      content="https://raw.githubusercontent.com/soumyajit4419/Portfolio/master/Images/readme-img.png?token=AK7VCIF5RYEUZZAURELPTAC76U6AK">
   </head>
-  <body>
+  <body style="margin:0">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
+
 </html>
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.js b/src/App.js
@@ -1,24 +1,115 @@
-import logo from './logo.svg';
-import './App.css';
+import React,{useState,useContext, Suspense ,lazy ,useEffect} from 'react';
+import { ThemeProvider } from '@mui/material/styles';
+import { StyledEngineProvider } from '@mui/styled-engine';
+import LandingPage from './components/home/LandingPage';
+import { XlviLoader } from "react-awesome-loaders";
+// import Header from "./components/ui/Header";
+import './components/ui/styles.css'
 
-function App() {
+
+import { DarkThemeContext } from './context/DarkThemeContext';
+// import ScrollTop from './components/ui/ScrollTop';
+
+// import Footer from './components/ui/Footer';
+// import ContactMe from './components/Contact/ContactMe';
+import {
+  Routes,
+  Route,
+  useLocation
+} from "react-router-dom";
+
+import { Presence } from './components/animated';
+import { Loading } from './components/loading/Loading';
+import './components/ui/styles.css'
+// import Project from './components/projectmade/Project';
+
+// import ScrollToTop from './components/ui/ScrollToTop';
+// import AboutMe from './components/about/AboutMe';
+
+
+
+
+const Header = lazy(()=>import("./components/ui/Header"))
+const Footer = lazy(()=>import('./components/ui/Footer'))
+const ContactMe = lazy(()=>import('./components/Contact/ContactMe'))
+const Project = lazy(()=>import('./components/projectmade/Project'))
+const ScrollToTop = lazy(()=>import('./components/ui/ScrollToTop'))
+const AboutMe = lazy(()=>import('./components/about/AboutMe'))
+const ScrollTop = lazy(()=>import('./components/ui/ScrollTop'))
+
+function App(props) {
+  const location  = useLocation();
+  const [value,setValue] = useState(0);
+  const [selectedIndex,setSelectedIndex] = useState(0)
+  const [loading, setLoading] = useState(false)
+
+  useEffect(() => {
+    setLoading(true)
+    setTimeout(() => {
+      setLoading(false)
+    })
+  }, [])
+
+  const { dt,t} = useContext(DarkThemeContext)
+  const [darkTheme] = dt;
+  const [themeM] = t;
+
+
+
+
+
+
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <StyledEngineProvider injectFirst>
+    <ThemeProvider theme={themeM} >
+    {loading ?
+        <div className='loder'>
+          <XlviLoader
+            className="loaderbolt"
+            boltColor={"#FBFF00"}
+            backgroundBlurColor={"#E0E7FF"}
+          />
+        </div> :
+
+      <div style={{backgroundColor:darkTheme? '#171C28' :'#FFFFFF' ,height:'100%',width:'100%',}}>
+      <Suspense fallback={<Loading />} >
+    <ScrollTop   showBelow={120} />
+
+
+
+      <Header   
+      {...props}
+      value={value}
+          setValue={setValue}
+          selectedIndex={selectedIndex}
+          setSelectedIndex={setSelectedIndex}
+      />
+
+
+
+
+    <ScrollToTop />
+
+
+
+    <Presence exitBeforeEnter >
+
+  <Routes location={location} key={location.key} >
+  <Route exact  path='/'  element={ <LandingPage/>} />
+    <Route exact  path='/projects'  element={<Project />} />
+     <Route exact  path='/contact'  element={<ContactMe />} />
+     <Route exact  path='/about'  element={<AboutMe />} />
+  </Routes>
+  </Presence>
+
+
+  <Footer />
+  </Suspense>
+
+     </div>
+}
+    </ThemeProvider>
+    </StyledEngineProvider>
   );
 }
 

diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/animation/build.json b/src/animation/build.json