add Skills section

app/page.tsx

@@ -1,5 +1,6 @@
 import { About } from '@/components/about';
 import { Person } from '@/components/person';
+import { Skills } from '@/components/skills';
 import { Work } from '@/components/work';
 
 export default function HomePage() {
@@ -8,6 +9,7 @@ export default function HomePage() {
       <Person />
       <About />
       <Work />
+      <Skills />
     </main>
   );
 }

components/skills.tsx

@@ -1,13 +1,27 @@
-import { useTranslations } from 'next-intl';
+import { Badge } from './ui/badge';
 
-export function About() {
-  const t = useTranslations('Skills');
+const skills = [
+  'React',
+  'Next.js',
+  'Typescript',
+  'GraphQL',
+  'ESLint',
+  'Tailwind',
+  'MobX',
+  'Node.js',
+  'Docker',
+  'MongoDB',
+  'Redis',
+  'JWT',
+];
+
+export function Skills() {
   return (
     <section id="skills">
       <div className="flex min-h-0 flex-col gap-y-3">
         <h2 className="text-xl font-bold">Skills</h2>
         <div className="flex flex-wrap gap-1">
-          {DATA.skills.map((skill, id) => (
+          {skills.map((skill) => (
             <Badge key={skill}>{skill}</Badge>
           ))}
         </div>

components/ui/badge.tsx

@@ -0,0 +1,31 @@
+import { cn } from '@/lib/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    defaultVariants: {
+      variant: 'default',
+    },
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
+        outline: 'text-foreground',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+      },
+    },
+  },
+);
+
+export type BadgeProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof badgeVariants> & {};
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };