conflict resolved

arcVaishali · Jan 27, 2024 · 92ce621 · 92ce621
2 parents c87f400 + e24ad0e
commit 92ce621
Show file tree

Hide file tree

Showing 18 changed files with 102 additions and 95 deletions.
diff --git a/src/components/About/Achievement.js b/src/components/About/Achievement.js
@@ -2,7 +2,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React from "react";
 import Marquee from "react-fast-marquee";
 import { faArrowAltCircleRight } from "@fortawesome/free-solid-svg-icons";
-import { card1 , card2 } from "../../constants/index";
+import { card1, card2 } from "../../constants/index";
 import { animated, useSpring } from "@react-spring/web";
 
 const Achievement = () => {
@@ -36,28 +36,30 @@ const Achievement = () => {
           Get in Touch
         </animated.button>
       </div>
-      <div className="grid lg:grid-col-12 col-span-12 p-4 mt-8">
+      <div className="grid lg:grid-col-12 col-span-12 justify-center items-center p-4 mt-8">
         {cols.map((ele, idx) => (
           <div
             data-aos={idx % 2 == 0 ? "fade-right" : "fade-left"}
             data-aos-easing="ease-in-out"
-            className="grid lg:grid-cols-12 col-span-6 gap-8"
+            className="grid lg:grid-cols-12 justify-center items-center col-span-6 gap-8"
           >
             {idx === 1
               ? card1.map((element, index) => (
                   <animated.div
                     style={{ ...style3 }}
                     data-aos={index % 2 == 0 ? "fade-right" : "fade-left"}
                     data-aos-easing="ease-in-out"
-                    className="flex col-span-6 justify-between items-center border-t-[1px] border-black p-4"
+                    className="grid grid-cols-12 gap-2 lg:col-span-6 col-span-12 justify-between items-center border-t-[1px] border-black p-4"
                   >
-                    <span className="uppercase">{element.title}</span>
-                    <button className="border-[1px] border-black rounded-full p-2">
+                    <span className="uppercase col-span-6">
+                      {element.title}
+                    </span>
+                    <div className="col-span-4 w-fit text-center cursor-pointer border-[1px] border-black rounded-full p-2">
                       {element.tag}
-                    </button>
+                    </div>
                     <FontAwesomeIcon
                       icon={faArrowAltCircleRight}
-                      className="cursor-pointer"
+                      className="cursor-pointer col-span-2"
                       size="xl"
                       swapOpacity
                       transform={{ rotate: 315 }}
@@ -69,15 +71,17 @@ const Achievement = () => {
                     style={{ ...style3 }}
                     data-aos={index % 2 == 0 ? "fade-right" : "fade-left"}
                     data-aos-easing="ease-in-out"
-                    className="lg:flex col-span-6 justify-between items-center border-t-[1px] border-black p-4 hidden"
+                    className="hidden lg:grid grid-cols-12 gap-2 lg:col-span-6 col-span-12 justify-between items-center border-t-[1px] border-black p-4"
                   >
-                    <span className="uppercase">{element.title}</span>
-                    <button className="border-[1px] border-black rounded-full p-2">
+                    <span className="uppercase col-span-6">
+                      {element.title}
+                    </span>
+                    <div className="col-span-4 w-fit text-center cursor-pointer border-[1px] border-black rounded-full p-2">
                       {element.tag}
-                    </button>
+                    </div>
                     <FontAwesomeIcon
                       icon={faArrowAltCircleRight}
-                      className="cursor-pointer"
+                      className="cursor-pointer col-span-2"
                       size="xl"
                       swapOpacity
                       transform={{ rotate: 315 }}

diff --git a/src/components/About/Experience.js b/src/components/About/Experience.js
@@ -24,7 +24,7 @@ const Experience = () => {
       <span
         data-aos="zoom-in"
         style={{ ...styles }}
-        className="col-span-8 lg:col-start-3 font-black uppercase text-4xl lg:text-7xl text-center"
+        className="col-span-8 col-start-3 lg:col-start-3 font-black uppercase text-4xl lg:text-7xl text-center"
       >
         <span className="hidden lg:inline">Job </span>Experience
       </span>
@@ -34,21 +34,27 @@ const Experience = () => {
             data-aos={index % 2 == 0 ? "fade-right" : "fade-left"}
             style={{ ...style2 }}
             to="/"
-            className="flex-rows justify-center lg:flex col-span-12 lg:justify-between items-center border-t-[1px] border-gray-700 p-[20px] transition hover:scale-90 delay-150 duration-1000 cursor-pointer"
+            className="grid lg:grid-cols-12 col-span-12 justify-between items-center border-t-[1px] border-gray-700 p-[20px] transition hover:scale-90 delay-150 duration-1000 cursor-pointer"
           >
             <animated.span
               style={{ ...styleOnContent }}
-              className="uppercase font-semibold text-sm lg:text-xl"
+              className="uppercase col-span-12 text-center lg:text-left lg:col-span-6 font-semibold text-sm lg:text-xl"
             >
               {element.name}
             </animated.span>
 
             <animated.div
               style={{ ...styleOnContent }}
-              className="uppercase font-semibold text-xs lg:text-sm"
+              className="uppercase col-span-12 text-center lg:text-left lg:col-span-4 font-semibold text-xs lg:text-sm"
             >
               {element.post}
             </animated.div>
+            <animated.div
+              style={{ ...styleOnContent }}
+              className="uppercase col-span-12 text-center lg:text-left lg:col-span-2 font-semibold text-xs lg:text-sm"
+            >
+              {element.tenure}
+            </animated.div>
           </Link>
         ))}
       </div>

diff --git a/src/components/About/Hero.js b/src/components/About/Hero.js
@@ -24,8 +24,8 @@ const Hero = () => {
     to: { y: 0 },
   });
   return (
-    <div className="grid grid-cols-12 justify-center items-center p-16 m-2 lg:pt-32 lg:pl-32 lg:pr-32 lg:pb-8 lg:mb-16">
-      <div className="grid grid-cols-6 col-span-12 justify-center items-center">
+    <div className="grid grid-cols-12 justify-center items-center p-8 m-2 lg:pt-32 lg:pl-32 lg:pr-32 lg:pb-8 lg:mb-16">
+      <div className="grid grid-rows-1 col-span-12 justify-center items-center">
         <animated.span
           style={{ ...styleOnHeader }}
           className="text-4xl text-center lg:col-span-6 uppercase font-black p-2 lg:text-7xl"
@@ -34,30 +34,30 @@ const Hero = () => {
         </animated.span>
         <animated.div
           style={{ ...styleOnSubHeader }}
-          className="col-start-2 col-span-4 text-center text-sm font-extralight p-2 hidden lg:flex"
+          className="text-center text-sm font-extralight p-2 flex lg:col-span-6 lg:ml-16"
         >
           Bring to the table win-win survival strategies to ensure proactive
           domination. At the end of the day, going forward, a new.
         </animated.div>
       </div>
-      <div className="lg:col-start-1 col-span-12 grid grid-cols-12 justify-center items-center p-8 gap-2 lg:gap-8">
+      <div className="lg:col-start-1 col-span-12 grid grid-cols-12 justify-center items-center p-4 lg:p-8 gap-4 lg:gap-8">
         {imgg.map((element, index) => (
-          <div className="col-span-3">
+          <div className="col-span-12 lg:col-span-3 col-start-4">
             {index === 1 ? (
               <div>
                 <animated.div
                   style={{ ...styleOnImage }}
-                  className="col-span-1"
+                  className="col-span-3 lg:col-span-1"
                 >
                   <img
                     data-aos="slide-up"
                     src={aboutSectionImage1}
-                    className="w-64 h-fill"
+                    className="w-32 h-fill"
                   />
                 </animated.div>
                 <animated.div
                   style={{ ...styleOnImage }}
-                  className="relative z-10 left-8 lg:left-32 col-span-1"
+                  className="relative z-10 left-8 bottom-16 lg:bottom-0 lg:left-32 col-span-3 lg:col-span-1"
                 >
                   <img
                     data-aos="slide-up"
@@ -72,9 +72,9 @@ const Hero = () => {
           </div>
         ))}
       </div>
-      {/* <Marquee
+      <Marquee
         data-aos="zoom-in-up"
-        className="my-32 grid grid-cols-12 col-span-12 border-t-[1px] border-b-[1px] border-gray-700 p-4"
+        className="lg:my-32 grid grid-cols-12 col-span-12 border-t-[1px] border-b-[1px] border-gray-700 p-4"
       >
         {names.map((element, index) => (
           <span
@@ -85,7 +85,7 @@ const Hero = () => {
             Linkedin
           </span>
         ))}
-      </Marquee> */}
+      </Marquee>
     </div>
   );
 };

diff --git a/src/components/About/Slider.js b/src/components/About/Slider.js
@@ -16,7 +16,7 @@ const Slider = () => {
     to: { opacity: 1 },
   });
   return (
-    <div className="grid grid-cols-12 col-span-12 justify-center items-center p-8 lg:px-16 lg:py-8 my-16 lg:my-32">
+    <div className="grid grid-cols-12 col-span-12 justify-center items-center p-8 lg:px-16 lg:py-8 my-8 lg:my-32">
       <span
         data-aos="zoom-in"
         style={{ ...style1 }}

diff --git a/src/components/Blog/Home.js b/src/components/Blog/Home.js
@@ -3,7 +3,7 @@ import React from 'react'
 const Home = () => {
   return (
     <div data-aos="zoom-in" className='grid grid-cols-12 col-span-12 justify-center items-center py-16 px-16 lg:p-32'>
-     <span className="col-span-10 lg:col-span-12 ml-16 lg:col-start-2 lg:-ml-2 text-4xl lg:text-7xl uppercase font-black">
+     <span className="col-span-12 text-center lg:col-span-12 lg:col-start-2 lg:-ml-2 text-4xl lg:text-7xl uppercase font-black">
           Blogs <span className='hidden lg:inline'> and Articles</span>
         </span>
     </div>

diff --git a/src/components/Blog/List.js b/src/components/Blog/List.js
@@ -4,23 +4,23 @@ import { blogData } from "../../constants";
 
 const List = () => {
   return (
-    <div className="grid lg:grid-cols-12 col-span-12 justify-center items-center gap-8 p-4">
+    <div className="grid w-full grid-cols-12 col-span-12 justify-center items-center gap-8 p-4">
       {blogData.map((element, index) => (
         <Link
           data-aos={index % 2 == 0 ? "fade-right" : "fade-left"}
           data-aos-offset="200"
           to={element.to}
           target="_blank"
-          className="col-span-6 p-4"
+          className="col-span-12 lg:col-span-6 lg:p-4"
         >
           <div>
             <img src={element.src} className="h-fill w-fill" />
           </div>
-          <div className="text-base font-extralight p-2">{element.text}</div>
+          <div className="text-base font-extralight lg:p-2">{element.text}</div>
           <Link
             to={element.to}
             target="_blank"
-            className="bg-transparent text-black underline p-2"
+            className="bg-transparent text-black underline lg:p-2"
           >
             Read more
           </Link>

diff --git a/src/components/Home/Blog.js b/src/components/Home/Blog.js
@@ -2,9 +2,8 @@ import React from "react";
 import List from "../Blog/List";
 
 const Blog = () => {
-  const list = [1, 2, 3, 4];
   return (
-    <div className="grid grid-cols-12 justify-center items-center p-8 lg:p-32">
+    <div className="grid grid-cols-12 justify-center items-center p-4 lg:p-32">
       <div className="grid grid-cols-12 col-span-12 justify-between items-center mb-16">
         <span
           data-aos="fade-in"

diff --git a/src/components/Home/Contact.js b/src/components/Home/Contact.js
@@ -3,18 +3,18 @@ import { Link } from "react-router-dom";
 
 const Contact = () => {
   return (
-    <div className="grid grid-cols-12 p-32 mt-8 bg-[#121212] text-white">
+    <div className="grid w-screen grid-cols-12 p-16 lg:p-32 mt-8 bg-[#121212] text-white">
       <div
         data-aos="fade-up-left"
-        className="flex flex-col text-4xl lg:text-8xl font-black justify-center items-center col-start-3 col-end-11 uppercase"
+        className="flex flex-col text-4xl lg:text-8xl font-black justify-center items-center col-span-12 lg:col-start-3 lg:col-end-11 uppercase"
         style={{ fontFamily: "Fontsfree net xillian, sans-serif" }}
       >
         <span data-aos="fade-up-left" className="text-center m-2">
           Have an Idea?
         </span>
         <Link
           to="/contact"
-          className="rounded-full uppercase py-4 px-8 border-[1px] border-white hover:bg-[#e4eae4da] hover:text-black"
+          className="rounded-full uppercase p-4 lg:py-4 lg:px-8 border-[1px] border-white hover:bg-[#e4eae4da] hover:text-black"
         >
           Contact
         </Link>

diff --git a/src/components/Home/Hero.js b/src/components/Home/Hero.js
@@ -29,15 +29,15 @@ const Hero = () => {
     <div className="grid grid-cols-12 col-span-12 justify-center items-center">
       <animated.span
         style={{ ...spring }}
-        className="flex flex-col col-span-12 col-start-2 col-end-12 text-center font-black text-7xl mt-32"
+        className="grid grid-rows-1 col-span-12 col-start-3 col-end-11 lg:col-start-2 lg:col-end-12 text-center font-black text-7xl mt-32 lg:ml-0"
       >
         <span className="text-center font-thin text-xl lg:text-5xl m-2">
           Hey! I am Vaishali
         </span>
         <H
           text="Web Developer Based in Delhi"
           level="1"
-          classN=" text-center text-4xl lg:text-8xl "
+          classN=" text-4xl lg:text-8xl "
         />
       </animated.span>
 
@@ -51,36 +51,29 @@ const Hero = () => {
         <Link
           target="_blank"
           to="https://topmate.io/vaishali_p14"
-          className="text-sm bg-black text-white border-2 border-black hover:bg-white hover:text-black rounded-full px-4 py-2 lg:my-8 lg:mx-2 my-2"
+          className="text-sm bg-black text-white border-2 border-black hover:bg-white hover:text-black rounded-full px-4 py-2 lg:my-8 lg:mx-2 my-2 text-center"
         >
           Book a free call
         </Link>
         <Link
           target="_blank"
           to="https://drive.google.com/file/d/16acvxeGGuvW6n63jfJ4Edu7u8EXkKLx2/view?usp=sharing"
-          className="text-sm bg-transparent text-black border-2 border-black hover:bg-white hover:text-black rounded-full px-4 py-2 lg:my-8 my-2"
+          className="text-sm bg-transparent text-black border-2 border-black hover:bg-white hover:text-black rounded-full px-4 py-2 lg:my-8 my-2 text-center"
         >
           View Resume
         </Link>
       </div>
-      {initial ? (
-        <div className="mt-64 grid grid-cols-12 col-span-12 border-t-[1px] border-b-[1px] border-gray-700 p-4">
-          {names.map((element, index) => (
-            <span className="px-8 font-black">Linkedin</span>
-          ))}
-        </div>
-      ) : (
-        <Marquee className="mt-64 grid grid-cols-12 col-span-12 border-t-[1px] border-b-[1px] border-gray-700 py-4">
-          {names.map((element, index) => (
-            <span
-              className="px-8 font-light uppercase"
-              style={{ fontFamily: "serif" }}
-            >
-              Linkedin
-            </span>
-          ))}
-        </Marquee>
-      )}
+
+      <Marquee className="mt-64 grid grid-cols-12 col-span-12 border-t-[1px] border-b-[1px] border-gray-700 py-4 lg:ml-0">
+        {names.map((element, index) => (
+          <span
+            className="px-8 font-light uppercase"
+            style={{ fontFamily: "serif" }}
+          >
+            vadore
+          </span>
+        ))}
+      </Marquee>
     </div>
   );
 };

diff --git a/src/components/Home/Navbar.js b/src/components/Home/Navbar.js
@@ -19,18 +19,18 @@ const Navbar = () => {
   return (
     <div>
       {showMenu === false ? (
-        <div className="grid grid-cols-12 max-[600px]:mr-16 max-[600px]:-ml-16 w-[100vw] gap-16 justify-between items-center p-4 bg-[#f0f0f0]">
+        <div className="grid grid-cols-12 gap-4 lg:gap-16 justify-between items-center p-4 bg-[#f0f0f0]">
           <animated.div
             style={{ ...spring }}
-            className="grid grid-cols-5 col-span-6"
+            className="grid grid-cols-5 col-span-10 lg:col-span-6"
           >
-            <Link className="w-[150px] mt-4 ml-16" to="/">
+            <Link className="w-[150px] mt-4 lg:ml-16" to="/">
               <img src={Logo} />
             </Link>
           </animated.div>
           <animated.div
             style={{ ...spring }}
-            className="min-[200px]:hidden max-[900px]:hidden lg:flex lg:col-span-6 lg:gap-8 xl:ml-64"
+            className="hidden lg:flex lg:col-span-6 lg:gap-8 xl:ml-64"
           >
             {navLink.map((element) => (
               <Link
@@ -48,7 +48,7 @@ const Navbar = () => {
           </animated.div>
           <animated.div
             style={{ ...spring }}
-            className="flex col-span-1 justify-end col-start-8 lg:hidden"
+            className="flex col-span-2 lg:hidden"
           >
             <FontAwesomeIcon
               className="text-4xl cursor-pointer"

diff --git a/src/components/Home/Project.js b/src/components/Home/Project.js
@@ -6,11 +6,11 @@ const Project = () => {
   function handle() {}
   return (
     <div className="grid grid-cols-12 col-span-12 justify-center items-center m-32 gap-8">
-      <span className="col-end-4 lg:col-start-2 lg:ml-16 lg:col-end-12 text-4xl lg:text-6xl font-black uppercase mb-8">
-        Featured Projects
+      <span className="lg:col-start-2 col-start-3 lg:ml-16 lg:col-end-12 text-4xl lg:text-6xl font-black uppercase mb-8">
+        <span className="hidden lg:inline">Featured</span> Projects
       </span>
 
-      <div className="md:grid lg:grid lg:grid-cols-12 col-span-12 gap-8 justify-between col-start-1">
+      <div className="grid lg:grid lg:grid-cols-12 col-span-12 gap-8 justify-between lg:col-start-1">
         {projectList.map((element, index) => (
           <Link
             data-aos={index % 2 == 0 ? "fade-right" : "fade-left"}