Upgrade yarn and added download handler in resume button

ayu023ban · May 20, 2024 · fcf1e0d · fcf1e0d
1 parent e03dcd7
commit fcf1e0d
Show file tree

Hide file tree

Showing 20 changed files with 4,398 additions and 5,624 deletions.
diff --git a/.github/workflows/deploy-to-gh-pages.yml b/.github/workflows/deploy-to-gh-pages.yml
@@ -14,7 +14,7 @@ jobs:
       - name: Install NodeJS
         uses: actions/setup-node@v3
         with:
-          node-version: '16.16.0'
+          node-version: '20.11.0'
           cache: 'yarn'
 
       - name: Install and Build 🔧

diff --git a/package.json b/package.json
@@ -7,18 +7,18 @@
   "dependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.1",
+    "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
     "dotenv": "^16.4.4",
     "levenary": "^1.1.1",
     "node-fetch": "^3.3.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-scripts": "4.0.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-scripts": "5.0.1",
     "scroll-behavior-polyfill": "^2.0.13"
   },
   "scripts": {
-    "fetch_data": "node scripts/fetch_data.js",
+    "fetch_data": "node scripts/fetch_data.mjs",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",

diff --git a/public/index.html b/public/index.html
@@ -55,7 +55,7 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
+    <div id="app"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/scripts/fetch_data.js → scripts/fetch_data.mjs b/scripts/fetch_data.js → scripts/fetch_data.mjs
diff --git a/src/App.js b/src/App.js
@@ -1,7 +1,7 @@
 import React from "react";
 import "./App.css";
-import Layout from "./containers/Layout/Layout";
-import DataProvider from "./hoc/DataContext";
+import Layout from "./containers/Layout/Layout.js";
+import DataProvider from "./hoc/DataContext.js";
 
 function App() {
   return (

diff --git a/src/components/AboutMe/AboutMe.js b/src/components/AboutMe/AboutMe.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { DataContext } from "../../hoc/DataContext";
+import { DataContext } from "../../hoc/DataContext.js";
 import classes from "./AboutMe.module.css";
 
 class AboutMe extends React.Component {

diff --git a/src/components/Contact/Contact.js b/src/components/Contact/Contact.js
@@ -1,9 +1,9 @@
 import React from "react";
 import classes from "./Contact.module.css";
-import BigText from "../UI/BigText/BigText";
-import Button from "./../UI/Button/Button";
-import mailtoHandler from "../../services/mailToHandler";
-import { DataContext } from "../../hoc/DataContext";
+import BigText from "../UI/BigText/BigText.js";
+import Button from "./../UI/Button/Button.js";
+import mailtoHandler from "../../services/mailToHandler.js";
+import { DataContext } from "../../hoc/DataContext.js";
 
 class Contact extends React.Component {
   contactRef = null;

diff --git a/src/components/Experience/Experience.js b/src/components/Experience/Experience.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import classes from './Experience.module.css';
-import Aux from '../../hoc/Auxiliary';
-import MasterDetail from '../UI/MasterDetail/MasterDetail';
+import Aux from '../../hoc/Auxiliary.js';
+import MasterDetail from '../UI/MasterDetail/MasterDetail.js';
 
 class Experience extends React.Component {
   experienceRef = null;

diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js
@@ -1,6 +1,6 @@
 import React, { useContext } from 'react'
 import classes from './Footer.module.css'
-import { DataContext } from '../../hoc/DataContext'
+import { DataContext } from '../../hoc/DataContext.js'
 const Footer = () => {
   const data  = useContext(DataContext)
   const full_name = data.profile.full_name

diff --git a/src/components/Introduction/Introduction.js b/src/components/Introduction/Introduction.js
@@ -1,9 +1,9 @@
 import React from "react";
 import classes from "./Introduction.module.css";
-import BigText from "../UI/BigText/BigText";
-import Button from "../UI/Button/Button";
-import mailtoHandler from "../../services/mailToHandler";
-import { DataContext } from "../../hoc/DataContext";
+import BigText from "../UI/BigText/BigText.js";
+import Button from "../UI/Button/Button.js";
+import mailtoHandler from "../../services/mailToHandler.js";
+import { DataContext } from "../../hoc/DataContext.js";
 
 class Introduction extends React.Component {
   static contextType = DataContext;

diff --git a/src/components/Navigation/NavigationItems/NavigationItems.js b/src/components/Navigation/NavigationItems/NavigationItems.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import classes from './NavigationItems.module.css';
-import NavigationItem from './NavigationItem/NavigationItem';
+import NavigationItem from './NavigationItem/NavigationItem.js';
 
 const navigationItems = (props) => {
   const externalLink = ['fas fa-external-link-alt', classes.TextColor].join(

diff --git a/src/components/Navigation/SideDrawer/SideDrawer.js b/src/components/Navigation/SideDrawer/SideDrawer.js
@@ -1,12 +1,15 @@
 import React from 'react';
-import Aux from './../../../hoc/Auxiliary';
-import NavigationItems from './../NavigationItems/NavigationItems';
+import Aux from './../../../hoc/Auxiliary.js';
+import NavigationItems from './../NavigationItems/NavigationItems.js';
 import classes from './SideDrawer.module.css';
-import Button from '../../UI/Button/Button';
-import BackDrop from '../../UI/BackDrop/BackDrop';
+import Button from '../../UI/Button/Button.js';
+import BackDrop from '../../UI/BackDrop/BackDrop.js';
 
 const sideDrawer = (props) => {
   let attachedClasses = [classes.SideDrawer, classes.Close];
+  const resumeHandler = () => {
+    window.open(process.env.PUBLIC_URL + "/resume.pdf", "_blank");
+  };
 
   if (props.open) {
     attachedClasses = [classes.SideDrawer, classes.Open];
@@ -18,7 +21,7 @@ const sideDrawer = (props) => {
       <div className={attachedClasses.join(' ')}>
         <nav>
           <NavigationItems clicked={props.scrolledTo} />
-          <Button>RESUME</Button>
+          <Button clicked={resumeHandler} >RESUME</Button>
         </nav>
       </div>
     </Aux>

diff --git a/src/components/Navigation/Toolbar/Toolbar.js b/src/components/Navigation/Toolbar/Toolbar.js
@@ -1,9 +1,9 @@
 import React from "react";
 import classes from "./Toolbar.module.css";
-import NavigationItems from "../NavigationItems/NavigationItems";
-import Logo from "../../Logo/Logo";
-import Button from "../../UI/Button/Button";
-import DrawerToggle from "../SideDrawer/DrawerToggle/DrawerToggle";
+import NavigationItems from "../NavigationItems/NavigationItems.js";
+import Logo from "../../Logo/Logo.js";
+import Button from "../../UI/Button/Button.js";
+import DrawerToggle from "../SideDrawer/DrawerToggle/DrawerToggle.js";
 const toolbar = (props) => {
   const resumeHandler = () => {
     window.open(process.env.PUBLIC_URL + "/resume.pdf", "_blank");

diff --git a/src/components/SocialLinks/SocialLinks.js b/src/components/SocialLinks/SocialLinks.js
@@ -1,6 +1,6 @@
 import React, { useContext } from "react";
 import classes from "./SocialLinks.module.css";
-import { DataContext } from "../../hoc/DataContext";
+import { DataContext } from "../../hoc/DataContext.js";
 const SocialLinks = () => {
   const data = useContext(DataContext);
   const social_links = data.profile.social_links;

diff --git a/src/components/UI/MasterDetail/MasterDetail.js b/src/components/UI/MasterDetail/MasterDetail.js
@@ -1,7 +1,7 @@
 import React, { Component } from "react";
-import Detail from "./Detail/Detail";
+import Detail from "./Detail/Detail.js";
 import classes from "./MasterDetail.module.css";
-import { DataContext } from "../../../hoc/DataContext";
+import { DataContext } from "../../../hoc/DataContext.js";
 
 class MasterDetail extends Component {
   static contextType = DataContext;

diff --git a/src/components/Work/Work.js b/src/components/Work/Work.js
@@ -1,8 +1,8 @@
 import React from "react";
 import classes from "./Work.module.css";
-import Card from "../UI/Card/Card";
-import Button from "./../UI/Button/Button";
-import { DataContext } from "../../hoc/DataContext";
+import Card from "../UI/Card/Card.js";
+import Button from "./../UI/Button/Button.js";
+import { DataContext } from "../../hoc/DataContext.js";
 
 class Work extends React.Component {
   workRef = null;

diff --git a/src/containers/Layout/Layout.js b/src/containers/Layout/Layout.js
@@ -1,17 +1,17 @@
 import React from "react";
 import classes from "./Layout.module.css";
-import Aux from "../../hoc/Auxiliary";
-import Toolbar from "../../components/Navigation/Toolbar/Toolbar";
-import Introduction from "../../components/Introduction/Introduction";
-import AboutMe from "../../components/AboutMe/AboutMe";
-import SideDrawer from "../../components/Navigation/SideDrawer/SideDrawer";
-import Experience from "../../components/Experience/Experience";
-import Contact from "../../components/Contact/Contact";
-import Work from "../../components/Work/Work";
-import Footer from "./../../components/Footer/Footer";
-import ScrollToTop from "../../components/Navigation/ScrollToTop/ScrollToTop";
-import SocialLinks from "../../components/SocialLinks/SocialLinks";
-import { DataContext } from "../../hoc/DataContext";
+import Aux from "../../hoc/Auxiliary.js";
+import Toolbar from "../../components/Navigation/Toolbar/Toolbar.js";
+import Introduction from "../../components/Introduction/Introduction.js";
+import AboutMe from "../../components/AboutMe/AboutMe.js";
+import SideDrawer from "../../components/Navigation/SideDrawer/SideDrawer.js";
+import Experience from "../../components/Experience/Experience.js";
+import Contact from "../../components/Contact/Contact.js";
+import Work from "../../components/Work/Work.js";
+import Footer from "./../../components/Footer/Footer.js";
+import ScrollToTop from "../../components/Navigation/ScrollToTop/ScrollToTop.js";
+import SocialLinks from "../../components/SocialLinks/SocialLinks.js";
+import { DataContext } from "../../hoc/DataContext.js";
 
 class Layout extends React.Component {
   static contextType = DataContext;

diff --git a/src/hoc/DataContext.js b/src/hoc/DataContext.js
@@ -3,7 +3,7 @@ import data from '../data/data.json';
 
 export const DataContext = React.createContext();
 
-export default ({ children }) => {
+const useProvider = ({ children }) => {
   const [profile, setProfile] = useState({
     technologies: [],
     social_links: {},
@@ -26,3 +26,5 @@ export default ({ children }) => {
     ></DataContext.Provider>
   );
 };
+
+export default useProvider;
diff --git a/src/index.js b/src/index.js
@@ -1,16 +1,22 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
+import App from './App.js';
+import * as serviceWorker from './serviceWorker.js';
 import 'scroll-behavior-polyfill';
+import { createRoot } from 'react-dom/client';
 
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
-);
+
+const container = document.getElementById('app');
+const root = createRoot(container); // createRoot(container!) if you use TypeScript
+root.render(<App/>);
+
+
+// ReactDOM.render(
+//   <React.StrictMode>
+//     <App />
+//   </React.StrictMode>,
+//   document.getElementById('root')
+// );
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.