Section contact

.gitignore

@@ -22,3 +22,7 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+
+.env
+

package.json

@@ -19,6 +19,7 @@
     "react-dom": "^18.2.0",
     "react-parallax-tilt": "^1.7.174",
     "react-router-dom": "^6.19.0",
+    "react-toastify": "^9.1.3",
     "react-vertical-timeline-component": "^3.6.0",
     "three": "^0.158.0"
   },

src/App.jsx

@@ -1,6 +1,6 @@
 import { BrowserRouter } from "react-router-dom";
 
-import { About, Contact, Experience, Feedbacks, Hero, Navbar, Tech, Works, StarsCanvas } from "./components";
+import { About, Contact, Experience, Hero, Navbar, Tech, Works, StarsCanvas } from "./components";
 
 const App = () => {
   return (
@@ -14,7 +14,6 @@ const App = () => {
         <Experience />
         <Tech />
         <Works />
-        <Feedbacks />
         <div className='relative z-0'>
           <Contact />
           <StarsCanvas />

src/assets/index.js

@@ -30,7 +30,20 @@ import carrent from "./carrent.png";
 import jobit from "./jobit.png";
 import tripguide from "./tripguide.png";
 
+import openclassrooms from "./openclassrooms.png";
+import google from "./google.png";
+import link from "./link.png";
+import kasa from "./kasa.png";
+import grimoire from "./grimoire.png";
+import portfolioV1 from "./portfolioV1.png";
+
 export {
+  grimoire,
+  openclassrooms,
+  portfolioV1,
+  link,
+  kasa,
+  google,
   logo,
   backend,
   creator,

src/components/About.jsx

@@ -9,14 +9,14 @@ import { fadeIn, textVariant } from "../utils/motion";
 const ServiceCard = ({ index, title, icon }) => (
   <Tilt
     glareEnable={true}
-    glareMaxOpacity={0.9}
-    scale={1.5}
+    glareMaxOpacity={0.2}
+    scale={1.1}
     glareColor='lightblue'
     glarePosition='all'
     className='xs:w-[250px] w-full overflow-hidden  rounded-[20px] hover:z-10	'
   >
     <motion.div
-      variants={fadeIn("right", "spring", index * 0.5, 0.75)}
+      variants={fadeIn("right", "spring", index * 0.25, 0.75)}
       className='w-full green-pink-gradient p-[1px] rounded-[20px] shadow-card'
     >
       <div className='bg-tertiary rounded-[20px] py-5 px-12 min-h-[280px] flex justify-evenly items-center flex-col'>
@@ -46,12 +46,7 @@ const About = () => {
         variants={fadeIn("", "", 0.1, 1)}
         className='mt-4 text-secondary text-[17px] max-w-3xl leading-[30px]'
       >
-        Je suis un jeune développeur web qui utilise TypeScript et JavaScript.{" "}
-        <br />
-        J'aime utiliser des frameworks tels que React, NextJS et Node.js.
-        J'apprends vite pour créer des solutions efficaces. je me concentre
-        essentiellement sur la partie frontend même si j'ai des connaissances en
-        backend.
+        Keep it simple, stupid.
       </motion.p>
 
       <div className='mt-20 flex flex-wrap gap-10'>

src/components/Contact.jsx

@@ -1,9 +1,163 @@
-import React from 'react'
+import React, { useRef, useState } from "react";
+import { motion } from "framer-motion";
+import emailjs from "@emailjs/browser";
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+
+import { styles } from "../styles";
+import { EarthCanvas } from "./canvas";
+import { SectionWrapper } from "../hoc";
+import { slideIn } from "../utils/motion";
 
 const Contact = () => {
+  const formRef = useRef();
+  const [form, setForm] = useState({
+    name: "",
+    email: "",
+    message: "",
+  });
+
+  const [loading, setLoading] = useState(false);
+
+  const handleChange = (e) => {
+    const { target } = e;
+    const { name, value } = target;
+
+    setForm({
+      ...form,
+      [name]: value,
+    });
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    setLoading(true);
+
+    emailjs
+      .send(
+        import.meta.env.VITE_APP_EMAILJS_SERVICE_ID,
+        import.meta.env.VITE_APP_EMAILJS_TEMPLATE_ID,
+        {
+          from_name: form.name,
+          to_name: "Adrien Poua",
+          from_email: form.email,
+          to_email: "[email protected]",
+          message: form.message,
+        },
+        import.meta.env.VITE_APP_EMAILJS_PUBLIC_KEY
+      )
+      .then(
+        () => {
+          setLoading(false);
+          toast.success('Message bien envoyé', {
+            position: "bottom-center",
+            autoClose: 5000,
+            hideProgressBar: false,
+            closeOnClick: true,
+            pauseOnHover: true,
+            draggable: true,
+            progress: undefined,
+            theme: "light",
+            });
+          setForm({
+            name: "",
+            email: "",
+            message: "",
+          });
+        },
+        (error) => {
+          setLoading(false);
+          console.error(error);
+          toast.error("Erreur lors de l'envoi du message", {
+            position: "top-center",
+            autoClose: 5000,
+            hideProgressBar: false,
+            closeOnClick: true,
+          });
+        }
+      );
+  };
+
   return (
-    <div>Contact</div>
-  )
-}
+    <div
+      className={`xl:mt-12 flex xl:flex-row flex-col-reverse gap-10 overflow-hidden`}
+    >
+      <motion.div
+        variants={slideIn("left", "tween", 0.2, 1)}
+        className='flex-[0.75] bg-black-100 p-8 rounded-2xl'
+      >
+        <p className={styles.sectionSubText}>Get in touch</p>
+        <h3 className={styles.sectionHeadText}>Contact.</h3>
+
+        <form
+          ref={formRef}
+          onSubmit={handleSubmit}
+          className='mt-12 flex flex-col gap-8'
+        >
+          <label className='flex flex-col'>
+            <span className='text-white font-medium mb-4'>Votre prénom </span>
+            <input
+              type='text'
+              name='name'
+              value={form.name}
+              onChange={handleChange}
+              placeholder='Elon'
+              className='bg-tertiary py-4 px-6 placeholder:text-secondary text-white rounded-lg outline-none border-none font-medium'
+            />
+          </label>
+          <label className='flex flex-col'>
+            <span className='text-white font-medium mb-4'>Votre email</span>
+            <input
+              type='email'
+              name='email'
+              value={form.email}
+              onChange={handleChange}
+              placeholder='[email protected]'
+              className='bg-tertiary py-4 px-6 placeholder:text-secondary text-white rounded-lg outline-none border-none font-medium'
+            />
+          </label>
+          <label className='flex flex-col'>
+            <span className='text-white font-medium mb-4'>Votre message</span>
+            <textarea
+              rows={7}
+              name='message'
+              value={form.message}
+              onChange={handleChange}
+              placeholder="Salut, j'ai un projet à te proposer !"
+              className='bg-tertiary py-4 px-6 placeholder:text-secondary text-white rounded-lg outline-none border-none font-medium'
+            />
+          </label>
+
+          <button
+            type='submit'
+            className='bg-tertiary py-3 px-8 rounded-xl outline-none w-fit text-white font-bold shadow-md shadow-primary'
+          >
+            {loading ? "Sending..." : "Send"}
+          </button>
+        </form>
+      </motion.div>
+
+      <motion.div
+        variants={slideIn("right", "tween", 0.2, 1)}
+        className='xl:flex-1 xl:h-auto md:h-[550px] h-[350px]'
+      >
+        <EarthCanvas />
+        <ToastContainer
+          position='bottom-center'
+          autoClose={5000}
+          hideProgressBar={false}
+          newestOnTop={false}
+          closeOnClick
+          rtl={false}
+          pauseOnFocusLoss
+          draggable
+          pauseOnHover
+          theme='light'
+        />{" "}
+      </motion.div>
+    </div>
+  );
+};
 
-export default Contact
+const WrappedContact = SectionWrapper(Contact, "contact");
+export default WrappedContact;

src/components/Feedbacks.jsx

@@ -1,4 +1,3 @@
-import React from 'react'
 
 const Feedbacks = () => {
   return (

src/components/Hero.jsx

@@ -19,8 +19,9 @@ export default function Hero() {
             Adrien <span className='text-[#915EFF]'> POUA</span>
           </h1>
           <p className={`${styles.heroSubText} mt-2 text-white-100`}>
-          Passionné par le développement web. <br className='sm:block hidden' />
-            J'aime apprendre & créer.
+            Passionné par le développement web.{" "}
+            <br className='sm:block hidden' />
+            J&apos;aime apprendre & créer.
           </p>
         </div>
       </div>

src/components/Works.jsx

@@ -2,7 +2,7 @@ import Tilt from "react-parallax-tilt";
 import { motion } from "framer-motion";
 
 import { styles } from "../styles";
-import { github } from "../assets";
+import { github, link } from "../assets";
 import { SectionWrapper } from "../hoc";
 import { projects } from "../constants";
 import { fadeIn, textVariant } from "../utils/motion";
@@ -14,9 +14,10 @@ const ProjectCard = ({
   tags,
   image,
   source_code_link,
+  website
 }) => {
   return (
-    <motion.div variants={fadeIn("up", "spring", index * 0.5, 0.75)}>
+    <motion.div variants={fadeIn("up", "spring", index * 0.35, 0.75)}>
       <Tilt
         options={{
           max: 45,
@@ -35,16 +36,27 @@ const ProjectCard = ({
           <div className='absolute inset-0 flex justify-end m-3 card-img_hover'>
             <div
               onClick={() => window.open(source_code_link, "_blank")}
-              className='black-gradient w-10 h-10 rounded-full flex justify-center items-center cursor-pointer'
+              className='black-gradient w-12 h-12 rounded-full flex justify-center items-center cursor-pointer'
             >
               <img
                 src={github}
                 alt='source code'
-                className='w-1/2 h-1/2 object-contain'
+                className='w-1/2 h-1/2 object-contain hover:scale-150 transition-all'
+              />
+            </div>
+          </div>
+          <div className='absolute inset-0 flex justify-end m-3 mt-16 card-img_hover'>
+            <div
+              onClick={() => window.open(website, "_blank")}
+              className='black-gradient w-12 h-12 rounded-full flex justify-center items-center cursor-pointer'
+            >
+              <img
+                src={link}
+                alt='source code'
+                className='w-1/2 h-1/2 object-contain hover:scale-150 transition-all'
               />
             </div>
           </div>
-
         </div>
 
         <div className='mt-5'>
@@ -80,11 +92,9 @@ const Works = () => {
           variants={fadeIn("", "", 0.1, 1)}
           className='mt-3 text-secondary text-[17px] max-w-3xl leading-[30px]'
         >
-          Following projects showcases my skills and experience through
-          real-world examples of my work. Each project is briefly described with
-          links to code repositories and live demos in it. It reflects my
-          ability to solve complex problems, work with different technologies,
-          and manage projects effectively.
+          Les projets suivants mettent en avant mes compétences et mon
+          expérience à travers des exemples concrets. Chaque projet est
+          brièvement décrit et accompagné d'un lien vers son repository Github.
         </motion.p>
       </div>
 
@@ -97,4 +107,4 @@ const Works = () => {
   );
 };
 
-export default SectionWrapper(Works, "");
+export default SectionWrapper(Works, "");

src/components/canvas/Ball.jsx

@@ -15,8 +15,9 @@ const Ball = (props) => {
 
   return (
     <Float speed={1.75} rotationIntensity={1} floatIntensity={2}>
-      <ambientLight intensity={0.45} />
-      <directionalLight position={[0, 0, 0.05]} />
+      <ambientLight intensity={0.35} />
+      <directionalLight position={[1, 0, 0.05]} />
+      <directionalLight position={[1, -3, 0]} />
       <mesh castShadow receiveShadow scale={2.75}>
         <icosahedronGeometry args={[1, 1]} />
         <meshStandardMaterial