feat: enhance skill

src/components/header/cool-button.tsx

@@ -8,9 +8,9 @@ export default component$(
         href={href}
         class="group relative block h-[6rem] w-[9rem] md:h-[7.5rem] md:w-[11rem] md:text-lg"
       >
-        <div class="absolute h-[83%] w-[95%] translate-y-2 -rotate-[20deg] rounded-[58%42%55%45%/56%45%55%44%] border border-foreground transition-transform duration-300 ease-[cubic-bezier(0.5,2.5,0.5,0.5)] group-hover:translate-y-4 group-hover:rotate-0" />
-        <div class="absolute h-[80%] w-[95%] translate-y-2 rotate-[20deg] rounded-[58%42%55%48%/56%45%60%44%] bg-foreground transition-transform duration-300  ease-[cubic-bezier(0.5,2.5,0.5,0.5)] group-hover:h-[81%] group-hover:w-[98%] group-hover:rotate-0 group-hover:rounded-[46%54%58%42%/48%35%65%52%]" />
-        <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-background">
+        <div class="absolute h-[83%] w-[95%] translate-y-2 -rotate-[20deg] rounded-[58%42%55%45%/56%45%55%44%] border border-light transition-transform duration-300 ease-[cubic-bezier(0.5,2.5,0.5,0.5)] group-hover:translate-y-4 group-hover:rotate-0" />
+        <div class="absolute h-[80%] w-[95%] translate-y-2 rotate-[20deg] rounded-[58%42%55%48%/56%45%60%44%] bg-light transition-transform duration-300  ease-[cubic-bezier(0.5,2.5,0.5,0.5)] group-hover:h-[81%] group-hover:w-[98%] group-hover:rotate-0 group-hover:rounded-[46%54%58%42%/48%35%65%52%]" />
+        <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-dark">
           {label}
         </div>
       </Link>

src/components/landing/landing.tsx

@@ -8,7 +8,7 @@ import ScrollDown from "../scroll-down/scroll-down";
 export default component$(() => {
   return (
     <div
-      class="relative flex h-[100vh] flex-col bg-cover bg-center [--bg-filter:theme(colors.background/50%)]"
+      class="relative flex min-h-screen flex-col bg-cover bg-center [--bg-filter:theme(colors.dark/50%)]"
       style={{
         backgroundImage: `linear-gradient(var(--bg-filter), var(--bg-filter)), url('${bgImg}')`,
       }}

src/components/scroll-down/scroll-down.tsx

@@ -6,7 +6,7 @@ export default component$(() => {
       <div class="flex h-10 w-6 justify-center rounded-xl border-2 border-current">
         <div class="mt-2 h-1 w-1 animate-deepBounce rounded-[50%] bg-current [animation-duration:300ms]" />
       </div>
-      <div class="mb-3 flex flex-col py-1">
+      <div class="mb-6 flex flex-col py-1">
         <div class="h-3 w-3 rotate-45 animate-deepPulse border-b-2 border-r-2 border-current opacity-25 [animation-delay:100ms]" />
         <div class="h-3 w-3 rotate-45 animate-deepPulse border-b-2 border-r-2 border-current opacity-25 [animation-delay:200ms]" />
         <div class="h-3 w-3 rotate-45 animate-deepPulse border-b-2 border-r-2 border-current opacity-25 [animation-delay:300ms]" />

src/components/skill/skill.tsx

@@ -0,0 +1,65 @@
+import { component$ } from "@builder.io/qwik";
+
+export default component$(() => {
+  return (
+    <section class="bg-warning px-4 py-8 text-dark">
+      <div class="overflow-hidden whitespace-nowrap text-lg lg:text-2xl xl:text-3xl">
+        <h2 class="mb-4 text-center font-bold">My expertise</h2>
+        <div class="flex flex-col gap-2 lg:gap-4 xl:gap-6">
+          <ul
+            class="flex animate-move gap-6 self-start"
+            style={{ "--tw-move": "calc(98vw - 100% - 2rem)" }}
+          >
+            {[
+              "Web Development",
+              "Open-source Contributor",
+              "Frontend",
+              "Backend",
+              "Testing",
+              "API Development",
+              "RESPONSIVE",
+              "Portfolio",
+              "REACT",
+              "Qwik",
+              "Automation",
+              "E-commerce",
+            ].map((x) => (
+              <li key={x}>{x}</li>
+            ))}
+          </ul>
+          <ul
+            class="flex animate-move flex-row-reverse gap-6 self-end"
+            style={{ "--tw-move": "calc(-98vw + 100% + 2rem)" }}
+          >
+            {[
+              "Javascript",
+              "Typescript",
+              "Rust",
+              "Springboot",
+              "C",
+              "C++",
+              "C#",
+              "Java",
+              "Lua",
+              "E-commerce",
+              "JQuery",
+              "Qwik",
+              "React js",
+              "Next js",
+              "Node js",
+              "MySQL",
+              "Tailwind CSS",
+              "Sass",
+              "MongoDB",
+              "Cypress",
+              "Selenium",
+              "Playwright",
+            ].map((x) => (
+              <li key={x}>{x}</li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </section>
+  );
+});

src/global.css

@@ -7,5 +7,5 @@
 @tailwind utilities;
 
 :root {
-  @apply bg-background text-foreground;
+  @apply bg-dark text-light;
 }

src/routes/404.tsx

@@ -7,7 +7,7 @@ import Social from "~/components/social/social";
 export default component$(() => {
   return (
     <div
-      class="relative flex min-h-[100vh] flex-col bg-cover bg-center [--bg-filter:theme(colors.background/50%)]"
+      class="relative flex min-h-screen flex-col bg-cover bg-center [--bg-filter:theme(colors.dark/50%)]"
       style={{
         backgroundImage: `linear-gradient(var(--bg-filter), var(--bg-filter)), url('${bgImg}')`,
       }}

src/routes/index.tsx

@@ -1,11 +1,13 @@
 import { component$ } from "@builder.io/qwik";
 import type { DocumentHead } from "@builder.io/qwik-city";
 import Landing from "~/components/landing/landing";
+import Skill from "~/components/skill/skill";
 
 export default component$(() => {
   return (
     <>
       <Landing />
+      <Skill />
     </>
   );
 });

tailwind.config.js

@@ -10,13 +10,17 @@ export default {
       secondary: colors.pink["500"],
       success: colors.green["500"],
       danger: colors.red["500"],
-      warning: colors.yellow["500"],
+      warning: colors.yellow["300"],
       info: colors.cyan["500"],
-      foreground: colors.gray["50"],
-      background: colors.gray["950"],
+      light: colors.gray["50"],
+      dark: colors.gray["950"],
     },
     extend: {
       keyframes: {
+        move: {
+          "0%": { transform: "translate3d(0,0,0)" },
+          "100%": { transform: "translate3d(var(--tw-move,100%),0,0)" },
+        },
         deepPulse: {
           "0%, 100%": { opacity: 1 },
           "50%": { opacity: 0 },
@@ -34,6 +38,7 @@ export default {
         },
       },
       animation: {
+        move: "move 30s alternate linear infinite",
         deepPulse: "deepPulse 1s alternate infinite",
         deepBounce: "deepBounce 1s infinite",
         around: "around 1s infinite",