Changes

config-overrides.js

@@ -0,0 +1,12 @@
+module.exports = function override(config, env) {
+    config.module.rules.push({
+      test: /\.mjs$/,
+      enforce: 'pre',
+      use: ['source-map-loader'],
+      resolve: {
+        fullySpecified: false,
+      },
+      exclude: /node_modules\/@react-three\/drei\/node_modules\/@mediapipe\/tasks-vision/,
+    });
+    return config;
+  };

package.json

@@ -33,12 +33,12 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-app-rewired test",
     "eject": "react-scripts eject",
     "predeploy": "npm run build",
-    "deploy" : "gh-pages -d build"
+    "deploy": "gh-pages -d build"
   },
   "eslintConfig": {
     "extends": [
@@ -59,6 +59,8 @@
     ]
   },
   "devDependencies": {
-    "gh-pages": "^6.1.1"
+    "gh-pages": "^6.1.1",
+    "react-app-rewired": "^2.2.1",
+    "source-map-loader": "^5.0.0"
   }
 }

src/components/About/AboutStyle.js

@@ -1,5 +1,4 @@
 import styled from 'styled-components';
-import _default from '../../themes/default';
 
 
 export const SocialMediaIcons = styled.div`

src/components/HeroSection/HeroStyle.js

@@ -1,5 +1,4 @@
 import styled from "styled-components";
-import _default from "../../themes/default";
 
 export const HeroContainer = styled.div`
   background: ${({ theme }) => theme.card_light};

src/components/HeroSection/index.js

@@ -1,6 +1,5 @@
 import React from 'react'
-import HeroBgAnimation from '../HeroBgAnimation'
-import { HeroContainer, HeroBg, HeroLeftContainer, Img, HeroRightContainer, HeroInnerContainer, TextLoop, Title, Span, SubTitle,SocialMediaIcons,SocialMediaIcon, ResumeButton } from './HeroStyle'
+import { HeroContainer, HeroBg, HeroLeftContainer, Img, HeroRightContainer, HeroInnerContainer, TextLoop, Title, Span, SubTitle, ResumeButton } from './HeroStyle'
 import HeroImg from '../../images/Heroimage.jpeg'
 import Typewriter from 'typewriter-effect';
 import { Bio } from '../../data/constants';

src/components/Navbar/NavbarStyledComponent.js

@@ -1,6 +1,5 @@
 import { Link as LinkR } from 'react-router-dom';
 import styled from 'styled-components';
-import _default from '../../themes/default';
 
 export const Nav = styled.div`
     background-color: ${({theme}) => theme.card_light};

src/components/Navbar/index.js

@@ -12,8 +12,8 @@ const Navbar = () => {
   return (
     <Nav>
       <NavbarContainer>
-        <NavLogo to='/'>
-          <a style={{ display: "flex", alignItems: "center", color: "white", marginBottom: '20;', cursor: 'pointer' }}>
+        <NavLogo>
+          <a href='/' style={{ display: "flex", alignItems: "center", color: "white", textDecoration: "none", marginBottom: '20;', cursor: 'pointer' }}>
             <DiCssdeck size="3rem" /> <Span>Portfolio</Span>
           </a>
         </NavLogo>

src/components/ProjectDetails/index.jsx

@@ -1,4 +1,4 @@
-import { CloseRounded, GitHub, LinkedIn } from '@mui/icons-material';
+import { CloseRounded} from '@mui/icons-material';
 import { Modal } from '@mui/material';
 import React from 'react'
 import styled from 'styled-components'
@@ -54,16 +54,16 @@ const Date = styled.div`
 
 
 
-const Desc = styled.div`
-    font-size: 16px;
-    font-weight: 400;
-    color: ${({ theme }) => theme.text_primary};
-    margin: 8px 6px;
-    @media only screen and (max-width: 600px) {
-        font-size: 14px;
-        margin: 6px 6px;
-    }
-`;
+// const Desc = styled.div`
+//     font-size: 16px;
+//     font-weight: 400;
+//     color: ${({ theme }) => theme.text_primary};
+//     margin: 8px 6px;
+//     @media only screen and (max-width: 600px) {
+//         font-size: 14px;
+//         margin: 6px 6px;
+//     }
+// `;
 
 const Image = styled.img`
     width: 100%;
@@ -73,16 +73,16 @@ const Image = styled.img`
     box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
 `;
 
-const Label = styled.div`
-    font-size: 20px;
-    font-weight: 600;
-    color: ${({ theme }) => theme.text_primary};
-    margin: 8px 6px;
-    @media only screen and (max-width: 600px) {
-        font-size: 16px;
-        margin: 8px 6px;
-    }
-`;
+// const Label = styled.div`
+//     font-size: 20px;
+//     font-weight: 600;
+//     color: ${({ theme }) => theme.text_primary};
+//     margin: 8px 6px;
+//     @media only screen and (max-width: 600px) {
+//         font-size: 16px;
+//         margin: 8px 6px;
+//     }
+// `;
 
 const Tags = styled.div`
     display: flex;

src/components/Projects/ProjectsStyle.js

@@ -1,5 +1,4 @@
 import styled from 'styled-components';
-import _default from '../../themes/default';
 
 export const Container = styled.div`
     background: linear-gradient(343.07deg, rgba(0, 0, 255, 0.06) 5.71%, rgba(0, 0, 255, 0) 64.83%);

src/data/constants.js

@@ -10,6 +10,7 @@ import usfinternational from '../images/usfinterWeb.png';
 
 
 
+
 export const Bio = {
   name: "Benjamin Belloeil",
   roles: [

src/themes/default.js

@@ -1,4 +1,4 @@
-export default {
+const defaultTheme = {
   // Temp fonts
   fonts: {
     title: "Space Grotesk, sans-serif",
@@ -24,3 +24,5 @@ export default {
     xl: 'screen and (max-width: 1280px)'
   },
 };
+
+export default defaultTheme;

webpack.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+    module: {
+      rules: [
+        {
+          test: /\.mjs$/,
+          enforce: 'pre',
+          use: ['source-map-loader'],
+          resolve: {
+            fullySpecified: false,
+          },
+          exclude: /node_modules\/@react-three\/drei\/node_modules\/@mediapipe\/tasks-vision/,
+        },
+      ],
+    },
+  };