about page layout implemented

components/Circles.jsx

@@ -1,5 +1,17 @@
+import Image from "next/image";
+
 const Circles = () => {
-  return <div>Circles</div>;
+  return (
+    <div className="w-[200px] xl:w-[300px] absolute -right-16 -bottom-2 mix-blend-color-dodge animate-pulse duration-75 z-10">
+      <Image
+        src="/circles.png"
+        alt="circles"
+        width={260}
+        height={200}
+        className="w-full h-full"
+      />
+    </div>
+  );
 };
 
 export default Circles;

pages/about/index.jsx

@@ -1,95 +1,144 @@
-// icons
+import { motion } from "framer-motion";
+import { useState } from "react";
 import {
-  FaHtml5,
   FaCss3,
+  FaFigma,
+  FaHtml5,
   FaJs,
   FaReact,
   FaWordpress,
-  FaFigma,
 } from "react-icons/fa";
-
 import {
-  SiNextdotjs,
-  SiFramer,
-  SiAdobexd,
   SiAdobephotoshop,
+  SiAdobexd,
+  SiFramer,
+  SiNextdotjs,
 } from "react-icons/si";
 
+import Avatar from "../../components/Avatar";
+import Circles from "../../components/Circles";
+import { fadeIn } from "../../variants";
 
 //  data
-const aboutData = [
+export const aboutData = [
   {
-    title: 'skills',
+    title: "skills",
     info: [
       {
-        title: 'Web Development',
+        title: "Web Development",
         icons: [
-          <FaHtml5 />,
-          <FaCss3 />,
-          <FaJs />,
-          <FaReact />,
-          <SiNextdotjs />,
-          <SiFramer />,
-          <FaWordpress />,
+          FaHtml5,
+          FaCss3,
+          FaJs,
+          FaReact,
+          SiNextdotjs,
+          SiFramer,
+          FaWordpress,
         ],
       },
       {
-        title: 'UI/UX Design',
-        icons: [<FaFigma />, <SiAdobexd />, <SiAdobephotoshop />],
+        title: "UI/UX Design",
+        icons: [FaFigma, SiAdobexd, SiAdobephotoshop],
       },
     ],
   },
   {
-    title: 'awards',
+    title: "awards",
     info: [
       {
-        title: 'Webby Awards - Honoree',
-        stage: '2011 - 2012',
+        title: "Webby Awards - Honoree",
+        stage: "2011 - 2012",
       },
       {
-        title: 'Adobe Design Achievement Awards - Finalist',
-        stage: '2009 - 2010',
+        title: "Adobe Design Achievement Awards - Finalist",
+        stage: "2009 - 2010",
       },
     ],
   },
   {
-    title: 'experience',
+    title: "experience",
     info: [
       {
-        title: 'UX/UI Designer - XYZ Company',
-        stage: '2012 - 2023',
+        title: "UX/UI Designer - XYZ Company",
+        stage: "2012 - 2023",
       },
       {
-        title: 'Web Developer - ABC Agency',
-        stage: '2010 - 2012',
+        title: "Web Developer - ABC Agency",
+        stage: "2010 - 2012",
       },
       {
-        title: 'Intern - DEF Corporation',
-        stage: '2008 - 2010',
+        title: "Intern - DEF Corporation",
+        stage: "2008 - 2010",
       },
     ],
   },
   {
-    title: 'credentials',
+    title: "credentials",
     info: [
       {
-        title: 'Web Development - ABC University, LA, CA',
-        stage: '2011',
+        title: "Web Development - ABC University, LA, CA",
+        stage: "2011",
       },
       {
-        title: 'Computer Science Diploma - AV Technical Institute',
-        stage: '2009',
+        title: "Computer Science Diploma - AV Technical Institute",
+        stage: "2009",
       },
       {
-        title: 'Certified Graphic Designer - ABC Institute, Los Angeles, CA',
-        stage: '2006',
+        title: "Certified Graphic Designer - ABC Institute, Los Angeles, CA",
+        stage: "2006",
       },
     ],
   },
 ];
 
 const About = () => {
-  return <div>About</div>;
+  const [index, setIndex] = useState(0);
+
+  return (
+    <div className="h-full bg-primary/30 py-32 text-center xl:text-left">
+      <Circles />
+
+      {/* avatar img */}
+      <motion.div
+        variants={fadeIn("right", 0.2)}
+        initial="hidden"
+        animate="show"
+        exit="hidden"
+        className="hidden xl:flex absolute bottom-0 -left-[370px]"
+      >
+        <Avatar />
+      </motion.div>
+
+      <div className="container mx-auto h-full flex flex-col items-center xl:flex-row gap-x-6">
+        <div className="flex-1 flex flex-col justify-center">text</div>
+        <div className="flex flex-col w-full xl:max-w-[48%] h-[480px]">
+          <div className="flex gap-x-4 xl:gap-x-8 mx-auto xl:mx-0 mb-4">
+            {aboutData.map((item, itemI) => (
+              <div
+                key={itemI}
+                className={`${
+                  index === itemI &&
+                  "text-accent after:w-[100%] after:bg-accent after:transition-all after:duration-300"
+                } cursor-pointer capitalize xl:text-lg relative after:w-8 after:h-[2px] after:bg-white after:absolute after:-bottom-1 after:left-0`}
+                onClick={() => setIndex(itemI)}
+              >
+                {item.title}
+              </div>
+            ))}
+          </div>
+
+          <div className="">
+            {aboutData[index].info.map((item, itemI) => (
+              <div key={itemI} className="">
+                {/* title */}
+                <div className="">{item.title}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 };
 
 export default About;