initial commit

components/languages.tsx

@@ -0,0 +1,46 @@
+'use client'
+import { NextjsIcon, ResendIcon, StripeIcon, TailwindcssIcon } from './icons'
+import Marquee from 'react-fast-marquee'
+
+const languages = [
+  {
+    label: 'Stripe',
+    icon: StripeIcon,
+    className: 'w-36 h-auto aspect-square'
+  },
+  {
+    label: 'Resend',
+    icon: ResendIcon,
+    className: 'w-36 p-5 h-auto aspect-square'
+  },
+  {
+    label: 'TailwindCSS',
+    icon: TailwindcssIcon,
+    className: 'w-48 px-5 h-auto aspect-square'
+  },
+  {
+    label: 'NextJS',
+    icon: NextjsIcon,
+    className: 'w-36 p-5 h-auto aspect-square'
+  }
+]
+
+export function Language() {
+  return (
+    <section className="relative">
+      <div className="absolute top-0 left-0 w-1/4 h-full bg-gradient-to-r from-background pointer-events-none z-10"></div>
+      <div className="absolute top-0 right-0 w-1/4 h-full bg-gradient-to-r from-transparent to-background pointer-events-none z-10"></div>
+      <Marquee speed={30} autoFill>
+        {languages.map((language, i) => (
+          <language.icon
+            key={i}
+            className={
+              language.className +
+              'text-foreground opacity-50 hover:opacity-100 transition duration-300 ml-32 cursor-pointer'
+            }
+          />
+        ))}
+      </Marquee>
+    </section>
+  )
+}