Portfolio page fix

Shubham-negi · Oct 8, 2024 · a1f42d5 · a1f42d5
1 parent 6f49589
commit a1f42d5
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 13 deletions.
diff --git a/constants/ProjectsData.js b/constants/ProjectsData.js
@@ -1,6 +1,6 @@
 export const ProjectsData = [
     {
-        projectName: "Shubham:Personal porfolio generator",
+        projectName: "Personal porfolio",
         liveUrl: "https://theshubhamnegi.com",
         githubUrl: "https://github.com/Shubham-negi/shubham-portfolio.git",
         projectImage: {

diff --git a/pages/portfolio.jsx b/pages/portfolio.jsx
@@ -22,16 +22,16 @@ const Portfolio = () => {
 
       <BackTo backTo={""} />
         <div className="p-[5%] pt-[2%] dark:bg-gray-700">
-          <p className="font-bold text-2xl p-2 dark:text-white">Blogs</p>
+          <p className="font-bold text-2xl p-2 dark:text-white">Portfolio</p>
 
-          <div className="pb-5">
+          <div className="pb-10">
           <ResponsiveMasonry
   columnsCountBreakPoints={{ 350: 2, 750: 3, 900: 4 }}
 >
   <Masonry>
     {ProjectsData.map((project) => (
       <div
-        className="dark:bg-black rounded-l-md border border-gray-400 border-solid m-5"
+        className="dark:bg-black rounded-l-md border border-gray-400 border-solid m-2"
         key={project.projectName}
       >
         {/* Project Image */}
@@ -43,7 +43,7 @@ const Portfolio = () => {
           onMouseMove={() => setHeight1(project.projectName)}
           style={{
             backgroundImage: `url(${project?.projectImage?.imageUrl || ""})`,
-            aspectRatio: '16/9', // Maintain aspect ratio
+            aspectRatio: '10/9', // Maintain aspect ratio
           }}
         >
           <div
@@ -64,7 +64,7 @@ const Portfolio = () => {
               className='overflow-hidden transition-all duration-500 h-[70px] flex gap-10 justify-center items-center'
               style={
                 height1 === project.projectName
-                  ? { maxHeight: "200px" }
+                  ? { maxHeight: "30px" }
                   : { maxHeight: "0" }
               }
             >
@@ -92,7 +92,7 @@ const Portfolio = () => {
           </div>
         </div>
         {/* Tech Stack */}
-        <div className='flex flex-wrap gap-2 mt-4'>
+        <div className='flex flex-wrap gap-1 mt-2'>
           {project.techs.map((tech, key) => (
             <p
               className='px-1 text-sm rounded bg-blue-500 text-white'

diff --git a/sections/Intro.jsx b/sections/Intro.jsx
@@ -24,7 +24,7 @@ const Intro = () => {
           setIsHome(homeEntry.isIntersecting);
         },
         {
-          rootMargin: `${getScreenWidth() <= 700 ? "-100px" : "-300px"}`,
+          rootMargin: `${getScreenWidth() <= 600 ? "-100px" : "-300px"}`,
         }
       );
 
@@ -47,14 +47,14 @@ const Intro = () => {
       </Head>
       <section id='home'>
         <div
-          className='min-h-[100vh] overflow-x-hidden px-[20px] md:px-[200px] lg:px-[200px] pt-[80px] md:pt-0 md:flex items-center justify-between shadow-zinc-300 dark:shadow-zinc-700 shadow-sm'
+          className='min-h-[100vh] overflow-x-hidden px-[50px] md:px-[50px] lg:px-[50px] pt-[80px] md:pt-10 md:flex items-center justify-between shadow-zinc-300 dark:shadow-zinc-700 shadow-sm'
           ref={homeRef}
         >
           <div
             className='translate-x-[-500px] transition-all duration-700 opacity-0'
             ref={introRef}
           >
-            <p className='py-2 text-2xl md:text-4xl font-semibold font-sans'>
+            <p className=' text-4xl md:text-4xl font-semibold font-sans'>
               Hi There !
             </p>
             {/* Profile Name */}

diff --git a/sections/Portfolio.jsx b/sections/Portfolio.jsx
@@ -44,12 +44,12 @@ const Portfolio = () =>{
         </h2>
 
         <div
-          className='min-h-[40px] pop-down-child pb-[30px] flex flex-wrap px-[20px] gap-8 justify-around items-center shadow-sm shadow-zinc-300 dark:shadow-zinc-700'
+          className='min-h-[40px] pop-down-child pb-[30px] flex flex-wrap px-[20px] gap-10 justify-around items-center shadow-sm shadow-zinc-300 dark:shadow-zinc-700'
           ref={projectBoxesRef}
         >
           {ProjectsData.slice(-4).map((project ,key) => (
             <div
-              className='transition-all duration-700 w-[330px]'
+              className='transition-all duration-700 w-[350px]'
               key={key}
             >
               {/* Project Image */}
@@ -124,11 +124,12 @@ const Portfolio = () =>{
             </div>
           ))}
 
-          <div className='ml-auto w-fit  mr-10 mt-30'>
+          <div className='ml-auto w-fit  mr-2 mt-30'>
             <AnimatedButton buttoname="Explore projects" href="/portfolio" />
           </div>
         </div>
 
+
       </section>
     </Fragment>
   );