Merge pull request #123 from AKK-soft-dev/aungkoko

🔥 build(profile): add aungkoko profile

content/profile/aungkoko.mdx

@@ -0,0 +1,20 @@
+---
+name: Aung Ko Ko
+description: I am a self-motivated frontend web developer. I am flexible and always eager to learn new technologies, which allows me to stay up-to-date with the latest trends in frontend development.
+image: "https://avatars.githubusercontent.com/u/84788994?v=4"
+tags:
+  - Frontend
+  - JavaScript
+  - TypeScript
+  - ReactJS
+  - NextJS
+  - Redux
+  - React Query
+  - MUI
+  - Tailwind CSS
+  - Bootstrap
+---
+
+import AungKoKo from "@/components/Contributors/AungKoKo/AungKoKo";
+
+<AungKoKo />

package.json

@@ -27,6 +27,7 @@
     }
   },
   "dependencies": {
+    "@formkit/auto-animate": "^0.8.0",
     "@splinetool/react-spline": "^2.2.6",
     "@splinetool/runtime": "^0.9.488",
     "clsx": "^2.0.0",

src/components/Contributors/AungKoKo/AungKoKo.jsx

@@ -0,0 +1,78 @@
+"use client";
+import { useState, useEffect, useRef } from "react";
+import autoAnimate from "@formkit/auto-animate";
+import skillsData from "./skills";
+
+const AungKoKo = () => {
+  const [skills, setSkills] = useState(skillsData);
+  const parent = useRef(null);
+
+  useEffect(() => {
+    parent.current && autoAnimate(parent.current, { duration: 700 });
+  }, [parent]);
+
+  useEffect(() => {
+    setTimeout(() => {
+      const juggled = [...skills];
+      juggled.push(juggled.shift());
+      setSkills(juggled);
+    }, 1000);
+  }, [skills]);
+
+  return (
+    <div className="container font-sans mx-auto flex flex-col md:flex-row items-center justify-center min-h-[75vh]">
+      <div className="basis-1/2">
+        <div className="flex flex-col items-start gap-1">
+          <span className="font-bold text-xl">
+            <span className="text-2xl">👋</span>I'm
+          </span>
+          <h2 className="text-5xl font-bold">Aung Ko Ko</h2>
+          <p className="text-xl font-semibold text-white/80">
+            A self-motivated frontend web developer
+          </p>
+          <a
+            className={`mt-3 px-5 py-3 inline-block group relative text-black select-none bg-[#0ebeff] font-semibold rounded-md overflow-hidden hover:scale-110 outline-none active:scale-105 transition-all cursor-pointer`}
+            href="https://aungkoko.vercel.app/"
+            target="_blank"
+          >
+            My Portfolio
+            <div
+              className={`absolute top-0 -inset-full h-full w-1/2 z-5 block transform -skew-x-12 bg-gradient-to-r from-transparent to-white opacity-40 group-hover:animate-shine animate-infinite_shine`}
+            />
+          </a>
+        </div>
+      </div>
+      {/** Skills Octagon */}
+      <div className="basis-1/2 flex justify-center mt-20 md:mt-0">
+        <div className="relative octagon">
+          <div className="absolute top-0 bottom-0 left-0 right-0">
+            <img src="/aungkoko/octagon.svg" className="" alt="" />
+          </div>
+          <div className="absolute top-0 left-0 w-full h-full flex items-center justify-center">
+            <img
+              src="/aungkoko/thinking.png"
+              className="w-20 h-20"
+              alt="icon by lordicon"
+            />
+          </div>
+          <div ref={parent} className="w-full h-full">
+            {skills.map(({ iconUrl, name }) => (
+              <div
+                key={name}
+                className={`corner rounded-lg border shadow-lg shadow-cyan-500/50`}
+              >
+                <img
+                  src={iconUrl}
+                  alt={`${name} icon`}
+                  className="object-cover rounded-lg border border-cyan-500 shadow-lg shadow-cyan-500/50"
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AungKoKo;

src/styles/globals.scss

@@ -15,6 +15,4 @@
 @import "profiles/lwinmoepaing";
 @import "profiles/vince";
 @import "profiles/aungmyatmoe";
-
-
-
+@import "profiles/aungkoko";

src/styles/profiles/_aungkoko.scss

@@ -0,0 +1,59 @@
+.octagon {
+  width: 250px;
+  height: 250px;
+
+  .corner {
+    width: 40px;
+    height: 40px;
+    position: absolute;
+    z-index: 10;
+  }
+
+  /* top-left */
+  .corner:nth-child(1) {
+    top: calc(0% - 20px);
+    left: calc(30% - 20px);
+  }
+
+  /* top-right */
+  .corner:nth-child(2) {
+    top: calc(0% - 20px);
+    left: calc(70% - 20px);
+  }
+
+  /* right-top */
+  .corner:nth-child(3) {
+    top: calc(30% - 20px);
+    right: calc(0% - 20px);
+  }
+
+  /* right-bottom */
+  .corner:nth-child(4) {
+    bottom: calc(30% - 20px);
+    right: calc(0% - 20px);
+  }
+
+  /* bottom-right */
+  .corner:nth-child(5) {
+    bottom: calc(0% - 20px);
+    left: calc(70% - 20px);
+  }
+
+  /* bottom-left */
+  .corner:nth-child(6) {
+    bottom: calc(0% - 20px);
+    left: calc(30% - 20px);
+  }
+
+  /* left-bottom */
+  .corner:nth-child(7) {
+    bottom: calc(30% - 20px);
+    left: calc(0% - 20px);
+  }
+
+  /* left-top */
+  .corner:nth-child(8) {
+    top: calc(30% - 20px);
+    left: calc(0% - 20px);
+  }
+}

tailwind.config.ts

@@ -15,6 +15,8 @@ const config: Config = {
       // that is animation class
       animation: {
         fadein: "fadeIn 0.5s ease-out forwards",
+        shine: "shine 1s",
+        infinite_shine: "infinite_shine 3s infinite",
       },
       colors: {
         primary: "#923293",
@@ -42,6 +44,21 @@ const config: Config = {
             opacity: "1",
           },
         },
+        shine: {
+          "100%": { left: "125%" },
+        },
+        infinite_shine: {
+          "40%, 100%": {
+            opacity: "0",
+            left: "125%",
+          },
+          "0%": {
+            opacity: "0",
+          },
+          "10%": {
+            opacity: "1",
+          },
+        },
       },
     },
   },