web/src/components/about/current-focus.tsx

import { Code2, BookOpen, RocketIcon, Compass } from "lucide-react";
import { AnimateIn } from "@/components/animate-in";

export default function CurrentFocus() {
  const recentProjects = [
    {
      title: "Darkbox",
      description: "My gruvbox theme, with a pure black background",
      href: "/projects/darkbox",
      tech: ["Neovim", "Lua"],
    },
    {
      title: "Revive Auto Parts",
      description: "A car parts listing site built for a client",
      href: "/projects/reviveauto",
      tech: ["Tanstack", "React Query", "Fastapi"],
    },
    {
      title: "Fhccenter",
      description: "Website made for a private school",
      href: "/projects/fhccenter",
      tech: ["Nextjs", "Typescript", "Prisma"],
    },
  ];

  return (
    <div className="flex justify-center items-center w-full">
      <div className="w-full max-w-6xl p-4 sm:px-6 py-6 sm:py-8">
        <AnimateIn>
          <h2 className="text-3xl sm:text-4xl font-bold text-center text-yellow-bright mb-8 sm:mb-12">
            Current Focus
          </h2>
        </AnimateIn>

        {/* Recent Projects Section */}
        <div className="mb-8 sm:mb-16">
          <AnimateIn delay={100}>
            <div className="flex items-center justify-center gap-2 mb-6">
              <Code2 className="text-yellow-bright" size={24} />
              <h3 className="text-xl font-bold text-foreground/90">Recent Projects</h3>
            </div>
          </AnimateIn>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 max-w-5xl mx-auto">
            {recentProjects.map((project, i) => (
              <AnimateIn key={project.title} delay={200 + i * 100}>
                <a
                  href={project.href}
                  className="block p-4 sm:p-6 rounded-lg border border-foreground/10 hover:border-yellow-bright/50
                           transition-colors duration-300 group bg-background/50 h-full"
                >
                  <h4 className="font-bold text-lg group-hover:text-yellow-bright transition-colors">
                    {project.title}
                  </h4>
                  <p className="text-foreground/70 mt-2 text-sm sm:text-base">{project.description}</p>
                  <div className="flex flex-wrap gap-2 mt-3">
                    {project.tech.map((tech) => (
                      <span key={tech} className="text-xs px-2 py-1 rounded-full bg-foreground/5 text-foreground/60">
                        {tech}
                      </span>
                    ))}
                  </div>
                </a>
              </AnimateIn>
            ))}
          </div>
        </div>

        {/* Current Learning & Interests */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 max-w-5xl mx-auto">
          <AnimateIn delay={100}>
            <div className="space-y-4 p-4 sm:p-6 rounded-lg border border-foreground/10 bg-background/50 h-full">
              <div className="flex items-center justify-center gap-2">
                <BookOpen className="text-green-bright" size={24} />
                <h3 className="text-lg sm:text-xl font-bold text-foreground/90">Currently Learning</h3>
              </div>
              <ul className="space-y-3 text-sm sm:text-base text-foreground/70">
                <li className="flex items-center gap-2">
                  <span className="w-1.5 h-1.5 rounded-full bg-green-bright flex-shrink-0" />
                  <span>Rust Programming</span>
                </li>
                <li className="flex items-center gap-2">
                  <span className="w-1.5 h-1.5 rounded-full bg-green-bright flex-shrink-0" />
                  <span>WebAssembly with Rust</span>
                </li>
                <li className="flex items-center gap-2">
                  <span className="w-1.5 h-1.5 rounded-full bg-green-bright flex-shrink-0" />
                  <span>HTTP/3 & WebTransport</span>
                </li>
              </ul>
            </div>
          </AnimateIn>

          <AnimateIn delay={200}>
            <div className="space-y-4 p-4 sm:p-6 rounded-lg border border-foreground/10 bg-background/50 h-full">
              <div className="flex items-center justify-center gap-2">
                <RocketIcon className="text-blue-bright" size={24} />
                <h3 className="text-lg sm:text-xl font-bold text-foreground/90">Project Interests</h3>
              </div>
              <ul className="space-y-3 text-sm sm:text-base text-foreground/70">
                <li className="flex items-center gap-2">
                  <span className="w-1.5 h-1.5 rounded-full bg-blue-bright flex-shrink-0" />
                  <span>AI Model Integration</span>
                </li>
                <li className="flex items-center gap-2">
                  <span className="w-1.5 h-1.5 rounded-full bg-blue-bright flex-shrink-0" />
                  <span>Rust Systems Programming</span>
                </li>
                <li className="flex items-center gap-2">
                  <span className="w-1.5 h-1.5 rounded-full bg-blue-bright flex-shrink-0" />
                  <span>Cross-platform WASM Apps</span>
                </li>
              </ul>
            </div>
          </AnimateIn>

          <AnimateIn delay={300}>
            <div className="space-y-4 p-4 sm:p-6 rounded-lg border border-foreground/10 bg-background/50 h-full">
              <div className="flex items-center justify-center gap-2">
                <Compass className="text-purple-bright" size={24} />
                <h3 className="text-lg sm:text-xl font-bold text-foreground/90">Want to Explore</h3>
              </div>
              <ul className="space-y-3 text-sm sm:text-base text-foreground/70">
                <li className="flex items-center gap-2">
                  <span className="w-1.5 h-1.5 rounded-full bg-purple-bright flex-shrink-0" />
                  <span>LLM Fine-tuning</span>
                </li>
                <li className="flex items-center gap-2">
                  <span className="w-1.5 h-1.5 rounded-full bg-purple-bright flex-shrink-0" />
                  <span>Rust 2024 Edition</span>
                </li>
                <li className="flex items-center gap-2">
                  <span className="w-1.5 h-1.5 rounded-full bg-purple-bright flex-shrink-0" />
                  <span>Real-time Web Transport</span>
                </li>
              </ul>
            </div>
          </AnimateIn>
        </div>
      </div>
    </div>
  );
}