profiles pages made responsive

arcVaishali · Jan 24, 2024 · 2c67507 · 2c67507
1 parent 938e299
commit 2c67507
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 13 deletions.
diff --git a/src/components/Profile/Header.js b/src/components/Profile/Header.js
@@ -7,24 +7,24 @@ import { iconList } from "./CodingProfiles";
 
 const Header = () => {
   return (
-    <div className="col-span-12 grid grid-cols-12 mb-4 justify-center items-center">
-      <div className="grid grid-cols-10 col-span-10 col-start-2 justify-between items-center m-8">
-        <span className="col-span-4 leading-7 m-4">
+    <div className="col-span-12 grid lg:grid-cols-12 mb-4 justify-center items-center">
+      <div className="grid lg:grid-cols-10 col-span-10 col-start-2 justify-between items-center m-8">
+        <span className="col-span-4 col-start-4 lg:col-start-1 leading-7 m-4">
           <img
             data-aos="zoom-in"
             src={Picture}
-            className="col-span-2 h-[200px] w-[200px] rounded-[200px]"
+            className="col-span-2 h-[100px] w-[100px] rounded-[100px] lg:h-[200px] lg:w-[200px] lg:rounded-[200px]"
           />
-          <img data-aos="fade-in" className="w-32" src={LogoOption} />
+          <img data-aos="fade-in" className="ml-4 w-16 lg:w-32 lg:ml-0" src={LogoOption} />
 
           <Link
-            className="underline text-[12px] font-semibold text-gray-700"
+            className="underline text-[12px] font-semibold text-gray-700 ml-4 lg:ml-0"
             to="/"
           >
             Check out
           </Link>
         </span>
-        <div className="flex justify-end items-end col-span-8 mb-2">
+        <div className="hidden lg:flex justify-end items-end col-span-8 mb-2">
           {iconList.map((element, key) => (
             <Link data-aos="fade-in" to={element.to}>
               <FontAwesomeIcon
@@ -36,11 +36,23 @@ const Header = () => {
             </Link>
           ))}
         </div>
-        <div className="text-sm font-normal col-span-12 text-gray-500 ml-4">
+        <div className="text-sm font-normal col-span-12 text-gray-500 ml-4 text-center lg:text-left">
           Mollit ut velit eiusmod pariatur Lorem non amet est.Nostrud in tempor
           irure id adipisicing anim. velit eiusmod pariatur Lorem non amet
           est.Nostrud in tempor irure id adipisicing anim.
         </div>
+        <div className="flex lg:hidden justify-end items-end col-start-3 col-span-8 mb-2">
+          {iconList.map((element, key) => (
+            <Link data-aos="fade-in" to={element.to}>
+              <FontAwesomeIcon
+                icon={element.icon}
+                color={element.color}
+                size="xs"
+                className="bg-white m-2 rounded-full shadow-md p-2"
+              ></FontAwesomeIcon>
+            </Link>
+          ))}
+        </div>
       </div>
     </div>
   );

diff --git a/src/components/Profile/Profiles.js b/src/components/Profile/Profiles.js
@@ -6,24 +6,24 @@ import list1 from "./CodingProfiles";
 
 const Profiles = () => {
   return (
-    <div className="col-span-12 grid grid-cols-12 mb-4 justify-center items-center">
+    <div className="col-span-12 grid lg:grid-cols-12 mb-4 justify-center items-center">
       {list1.map((element, key) => (
         <div
           data-aos="zoom-in"
-          className="grid grid-cols-10 col-span-10 col-start-2 justify-between items-center bg-white rounded-lg shadow-md p-8 m-8"
+          className="grid lg:grid-cols-10 col-span-10 col-start-2 justify-between items-center bg-white rounded-lg shadow-md p-8 m-8"
         >
-          <span className="col-span-10 font-extrabold text-xl capitalize text-gray-600">
+          <span className="col-span-10 font-extrabold text-lg lg:text-xl capitalize text-gray-600">
             {element.name}
           </span>
           {element.lt.map((ele, key) => (
             <Link
              data-aos="zoom-in"
             //  {key % 2 == 0 ? "zoom-in-right" : "zoom-in-left"}
-              className="flex flex-cols justify-between items-center col-span-10 bg-gray-100 rounded-md p-8 m-2"
+              className="flex flex-cols justify-center lg:justify-between items-center col-span-10 bg-gray-100 rounded-md p-8 m-2"
               to={ele.src}
             >
               <img className="h-8 w-8" src={ele.icon} />
-              <span className="text-gray-700 text-l font-bold">
+              <span className="text-gray-700 text-base lg:text-lg font-bold">
                 {ele.header}
                 <FontAwesomeIcon
                   className="mx-4 text-white"