Fixed every small customization detail from all the screens and updat…

…ed the Icons which were mistakenly added previously.
manish-1614 · Oct 2, 2024 · 78467a0 · 78467a0
1 parent c03686b
commit 78467a0
Show file tree

Hide file tree

Showing 19 changed files with 80 additions and 107 deletions.
diff --git a/src/ResumeV2/Components/ResumeComponents/Knowledges.jsx b/src/ResumeV2/Components/ResumeComponents/Knowledges.jsx
@@ -5,7 +5,7 @@ const Knowledges = () => {
   return (
     <div className='my-border h-full'>
       <header>
-        <p>Knowledges</p>
+        <p className='font-bold underline mb-2'>Knowledges</p>
       </header>
       <div className='flex flex-wrap gap-1'>
         {

diff --git a/src/ResumeV2/Components/ResumeComponents/WorkingSkills.jsx b/src/ResumeV2/Components/ResumeComponents/WorkingSkills.jsx
@@ -6,7 +6,7 @@ const WorkingSkills = () => {
   return (
     <div className='my-border h-full'>
       <header>
-        <p>Working Skills</p>
+        <p className='font-bold underline'>Working Skills</p>
       </header>
       <div>
         {

diff --git a/src/ResumeV2/Components/Utilities/Badges.jsx b/src/ResumeV2/Components/Utilities/Badges.jsx
@@ -7,12 +7,12 @@ const Badges = () => {
 
         <div>
             <div className='mt-6'>
-                <p className='text-xl underline'>Affiliated Badges</p>
+                <p className='text-xl underline'>Earned Badges</p>
                 <div className='flex flex-wrap gap-2 justify-center items-center my-2'>
                     {
                         affiliatedBadges.map((element, index) => (
                             <a href={element.url} target='_blank' rel='noreferrer' key={index} className='flex flex-col gap-1 justify-center items-center'>
-                                <img src={element.imageUrl} alt={`${element.title}`} className='aspect-square w-20'/>
+                                <img src={element.imageUrl} alt={`${element.title}`} className='aspect-square w-20 hover:scale-125 duration-200 ease-linear' />
                                 <p className='font-robotoslab text-sm'>{element.title}</p>
                                 <p className='text-sm'>{element.date}</p>
                             </a>
@@ -22,11 +22,11 @@ const Badges = () => {
             </div>
 
             <div className='my-6'>
-                <p className='text-xl underline'>Badges</p>
+                <p className='text-xl underline'>Leetcode Badges</p>
                 <div className='flex flex-wrap gap-2 my-2 justify-center items-center'>
                     {
                         badgesList.map((element, index) => (
-                            <img src={element.imageUrl} alt={`${element.title}`} key={index} className='aspect-square w-20'/>
+                            <img src={element.imageUrl} alt={`${element.title}`} key={index} className='aspect-square w-20 hover:scale-125 duration-200 ease-linear' />
                         ))
                     }
                 </div>

diff --git a/src/ResumeV2/Components/Utilities/BlogCard.jsx b/src/ResumeV2/Components/Utilities/BlogCard.jsx
@@ -1,13 +1,12 @@
 import React from 'react'
-// import FaIcon from './FaIcon'
 
 const BlogCard = ({element}) => {
-    console.log(element.iconName)
+    // console.log(element.iconName)
   return (
     <div className='flex flex-col gap-2 text-xl'>
         <a href={element.url} target='_blank' rel='noreferrer'>
-            {/* <FaIcon iconName={element.iconName} url={element.url}/> */}
-            <p className='text-lg font-bold'>{element.title}</p>
+            {/* render icon here  */}
+            <p className='text-lg font-bold text-blue-100'>{element.title}</p>
         </a>
 
         <div className='flex justify-between font-bold'>

diff --git a/src/ResumeV2/Components/Utilities/EducationList.jsx b/src/ResumeV2/Components/Utilities/EducationList.jsx
@@ -5,7 +5,7 @@ const EducationList = () => {
   return (
     <div>
       <header>
-        <p className='font-bold text-xl'>Education</p>
+        <p className='font-bold text-xl underline'>Education</p>
       </header>
       <div className='grid gap-2'>
         {

diff --git a/src/ResumeV2/Components/Utilities/Experiences.jsx b/src/ResumeV2/Components/Utilities/Experiences.jsx
@@ -5,19 +5,19 @@ const Experiences = () => {
   return (
     <div>
       <div className='mt-2'>
-        <p className='font-bold text-xl'>Experiences</p>
+        <p className='font-bold text-xl underline'>Experiences</p>
       </div>
       <div>
         {
           workExperiences.map((element, index) => (
             <div key={index}>
-              <div className='flex items-center justify-between'> 
+              <div className='flex flex-wrap items-center justify-between'> 
                 <div className='mt-2'>
                   <p className='text-lg font-roboto'>{element.title}</p>
-                  <p className='font-robotoslab'>{element.company}</p>
+                  <p className='font-robotoslab px-2 border-2 rounded-md inline-block'>{element.company}</p>
                 </div>
                 <div>
-                  <p>{element.duration}</p>
+                  <p className='text-richblack-700 font-bold text-sm'>{element.duration}</p>
                 </div>
               </div>
 

diff --git a/src/ResumeV2/Components/Utilities/FaIcon.jsx b/src/ResumeV2/Components/Utilities/FaIcon.jsx
diff --git a/src/ResumeV2/Components/Utilities/IconRenderer.jsx b/src/ResumeV2/Components/Utilities/IconRenderer.jsx
@@ -2,12 +2,13 @@ import React from 'react'
 import * as FaIcons from 'react-icons/fa'
 import * as SiIcons from 'react-icons/si'
 import * as TbIcons from 'react-icons/tb'
+import * as AiIcons from 'react-icons/ai'
 import * as VSCIcons from 'react-icons/vsc'
 
 
 const IconRenderer = ({ iconPath }) => {
     const [prefix, iconName] = iconPath.split("/");
-    // console.log("Prefix - ", prefix, " Name - ", iconName)
+    // console.log("Icon renderer Prefix - ", prefix, " Name - ", iconName)
 
     if (prefix === "fa") {
         const Icon = FaIcons[iconName];
@@ -18,7 +19,10 @@ const IconRenderer = ({ iconPath }) => {
     } else if (prefix === "tb") {
         const Icon = TbIcons[iconName];
         return <Icon />
-    } else{
+    } else if (prefix === "ai") {
+        const Icon = AiIcons[iconName];
+        return <Icon />
+    }else{
         const Icon = VSCIcons[iconPath];
         return <Icon />
     }

diff --git a/src/ResumeV2/Components/Utilities/InfoLink.jsx b/src/ResumeV2/Components/Utilities/InfoLink.jsx
@@ -6,13 +6,13 @@ const InfoLink = () => {
   return (
     <div className='my-border w-full h-full m-1'>
         {/* profile name  */}
-        <p className='my-border bg-richblack-25 opacity-75 text-sm'>Software Engineer / Problem Solver</p>
+        <p className='border-2 rounded-md p-2 bg-richblack-25 opacity-75 text-sm font-bold mb-2'>Software Engineer / Problem Solver</p>
 
         {/* list of links to profile */}
-        <div className='w-11/12 mx-auto'>
+        <div className='w-10/12 mx-auto flex flex-col gap-2 overflow-hidden'>
         {
           links.map((link, index) => (
-            <div key={index} className='my-border'>
+            <div key={index} className='border-2 rounded-md p-2'>
               <SkillTab text={link.text} url={link.url} iconName={link.iconName}/>
             </div>
           ))

diff --git a/src/ResumeV2/Components/Utilities/NavLinkBar.jsx b/src/ResumeV2/Components/Utilities/NavLinkBar.jsx
@@ -1,12 +1,10 @@
-import * as Icons from 'react-icons/vsc'
+import IconRenderer from './IconRenderer';
 import { NavLink, matchPath, useLocation, useNavigate } from 'react-router-dom'
 
 const NavLinkBar = ({element, iconName}) => {
 
     const location = useLocation();
 
-
-    const Icon = Icons[iconName]
     const navigate = useNavigate();
 
     const matchRoute = (route) => {
@@ -20,11 +18,11 @@ const NavLinkBar = ({element, iconName}) => {
         <NavLink
             to={element.path}
             onClick={() => navigate(element.path)}
-            className={`rounded-lg p-2 text-lg ${
+            className={`rounded-lg p-2 font-roboto ${
             matchRoute(element.path) ? 'bg-black text-white' : 'text-black hover:text-pink-200'}`}
         >
-            <div className='flex flex-col items-center gap-2'>
-                <Icon className='text-4xl border-2 border-pink-900 p-2 rounded-lg' />
+            <div className='flex flex-col items-center gap-1'>
+                <IconRenderer iconPath={iconName} />
                 <span>{element.name}</span>
             </div>
         </NavLink>

diff --git a/src/ResumeV2/Components/Utilities/Porto.jsx b/src/ResumeV2/Components/Utilities/Porto.jsx
@@ -6,19 +6,16 @@ const Porto = ({element}) => {
       <p>{element.topic}</p>
       <div className="border-t-[1px] border-richblack-200 py-2"></div>
       <div className='flex justify-between'>
-        <p>{element.topic}</p>
+        <p className='px-2 border-2 rounded-md'>{element.company}</p>
         <p>{element.time}</p>
       </div>
       <div>
-        <div className='text-lg text-richblack-700 underline'>
-            {element.company}
-        </div>
         <p className='text-lg font-bold'>
             {element.title}
         </p>
-        <div>
+        <p className='text-sm italic'>
             {element.description}
-        </div>
+        </p>
       </div>
 
     </a>

diff --git a/src/ResumeV2/Components/Utilities/SkillTab.jsx b/src/ResumeV2/Components/Utilities/SkillTab.jsx
@@ -1,13 +1,13 @@
 import React from 'react'
-import * as Icons from 'react-icons/ai'
+import IconRenderer from './IconRenderer';
 
 const SkillTab = ({text, url, iconName}) => {
 
-    const Icon = Icons[iconName];
-
   return (
-    <a href={url} className='flex gap-2'>
-        <Icon/>
+    <a href={url} className='flex gap-2 items-center'>
+        <div>
+          <IconRenderer iconPath={iconName}/>
+        </div>
         <p className='text-sm font-sans text-slate-500'>{text}</p>
     </a>
   )

diff --git a/src/ResumeV2/Pages/ContactMe.jsx b/src/ResumeV2/Pages/ContactMe.jsx
@@ -14,32 +14,30 @@ const ContactMe = () => {
   const submitContactForm = async (data) => {
     try {
       setLoading(true);
-      console.log("Email sent - ", data);
+      // console.log("Email sent - ", data);
       saveInformation(data);
       setLoading(false);
     } catch (error) {
-      console.log("ERROR MESSAGE - ", error.message);
+      console.error("ERROR MESSAGE - ", error.message);
       setLoading(false);
     }
   };
 
   const saveInformation = async (data) => {
-    await fetch("https://formspree.io/f/mgvwgpkv", {
+    const response = await fetch("https://formspree.io/f/mgvwgpkv", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
       },
       body: JSON.stringify(data),
-    }).then((response) => {
-        if (response.ok) {
-          toast.success("Email sent successfully!");
-        } else {
-          toast.error("Something went wrong while submitting your data. Please try again later.");
-        }
-      })
-      .catch((error) => {
-        console.error("Error:", error);
-      });
+    });
+    // console.log("Response received:: ",response);
+
+    if (response.ok) {
+      toast.success("Email sent successfully!");
+    } else {
+      toast.error("Something went wrong while submitting your data. Please try again later.");
+    }
   };
 
   useEffect(() => {
@@ -54,7 +52,7 @@ const ContactMe = () => {
 
   return (
     <div className="mx-auto">
-      <div>
+
         <p className="font-roboto text-xl">
           I'll be happy to connect with you.
         </p>
@@ -68,38 +66,40 @@ const ContactMe = () => {
 
           <div className="my-border">
             <label htmlFor="name">
-              Your Name<sup>*</sup>
+              Your Name<sup className="text-pink-100">*</sup>
             </label>
             <input
               type="text"
               name="name"
               id="name"
               placeholder="Enter your name"
+              className="p-2 rounded-md"
               {...register("name", { required: true })}
             />
             {errors.name && (
-              <span className="text-red-500">
+              <p className="text-pink-200">
                 Please enter your name before submitting
-              </span>
+              </p>
             )}
           </div>
 
           {/* email address  */}
           <div className="my-border">
             <label htmlFor="email">
-              Email Address <sup>*</sup>
+              Email Address <sup className="text-pink-100">*</sup>
             </label>
             <input
               type="email"
               name="email"
               id="email"
+              className="p-2 rounded-md"
               placeholder="Enter your email address"
               {...register("email", { required: true })}
             />
             {errors.email && (
-              <span className="text-red-500">
+              <p className="text-pink-200">
                 Please enter your email address before submitting
-              </span>
+              </p>
             )}
           </div>
 
@@ -112,6 +112,7 @@ const ContactMe = () => {
               name="message"
               id="message"
               rows="2"
+              className="p-2 rounded-md"
               placeholder="Enter your message here"
               {...register("message", { required: false })}
             />
@@ -130,7 +131,7 @@ const ContactMe = () => {
             Get in touch
           </button>
         </form>
-      </div>
+
     </div>
   );
 };

diff --git a/src/ResumeV2/Pages/Portfolio.jsx b/src/ResumeV2/Pages/Portfolio.jsx
@@ -27,15 +27,14 @@ const Portfolio = () => {
         }
       </div>
       <div>
-        <h1 className='heading'>Certificates</h1>
-        <div className='underlining'></div>
+        <h1 className='heading underline'>Course Completion Certificates</h1>
         <PhotoProvider>
-        <div className='flex flex-wrap gap-2'>
+        <div className='flex flex-wrap gap-4'>
           {
             certificatesList.map((element, index) => (
-              <div className='flex flex-col gap-4 justify-center text-center max-w-[200px]'>
+              <div className='flex flex-col gap-4 justify-center mx-auto text-center max-w-[200px]'>
                 <PhotoView key={index} src={element.url}>
-                  <img src={element.thumbnail} alt={element.title} className='hover:scale-110 duration-150' />
+                  <img src={element.thumbnail} alt={element.title} className='hover:scale-125 duration-150 ease-linear' />
                 </PhotoView>
                 <p className='text-sm italic'>{element.title}</p>
               </div>

diff --git a/src/ResumeV2/Pages/Resume.jsx b/src/ResumeV2/Pages/Resume.jsx
@@ -7,6 +7,13 @@ import EducationList from '../Components/Utilities/EducationList'
 const Resume = () => {
   return (
     <div>
+      <div className='flex lg:justify-start justify-center items-center mb-4'>
+        <button className='px-2 py-1 rounded-lg bg-pink-500 text-white'>
+          <a href="https://drive.google.com/file/d/1yWT_kDnkqgrehr7Q-rX4viIm2kGvW_dN/view?usp=drive_link" target='_blank' rel="noreferrer">
+            Get the PDF
+          </a>
+        </button>
+      </div>
       <div>
         <p className='heading'>Resume</p>
         <div className='underlining'></div>

diff --git a/src/ResumeV2/Pages/SidePanel.jsx b/src/ResumeV2/Pages/SidePanel.jsx
@@ -10,7 +10,7 @@ const SidePanel = () => {
             className='w-[70%] aspect-square object-cover my-border mx-auto'
           />
 
-          <div>
+          <div className='overflow-hidden'>
             {/* information sharing card  */}
             <InfoLink/>
           </div>