Merge pull request #83 from OudomMunint/dev

Dev => Main
OudomMunint · Aug 13, 2024 · 16b36a7 · 16b36a7
2 parents 1f8ffff + bbe5b21
commit 16b36a7
Show file tree

Hide file tree

Showing 8 changed files with 99 additions and 127 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -38,4 +38,4 @@ jobs:
         uses: ncipollo/[email protected]
         with:
           artifacts: "react-github-actions-build"
-          tag: v1.5.4.6
+          tag: v1.5.4.7
diff --git a/src/App.js b/src/App.js
@@ -17,7 +17,7 @@ import ScrollToTop from "./components/ScrollToTop";
 import "./style.css";
 import "./App.css";
 import "bootstrap/dist/css/bootstrap.min.css";
-import Home2 from "./components/Home/Home2";
+//import Home2 from "./components/Home/Home2";
 
 function App() {
   const [load, upadateLoad] = useState(true);

diff --git a/src/components/About/About.js b/src/components/About/About.js
@@ -1,6 +1,6 @@
 import React from "react";
 import Particle from "../Particle";
-import Techstack from "./Techstack";
+import Clients from "./Clients";
 import Home2 from "../Home/Home2"
 import { Container } from "react-bootstrap";
 
@@ -54,7 +54,7 @@ function About() {
         </h1>
         <p>(This we will change to the logos of those we worked with)</p>
 
-        <Techstack />
+        <Clients />
 
         {/* <h1 className="project-heading">
           <strong className="purple">Tools</strong> I use

diff --git a/src/components/About/Techstack.js → src/components/About/Clients.js b/src/components/About/Techstack.js → src/components/About/Clients.js
@@ -1,72 +1,58 @@
 import React from "react";
 import { Col, Row } from "react-bootstrap";
-import { CgCPlusPlus } from "react-icons/cg";
 import pubArt from "../../Assets/publicartworkers.png";
 import nsw from "../../Assets/nsw.svg";
 import local from "../../Assets/local.png";
 import nw from "../../Assets/nw.png";
 import air from "../../Assets/air.png";
 import tina from "../../Assets/tina.png";
 import nag from "../../Assets/nag.png";
-import {
-  DiJavascript1,
-  DiReact,
-  DiNodejs,
-  DiMongodb,
-  DiPython,
-  DiGit,
-} from "react-icons/di";
-import {
-  SiPytorch,
-  SiFirebase,
-  SiNextdotjs,
-} from "react-icons/si";
+// import {
+//   DiJavascript1,
+//   DiReact,
+//   DiNodejs,
+//   DiMongodb,
+//   DiPython,
+//   DiGit,
+// } from "react-icons/di";
+// import {
+//   SiPytorch,
+//   SiFirebase,
+//   SiNextdotjs,
+// } from "react-icons/si";
 
-function Techstack() {
+function Clients() {
   return (
     <Row style={{ justifyContent: "center", paddingBottom: "50px" }}>
       <Col xs={4} md={2} className="tech-icons">
-        {/* <CgCPlusPlus /> */}
         <img src={pubArt} className="img-fluid" alt="avatar" style={{paddingTop:"25px"}}/>
       </Col>
+
       <Col xs={4} md={2} className="tech-icons">
-        {/* <DiJavascript1 /> */}
         <img src={nsw} className="img-fluid" alt="avatar"/>
       </Col>
+
       <Col xs={4} md={2} className="tech-icons">
-        {/* <DiNodejs /> */}
         <img src={local} className="img-fluid" alt="avatar" style={{paddingTop:"5px"}}/>
       </Col>
+
       <Col xs={4} md={2} className="tech-icons">
-        {/* <DiReact /> */}
         <img src={nw} className="img-fluid" alt="avatar" style={{paddingTop:"85px"}}/>
       </Col>
+
       <Col xs={4} md={2} className="tech-icons">
-        {/* <DiMongodb /> */}
         <img src={air} className="img-fluid" alt="avatar"/>
       </Col>
+
       <Col xs={4} md={2} className="tech-icons">
-        {/* <SiNextdotjs /> */}
         <img src={tina} className="img-fluid" alt="avatar"/>
       </Col>
+
       <Col xs={4} md={2} className="tech-icons">
-        {/* <SiNextdotjs /> */}
         <img src={nag} className="img-fluid" alt="avatar"/>
       </Col>
-      {/* <Col xs={4} md={2} className="tech-icons">
-        <DiGit />
-      </Col>
-      <Col xs={4} md={2} className="tech-icons">
-        <SiFirebase />
-      </Col>
-      <Col xs={4} md={2} className="tech-icons">
-        <DiPython />
-      </Col>
-      <Col xs={4} md={2} className="tech-icons">
-        <SiPytorch />
-      </Col> */}
     </Row>
   );
 }
 
-export default Techstack;
+export default Clients;
diff --git a/src/components/About/Toolstack.js b/src/components/About/Toolstack.js
diff --git a/src/components/Contact.js b/src/components/Contact.js
@@ -1,75 +1,95 @@
 import React, { useState } from "react";
 
 function ContactForm() {
+  const isDevelopment = process.env.NODE_ENV === "development";
   const [name, setName] = useState("");
   const [email, setEmail] = useState("");
   const [message, setMessage] = useState("");
 
   const handleSubmit = async (event) => {
     event.preventDefault();
-    const data = { name, email, message };
+    let data = { name, email, message };
     try {
-      console.log('Form submission successful:');
       // clear form
       setName('');
       setEmail('');
       setMessage('');
+      data = { name: "testUser1", email: "[email protected]", message: "Hello, this is a test message." };
+      console.log('Form submission successful:');
+      console.log(data);
     } catch (error) {
       console.error('Form submission error:', error);
       console.log('Error caught');
     }
   };
 
+  if (isDevelopment) {
+    try {
+      document.getElementsByClassName("submit").addEventListener("click", handleSubmit);
+    }
+    catch (error) {
+      console.error('Error:', error);
+    }
+  }
+  else {
+    try {
+      document.getElementsByClassName("submit").removeEventListener("click", handleSubmit);
+    }
+    catch (error) {
+      console.error('Error:', error);
+    }
+  }
+
   return (
-<>
+    <>
       <form name="contact" netlify="true" netlify-honeypot="bot-field" data-netlify-recaptcha="true" hidden>
-      <input type="text" name="name" />
-      <input type="email" name="email" />
-      <textarea name="message"></textarea>
+        <input type="text" name="name" />
+        <input type="email" name="email" />
+        <textarea name="message"></textarea>
       </form>
 
-    <div className="formFlex">
-      <div className="form">
-        <div className="top-bar">
-          <span></span>
-          <span></span>
-          <span></span>
-        </div>
-        <div className="title">Get in touch!</div>
-        <form name="contact" method="POST" data-netlify-recaptcha="true">
-          <input type="hidden" name="form-name" value="contact" />
-
-          {/* Name */}
-          <div className="input-container ic1">
-            <label className="form-label" htmlFor="name"></label>
-            <input className="form-control input" type="text" id="name" name="name" value={name} onChange={(e) => setName(e.target.value)}
-              placeholder="Name"
-              required />
+      <div className="formFlex">
+        <div className="form">
+          <div className="top-bar">
+            <span></span>
+            <span></span>
+            <span></span>
           </div>
+          <div className="title">Get in touch!</div>
+          <form name="contact" method="POST" data-netlify-recaptcha="true">
+            <input type="hidden" name="form-name" value="contact" />
 
-          {/* Email */}
-          <div className="input-container ic2">
-            <label className="form-label" htmlFor="email"></label>
-            <input className="form-control input"  type="email" id="email" name="email" value={email} onChange={(e) => setEmail(e.target.value)}
-              placeholder="Email"
-              required/>
-          </div>
+            {/* Name */}
+            <div className="input-container ic1">
+              <label className="form-label" htmlFor="name"></label>
+              <input className="form-control input" type="text" id="name" name="name" value={name} onChange={(e) => setName(e.target.value)}
+                placeholder="Name"
+                required />
+            </div>
 
-          {/* Message */}
-          <div className="input-container ic2">
-            <label className="form-label" htmlFor="message"></label>
-            <textarea className="form-control input from-textarea"  id="message" name="message" value={message} onChange={(e) => setMessage(e.target.value)}
-            placeholder="Message"
-            required />
-          </div>
-          <div data-netlify-recaptcha="true" className="reCaptcha"></div>
-          {/* Submit */}
-          <button className="btn btn-danger submit" type="submit" style={{ position: "relative", marginTop: "68px" }}>
-            Submit
-          </button>
-        </form>
+            {/* Email */}
+            <div className="input-container ic2">
+              <label className="form-label" htmlFor="email"></label>
+              <input className="form-control input" type="email" id="email" name="email" value={email} onChange={(e) => setEmail(e.target.value)}
+                placeholder="Email"
+                required />
+            </div>
+
+            {/* Message */}
+            <div className="input-container ic2">
+              <label className="form-label" htmlFor="message"></label>
+              <textarea className="form-control input from-textarea" id="message" name="message" value={message} onChange={(e) => setMessage(e.target.value)}
+                placeholder="Message"
+                required />
+            </div>
+            <div data-netlify-recaptcha="true" className="reCaptcha"></div>
+            {/* Submit */}
+            <button className="btn btn-danger submit" type="submit" style={{ position: "relative", marginTop: "68px" }}>
+              Submit
+            </button>
+          </form>
+        </div>
       </div>
-    </div>
     </>
   );
 }

diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
@@ -1,18 +1,18 @@
 import React from "react";
 import { Container, Row, Col } from "react-bootstrap";
-import homeLogo from "../../Assets/about.png";
+//import homeLogo from "../../Assets/about.png";
 import Particle from "../Particle";
-import Home2 from "./Home2";
+//import Home2 from "./Home2";
 import Type from "./Type";
 import {ReactComponent as Design} from "../../Assets/design.svg";
 
-import {
-  AiFillGithub,
-  AiOutlineTwitter,
-  AiFillInstagram,
-  AiFillDribbbleCircle,
-} from "react-icons/ai";
-import { FaLinkedinIn } from "react-icons/fa";
+// import {
+//   AiFillGithub,
+//   AiOutlineTwitter,
+//   AiFillInstagram,
+//   AiFillDribbbleCircle,
+// } from "react-icons/ai";
+// import { FaLinkedinIn } from "react-icons/fa";
 
 function Home() {
   return (

diff --git a/src/index.js b/src/index.js
@@ -11,7 +11,6 @@ ReactDOM.render(
   document.getElementById("root")
 );
 
-// WIP: Enable web vitals report generation only in development mode
 const isDevelopment = process.env.NODE_ENV === "development";
 
 ReactDOM.render(
@@ -26,5 +25,5 @@ if (isDevelopment) {
 }
 
 else {
-  console.log("Web vitals report generation is disabled in production mode");
+  console.log("Web vitals report generation is disabled in production");
 }