everything looking great

MrKuldeep01 · Jul 30, 2024 · e9d1912 · e9d1912
1 parent ca25fc6
commit e9d1912
Show file tree

Hide file tree

Showing 15 changed files with 129 additions and 119 deletions.
diff --git a/.env b/.env
@@ -0,0 +1 @@
+VITE_FORM_ACCESSKEY="ba12c06b-f1ae-4582-932c-00da28515ac0"
diff --git a/config/envConfig.js b/config/envConfig.js
@@ -1,4 +1,4 @@
-const emailjsServiceId = String(import.meta.VITE_EMAILJS_SERVICE_ID) 
-const emailjsTemplateId = String(import.meta.VITE_EMAILJS_TEMPLATE_ID) 
+const formAccessKey = import.meta.env.VITE_FORM_ACCESSKEY;
 
-export default {emailjsServiceId,emailjsTemplateId}
+!formAccessKey && console.log("formAccessKey not defined");
+export default { formAccessKey };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "emailjs-com": "^3.2.0",
+    "dotenv": "^16.4.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.25.1"

diff --git a/public/developer.svg b/public/developer.svg
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/Components/About.jsx b/src/Components/About.jsx
@@ -1,5 +1,6 @@
 import React from "react";
-import {BigButton} from "./index"
+import { BigButton } from "./index";
+import { Link } from "react-router-dom";
 const About = () => {
   return (
     <div className="about pt-24 w-full min-h-screen flex flex-col items-center justify-start">
@@ -21,25 +22,35 @@ const About = () => {
             />
           </div>
         </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="m-1 card p-4 md:flex flex-col gap-1 items-center justify-center border rounded-lg max-w-[150px]">
+        <div className=" right w-full  sm:w-1/2 h-full flex-col sm:px-10 py-4 px-8 gap-4">
+          <div className="cards w-full flex items-center justify-evenly my-4 ">
+            <Link to={"/education"} 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
+                (MDU) 2022 - 2024
               </p>
-            </div>
-            <div className="m-1 card p-4 flex flex-col gap-1 items-center justify-center border rounded-lg max-w-[150px]">
+            </Link>
+            <Link to={"/projects"}  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>
+            </Link>
           </div>
-          <div className="details py-4 px-2 w-[90%] text-slate-800/80 font-semibold text-justify">
-          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 className="details py-4 px-2 w-[90%] md:space-x-1 text-slate-800/80 font-semibold text-justify">
+            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" />
+          <BigButton
+            Children={<> <Link target="_blank"
+              to={"https://drive.google.com/file/d/1h1tGNt7YaxhDiBa1LrvIYFddkczumH15/view?usp=sharing"}
+              > Download CV </Link>
+              </>}
+                 className="rounded-lg duration-200 hover:bg-black"
+            bgColor="bg-black/90"
+          />
         </div>
       </div>
     </div>

diff --git a/src/Components/BigButton.jsx b/src/Components/BigButton.jsx
@@ -2,7 +2,7 @@ import React from 'react'
 
 const BigButton = ({Children,bgColor="bg-black/80",textColor="text-white",className="",...props}) => {
   return Children && (
-    <button className={`capitalize text-xl px-4 py-3 rounded-xl font-semibold hover:bg-black ${bgColor} ${textColor} ${className} `} {...props}>
+    <button className={`border capitalize text-xl px-4 py-3 rounded-xl font-semibold hover:bg-black ${bgColor} ${textColor} ${className} `} {...props}>
       {Children}
     </button>
   )

diff --git a/src/Components/Contact.jsx b/src/Components/Contact.jsx
@@ -1,14 +1,13 @@
 import React, { useState } from "react";
 import { ContactCard, BigButton, Input } from "./index";
-import emailjs from "emailjs-com";
-import envConfig from "../../config/envConfig.js"
+import envConfig from "../../config/envConfig";
+
 const Contact = () => {
   const [formData, setFormData] = useState({
     name: "",
     mail: "",
     message: "",
   });
-  console.log(envConfig);
   const [responseMessage, setResponseMessage] = useState("");
   const formChange = (e) => {
     const { name, value } = e.target;
@@ -17,22 +16,6 @@ const Contact = () => {
       [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">
@@ -68,9 +51,10 @@ const Contact = () => {
           Contact me{" "}
         </h1>
         <form
-          onSubmit={handleSubmit}
+           action="https://api.web3forms.com/submit" method="POST"
           className="contenttocontact md:w-[60%] w-full flex-col md:px-6 px-1 py-2 "
         >
+           <input type="hidden" name="access_key" value={envConfig.formAccessKey}/>
           <Input
             label={"name "}
             name="name"

diff --git a/src/Components/EduCard.jsx b/src/Components/EduCard.jsx
@@ -0,0 +1,39 @@
+import React from 'react'
+
+const EducationCard = ({degreename,percent,uniname,session="year-year",desc="details of your degree to showcase 💜"}) => {
+  return degreename && uniname && (
+    <div
+    id={degreename}
+    className=" left-most w-[90%]  md:min-w-[40%] md:min-h-[228px] h-auto flex-col px-4 py-4  items-center border border-black/30 rounded-lg justify-center"
+  >
+    <div className="top w-full flex items-center justify-center gap-4 relative border-b-2 border-gray-800/40">
+      <img
+        src="/mduLogo.png"
+        alt="mdu"
+        className=" hidden sm:inline-block md:hidden lg:inline-block h-6 absolute top-0 left-0"
+      />
+      <h2 className="skillheader mb-4 w-full text-center text-lg font-semibold text-slate-900">
+        {degreename}
+      </h2>
+      <p className={`w-[${percent}] h-[2px] rounded-full bg-black absolute -bottom-[2px] left-0`}></p>
+      <span className=" absolute -bottom-3 right-0 text-xs text-slate-700/50 bg-white px-1 py-1 rounded-lg ">
+        {percent}
+      </span>
+    </div>
+    <div className="details my-4 flex gap-1 sm:gap-2 items-center justify-between flex-wrap">
+      <span className="sm:px-4 px-1 py-2 sm:text-base text-xs font-semibold text-slate-800/70">
+        {uniname}
+      </span>
+      <span className="sm:px-4 px-1 py-2 text-xs sm:text-sm font-semibold text-slate-800/70">
+
+        ({session})
+      </span>
+    </div>
+    <p className="edudetails w-[90%] text-slate-800/30 font-semibold text-sm text-justify block mx-auto  my-4">
+    {desc}
+    </p>
+  </div>
+  )
+}
+
+export default EducationCard
diff --git a/src/Components/Education.jsx b/src/Components/Education.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-
+import {EducationCard} from "./"
 const Education = () => {
   return (
     <div className="education w-full h-screen flex flex-col items-center justify-start">
@@ -11,74 +11,14 @@ const Education = () => {
           My Educational journey
         </p>
       </span>
-      <div className="bottom w-[90vw] h-auto my-6 flex flex-col md:overflow-x-auto md:overflow-y-hidden scroll-smooth px-2 py-12 gap-8 md:flex-row overflow-y-auto overflow-x-hidden items-center flex-nowrap relative">
-        <div
-          id="graduation"
-          className=" left-most w-[90%]  md:min-w-[40%] md:min-h-[228px] h-auto flex-col px-4 py-4  items-center border border-black/30 rounded-lg justify-center"
-        >
-          <div className="top w-full flex items-center justify-center gap-4 relative border-b-2 border-gray-800/40">
-            <img
-              src="/mduLogo.png"
-              alt="mdu"
-              className=" hidden sm:inline-block md:hidden lg:inline-block h-6 absolute top-0 left-0"
-            />
-            <h2 className="skillheader mb-4 w-full text-center text-lg font-semibold text-slate-900">
-              {" "}
-              Bachelor of Computer Application{" "}
-            </h2>
-            <p className="w-[64%] h-[2px] rounded-full bg-black absolute -bottom-[2px] left-0 "></p>
-            <span className=" absolute -bottom-3 right-0 text-xs text-slate-700/50 bg-white px-1 py-1 rounded-lg ">
-              64%
-            </span>
-          </div>
-          <div className="details my-4 flex gap-2 items-center justify-between flex-wrap">
-            <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-xs sm:text-sm font-semibold text-slate-800/70">
-              {" "}
-              (2019- 2022){" "}
-            </span>
-          </div>
-          <p className="edudetails w-[90%] text-slate-800/30 font-semibold text-sm text-justify block mx-auto  my-4">
-            Completing a BCA from MDU provides a solid foundation in computer
-            applications and can lead to various career opportunities in the
-            field of information technology.
-          </p>
-        </div>
-        <div
-          id="postgraduation"
-          className="second-left w-[90%]  md:min-w-[40%] h-auto md:min-h-[228px] flex-col px-4 py-4  items-center border border-black/30 rounded-lg justify-center"
-        >
-          <div className="top w-full flex items-center justify-center gap-4 relative border-b-2 border-gray-800/40">
-            <img
-              src="/mduLogo.png"
-              alt="mdu"
-              className=" hidden sm:inline-block md:hidden lg:inline-block h-6 absolute top-0 left-0"
-            />
-            <h2 className="eduheader mb-4 inline-block text-center text-lg font-semibold text-slate-900">
-              {" "}
-              Master of Computer Application{" "}
-            </h2>
-            <p className="w-[75%] h-[2px] rounded-full bg-black absolute -bottom-[2px] left-0 "></p>
-            <span className=" absolute -bottom-3 right-0 text-xs text-slate-700/50 bg-white px-1 py-1 rounded-lg ">
-              75%
-            </span>
-          </div>
-          <div className="details my-4 flex gap-2 items-center justify-between flex-wrap">
-            <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-xs sm:text-sm font-semibold text-slate-800/70">
-              {" "}
-              (2022- 2024){" "}
-            </span>
-          </div>
-          <p className="edudetails w-[90%] text-slate-800/30 font-semibold text-sm text-justify block mx-auto  my-4">
-            Pursuing a Master of Computer Applications (MCA) from MDU that offers an
-            advanced education in computing.
-          </p>
-        </div>
+      <div className="bottom w-[90vw] h-auto my-6 flex flex-col md:overflow-x-auto md:overflow-y-hidden scroll-smooth px-2 py-12 gap-8 md:flex-row overflow-y-auto overflow-x-hidden items-center flex-nowrap relative">              
+
+        <EducationCard degreename={"Master of Computer Application"} uniname={"from MDU ROHTAK"} percent="75%" desc="Pursuing a Master of Computer Applications (MCA) from MDU that offers an
+            advanced education in computing." session="2022-2024"  />
+
+        <EducationCard degreename={"Bachelor of Computer Application"} uniname={"from MDU ROHTAK"} percent="64%" desc="BCA from MDU provides a solid foundation in computer applications, which opens up various career opportunities in the field of IT." session="2019-2022"  />
+
+
       </div>
     </div>
   );

diff --git a/src/Components/Home.jsx b/src/Components/Home.jsx
@@ -33,7 +33,7 @@ const Home = () => {
       <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="/webicon.svg"
+            src="/developer.svg"
             alt="kuldeep image"
             className="w-full h-full object-cover -rotate-[35deg] p-2"
           />

diff --git a/src/Components/Projects.jsx b/src/Components/Projects.jsx
@@ -13,7 +13,7 @@ const Projects = () => {
           Logic oriented
         </p>
       </span>
-      <div className="bottom  md:px-10 px-4 py-12 w-[90vw] h-auto my-6 flex flex-col md:flex-row overflow-y-auto overflow-x-hidden items-center justify-start flex-nowrap md:overflow-x-auto md:overflow-y-hidden scroll-smooth gap-8 relative">
+      <div className="bottom md:px-10 px-4 py-12 w-[90vw] h-auto my-6 flex flex-col md:flex-row overflow-y-auto overflow-x-hidden items-center justify-start flex-nowrap md:overflow-x-auto md:overflow-y-hidden scroll-smooth gap-8 relative">
         {/* =================demo card================= */}
         {/* <div
           className=" left-most w-[90%]  md:min-w-[50%] h-auto md:min-h-[242px] flex-col px-6 py-4  items-center border border-black/30 rounded-lg justify-center relative "

diff --git a/src/Components/index.js b/src/Components/index.js
@@ -1,6 +1,7 @@
 import BigButton from "./BigButton.jsx";
 import ContactCard from "./ContactCard.jsx";
 import Education from "./Education.jsx";
+import EducationCard from "./EduCard.jsx";
 import Home from "./Home.jsx";
 import Input from "./InputCom.jsx";
 import Skills from "./Skills.jsx";
@@ -15,6 +16,7 @@ import Logo from "./Logo.jsx";
 export {
   Home,
   Skills,
+  EducationCard,
   Education,
   BigButton,
   Input,

diff --git a/vite.config.js b/vite.config.js
@@ -4,4 +4,7 @@ import react from '@vitejs/plugin-react'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  define: {
+    'process.env': process.env
+  }
 })
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		VITE_FORM_ACCESSKEY="ba12c06b-f1ae-4582-932c-00da28515ac0"