-

Author: idimetrix

constants/competencies.ts

@@ -0,0 +1,14 @@
+export const COMPETENCIES = [
+  "Architecture",
+  "Integration Strategy",
+  "0 - 1 Product Development",
+  "API Design and Development",
+  "UI/UX Design and Development",
+  "Software Development",
+  "Global/Local People Management",
+  "Product/Project Management",
+  "Process Structuration and Optimization",
+  "Executive Leadership",
+  "Continuous Improvements",
+  "Professional Services",
+];

constants/index.tsx

@@ -97,4 +97,6 @@ export const SOCIALS: Record<
   },
 };
 
+export * from "./competencies";
+export * from "./rewards";
 export * from "./variants";

constants/rewards.tsx

@@ -0,0 +1,107 @@
+import {
+  FaCss3,
+  FaFigma,
+  FaHtml5,
+  FaJs,
+  FaReact,
+  FaWordpress,
+} from "react-icons/fa";
+import {
+  SiAdobephotoshop,
+  SiAdobexd,
+  SiFramer,
+  SiNextdotjs,
+} from "react-icons/si";
+
+export const REWARDS = [
+  {
+    category: "skills",
+    info: [
+      {
+        title: "Web Development",
+        description: "Specialized in modern web technologies.",
+        icons: [
+          FaHtml5,
+          FaCss3,
+          FaJs,
+          FaReact,
+          SiNextdotjs,
+          SiFramer,
+          FaWordpress,
+        ],
+        stage: "", // Empty as it's not relevant for skills
+      },
+      {
+        title: "UI/UX Design",
+        description: "Proficient in designing user-centric interfaces.",
+        icons: [FaFigma, SiAdobexd, SiAdobephotoshop],
+        stage: "",
+      },
+    ],
+  },
+  {
+    category: "awards",
+    info: [
+      {
+        title: "Webby Awards - Honoree",
+        description:
+          "Recognized for excellence in web design and functionality.",
+        icons: [], // Empty for non-skill categories
+        stage: "2011 - 2012",
+      },
+      {
+        title: "Adobe Design Achievement Awards - Finalist",
+        description: "Finalist in Adobe's prestigious design competition.",
+        icons: [],
+        stage: "2009 - 2010",
+      },
+    ],
+  },
+  {
+    category: "experience",
+    info: [
+      {
+        title: "UX/UI Designer - XYZ Company",
+        description:
+          "Led the design team to create user-friendly digital products.",
+        icons: [],
+        stage: "2012 - 2023",
+      },
+      {
+        title: "Web Developer - ABC Agency",
+        description: "Developed and maintained client websites.",
+        icons: [],
+        stage: "2010 - 2012",
+      },
+      {
+        title: "Intern - DEF Corporation",
+        description: "Gained experience in various IT support tasks.",
+        icons: [],
+        stage: "2008 - 2010",
+      },
+    ],
+  },
+  {
+    category: "credentials",
+    info: [
+      {
+        title: "Web Development - ABC University, LA, CA",
+        description: "Studied web development and computer science principles.",
+        icons: [],
+        stage: "2011",
+      },
+      {
+        title: "Computer Science Diploma - AV Technical Institute",
+        description: "Completed a diploma in computer science fundamentals.",
+        icons: [],
+        stage: "2009",
+      },
+      {
+        title: "Certified Graphic Designer - ABC Institute, Los Angeles, CA",
+        description: "Certified in graphic design techniques and tools.",
+        icons: [],
+        stage: "2006",
+      },
+    ],
+  },
+];

pages/about/index.tsx

@@ -1,117 +1,11 @@
 import { useState } from "react";
 import CountUp from "react-countup";
-import {
-  FaCss3,
-  FaFigma,
-  FaHtml5,
-  FaJs,
-  FaReact,
-  FaWordpress,
-} from "react-icons/fa";
-import {
-  SiAdobephotoshop,
-  SiAdobexd,
-  SiFramer,
-  SiNextdotjs,
-} from "react-icons/si";
+import { ReactTyped } from "react-typed";
 import { motion } from "framer-motion";
-import { fadeIn } from "@/constants";
+import { COMPETENCIES, REWARDS, fadeIn } from "@/constants";
 import Avatar from "../../components/Avatar";
 import Circles from "../../components/Circles";
 
-export const aboutData = [
-  {
-    category: "skills",
-    info: [
-      {
-        title: "Web Development",
-        description: "Specialized in modern web technologies.",
-        icons: [
-          FaHtml5,
-          FaCss3,
-          FaJs,
-          FaReact,
-          SiNextdotjs,
-          SiFramer,
-          FaWordpress,
-        ],
-        stage: "", // Empty as it's not relevant for skills
-      },
-      {
-        title: "UI/UX Design",
-        description: "Proficient in designing user-centric interfaces.",
-        icons: [FaFigma, SiAdobexd, SiAdobephotoshop],
-        stage: "",
-      },
-    ],
-  },
-  {
-    category: "awards",
-    info: [
-      {
-        title: "Webby Awards - Honoree",
-        description:
-          "Recognized for excellence in web design and functionality.",
-        icons: [], // Empty for non-skill categories
-        stage: "2011 - 2012",
-      },
-      {
-        title: "Adobe Design Achievement Awards - Finalist",
-        description: "Finalist in Adobe's prestigious design competition.",
-        icons: [],
-        stage: "2009 - 2010",
-      },
-    ],
-  },
-  {
-    category: "experience",
-    info: [
-      {
-        title: "UX/UI Designer - XYZ Company",
-        description:
-          "Led the design team to create user-friendly digital products.",
-        icons: [],
-        stage: "2012 - 2023",
-      },
-      {
-        title: "Web Developer - ABC Agency",
-        description: "Developed and maintained client websites.",
-        icons: [],
-        stage: "2010 - 2012",
-      },
-      {
-        title: "Intern - DEF Corporation",
-        description: "Gained experience in various IT support tasks.",
-        icons: [],
-        stage: "2008 - 2010",
-      },
-    ],
-  },
-  {
-    category: "credentials",
-    info: [
-      {
-        title: "Web Development - ABC University, LA, CA",
-        description: "Studied web development and computer science principles.",
-        icons: [],
-        stage: "2011",
-      },
-      {
-        title: "Computer Science Diploma - AV Technical Institute",
-        description: "Completed a diploma in computer science fundamentals.",
-        icons: [],
-        stage: "2009",
-      },
-      {
-        title: "Certified Graphic Designer - ABC Institute, Los Angeles, CA",
-        description: "Certified in graphic design techniques and tools.",
-        icons: [],
-        stage: "2006",
-      },
-    ],
-  },
-];
-
 const About = () => {
   const [index, setIndex] = useState(0);
 
@@ -138,18 +32,26 @@ const About = () => {
             exit="hidden"
             className="h2"
           >
-            Captivating <span className="text-accent">stories</span> birth
-            magnificent designs.
+            Competent in <br />{" "}
+            <ReactTyped
+              className="text-accent text-4xl font-bold leading-normal"
+              strings={COMPETENCIES}
+              typeSpeed={40}
+              backSpeed={50}
+              loop
+            />
           </motion.h2>
           <motion.p
             variants={fadeIn("right", 0.4)}
             initial="hidden"
             animate="show"
             className="max-w-[500px] mx-auto xl:mx-0 mb-6 xl:mb-12 px-2 xl:px-0"
           >
-            10 years ago, I begin freelancing as a developer. Since then,
-            I&apos;ve done remote work for agencies, consulted for startups, and
-            collabrated on digital products for business and consumer use.
+            Over 15 years of professional experience (including MBA) in both
+            startups and enterprises, I am a technical strategic leader
+            specializing in guiding products from initial concept to successful
+            launch. I excel in managing teams of up to 100 members, fostering
+            high-performance cultures, and driving innovation.
           </motion.p>
 
           <motion.div
@@ -161,7 +63,7 @@ const About = () => {
             <div className="flex flex-1 xl:gap-x-6">
               <div className="relative flex-1 after:w-[1px] after:h-full after:bg-white/10 after:absolute after:top-0 after:right-0">
                 <div className="text-2xl xl:text-4xl font-extrabold text-accent mb-2">
-                  <CountUp start={0} end={10} duration={5} />
+                  <CountUp start={0} end={15} duration={5} />
                 </div>
                 <div className="text-xs uppercase tracking-[1px] leading-[1.4] max-w-[100px]">
                   Years of experience.
@@ -170,7 +72,7 @@ const About = () => {
 
               <div className="relative flex-1 after:w-[1px] after:h-full after:bg-white/10 after:absolute after:top-0 after:right-0">
                 <div className="text-2xl xl:text-4xl font-extrabold text-accent mb-2">
-                  <CountUp start={0} end={250} duration={5} />
+                  <CountUp start={0} end={50} duration={5} />
                 </div>
                 <div className="text-xs uppercase tracking-[1px] leading-[1.4] max-w-[100px]">
                   Satisfied clients.
@@ -179,7 +81,7 @@ const About = () => {
 
               <div className="relative flex-1 after:w-[1px] after:h-full after:bg-white/10 after:absolute after:top-0 after:right-0">
                 <div className="text-2xl xl:text-4xl font-extrabold text-accent mb-2">
-                  <CountUp start={0} end={650} duration={5} />
+                  <CountUp start={0} end={75} duration={5} />
                 </div>
                 <div className="text-xs uppercase tracking-[1px] leading-[1.4] max-w-[100px]">
                   Finished projects.
@@ -188,7 +90,7 @@ const About = () => {
 
               <div className="relative flex-1">
                 <div className="text-2xl xl:text-4xl font-extrabold text-accent mb-2">
-                  <CountUp start={0} end={8} duration={5} />
+                  <CountUp start={0} end={15} duration={5} />
                 </div>
                 <div className="text-xs uppercase tracking-[1px] leading-[1.4] max-w-[100px]">
                   Winning awards.
@@ -206,7 +108,7 @@ const About = () => {
           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) => (
+            {REWARDS.map((item, itemI) => (
               <div
                 key={itemI}
                 className={`${
@@ -221,7 +123,7 @@ const About = () => {
           </div>
 
           <div className="py-2 xl:py-6 flex flex-col gap-y-2 xl:gap-y-4 items-center xl:items-start">
-            {aboutData[index].info.map((item, itemI) => (
+            {REWARDS[index].info.map((item, itemI) => (
               <div
                 key={itemI}
                 className="flex-1 flex flex-col md:flex-row max-w-max gap-x-2 items-center text-center text-white/60"

pages/services/index.tsx

@@ -1,8 +1,8 @@
 import { motion } from "framer-motion";
+import { COMPETENCIES, fadeIn } from "@/constants";
 import Bulb from "../../components/Bulb";
 import Circles from "../../components/Circles";
 import ServiceSlider from "../../components/ServiceSlider";
-import { fadeIn } from "../../constants";
 
 export const serviceData = [];
 
@@ -29,8 +29,7 @@ const Services = () => {
               exit="hidden"
               className="mb-4 max-w-[400px] mx-auto lg:mx-0"
             >
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur
-              tempora eligendi, quisquam tempore sint reiciendis.
+              {COMPETENCIES.join(" • ")}
             </motion.p>
           </div>