final version

MunteanuAndrei237 · Nov 2, 2023 · a92abc4 · a92abc4
1 parent be08f54
commit a92abc4
Show file tree

Hide file tree

Showing 25 changed files with 269 additions and 227 deletions.
diff --git a/public/2023-10-02 13-28-26.mp4 b/public/2023-10-02 13-28-26.mp4
diff --git a/public/2023-10-21_20-49-17 - Trim.mp4 b/public/2023-10-21_20-49-17 - Trim.mp4
diff --git a/public/c++Icon.png b/public/c++Icon.png
diff --git a/public/copyLinkIcon.png b/public/copyLinkIcon.png
diff --git a/public/csharpIcon.png b/public/csharpIcon.png
diff --git a/public/cssIcon.png b/public/cssIcon.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/haskellIcon.png b/public/haskellIcon.png
diff --git a/public/htmlIcon.png b/public/htmlIcon.png
diff --git a/public/index.html b/public/index.html
@@ -21,7 +21,7 @@
       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 Project</title>
+    <title>Munteanu Andrei</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/javaIcon.png b/public/javaIcon.png
diff --git a/public/javascriptIcon.png b/public/javascriptIcon.png
diff --git a/public/linkedinIcon.png b/public/linkedinIcon.png
diff --git a/public/pythonIcon.png b/public/pythonIcon.png
diff --git a/public/reactIcon.png b/public/reactIcon.png
diff --git a/public/sqlIcon.png b/public/sqlIcon.png
diff --git a/src/Body.js b/src/Body.js
@@ -3,15 +3,15 @@ import PopUp from "./PopUp";
 import React, { useState } from "react";
 
 function Body() {
-  const [popUpprops, setpopUpprops] = useState(0);
+  const [popUpProps, setpopUpProps] = useState(0);
   function renderPopUp(text) {
     document.getElementById("popUp").style.display = "flex";
-    setpopUpprops(text);
+    setpopUpProps(text);
   }
 
   return (
     <div id="body">
-      <PopUp props={popUpprops} />
+      <PopUp props={popUpProps} />
       <div className="bodySection" id="aboutMe">
         <h1>About me</h1>
         <p>

diff --git a/src/Header.js b/src/Header.js
@@ -16,7 +16,7 @@ function animateMenu(mi, mc, mo) {
 }
 
 function Header() {
-  var menuopened = false;
+  var menuOpened = false;
   var menuContainer = (
     <div id="menuContainer">
       <a id="jumpToAbout" className="menuItem" href="#aboutMe">
@@ -39,7 +39,7 @@ function Header() {
       id="menuIcon"
       alt="Media not avalabile"
       onClick={() => {
-        menuopened = animateMenu("menuIcon", "menuContainer", menuopened);
+        menuOpened = animateMenu("menuIcon", "menuContainer", menuOpened);
       }}
     ></img>
   );

diff --git a/src/PopUp.css b/src/PopUp.css
@@ -1,87 +1,93 @@
-#popUp{
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgb(0,0,0,0.6);
-    z-index: 1000;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    display: none;
+#popUp {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgb(0, 0, 0, 0.6);
+  z-index: 1000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  display: none;
 }
-#popUpBoxCode{
-    background-color: white;
-    width: 90%;
-    height: 90%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
+
+#popUpBoxCode {
+  background-color: white;
+  width: 90%;
+  height: 90%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
 }
-#popUpBoxLink{
-    background-color: rgb(255,255,255,0.75);
-    width: 50%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
+
+#popUpBoxLink {
+  background-color: rgb(255, 255, 255, 0.75);
+  width: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
 }
 
-#popUpText{
-    padding-left: 40px;
-    overflow: auto;
-    width: 100%; 
-    height: 100%;
+#popUpText {
+  padding-left: 40px;
+  overflow: auto;
+  width: 100%;
+  height: 100%;
 }
 
-.codep{
-    display: block;
-    margin-block-start: 0px;
-    margin-block-end: 0px;
-    margin-inline-start: 0px;
-    margin-inline-end: 0px;
+.codep {
+  display: block;
+  margin-block-start: 0px;
+  margin-block-end: 0px;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
 }
 
-#copyLinkIcon{
-    width: 30px;
-    width:30px;
-    transition: 0.3s ease-in-out;
+#copyLinkIcon {
+  width: 30px;
+  width: 30px;
+  transition: 0.3s ease-in-out;
 }
-#copyLinkIcon:hover{
-    transform: scale(1.22);
-    cursor:pointer;
+
+#copyLinkIcon:hover {
+  transform: scale(1.22);
+  cursor: pointer;
 }
+
 #popUpText::-webkit-scrollbar {
-    display: block;
-    width: 10px;
-    position: absolute;
-    right: 0px;
-    height: 100%;
-  }
-
-  #popUpText::-webkit-scrollbar-track {
-    background: #f1f1f1; 
-  }
-
-  #popUpText::-webkit-scrollbar-thumb {
-    background: #888; 
-  }
-
-  #popUpText::-webkit-scrollbar-thumb:hover {
-    background: #555; 
+  display: block;
+  width: 10px;
+  position: absolute;
+  right: 0px;
+  height: 100%;
+}
+
+#popUpText::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+#popUpText::-webkit-scrollbar-thumb {
+  background: #888;
+}
+
+#popUpText::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+video {
+  width: 640px;
+  height: 360px;
+}
+
+@media only screen and (max-width: 700px) {
+  video {
+    width: 100%;
   }
 
-  video{
-    width: 640px;
-    height: 360px;
+  #popUpBoxLink {
+    width: 90%;
   }
-  @media only screen and (max-width: 700px){
-    video{
-      width: 100%;
-    }
-    #popUpBoxLink{
-      width: 90%;
-    }
-  }
+}
diff --git a/src/PopUp.js b/src/PopUp.js
@@ -18,12 +18,12 @@ function stopPropagation(e) {
   e.stopPropagation();
 }
 
-function PopUp(props) {
-  var hreff;
-  if (props.props === "MinesweeperBotLink")
-    hreff = "https://github.com/MunteanuAndrei237/minesweeperBot";
-  else if (props.props === "ChessBotLink")
-    hreff = "https://github.com/MunteanuAndrei237/chess_bot";
+function PopUp(args) {
+  var myHref;
+  if (args.props === "MinesweeperBotLink")
+    myHref = "https://github.com/MunteanuAndrei237/minesweeperBot";
+  else if (args.props === "ChessBotLink")
+    myHref = "https://github.com/MunteanuAndrei237/chess_bot";
 
   const [data, setData] = useState([["wait please.."], ["wait please.."]]);
 
@@ -35,11 +35,10 @@ function PopUp(props) {
 
   return (
     <div id="popUp" onClick={hidePopUp}>
-      {props.props === "MinesweeperBotCode" ||
-      props.props === "ChessBotCode" ? (
+      {args.props === "MinesweeperBotCode" || args.props === "ChessBotCode" ? (
         <div id="popUpBoxCode" onClick={stopPropagation}>
           <div id="popUpText">
-            {props.props === "MinesweeperBotCode"
+            {args.props === "MinesweeperBotCode"
               ? data[0].map((item, index) => (
                   <p
                     className="codep"
@@ -49,7 +48,7 @@ function PopUp(props) {
                     {item}
                   </p>
                 ))
-              : props.props === "ChessBotCode"
+              : args.props === "ChessBotCode"
               ? data[1].map((item, index) => (
                   <p
                     className="codep"
@@ -62,37 +61,37 @@ function PopUp(props) {
               : null}
           </div>
         </div>
-      ) : props.props === "ChessBotLink" ||
-        props.props === "MinesweeperBotLink" ? (
+      ) : args.props === "ChessBotLink" ||
+        args.props === "MinesweeperBotLink" ? (
         <div id="popUpBoxLink" onClick={stopPropagation}>
           <p>The full code is at the following link:</p>
 
-          {props.props === "MinesweeperBotLink" ||
-          props.props === "ChessBotLink" ? (
-            <a style={{ color: "black" }} href={hreff}>
-              {hreff}
+          {args.props === "MinesweeperBotLink" ||
+          args.props === "ChessBotLink" ? (
+            <a style={{ color: "black" }} href={myHref}>
+              {myHref}
             </a>
           ) : null}
-          {props.props === "MinesweeperBotLink" ||
-          props.props === "ChessBotLink" ? (
+          {args.props === "MinesweeperBotLink" ||
+          args.props === "ChessBotLink" ? (
             <img
               src="copyLinkIcon.png"
               id="copyLinkIcon"
-              onClick={copyToClipboard(hreff)}
+              onClick={copyToClipboard(myHref)}
               alt="Media not avalabile"
             ></img>
           ) : null}
         </div>
-      ) : props.props === "ChessBotVideo" ||
-        props.props === "MinesweeperBotVideo" ? (
+      ) : args.props === "ChessBotVideo" ||
+        args.props === "MinesweeperBotVideo" ? (
         <div id="popUpBoxVideo" onClick={stopPropagation}>
-          {props.props === "ChessBotVideo" && (
+          {args.props === "ChessBotVideo" && (
             <video id="ChessBotVideo" controls muted>
               <source src="2023-10-21_20-49-17 - Trim.mp4" type="video/mp4" />
               Your browser does not support the video tag.
             </video>
           )}
-          {props.props === "MinesweeperBotVideo" && (
+          {args.props === "MinesweeperBotVideo" && (
             <video id="minesweeperVideo" controls>
               <source src="2023-10-02 13-28-26.mp4" type="video/mp4" />
               Your browser does not support the video tag.