updated

Author: JV456

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

public/_redirects

@@ -0,0 +1 @@
+/*    /index.html   200

src/components/About.jsx

@@ -6,7 +6,7 @@ import { styles } from "../styles";
 import { fadeIn, textVariant } from "../utils/motion";
 
 const ServiceCard = ({ index, title, icon }) => (
-  <Tilt className='xs:w-[250px] w-full'>
+  <Tilt className='w-full max-w-[280px] mx-auto'>
     <motion.div
       variants={fadeIn("right", "spring", index * 0.5, 0.75)}
       className='w-full green-pink-gradient p-[1px] rounded-[20px] shadow-card'
@@ -17,15 +17,15 @@ const ServiceCard = ({ index, title, icon }) => (
           scale: 1,
           speed: 450,
         }}
-        className='bg-tertiary rounded-[20px] py-5 px-12 min-h-[280px] flex justify-evenly items-center flex-col'
+        className='bg-tertiary rounded-[20px] py-5 px-6 sm:px-12 min-h-[250px] sm:min-h-[280px] flex justify-evenly items-center flex-col'
       >
         <img
           src={icon}
           alt='web-development'
-          className='w-16 h-16 object-contain'
+          className='w-12 h-12 sm:w-16 sm:h-16 object-contain'
         />
 
-        <h3 className='text-white text-[20px] font-bold text-center'>
+        <h3 className='text-white text-[16px] sm:text-[18px] lg:text-[20px] font-bold text-center leading-tight'>
           {title}
         </h3>
       </div>
@@ -36,14 +36,14 @@ const ServiceCard = ({ index, title, icon }) => (
 const About = () => {
   return (
     <>
-      <motion.div variants={textVariant()}>
+      <motion.div variants={textVariant()} className="text-center lg:text-left">
         <p className={styles.sectionSubText}>Introduction</p>
         <h2 className={`${styles.sectionHeadText} bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 bg-clip-text text-transparent`}>Overview</h2>
       </motion.div>
 
       <motion.p
         variants={fadeIn("", "", 0.1, 1)}
-        className='mt-6 sm:mt-8 text-gray-300 text-[16px] sm:text-[18px] lg:text-[20px] w-full max-w-none lg:max-w-5xl xl:max-w-6xl leading-[28px] sm:leading-[32px] lg:leading-[36px] font-light tracking-wide px-2 sm:px-0 text-justify'
+        className='mt-6 sm:mt-8 text-gray-300 text-[14px] sm:text-[16px] lg:text-[18px] xl:text-[20px] w-full max-w-none lg:max-w-5xl xl:max-w-6xl leading-[22px] sm:leading-[28px] lg:leading-[32px] xl:leading-[36px] font-light tracking-wide px-2 sm:px-0 text-center sm:text-justify'
       >
         I'm a passionate developer with a knack for building intelligent, real-world solutions—especially in{" "}
         <span className="text-white font-medium">artificial intelligence, machine learning, and multimodal systems</span>. 

src/components/Works.jsx

@@ -18,21 +18,21 @@ const ProjectCard = ({
   return (
     <motion.div 
       variants={fadeIn("up", "spring", index * 0.3, 0.75)}
-      className="group"
+      className="group w-full"
     >
       <Tilt
         options={{
           max: 25,
           scale: 1.02,
           speed: 400,
         }}
-        className='relative overflow-hidden bg-gradient-to-br from-tertiary/80 to-black-200/60 backdrop-blur-sm p-6 rounded-3xl w-full sm:w-[380px] lg:w-[420px] border border-tertiary/20 hover:border-violet-500/40 transition-all duration-500 hover:shadow-2xl hover:shadow-violet-500/20'
+        className='relative overflow-hidden bg-gradient-to-br from-tertiary/80 to-black-200/60 backdrop-blur-sm p-4 sm:p-6 rounded-2xl sm:rounded-3xl w-full max-w-[380px] mx-auto border border-tertiary/20 hover:border-violet-500/40 transition-all duration-500 hover:shadow-2xl hover:shadow-violet-500/20'
       >
         {/* Gradient Overlay */}
-        <div className="absolute inset-0 bg-gradient-to-br from-violet-600/5 via-transparent to-purple-600/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-3xl"></div>
+        <div className="absolute inset-0 bg-gradient-to-br from-violet-600/5 via-transparent to-purple-600/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-2xl sm:rounded-3xl"></div>
 
         {/* Image Container */}
-        <div className='relative w-full h-[240px] mb-6 overflow-hidden rounded-2xl'>
+        <div className='relative w-full h-[200px] sm:h-[240px] mb-4 sm:mb-6 overflow-hidden rounded-xl sm:rounded-2xl'>
           <img
             src={image}
             alt='project_image'
@@ -43,17 +43,17 @@ const ProjectCard = ({
           <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
 
           {/* Enhanced GitHub Button */}
-          <div className='absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0'>
+          <div className='absolute top-3 right-3 sm:top-4 sm:right-4 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0'>
             <motion.div
               whileHover={{ scale: 1.1, rotate: 5 }}
               whileTap={{ scale: 0.95 }}
               onClick={() => window.open(source_code_link, "_blank")}
-              className='bg-gradient-to-br from-violet-600/90 to-purple-700/90 backdrop-blur-md w-12 h-12 rounded-2xl flex justify-center items-center cursor-pointer border border-violet-400/30 hover:border-violet-300/50 transition-all duration-300 shadow-lg hover:shadow-violet-500/25'
+              className='bg-gradient-to-br from-violet-600/90 to-purple-700/90 backdrop-blur-md w-10 h-10 sm:w-12 sm:h-12 rounded-xl sm:rounded-2xl flex justify-center items-center cursor-pointer border border-violet-400/30 hover:border-violet-300/50 transition-all duration-300 shadow-lg hover:shadow-violet-500/25'
             >
               <img
                 src={github}
                 alt='source code'
-                className='w-5 h-5 object-contain'
+                className='w-4 h-4 sm:w-5 sm:h-5 object-contain'
               />
             </motion.div>
           </div>
@@ -62,24 +62,24 @@ const ProjectCard = ({
         {/* Content */}
         <div className='relative z-10'>
           {/* Title with Gradient */}
-          <h3 className='text-white font-bold text-[22px] sm:text-[26px] mb-3 group-hover:bg-gradient-to-r group-hover:from-white group-hover:via-violet-200 group-hover:to-white group-hover:bg-clip-text group-hover:text-transparent transition-all duration-300'>
+          <h3 className='text-white font-bold text-[18px] sm:text-[22px] lg:text-[26px] mb-2 sm:mb-3 group-hover:bg-gradient-to-r group-hover:from-white group-hover:via-violet-200 group-hover:to-white group-hover:bg-clip-text group-hover:text-transparent transition-all duration-300 leading-tight'>
             {name}
           </h3>
 
           {/* Description */}
-          <p className='text-gray-300 text-[14px] sm:text-[15px] leading-relaxed mb-4 group-hover:text-gray-200 transition-colors duration-300'>
+          <p className='text-gray-300 text-[13px] sm:text-[14px] lg:text-[15px] leading-relaxed mb-3 sm:mb-4 group-hover:text-gray-200 transition-colors duration-300'>
             {description}
           </p>
 
           {/* Enhanced Tags */}
-          <div className='flex flex-wrap gap-2 mb-4'>
+          <div className='flex flex-wrap gap-1.5 sm:gap-2 mb-3 sm:mb-4'>
             {tags.map((tag, tagIndex) => (
               <motion.div
                 key={`${name}-${tag.name}`}
                 initial={{ opacity: 0, scale: 0.8 }}
                 animate={{ opacity: 1, scale: 1 }}
                 transition={{ delay: index * 0.1 + tagIndex * 0.05 }}
-                className={`px-3 py-1.5 text-[12px] sm:text-[13px] font-medium rounded-full border backdrop-blur-sm transition-all duration-300 hover:scale-105 cursor-default
+                className={`px-2 sm:px-3 py-1 sm:py-1.5 text-[11px] sm:text-[12px] lg:text-[13px] font-medium rounded-full border backdrop-blur-sm transition-all duration-300 hover:scale-105 cursor-default
                   ${tag.color === 'text-blue-500' ? 'bg-blue-500/10 border-blue-400/30 text-blue-300 hover:bg-blue-500/20' : ''}
                   ${tag.color === 'text-green-500' ? 'bg-green-500/10 border-green-400/30 text-green-300 hover:bg-green-500/20' : ''}
                   ${tag.color === 'text-pink-500' ? 'bg-pink-500/10 border-pink-400/30 text-pink-300 hover:bg-pink-500/20' : ''}
@@ -101,15 +101,15 @@ const ProjectCard = ({
             whileHover={{ scale: 1.02 }}
             whileTap={{ scale: 0.98 }}
             onClick={() => window.open(source_code_link, "_blank")}
-            className="w-full py-3 bg-gradient-to-r from-violet-600/20 to-purple-600/20 hover:from-violet-600/30 hover:to-purple-600/30 border border-violet-500/30 hover:border-violet-400/50 rounded-xl text-violet-200 hover:text-white font-medium text-sm transition-all duration-300 backdrop-blur-sm group-hover:shadow-lg group-hover:shadow-violet-500/20"
+            className="w-full py-2.5 sm:py-3 bg-gradient-to-r from-violet-600/20 to-purple-600/20 hover:from-violet-600/30 hover:to-purple-600/30 border border-violet-500/30 hover:border-violet-400/50 rounded-lg sm:rounded-xl text-violet-200 hover:text-white font-medium text-sm transition-all duration-300 backdrop-blur-sm group-hover:shadow-lg group-hover:shadow-violet-500/20"
           >
             View Project →
           </motion.button>
         </div>
 
         {/* Decorative Elements */}
-        <div className="absolute -top-4 -right-4 w-24 h-24 bg-gradient-to-br from-violet-500/10 to-purple-500/10 rounded-full blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
-        <div className="absolute -bottom-4 -left-4 w-24 h-24 bg-gradient-to-br from-blue-500/10 to-violet-500/10 rounded-full blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+        <div className="absolute -top-4 -right-4 w-16 h-16 sm:w-24 sm:h-24 bg-gradient-to-br from-violet-500/10 to-purple-500/10 rounded-full blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+        <div className="absolute -bottom-4 -left-4 w-16 h-16 sm:w-24 sm:h-24 bg-gradient-to-br from-blue-500/10 to-violet-500/10 rounded-full blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
       </Tilt>
     </motion.div>
   );
@@ -131,9 +131,9 @@ const Works = () => {
       <div className='w-full flex justify-center lg:justify-start'>
         <motion.div
           variants={fadeIn("", "", 0.1, 1)}
-          className='mt-8 sm:mt-10 p-6 rounded-2xl bg-gradient-to-br from-tertiary/30 to-black-200/20 backdrop-blur-sm border border-tertiary/20'
+          className='mt-6 sm:mt-8 lg:mt-10 p-4 sm:p-6 rounded-xl sm:rounded-2xl bg-gradient-to-br from-tertiary/30 to-black-200/20 backdrop-blur-sm border border-tertiary/20'
         >
-          <p className='text-gray-300 text-[16px] sm:text-[18px] lg:text-[20px] w-full max-w-none lg:max-w-5xl xl:max-w-6xl leading-[28px] sm:leading-[32px] lg:leading-[36px] font-light tracking-wide text-justify'>
+          <p className='text-gray-300 text-[14px] sm:text-[16px] lg:text-[18px] xl:text-[20px] w-full max-w-none lg:max-w-5xl xl:max-w-6xl leading-[22px] sm:leading-[28px] lg:leading-[32px] xl:leading-[36px] font-light tracking-wide text-center sm:text-justify'>
             Following projects showcases my skills and experience through{" "}
             <span className="text-white font-medium">real-world examples</span>{" "}
             of my work. Each project is briefly described with
@@ -149,9 +149,9 @@ const Works = () => {
       {/* Enhanced Projects Grid */}
       <motion.div 
         variants={fadeIn("up", "tween", 0.2, 1)}
-        className='mt-16 sm:mt-20 lg:mt-24'
+        className='mt-12 sm:mt-16 lg:mt-20'
       >
-        <div className='flex flex-wrap gap-8 justify-center'>
+        <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 justify-items-center'>
           {projects.map((project, index) => (
             <ProjectCard key={`project-${index}`} index={index} {...project} />
           ))}

src/hoc/SectionWrapper.jsx

@@ -11,7 +11,7 @@ const StarWrapper = (Component, idName) =>
         initial='hidden'
         whileInView='show'
         viewport={{ once: true, amount: 0.25 }}
-        className={`${styles.padding} max-w-7xl mx-auto relative z-0`}
+        className={`${styles.padding} max-w-7xl mx-auto relative z-0 px-4 sm:px-6 lg:px-8`}
       >
         <span className='hash-span' id={idName}>
           &nbsp;