almost done

config/envConfig.js

@@ -0,0 +1,4 @@
+const emailjsServiceId = String(import.meta.VITE_EMAILJS_SERVICE_ID) 
+const emailjsTemplateId = String(import.meta.VITE_EMAILJS_TEMPLATE_ID) 
+
+export default {emailjsServiceId,emailjsTemplateId}

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "emailjs-com": "^3.2.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.25.1"

src/Components/About.jsx

@@ -2,8 +2,8 @@ import React from "react";
 import {BigButton} from "./index"
 const About = () => {
   return (
-    <div className="about w-full h-screen flex flex-col items-center justify-start">
-      <span className="pt-24 w-full">
+    <div className="about pt-24 w-full min-h-screen flex flex-col items-center justify-start">
+      <span className="heading w-full">
         <h1 className="name text-center w-full text-3xl font-bold  ">
           About me
         </h1>
@@ -23,21 +23,21 @@ const About = () => {
         </div>
         <div className=" right w-full  sm:w-1/2 h-full flex-col sm:px-10 py-4 gap-4">
           <div className="cards w-full flex items-center justify-evenly my-4">
-            <div className="card flex flex-col gap-1 items-center justify-center border rounded-lg w-[150px]">
-              <span className="text-sm font-semibold"> Post graduated </span>
+            <div className="m-1 card p-4 md:flex flex-col gap-1 items-center justify-center border rounded-lg max-w-[150px]">
+              <span className="text-sm font-semibold "> Post graduated </span>
               <p className="text-xs font-medium text-slate-800/80">
               (MDU) 2022 - 2024
               </p>
             </div>
-            <div className="card flex flex-col gap-1 items-center justify-center border rounded-lg w-[150px]">
+            <div className="m-1 card p-4 flex flex-col gap-1 items-center justify-center border rounded-lg max-w-[150px]">
               <span className="text-sm font-semibold"> Projects soled </span>
               <p className="text-xs font-medium text-slate-800/80">
                 4+ mini projects
               </p>
             </div>
           </div>
           <div className="details py-4 px-2 w-[90%] text-slate-800/80 font-semibold text-justify">
-            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cum fugit eos, molestias aliquam sapiente mollitia accusantium ipsum iste! Veniam, quo nam. Nam itaque laboriosam quo ullam dolores consequuntur omnis ex deleniti reprehenderit architecto?
+          A dedicated and enthusiastic fresher web developer, always eager to learn and adapt to new technologies and methodologies. Passionate about creating innovative web solutions and continuously enhancing skills through hands-on experience and continuous learning.
           </div>
           <BigButton Childrens={"Download CV "} className="rounded-lg duration-200 hover:bg-black" bgColor="bg-black/90" />
         </div>

src/Components/Contact.jsx

@@ -1,6 +1,39 @@
-import React from "react";
+import React, { useState } from "react";
 import { ContactCard, BigButton, Input } from "./index";
+import emailjs from "emailjs-com";
+import envConfig from "../../config/envConfig.js"
 const Contact = () => {
+  const [formData, setFormData] = useState({
+    name: "",
+    mail: "",
+    message: "",
+  });
+  console.log(envConfig);
+  const [responseMessage, setResponseMessage] = useState("");
+  const formChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({
+      ...formData,
+      [name]: value,
+    });
+  };
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    emailjs
+      .send(envConfig.emailjsServiceId, envConfig.emailjsTemplateId, formData )
+      .then(
+        (result) => {
+          setResponseMessage("Message sent successfully");
+          console.log(result)
+          setFormData({ name: "", mail: "", message: "" });
+        },
+        (error) => {
+          console.log(error)
+          setResponseMessage("Error sending message ");
+        }
+      );
+  };
+
   return (
     <div className="content w-full min-h-screen pt-24 px-10 flex md:flex-row items-center justify-center flex-col gap-4">
       <div className="leftbox w-full h-full md:w-[30%]  md:h-screen flex-col items-end justify-center gap-0">
@@ -34,19 +67,22 @@ const Contact = () => {
           {" "}
           Contact me{" "}
         </h1>
-        <div className="contenttocontact md:w-[60%] w-full flex-col md:px-6 px-1 py-2 ">
+        <form
+          onSubmit={handleSubmit}
+          className="contenttocontact md:w-[60%] w-full flex-col md:px-6 px-1 py-2 "
+        >
           <Input
             label={"name "}
             name="name"
             placeholder="enter your name"
-            className=""
+            onChange={formChange}
             parentClassName="my-8 "
           />
           <Input
             label={"mail "}
             name="mail"
             placeholder="enter your mail"
-            className=""
+            onChange={formChange}
             parentClassName="my-8 "
           />
           {/* ==================== textarea ============ */}
@@ -63,15 +99,25 @@ const Contact = () => {
             <textarea
               id={"message"}
               name={"message"}
+              onChange={formChange}
               className={`px-4 py-2 bg-transparent border-none w-full outline-none text-base font-semibold min-h-[120px] resize-none`}
               placeholder="message you wanna send 🚀😇"
               spellCheck="false"
             />
           </div>
+          {responseMessage && (
+            <p className="text-red-600 font-semibold bg-white/20 rounded-lg px-4 py-2">
+              {responseMessage}
+            </p>
+          )}
           <BigButton
-         Children={<>send message  <i class="ri-send-plane-fill"></i></>}
+            Children={
+              <>
+                send message <i className="ri-send-plane-fill"></i>
+              </>
+            }
           />
-        </div>
+        </form>
       </div>
     </div>
   );

src/Components/Education.jsx

@@ -32,10 +32,10 @@ const Education = () => {
             </span>
           </div>
           <div className="details my-4 flex gap-2 items-center justify-between flex-wrap">
-            <span className="px-4 py-2 text-base font-semibold text-slate-800/70">
+            <span className="px-4 py-2 sm:text-base text-sm font-semibold text-slate-800/70">
               from MDU ROHTAK
             </span>
-            <span className="px-4 py-2 text-sm font-semibold text-slate-800/70">
+            <span className="px-4 py-2 text-xs sm:text-sm font-semibold text-slate-800/70">
               {" "}
               (2019- 2022){" "}
             </span>
@@ -66,10 +66,10 @@ const Education = () => {
             </span>
           </div>
           <div className="details my-4 flex gap-2 items-center justify-between flex-wrap">
-            <span className="px-4 py-2 text-base font-semibold text-slate-800/70">
+            <span className="px-4 py-2 sm:text-base text-sm font-semibold text-slate-800/70">
               from MDU ROHTAK{" "}
             </span>
-            <span className="px-4 py-2 text-sm font-semibold text-slate-800/70">
+            <span className="px-4 py-2 text-xs sm:text-sm font-semibold text-slate-800/70">
               {" "}
               (2022- 2024){" "}
             </span>

src/Components/Footer/Footer.jsx

@@ -21,16 +21,16 @@ const Footer = () => {
       </span>
       <span className="medialinks w-full flex items-center justify-center gap-2 my-4 py-4 ">
         <Link to={"https://github.com/mrkuldeep01/"} className='bg-black/80 hover:bg-black duration-200 text-white px-2 py-1 font-medium rounded-md'>
-        <i class="ri-github-fill"></i>
+        <i className="ri-github-fill"></i>
         </Link>
         <Link to={"https://linkedin.com/in/kuldeep-kumar-a4b71a258"} className='bg-black/80 hover:bg-black duration-200 text-white px-2 py-1 font-medium rounded-md'>
-        <i class="ri-linkedin-box-fill"></i>
+        <i className="ri-linkedin-box-fill"></i>
         </Link>
         <Link to={"mailto:kkharoliya20@gmail.com"} className='bg-black/80 hover:bg-black duration-200 text-white px-2 py-1 font-medium rounded-md'>
-        <i class="ri-mail-add-fill"></i>
+        <i className="ri-mail-add-fill"></i>
         </Link>
         </span>
-        <p className="copyright  text-sm text-slate-700/70 px-2 py-2 font-semibold text-center"><i class="ri-copyright-line"></i> mr-kumar - All rights reserved <br /> ( july 2024 )</p>
+        <p className="copyright  text-sm text-slate-700/70 px-2 py-2 font-semibold text-center"><i className="ri-copyright-line"></i> mr-kumar - All rights reserved <br /> ( july 2024 )</p>
     </footer>
   )
 }

src/Components/Header/Header.jsx

@@ -3,12 +3,12 @@ import { Logo, BigButton } from "../";
 import { Link, NavLink } from "react-router-dom";
 const Header = () => {
   const navItems = [
-    { url: "/", name: <><p className=" md:inline-block hidden "> Home </p> <i class="ri-home-heart-line md:hidden inline-block"></i></>,title:"Home" },
-    { url: "/about", name: <> <p className=" md:inline-block hidden "> About </p>  <i class="ri-user-6-fill md:hidden inline-block"></i></> ,title:"About" },
-    { url: "/skills", name: <> <p className=" md:inline-block hidden "> Skills </p> <i class="ri-palette-line md:hidden inline-block"></i> </> ,title:"Skills" },
-    { url: "/education", name: <> <p className=" md:inline-block hidden "> Education </p> <i class="ri-stairs-fill md:hidden inline-block"></i> </> ,title:"Education" },
-    { url: "/projects", name: <> <p className=" md:inline-block hidden "> Projects </p> <i class="ri-gallery-fill md:hidden inline-block"></i> </> ,title:"Projects" },
-    { url: "/contact", name: <> <p className=" md:inline-block hidden "> Contact </p> <i class="ri-contacts-fill md:hidden inline-block"></i> </> ,title:"Contact" }, 
+    { url: "/", name: <><p className=" md:inline-block hidden "> Home </p> <i className="ri-home-heart-line md:hidden inline-block"></i></>,title:"Home" },
+    { url: "/about", name: <> <p className=" md:inline-block hidden "> About </p>  <i className="ri-user-6-fill md:hidden inline-block"></i></> ,title:"About" },
+    { url: "/skills", name: <> <p className=" md:inline-block hidden "> Skills </p> <i className="ri-palette-line md:hidden inline-block"></i> </> ,title:"Skills" },
+    { url: "/education", name: <> <p className=" md:inline-block hidden "> Education </p> <i className="ri-stairs-fill md:hidden inline-block"></i> </> ,title:"Education" },
+    { url: "/projects", name: <> <p className=" md:inline-block hidden "> Projects </p> <i className="ri-gallery-fill md:hidden inline-block"></i> </> ,title:"Projects" },
+    { url: "/contact", name: <> <p className=" md:inline-block hidden "> Contact </p> <i className="ri-contacts-fill md:hidden inline-block"></i> </> ,title:"Contact" }, 
   ];
 
   const [onHam, setOnHam] = useState(false);
@@ -29,7 +29,7 @@ const Header = () => {
           }`}
           onClick={toggleHamDisplay}
         >
-          <i class="ri-menu-3-fill"></i>
+          <i className="ri-menu-3-fill"></i>
         </button>
         {/* ================== ham content ===================== */}
         <ul
@@ -46,12 +46,12 @@ const Header = () => {
               toggleHamDisplay();
             }}
           >
-            <i class="ri-close-fill"></i>
+            <i className="ri-close-fill"></i>
           </button>
           {/* ========== ham list items========== */}
           {navItems.map((item, i) => (
             // ${i === 0 ? "mt-7" : "my-1" }
-            <Link key={item.name} to={item.url} title={item.title}>
+            <Link key={item.url} to={item.url} title={item.title}>
               <li
                 className={` px-2 py-1 my-1 bg-black/80 text-white duration-200 hover:bg-black rounded-md`}
               >
@@ -65,7 +65,7 @@ const Header = () => {
         {/* -------------- nav items --------------- */}
         <ul className="gap-1 w-auto hidden md:flex">
           {navItems.map((item) => (
-            <Link key={item.name} to={item.url} title={item.title} className="outline-slate-800/10 rounded-[5px]">
+            <Link key={item.url} to={item.url} title={item.title} className="outline-slate-800/10 rounded-[5px]">
               <li className="px-2 py-2 font-semibold text-slate-900/80 hover:text-slate-950 duration-200 ">{item.name}</li>
             </Link>
           ))}

src/Components/Home.jsx

@@ -1,24 +1,35 @@
 import React from "react";
-import BigButton from "./BigButton";
+import { BigButton } from "./index";
+import { useNavigate } from "react-router-dom";
 
 const Home = () => {
+  const navigate = useNavigate();
   return (
     <div className="w-full min-h-screen pt-20  px-2 sm:px-8 flex flex-col-reverse sm:flex-row items-center justify-center">
-
       <div className="leftside w-full my-6 sm:my-4 sm:w-1/2 flex-col justify-center items-center gap-2 px-2 sm:px-8 relative">
-      <h2 className="name text-4xl font-extrabold capitalize py-4 ">Kuldeep kumar 👋</h2>
-      <span className="role flex items-center justify-start gap-2">
-      <p className="w-1/5 border"></p>
-      <p className="rolename text-lg w-auto text-gray-700/70 font-semibold">web dev.</p>
-      </span>
-      <p className="overview py-2 my-4 sm:w-[90%] w-full text-gray-700/70 font-semibold ">
-      A keen and enthusiastic fresher web developer, always ready to learn new things. Passionate about building web solutions and improving skills every day.</p>
-      <BigButton  Childrens={"Say hello! ☕"} className=" rounded-xl" />  
-      {/* <button className="scroll text-sm font-semibold text-gray-700/70 px-4 py-2 rounded-lg bg-gray-400/10 mt-20 hidden sm:block"> scroll down 👇</button> */}
+        <h2 className="name text-4xl font-extrabold capitalize py-4 ">
+          Kuldeep kumar 👋
+        </h2>
+        <span className="role flex items-center justify-start gap-2">
+          <p className="w-1/5 border"></p>
+          <p className="rolename text-lg w-auto text-gray-700/70 font-semibold">
+            web dev.
+          </p>
+        </span>
+        <p className="overview py-2 my-4 sm:w-[90%] w-full text-gray-700/70 font-semibold ">
+          A keen and enthusiastic fresher web developer, always ready to learn
+          new things. Passionate about building web solutions and improving
+          skills every day.
+        </p>
+        <BigButton
+          Children={"Say hello! ☕"}
+          onClick={() => {
+            navigate("/contact");
+          }}
+          className=" rounded-xl"
+        />
       </div>
 
-
-
       <div className="rightside w-full my-8  sm:w-1/2 sm:my-4 h-full flex items-center justify-center">
         <div className="image w-[250px] h-[250px] bg-black/20 rounded-[40%] rotate-[35deg] p-4 border-8 border-black shadow-2xl shadow-slate-950 ">
           <img

src/Components/ProjectCard.jsx

@@ -1,11 +1,46 @@
-import React from 'react'
+import React from "react";
+import { Link, useNavigate } from "react-router-dom";
 
-const ProjectCard = () => {
+const ProjectCard = ({
+  codelink = "#",
+  demolink = "#",
+  desc = "",
+  title = "Project title",
+  bgimg = "/webicon.svg",
+  className = "",
+}) => {
+  const navigate = useNavigate();
   return (
-    <div>
-
+    <div
+      onClick={() => {
+        navigate(codelink);
+      }}
+      title={desc}
+      className={`left-most px-6 py-4 w-[95%] md:w-[50%] md:min-w-[50%] h-[320px] flex-col items-center border border-black/30 rounded-lg justify-center overflow-hidden relative cursor-pointer ${className}`}
+    >
+      <img
+        src={bgimg}
+        className="absolute top-0 left-0 -z-10 h-full w-full object-cover rounded-lg opacity-70"
+      />
+      <h2 className="skillheader capitalize mb-4 w-full text-center text-xl font-bold mix-blend-difference px-4 py-1 rounded-t-lg bg-black/30">
+        {title}
+      </h2>
+      <span className="linkes w-full absolute bottom-0 left-0 flex items-center justify-between px-4 py-2 bg-black/30">
+        <Link
+          to={codelink}
+          className="text-gray-200 font-semibold text-sm hover:text-gray-100 duration-200 outline-none "
+        >
+          Code
+        </Link>
+        <Link
+          to={demolink}
+          className="text-gray-200 font-semibold text-sm hover:text-gray-100 duration-200 outline-none"
+        >
+          Demo
+        </Link>
+      </span>
     </div>
-  )
-}
+  );
+};
 
-export default ProjectCard
+export default ProjectCard;