worked upon

arcVaishali · Jan 26, 2024 · 4698851 · 4698851
1 parent 70cc2c2
commit 4698851
Show file tree

Hide file tree

Showing 10 changed files with 31 additions and 32 deletions.
diff --git a/src/components/Blog/List.js b/src/components/Blog/List.js
@@ -11,16 +11,16 @@ const List = () => {
           data-aos-offset="200"
           to={element.to}
           target="_blank"
-          className="col-span-6 p-4"
+          className="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="relative left-16 lg:left-0 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,7 +3,7 @@ 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-[550px] lg: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"
@@ -14,7 +14,7 @@ const Contact = () => {
         </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/Footer.js b/src/components/Home/Footer.js
@@ -7,7 +7,7 @@ import { socials } from "../../constants";
 
 const Footer = () => {
   return (
-    <div className="grid grid-cols-12 col-span-12 px-4 lg:px-16 py-8 justify-between items-center bg-[#121212] border-t-[1px] border-b-[1px] border-gray-700 text-white">
+    <div className="w-[550px] lg:w-screen grid grid-cols-12 col-span-12 px-4 lg:px-16 py-4 lg:py-8 justify-between items-center bg-[#121212] border-t-[1px] border-b-[1px] border-gray-700 text-white">
       <Link className="col-span-3 hidden lg:w-16" to="/">
         <img src={Logo} />
       </Link>

diff --git a/src/components/Home/Hero.js b/src/components/Home/Hero.js
@@ -25,10 +25,10 @@ const Hero = () => {
   }, []);
 
   return (
-    <div className="grid grid-cols-12 col-span-12 justify-center items-center">
+    <div className="w-[500px] lg:w-screen 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="flex flex-col col-span-12 col-start-3 lg:col-start-2 col-end-12 text-center font-black text-7xl mt-32 -ml-8 lg:ml-0"
       >
         <span className="text-center font-thin text-xl lg:text-5xl m-2">
           Hey! I am Vaishali
@@ -48,7 +48,7 @@ const Hero = () => {
         incididunt commodo eu nulla tempor labore dolor.
       </animated.span>
 
-      <button className="w-[150px] text-sm col-start-4 my-8 ml-4 lg:col-start-6 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-8">
+      <button className="w-[150px] text-sm col-start-5 my-8 ml-2 lg:col-start-6 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-8">
         Book a free call
       </button>
       {initial ? (
@@ -58,13 +58,13 @@ const Hero = () => {
           ))}
         </div>
       ) : (
-        <Marquee className="mt-64 grid grid-cols-12 col-span-12 border-t-[1px] border-b-[1px] border-gray-700 py-4">
+        <Marquee className="mt-64 grid grid-cols-12 col-span-12 border-t-[1px] border-b-[1px] border-gray-700 py-4 ml-8 lg:ml-0">
           {names.map((element, index) => (
             <span
               className="px-8 font-light uppercase"
               style={{ fontFamily: "serif" }}
             >
-              Linkedin
+              vadore
             </span>
           ))}
         </Marquee>

diff --git a/src/components/Home/Navbar.js b/src/components/Home/Navbar.js
@@ -19,12 +19,12 @@ 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 w-[500px] lg:w-screen gap-16 justify-between items-center p-4 bg-[#f0f0f0]">
           <animated.div
             style={{ ...spring }}
             className="grid grid-cols-5 col-span-6"
           >
-            <Link className="w-[150px] mt-4 ml-16" to="/">
+            <Link className="w-[150px] mt-4 ml-8 lg:ml-16" to="/">
               <img src={Logo} />
             </Link>
           </animated.div>
@@ -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-1 justify-end ml-[100px] col-start-7 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="col-start-8 lg:col-start-2 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 col-start-6 lg:col-start-1">
         {projectList.map((element, index) => (
           <Link
             data-aos={index % 2 == 0 ? "fade-right" : "fade-left"}

diff --git a/src/components/Home/Recommendation.js b/src/components/Home/Recommendation.js
@@ -4,14 +4,14 @@ import { dummyImage2 } from "../../constants/imageList";
 
 const Recommendation = () => {
   return (
-    <div className="grid lg:grid-cols-12 m-16">
-      <span className="col-span-12 text-4xl lg:text-7xl lg:p-32 font-black uppercase mb-16">
+    <div className="grid lg:grid-cols-12 ml-16 mr-16 mb-16 mt-32 lg:mt-16">
+      <span className="col-span-12 text-4xl lg:text-7xl lg:p-16 font-black uppercase mb-16 ml-[50px] lg:ml-[200px]">
         Testimonials
       </span>
-      <div className="grid lg:grid-cols-12 col-span-12 justify-center items-center">
+      <div className="grid lg:grid-cols-12 col-span-12 justify-center items-center ml-[50px] lg:ml-32">
         <div
           data-aos="fade-up-left"
-          className="col-span-6"
+          className="lg:col-span-4 col-span-6"
         >
           <img
             src={dummyImage}
@@ -20,7 +20,7 @@ const Recommendation = () => {
         </div>
         <div
           data-aos="fade-in"
-          className="col-span-6 text-sm font-extralight mt-8 lg:mt-0"
+          className="col-span-6 text-sm font-extralight mt-8 lg:mt-0 lg:ml-16"
         >
           Voluptate do aliqua aliqua duis esse nisi.Enim incididunt id sunt sit
           nisi incididunt sint mollit veniam eiusmod.Sit qui duis occaecat minim

diff --git a/src/components/Home/Services.js b/src/components/Home/Services.js
@@ -6,11 +6,11 @@ import { domainList } from "../../constants";
 const Services = () => {
 
   return (
-    <div className="grid px-8 py-32 lg:grid-cols-12 bg-black text-white lg:p-32">
+    <div className="grid w-[550px] lg:w-screen px-8 py-32 lg:grid-cols-12 bg-black text-white lg:p-32">
       <span
         data-aos="fade-in"
         data-aos-easing="ease-in-out"
-        className="text-4xl ml-16 lg:text-7xl font-black uppercase mb-4 lg:mb-16"
+        className="text-4xl ml-[150px] lg:ml-16 lg:text-7xl font-black uppercase mb-4 lg:mb-16"
       >
         Services
       </span>
@@ -30,7 +30,7 @@ const Services = () => {
         <div
           data-aos="fade-in"
           data-aos-easing="ease-in-out"
-          className="col-span-4 col-start-9"
+          className="col-span-4 col-start-9 ml-[80px] lg:ml-0"
         >
           <img
             src="https://assets.website-files.com/643d8b145b9de160a97cf566/64719a153090a633cf8ae8a3_Rectangle%2041158%20(1).png"

diff --git a/src/components/Home/Stack.js b/src/components/Home/Stack.js
@@ -11,23 +11,23 @@ const Stack = () => {
   }));
   const list = [];
   return (
-    <div className="md:grid lg:grid lg:grid-cols-12 col-span-12 justify-between items-center gap-8 m-16 lg:mt-64 lg:mb-64 lg:mr-16 lg:ml-16">
-      <div className="md:grid md:col-span-7 lg:grid lg:grid-cols-8 lg:col-span-7">
-        <span className="text-4xl lg:text-7xl col-span-6 font-black uppercase">
+    <div className="grid grid-cols-12 col-span-12 justify-between items-center gap-8 p-8 mt-32 lg:mt-64 lg:mb-64 lg:mr-16 lg:ml-16 lg:p-0">
+      <div className="grid grid-rows-1 col-span-12 ml-[100px] lg:ml-16 lg:grid lg:grid-cols-8 lg:col-span-7">
+        <span className="text-4xl lg:col-span-7 lg:text-7xl font-black uppercase">
           Tech Stack
         </span>
         <div
           data-aos="fade-in"
           data-aos-easing="ease-in-out"
-          className="text-sm col-span-6 font-light"
+          className="text-sm col-span-6 font-light text-center lg:text-left hidden lg:inline"
         >
           Labore et dolor consequat ea velit. t dolor consequat ea velit. t
           dolor consequat ea velit.
         </div>
       </div>
       <div
         // data-aos-anchor-placement="top-center"
-        className="grid grid-cols-5 col-span-5 mt-8"
+        className="grid grid-cols-5 md:col-start-2 ml-[100px] lg:ml-0 col-span-12 lg:col-span-5 mt-8"
       >
         <img className="w-fill h-fill col-span-5" src={TechStack} />
       </div>