Repository: Alfinpratamaa/HWID-SPOOFER
Branch: main
Commit: 47125543225a
Files: 39
Total size: 79.1 KB

Directory structure:
gitextract_riayleb2/

├── .gitignore
├── .nvmrc
├── README.md
├── app/
│   ├── about/
│   │   └── page.tsx
│   ├── api/
│   │   └── contact/
│   │       └── route.ts
│   ├── blogs/
│   │   ├── [slug]/
│   │   │   ├── PostContent.tsx
│   │   │   └── page.tsx
│   │   └── page.tsx
│   ├── contact/
│   │   └── page.tsx
│   ├── globals.css
│   ├── layout.tsx
│   ├── page.tsx
│   ├── robots.ts
│   └── sitemap.ts
├── components/
│   ├── AboutSection.tsx
│   ├── BackgroundStar.tsx
│   ├── Banner.tsx
│   ├── BlogClientPage.tsx
│   ├── ClientEffects.tsx
│   ├── CursorBacground.tsx
│   ├── LinksCard.tsx
│   ├── Navbar.tsx
│   ├── NebulaEffect.tsx
│   ├── ProjectCard.tsx
│   ├── ProjectSection.tsx
│   ├── Skills.tsx
│   ├── about.tsx
│   └── contact.tsx
├── libs/
│   ├── NavbarLinks.ts
│   ├── constant.ts
│   └── sanity.client.ts
├── next.config.mjs
├── package.json
├── postcss.config.mjs
├── provider/
│   ├── ClientProvicer.tsx
│   └── SkillData.tsx
├── tailwind.config.js
├── tsconfig.json
└── types/
    └── index.ts

================================================
FILE CONTENTS
================================================

================================================
FILE: .gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js
.yarn/install-state.gz

# testing
/coverage

# next.js
/.next/
/out/

# production
/build


# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# local env files
.env*.local

# vercel
.vercel

.env.local


# typescript
*.tsbuildinfo
next-env.d.ts


================================================
FILE: .nvmrc
================================================
20.19.1

================================================
FILE: README.md
================================================
hello world

================================================
FILE: app/about/page.tsx
================================================
import AboutSection from "@/components/AboutSection";
import { Metadata } from "next";
import React from "react";

export const metadata: Metadata = {
  title: "About | evrea",
  description:
    "Frontendwith 1+ years of expertise. Junior Software Engineer. Specializing web apps, UX, and JavaScript technologies.",
  keywords: [
    "Developer",
    "Portfolio",
    "Developer Portflio",
    "Muhamad Alfin Pratama",
    "Next.js",
    "React",
    "ReactNative",
    "Android",
    "nodejs",
    "alfin",
    "alfin pratama",
    "muhamad alfin",
    "muhamad alfin pratama",
    "muhammad alfin pratama",
    "frontend web",
    "Frontend Developer",
    "Front-end Developer",
    "Front End Developer",
    "Frontend Engineer",
    "Front-end Engineer",
    "Front End Engineer",
    "Muhamad Alfin",
    "Alfin Pratama",
    "Muhamad",
    "Alfin",
    "Pratama",
    "evrea",
  ],
};

const AboutPage = () => {
  return (
    <main className="w-full min-h-screen bg-transparent pt-28 pb-12 px-4 md:px-8">
      <AboutSection />
    </main>
  );
};

export default AboutPage;


================================================
FILE: app/api/contact/route.ts
================================================
export const runtime = "edge";

export const POST = async (req: Request) => {
  try {
    const { name, email, subject, message } = await req.json();

    if (!name || !email || !subject || !message) {
      return Response.json(
        { error: "Please fill in all fields" },
        { status: 400 }
      );
    }

    const res = await fetch(
      `https://api.mailgun.net/v3/${process.env.MAILGUN_DOMAIN}/messages`,
      {
        method: "POST",
        headers: {
          Authorization: `Basic ${btoa(`api:${process.env.MAILGUN_PASSWORD}`)}`,
          "Content-Type": "application/x-www-form-urlencoded",
        },
        body: new URLSearchParams({
          from: process.env.MAILGUN_EMAIL!,
          to: "muhamadalfinpratamaa@gmail.com",
          subject,
          text: message,
        }),
      }
    );

    if (!res.ok) throw new Error("Failed to send email");

    return Response.json({ message: "Email sent" }, { status: 200 });
  } catch (error) {
    console.error(error);
    return Response.json({ error: "Error sending email" }, { status: 500 });
  }
};


================================================
FILE: app/blogs/[slug]/PostContent.tsx
================================================
import Image from "next/image";
import { PortableText } from "@portabletext/react";

export default function PostContent({ post, ptComponents, urlFor }: any) {
  return (
    <section className="min-h-screen py-24 px-4 text-white">
      <div className="max-w-5xl mx-auto grid gap-6 md:grid-cols-3">
        <div className="col-span-full bg-neutral-900/50 border border-neutral-700 rounded-xl p-8">
          <h1 className="text-4xl md:text-5xl font-bold mb-6 text-white">
            {post.title}
          </h1>
          {post.mainImage && (
            <div className="relative w-full h-72 md:h-96 rounded-xl overflow-hidden border border-neutral-700">
              <Image
                src={urlFor(post.mainImage).url()}
                alt={post.title}
                fill
                className="object-cover"
                priority
              />
            </div>
          )}
        </div>

        <div className="col-span-full md:col-span-2 bg-neutral-900/50 border border-neutral-700 rounded-xl p-8 prose prose-invert max-w-none">
          <PortableText value={post.body} components={ptComponents} />
        </div>
      </div>
    </section>
  );
}


================================================
FILE: app/blogs/[slug]/page.tsx
================================================
import { client } from "@/libs/sanity.client";
import imageUrlBuilder from "@sanity/image-url";
import { groq } from "next-sanity";
import Image from "next/image";
import { notFound } from "next/navigation";
import { PortableText } from "@portabletext/react";
import { Metadata } from "next";

export const runtime = "edge";

const builder = imageUrlBuilder(client);
function urlFor(source: any) {
  return builder.image(source);
}

const postQuery = groq`*[_type == "post" && slug.current == $slug][0] {
  ...,
  author-> { 
    name,
    image,
    bio
  },
  "categories": categories[]->title 
}`;

const ptComponents = {
  types: {
    image: ({ value }: { value: any }) => {
      if (!value?.asset?._ref) return null;
      return (
        <div className="relative w-full h-96 my-8">
          <Image
            src={urlFor(value).url()}
            alt={value.alt || "Gambar dari artikel"}
            fill
            priority
            className="object-contain"
          />
        </div>
      );
    },
  },
  block: {
    h1: ({ children }: any) => (
      <h1 className="text-4xl font-bold text-white my-6">{children}</h1>
    ),
    h2: ({ children }: any) => (
      <h2 className="text-3xl font-semibold text-white my-4">{children}</h2>
    ),
    h3: ({ children }: any) => (
      <h3 className="text-2xl font-semibold text-white my-3">{children}</h3>
    ),
    normal: ({ children }: any) => <p className="leading-7 my-4">{children}</p>,
    blockquote: ({ children }: any) => (
      <blockquote className="border-l-4 border-purple-400 pl-4 italic my-4">
        {children}
      </blockquote>
    ),
  },
  marks: {
    strong: ({ children }: any) => (
      <strong className="font-bold text-white">{children}</strong>
    ),
    em: ({ children }: any) => (
      <em className="italic text-white">{children}</em>
    ),
    link: ({ value, children }: any) => {
      const target = (value?.href || "").startsWith("http")
        ? "_blank"
        : undefined;
      return (
        <a
          href={value?.href}
          target={target}
          rel={target === "_blank" ? "noopener noreferrer" : undefined}
          className="text-purple-400 hover:text-purple-300 underline"
        >
          {children}
        </a>
      );
    },
  },
  list: {
    bullet: ({ children }: any) => (
      <ul className="list-disc ml-6 space-y-2">{children}</ul>
    ),
    number: ({ children }: any) => (
      <ol className="list-decimal ml-6 space-y-2">{children}</ol>
    ),
  },
};

type PageProps = {
  params: Promise<{ slug: string }>;
};

// Generate dynamic metadata
export async function generateMetadata({
  params,
}: PageProps): Promise<Metadata> {
  const { slug } = await params;
  const post = await client.fetch(postQuery, { slug });

  if (!post) {
    return {
      title: "Post Not Found",
      description: "The blog post you're looking for doesn't exist.",
    };
  }

  const getPlainTextFromBody = (body: any[]): string => {
    if (!body || !Array.isArray(body)) return "";

    return body
      .filter((block) => block._type === "block" && block.style === "normal")
      .map((block) => block.children?.map((child: any) => child.text).join(""))
      .join(" ")
      .slice(0, 160);
  };

  const description =
    post.excerpt || getPlainTextFromBody(post.body) || "Read this blog post";
  const imageUrl = post.mainImage
    ? urlFor(post.mainImage).width(1200).height(630).url()
    : null;

  return {
    title: `${post.title} - Blog Alfin Pratama`,
    description,
    keywords: post.categories?.join(", "),
    authors: [{ name: post.author?.name || "Anonymous" }],
    openGraph: {
      title: post.title,
      description,
      type: "article",
      publishedTime: post.publishedAt,
      authors: [post.author?.name || "Anonymous"],
      images: imageUrl
        ? [
            {
              url: imageUrl,
              width: 1200,
              height: 630,
              alt: post.title,
            },
          ]
        : [],
    },
    twitter: {
      card: "summary_large_image",
      title: post.title,
      description,
      images: imageUrl ? [imageUrl] : [],
    },
    alternates: {
      canonical: `/blogs/${slug}`,
    },
  };
}

export default async function PostPage({ params }: PageProps) {
  const { slug } = await params;
  const post = await client.fetch(postQuery, { slug });

  if (!post) {
    notFound();
  }

  return (
    <article className="min-h-screen py-28  text-white">
      <div className="max-w-5xl rounded-xl mx-auto bg-neutral-900/50 border border-neutral-700 p-10">
        {/* Header Artikel */}
        <div className="text-center mb-12">
          <h1 className="text-4xl md:text-5xl font-extrabold tracking-tight mb-4">
            {post.title}
          </h1>
          <div className="flex items-center justify-center space-x-4 text-gray-400">
            <div className="flex items-center space-x-2">
              {post.author?.image && (
                <Image
                  src={
                    post.authorImage?.asset
                      ? urlFor(post.authorImage).width(40).height(40).url()
                      : "/default-avatar.jpg"
                  }
                  alt={`Foto ${post.authorName}`}
                  width={40}
                  height={40}
                  className="rounded-full"
                />
              )}
              <span>{post.author?.name || "Anonim"}</span>
            </div>
            <span>&bull;</span>
            <span>{new Date(post.publishedAt).toLocaleDateString()}</span>
          </div>
        </div>

        <div className="relative w-full h-64 md:h-96 rounded-lg overflow-hidden mb-12 shadow-lg">
          <Image
            src={urlFor(post.mainImage).url()}
            alt={`Gambar utama untuk ${post.title}`}
            layout="fill"
            objectFit="cover"
            priority
          />
        </div>

        <div className="prose prose-invert prose-lg max-w-none prose-h1:text-purple-400 prose-a:text-purple-400 hover:prose-a:text-purple-300">
          <PortableText value={post.body} components={ptComponents} />
        </div>
      </div>
    </article>
  );
}


================================================
FILE: app/blogs/page.tsx
================================================
import { client } from "@/libs/sanity.client";
import { groq } from "next-sanity";
import BlogClientPage from "@/components/BlogClientPage"; // Kita akan buat komponen ini
import { Metadata } from "next";

export const runtime = 'edge';

export const metadata: Metadata = {
  title: "Blog - Alfin Pratama",
  description:
    "Sharing my thoughts, experiences, and insights on web development, programming, and technology.",
  openGraph: {
    title: "Blog - Alfin Pratama",
    description:
      "Sharing my thoughts, experiences, and insights on web development, programming, and technology.",
    url: "https://evrea.tech/blogs",
    siteName: "Alfin Pratama",
    images: [
      {
        url: "https://evrea.tech/avatar2_.webp",
        width: 1200,
        height: 630,
        alt: "Blog - Alfin Pratama",
      },
    ],
    locale: "id_ID",
    type: "website",
  },
  keywords: [
    "blog",
    "web development",
    "programming",
    "technology",
    "javascript",
    "react",
    "next.js",
    "sanity.io",
    "tailwindcss",
    "personal blog",
    "blog alfin",
    "coding",
    "software development",
    "frontend",
    "backend",
    "fullstack",
    "tutorials",
    "tips and tricks",
    "web design",
    "developer insights",
    "blog evrea",
  ],
};

export interface Post {
  _id: string;
  title: string;
  slug: { current: string };
  mainImage: any;
  publishedAt: string;
  authorName: string;
  authorImage: any;
  categories: Category[];
}

export interface Category {
  _id: string;
  title: string;
  slug: { current: string };
}

const postsQuery = groq`*[_type == "post"] | order(publishedAt desc) {
  _id,
  title,
  slug,
  mainImage,
  publishedAt,
  "authorName": author->name, 
  "authorImage": author->image,
  "categories": categories[]->{ _id, title, slug }
}`;

const categoriesQuery = groq`*[_type == "category"] | order(title asc) {
  _id,
  title,
  slug
}`;

export default async function BlogPage() {
  const posts: Post[] = await client.fetch(
    postsQuery,
    {},
    { cache: "no-store" }
  );

  const categories: Category[] = await client.fetch(
    categoriesQuery,
    {},
    {
      cache: "no-store",
    }
  );

  return <BlogClientPage posts={posts} categories={categories} />;
}


================================================
FILE: app/contact/page.tsx
================================================
import { type Metadata } from "next";
import ContactForm from "@/components/contact";

export const metadata: Metadata = {
  title: "Contact | evrea",
  description:
    "Contact me via email to start a conversation or ask me anything",
  keywords: [
    "Contact",
    "Portfolio",
    "Developer Portflio",
    "Muhamad Alfin Pratama",
    "Next.js",
    "React",
    "ReactNative",
    "Android",
    "nodejs",
    "alfin",
    "alfin pratama",
    "muhamad alfin",
    "muhamad alfin pratama",
    "muhammad alfin pratama",
    "frontend web",
    "Frontend Developer",
    "Front-end Developer",
    "Front End Developer",
    "Frontend Engineer",
    "Front-end Engineer",
    "Front End Engineer",
    "Muhamad Alfin",
    "Alfin Pratama",
    "Muhamad",
    "Alfin",
    "Pratama",
    "evrea",
  ],
};

const ContactPage = () => {
  return <ContactForm />;
};
export default ContactPage;


================================================
FILE: app/globals.css
================================================
@import "tailwindcss";

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@layer components {
  .banner-heading {
    @apply text-4xl font-bold text-white md:text-5xl;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb));
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

.custom-scrollbar {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #6b21a8 #262626; /* thumb, track */
}

/* Chrome, Edge, Safari */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px; /* lebar scrollbar */
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #262626; /* warna track */
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #6b21a8; /* warna thumb */
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #9333ea; /* hover state */
}


================================================
FILE: app/layout.tsx
================================================
import type { Metadata } from "next";
import { Poppins } from "next/font/google";
import "./globals.css";
import Navbar from "@/components/Navbar";
import ClientEffects from "@/components/ClientEffects";
import { ClientProvider } from "@/provider/ClientProvicer";
import CursorBackground from "@/components/CursorBacground";
const poppins = Poppins({
  subsets: ["latin"],
  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
  variable: "--font-poppins",
});

export const metadata: Metadata = {
  metadataBase: new URL("https://alfinpratamaa.github.io/"),
  title: "Muhamad Alfin Pratama",
  description:
    "Fullstack Developer & DevOps Engineer with 1+ years of expertise in JavaScript, TypeScript, Golang, and PHP. Experienced with Next.js, React.js, Laravel frameworks, Docker containerization, VPS hosting, and CI/CD pipelines.",
  keywords: [
    "Fullstack Developer",
    "DevOps Engineer",
    "Portfolio",
    "Developer Portfolio",
    "Muhamad Alfin Pratama",
    "Next.js",
    "React",
    "ReactNative",
    "Laravel",
    "JavaScript",
    "TypeScript",
    "Golang",
    "PHP",
    "Docker",
    "VPS Hosting",
    "CI/CD",
    "DevOps",
    "Backend Developer",
    "Frontend Developer",
    "Fullstack",
    "Web Developer",
    "Software Engineer",
    "Software Developer",
    "Devops Engineer",
    "web development",
    "programming",
    "alfin",
    "alfin pratama",
    "muhamad alfin",
    "muhamad alfin pratama",
    "muhammad alfin pratama",
    "Muhamad Alfin",
    "Alfin Pratama",
    "Muhamad",
    "Alfin",
    "Pratama",
    "evrea",
  ],
  creator: "Muhamad Alfin Pratama",
  applicationName: "evrea",
  icons: "/avatar_2.webp",
  openGraph: {
    title: "Muhamad Alfin Pratama",
    description:
      "Fullstack Developer & DevOps Engineer with 1+ years of expertise in JavaScript, TypeScript, Golang, and PHP. Specializing in Next.js, React.js, Laravel, Docker, VPS hosting, and CI/CD pipelines.",
    images: "/Avatar_2.webp",
  },
  alternates: {
    canonical: "https://evrea.tech",
  },
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" className="dark">
      <head>
        <link
          rel="preload"
          as="image"
          href="/avatar_2.webp"
          type="image/webp"
        />
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="shortcut icon" href="/avatar_2.jpeg" />
      </head>
      <body
        className={`${poppins.className} min-h-screen overflow-y-scroll overflow-x-hidden relative bg-black`}
      >
        <CursorBackground>
          <ClientProvider />
          <ClientEffects />
          <div className="relative z-[2]">
            <div className="mb-[10px]">
              <Navbar />
            </div>
            {children}
          </div>
        </CursorBackground>
      </body>
    </html>
  );
}


================================================
FILE: app/page.tsx
================================================
import Banner from "@/components/Banner";

export default function Home() {
  return (
    <main>
      <Banner />
    </main>
  );
}


================================================
FILE: app/robots.ts
================================================
import { MetadataRoute } from "next";

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: "*",
      allow: "/",
    },
    sitemap: "https://evrea.tech/sitemap.xml",
  };
}


================================================
FILE: app/sitemap.ts
================================================
// app/sitemap.ts

import { MetadataRoute } from "next";
import { client } from "@/libs/sanity.client";
import { groq } from "next-sanity";

// Definisikan tipe untuk data post yang diambil
interface Post {
  slug: {
    current: string;
  };
  _updatedAt: string; // Gunakan _updatedAt untuk lastModified
}

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const baseUrl = "https://evrea.tech";

  // 1. Ambil semua slug post dari Sanity
  const query = groq`*[_type == "post"]{ "slug": slug.current, _updatedAt }`;
  const posts: Post[] = await client.fetch(query);

  const postUrls = posts.map((post) => ({
    url: `${baseUrl}/blogs/${post.slug}`,
    lastModified: new Date(post._updatedAt),
    changeFrequency: "daily" as "daily",
    priority: 0.8,
  }));

  // 2. Gabungkan dengan URL statis Anda
  return [
    {
      url: baseUrl,
      lastModified: new Date(),
      changeFrequency: "daily",
      priority: 1,
    },
    {
      url: `${baseUrl}/about`,
      lastModified: new Date(),
      changeFrequency: "monthly",
      priority: 0.7,
    },
    {
      url: `${baseUrl}/blogs`,
      lastModified: new Date(),
      changeFrequency: "daily",
      priority: 0.9,
    },
    ...postUrls,
  ];
}


================================================
FILE: components/AboutSection.tsx
================================================
"use client";

import Image from "next/image";
import Link from "next/link";
import { motion } from "framer-motion";
import {
  FaGithub,
  FaInstagram,
  FaLinkedin,
  FaLocationDot,
  FaTelegram,
  FaWhatsapp,
  FaCalendar,
} from "react-icons/fa6";
import { MdOutlineWork } from "react-icons/md";
import Skills from "./Skills";
import { FaExternalLinkAlt } from "react-icons/fa";
import { ProjectsSection } from "./ProjectSection";

// Data untuk media sosial
const socials = [
  { icon: <FaInstagram />, href: "https://www.instagram.com/visfiveor5" },
  { icon: <FaLinkedin />, href: "https://www.linkedin.com/in/alfinpr" },
  { icon: <FaGithub />, href: "https://www.github.com/Alfinpratamaa" },
  { icon: <FaWhatsapp />, href: "https://wa.me/6285175369960" },
  { icon: <FaTelegram />, href: "https://t.me/visfiveor5" },
];

const AboutSection = () => {
  // Varian animasi untuk container utama (stagger effect)
  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1, // Setiap anak akan muncul dengan jeda 0.1 detik
      },
    },
  };

  // Varian animasi untuk setiap item di dalam grid
  const itemVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: { opacity: 1, y: 0, transition: { duration: 0.5 } },
  };

  return (
    <motion.div
      className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 max-w-5xl mx-auto"
      variants={containerVariants}
      initial="hidden"
      animate="visible"
    >
      {/* ======================================= */}
      {/* KARTU 1: PROFIL UTAMA                 */}
      {/* ======================================= */}
      <motion.div
        className="col-span-full md:col-span-2 row-span-2 bg-neutral-900/50 border border-neutral-700 rounded-xl p-6 flex flex-col md:flex-row items-center gap-6"
        variants={itemVariants}
      >
        <div className="flex-shrink-0">
          <Image
            src="/Me.png"
            alt="Muhamad Alfin Pratama"
            width={120}
            height={120}
            className="rounded-full object-cover grayscale hover:grayscale-0 transition-all duration-300"
          />
        </div>
        <div className="text-center md:text-left">
          <h1 className="text-2xl font-bold text-white">
            Muhamad Alfin Pratama
          </h1>
          <div className="relative mx-auto md:mx-0 w-3/4 mt-2 mb-3">
            <div className="absolute inset-0 h-0.5 bg-gradient-to-r from-purple-500 to-orange-400"></div>
          </div>
          <div className="flex items-center justify-center md:justify-start space-x-2 mt-4">
            <MdOutlineWork className="text-purple-400" />
            <p className="text-sm font-semibold text-white">
              Student | Frontend Web
            </p>
          </div>
          <div className="flex items-center justify-center md:justify-start space-x-2 mt-2">
            <FaLocationDot className="text-orange-400" />
            <p className="text-xs text-gray-400">
              Bandung, West Java, Indonesia
            </p>
          </div>
        </div>
      </motion.div>

      {/* ======================================= */}
      {/* KARTU 2: DESKRIPSI DIRI               */}
      {/* ======================================= */}
      <motion.div
        className="col-span-full md:col-span-1 lg:col-span-2 bg-neutral-900/50 border border-neutral-700 rounded-xl p-6"
        variants={itemVariants}
      >
        <p className="text-sm text-gray-300 leading-relaxed">
          I am a frontend developer with expertise in React, Next.js, and
          Tailwind CSS. Passionate about creating user-friendly interfaces and
          delivering high-quality code. Let's work together!
        </p>
      </motion.div>

      {/* ======================================= */}
      {/* KARTU 3: MEDIA SOSIAL                 */}
      {/* ======================================= */}
      <motion.div
        className="col-span-full md:col-span-1 lg:col-span-2 row-span-1 bg-neutral-900/50 border border-neutral-700 rounded-xl p-6 flex items-center justify-center"
        variants={itemVariants}
      >
        <div className="flex items-center justify-center gap-4">
          {socials.map((social, index) => (
            <Link
              href={social.href}
              key={index}
              target="_blank"
              rel="noopener noreferrer"
              className="text-gray-400 hover:text-white transition-colors text-2xl"
            >
              {social.icon}
            </Link>
          ))}
        </div>
      </motion.div>

      {/* ======================================= */}
      {/* KARTU 4: EXPERIENCE                   */}
      {/* ======================================= */}
      <motion.div
        className="col-span-full lg:col-span-2 bg-neutral-900/50 border border-neutral-700 rounded-xl p-6"
        variants={itemVariants}
      >
        <div className="flex items-center gap-3 mb-4">
          <MdOutlineWork className="text-purple-400 text-xl" />
          <h3 className="text-lg font-bold text-white">Experience</h3>
        </div>
        <div className="space-y-4">
          <div className="border-l-2 border-purple-400 pl-4">
            <div className="flex items-center gap-2 mb-2">
              <h4 className="text-white font-semibold">
                Frontend Developer Intern
              </h4>
            </div>
            <div className="flex items-center gap-2 mb-2">
              <Image
                src="https://pilihjurusan.id/favicon.ico"
                alt="Pilih Jurusan Logo"
                width={16}
                height={16}
                className="rounded"
              />
              <Link
                href="https://pilihjurusan.id"
                target="_blank"
                rel="noopener noreferrer"
                className="text-orange-400 text-sm font-medium hover:text-orange-300 transition-colors"
              >
                Pilih Jurusan
              </Link>
            </div>
            <div className="flex items-center gap-1 mb-3">
              <FaCalendar className="text-gray-400 text-xs" />
              <p className="text-gray-400 text-xs">
                September 2024 - December 2024
              </p>
            </div>
            <ul className="text-gray-300 text-sm space-y-2">
              <li>
                • Reorganized assets and components to improve code cleanliness
                and reusability
              </li>
              <li>
                • Adapted and implemented unit testing using Cypress according
                to the latest code
              </li>
              <li>
                • Developed new sections and pages based on project manager
                requests
              </li>
              <li>
                • Built CMS with Firebase integration and data interaction using
                server actions in Next.js
              </li>
            </ul>
          </div>
        </div>
      </motion.div>

      {/* ======================================= */}
      {/* KARTU 5: PROJECTS                     */}
      {/* ======================================= */}
      <ProjectsSection />

      {/* ======================================= */}
      {/* KARTU 6: SKILLS                       */}
      {/* ======================================= */}
      <motion.div
        className="col-span-full row-span-2 bg-neutral-900/50 border border-neutral-700 rounded-xl p-6"
        variants={itemVariants}
      >
        <Skills />
      </motion.div>
    </motion.div>
  );
};

export default AboutSection;


================================================
FILE: components/BackgroundStar.tsx
================================================
"use client";

import React, { useMemo, useRef } from "react";
import { Canvas, useFrame } from "@react-three/fiber";
import * as THREE from "three";
import { Points, PointMaterial } from "@react-three/drei";
// @ts-ignore
import * as random from "maath/random/dist/maath-random.esm";

const StarBackground = () => {
  const ref = useRef<THREE.Points>(null!);

  const positions = useMemo(
    () => random.inSphere(new Float32Array(5000 * 3), { radius: 1.2 }),
    []
  );
  const posRef = useRef<Float32Array>(positions.slice());

  useFrame((state, delta) => {
    if (!ref.current) return;

    const { mouse } = state;
    const pos = posRef.current;

    for (let i = 0; i < pos.length; i += 3) {
      const x = pos[i];
      const y = pos[i + 1];

      const mx = mouse.x * 1.2;
      const my = mouse.y * 1.2;

      const dx = x - mx;
      const dy = y - my;
      const dist = Math.sqrt(dx * dx + dy * dy);

      if (dist < 0.25) {
        const force = (0.25 - dist) * 0.03;
        pos[i] += dx * force;
        pos[i + 1] += dy * force;
      }
    }

    // kasih tau three.js kalau posisi berubah
    ref.current.geometry.attributes.position.needsUpdate = true;

    // rotasi background biar tetap hidup
    ref.current.rotation.x -= delta / 20;
    ref.current.rotation.y -= delta / 30;
  });

  return (
    <group rotation={[0, 0, Math.PI / 4]}>
      <Points ref={ref} positions={posRef.current} stride={3} frustumCulled>
        <PointMaterial
          transparent
          color="#ffffff"
          size={0.002}
          sizeAttenuation
          depthWrite={false}
        />
      </Points>
    </group>
  );
};

const StarsCanvas: React.FC = () => (
  <div className="w-full h-screen fixed inset-0 z-[1]">
    <Canvas camera={{ position: [0, 0, 1] }}>
      <StarBackground />
    </Canvas>
  </div>
);

export default StarsCanvas;


================================================
FILE: components/Banner.tsx
================================================
"use client";

import React from "react";
import Image from "next/image";
import Link from "next/link";
import dynamic from "next/dynamic";
import { motion } from "framer-motion";

const TypeAnimation = dynamic(
  () => import("react-type-animation").then((mod) => mod.TypeAnimation),
  { ssr: false }
);
const FaCloudDownloadAlt = dynamic(
  () => import("react-icons/fa").then((mod) => mod.FaCloudDownloadAlt),
  { ssr: false }
);

const Banner: React.FC = () => {
  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        delay: 0.2,
        staggerChildren: 0.2,
      },
    },
  };
  const itemVariants = {
    hidden: { opacity: 0, y: 30 },
    visible: { opacity: 1, y: 0, transition: { duration: 0.6 } },
  };
  const cardVariants = {
    hidden: { opacity: 0, scale: 0.9 },
    visible: { opacity: 1, scale: 1, transition: { duration: 0.7 } },
  };
  return (
    <motion.section
      className="flex items-center justify-center min-h-screen px-3 sm:px-4 py-6 sm:py-10"
      initial="hidden"
      animate="visible"
      variants={containerVariants}
    >
      <motion.div
        className="bg-neutral-900/40 backdrop-blur-sm border border-neutral-700/30 rounded-2xl sm:rounded-3xl p-4 sm:p-6 md:p-8 lg:p-12 max-w-4xl w-full shadow-2xl"
        variants={cardVariants}
      >
        <div className="flex flex-col lg:flex-row items-center gap-6 sm:gap-8 lg:gap-12">
          <motion.div className="flex-shrink-0" variants={itemVariants}>
            <div className="bg-neutral-700/50 p-3 sm:p-4 md:p-6 rounded-xl sm:rounded-2xl backdrop-blur-sm border border-neutral-600/30">
              <Image
                priority
                src="/avatar_2.webp"
                height={160}
                width={160}
                alt="Alfin"
                className="rounded-lg sm:rounded-xl hover:scale-105 transition-transform duration-300 w-32 h-32 sm:w-40 sm:h-40 md:w-[220px] md:h-[220px] object-cover"
              />
            </div>
          </motion.div>
          <motion.div
            className="flex-1 space-y-4 sm:space-y-6 text-center lg:text-left w-full"
            variants={itemVariants}
          >
            <motion.div
              className="space-y-1 sm:space-y-2"
              variants={itemVariants}
            >
              <h1 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold leading-tight">
                <span className="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-orange-400">
                  Hi,
                </span>
                <br className="sm:hidden" />
                <span className="sm:ml-2">I'm Alfin</span>
              </h1>
            </motion.div>

            {/* Typing Effect Card */}
            <motion.div
              className="bg-neutral-700/30 rounded-lg sm:rounded-xl p-3 sm:p-4 border border-neutral-600/20"
              variants={itemVariants}
            >
              <div className="flex items-center justify-center lg:justify-start">
                <div className="text-lg sm:text-xl md:text-2xl font-medium text-gray-200 text-center lg:text-left">
                  <TypeAnimation
                    sequence={[
                      "Fullstack Developer",
                      1000,
                      "DevOps Engineer",
                      1000,
                    ]}
                    wrapper="span"
                    speed={50}
                    repeat={Infinity}
                  />
                </div>
              </div>
            </motion.div>

            <motion.div
              className="bg-neutral-700/20 rounded-lg sm:rounded-xl p-3 sm:p-4 md:p-5 border border-neutral-600/20"
              initial={{ opacity: 1, y: 0 }}
              animate={{ opacity: 1, y: 0 }}
            >
              <h2 className="text-sm sm:text-base md:text-lg text-gray-200 leading-relaxed">
                Passionate Fullstack Developer with a focus on{" "}
                <span className="text-transparent font-semibold bg-clip-text bg-gradient-to-r from-purple-400 to-orange-400">
                  React.js, php, golang, nodejs
                </span>{" "}
                development using{" "}
                <span className="text-transparent font-semibold bg-clip-text bg-gradient-to-r from-purple-400 to-orange-400">
                  Next.js, laravel, gofiber, expressjs
                </span>{" "}
                framework, dedicated to crafting elegant and user-friendly web
                applications.
              </h2>
            </motion.div>

            {/* Action Buttons */}
            <motion.div
              className="flex flex-col sm:flex-row gap-3 sm:gap-4 pt-2 sm:pt-4 w-full"
              variants={itemVariants}
            >
              <motion.a
                href={"/cv-alfin.pdf"}
                target="_blank"
                rel="noopener noreferrer"
                className="group flex items-center justify-center gap-2 relative overflow-hidden bg-gradient-to-r from-purple-500 to-orange-400 text-white font-semibold px-4 sm:px-6 py-3 rounded-lg sm:rounded-xl transition-all duration-300 hover:shadow-lg hover:shadow-purple-500/25 min-h-[44px] sm:min-h-[48px] text-sm sm:text-base w-full sm:w-auto"
                variants={itemVariants}
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
              >
                Download CV{" "}
                <FaCloudDownloadAlt className="text-sm sm:text-base" />
              </motion.a>

              <motion.div
                variants={itemVariants}
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
                className="w-full sm:w-auto"
              >
                <Link
                  href={"/blogs"}
                  className="flex items-center justify-center bg-neutral-700/50 backdrop-blur-sm border border-neutral-600/30 text-white font-semibold px-4 sm:px-6 py-3 rounded-lg sm:rounded-xl hover:bg-neutral-600/50 transition-all duration-300 min-h-[44px] sm:min-h-[48px] text-sm sm:text-base w-full"
                >
                  See My blogs
                </Link>
              </motion.div>
            </motion.div>
          </motion.div>
        </div>
      </motion.div>
    </motion.section>
  );
};

export default Banner;


================================================
FILE: components/BlogClientPage.tsx
================================================
"use client";

import Link from "next/link";
import Image from "next/image";
import { useState } from "react";
import { client } from "@/libs/sanity.client";
import imageUrlBuilder from "@sanity/image-url";
import { Post, Category } from "@/app/blogs/page";

const builder = imageUrlBuilder(client);
function urlFor(source: any) {
  return builder.image(source);
}

interface BlogClientPageProps {
  posts: Post[];
  categories: Category[];
}

export default function BlogClientPage({
  posts,
  categories,
}: BlogClientPageProps) {
  const [filteredPosts, setFilteredPosts] = useState<Post[]>(posts);
  const [activeCategory, setActiveCategory] = useState<string>("all");

  const filterPosts = (categoryId: string) => {
    setActiveCategory(categoryId);

    if (categoryId === "all") {
      setFilteredPosts(posts);
    } else {
      const filtered = posts.filter((post) =>
        post.categories?.some((cat) => cat._id === categoryId)
      );
      setFilteredPosts(filtered);
    }
  };

  return (
    <div className="min-h-screen py-28 text-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Header */}
        <div className="text-center mb-8 bg-neutral-900/50 p-6 border border-neutral-700 rounded-xl shadow-lg">
          <h1 className="text-3xl md:text-5xl font-extrabold tracking-tight">
            My Blog
          </h1>
          <p className="mt-4 text-lg text-gray-400">
            Sharing my thoughts, experiences, and insights on web development,
            programming, and technology.
          </p>
        </div>

        {/* Category Tabs */}
        <div className="mb-8">
          <div className="bg-neutral-900/50 border border-neutral-700 rounded-xl p-6 shadow-lg">
            <h3 className="text-lg font-semibold mb-4 text-gray-300">
              Filter by category :
            </h3>
            <div className="flex flex-wrap gap-3">
              {/* Tab Semua */}
              <button
                onClick={() => filterPosts("all")}
                className={`px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 ${
                  activeCategory === "all"
                    ? "bg-purple-600 text-white shadow-lg shadow-purple-500/30"
                    : "bg-neutral-800 text-gray-300 hover:bg-neutral-700 hover:text-white"
                }`}
              >
                All Topics ({posts.length})
              </button>

              {/* Tab Categories */}
              {categories.map((category) => {
                const categoryPostCount = posts.filter((post) =>
                  post.categories?.some((cat) => cat._id === category._id)
                ).length;

                return (
                  <button
                    key={category._id}
                    onClick={() => filterPosts(category._id)}
                    className={`px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 ${
                      activeCategory === category._id
                        ? "bg-purple-600 text-white shadow-lg shadow-purple-500/30"
                        : "bg-neutral-800 text-gray-300 hover:bg-neutral-700 hover:text-white"
                    }`}
                  >
                    {category.title} ({categoryPostCount})
                  </button>
                );
              })}
            </div>
          </div>
        </div>

        {/* Posts Grid */}
        {filteredPosts.length === 0 ? (
          <div className="text-center py-12">
            <div className="bg-neutral-900/50 border border-neutral-700 rounded-xl p-8">
              <p className="text-gray-400 text-lg">
                Tidak ada artikel untuk kategori ini.
              </p>
            </div>
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {filteredPosts.map((post) => (
              <Link key={post._id} href={`/blogs/${post.slug.current}`}>
                <div className="group block p-3 bg-neutral-900/50 border border-neutral-700 rounded-xl overflow-hidden shadow-lg hover:shadow-purple-500/30 transition-all duration-300 hover:scale-105">
                  <div className="relative w-full h-48 rounded-lg overflow-hidden">
                    <Image
                      src={
                        post.mainImage
                          ? urlFor(post.mainImage).url()
                          : "https://via.placeholder.com/400x300?text=No+Image"
                      }
                      alt={`Gambar untuk ${post.title}`}
                      fill
                      className="object-cover group-hover:scale-110 transition-transform duration-300"
                    />
                  </div>

                  <div className="p-6">
                    {/* Categories Badge */}
                    {post.categories && post.categories.length > 0 && (
                      <div className="flex flex-wrap gap-2 mb-3">
                        {post.categories.slice(0, 2).map((category) => (
                          <span
                            key={category._id}
                            className="px-2 py-1 bg-purple-600/20 text-purple-300 text-xs rounded-full border border-purple-500/30"
                          >
                            {category.title}
                          </span>
                        ))}
                        {post.categories.length > 2 && (
                          <span className="px-2 py-1 bg-gray-600/20 text-gray-400 text-xs rounded-full">
                            +{post.categories.length - 2}
                          </span>
                        )}
                      </div>
                    )}

                    <h2 className="text-xl font-bold mb-2 line-clamp-2 group-hover:text-purple-400 transition-colors">
                      {post.title}
                    </h2>

                    <div className="flex items-center text-sm text-gray-400 mt-4">
                      <div className="relative w-8 h-8 rounded-full overflow-hidden mr-3">
                        {post.authorImage && (
                          <Image
                            src={
                              post.authorImage?.asset
                                ? urlFor(post.authorImage)
                                    .width(40)
                                    .height(40)
                                    .url()
                                : "/default-avatar.jpg"
                            }
                            alt={`Foto ${post.authorName}`}
                            fill
                            className="object-cover"
                          />
                        )}
                      </div>
                      <span>{post.authorName}</span>
                      <span className="mx-2">&bull;</span>
                      <span>
                        {new Date(post.publishedAt).toLocaleDateString("id-ID")}
                      </span>
                    </div>
                  </div>
                </div>
              </Link>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}


================================================
FILE: components/ClientEffects.tsx
================================================
"use client";
import dynamic from "next/dynamic";

const StarsCanvas = dynamic(() => import("./BackgroundStar"), {
  ssr: false,
});

const NebulaEffect = dynamic(
  () =>
    import("./NebulaEffect").then((mod) => ({
      default: mod.NebulaEffect,
    })),
  {
    ssr: false,
  }
);

export default function ClientEffects() {
  return (
    <>
      <StarsCanvas />
      <NebulaEffect />
    </>
  );
}


================================================
FILE: components/CursorBacground.tsx
================================================
"use client";

import { useState } from "react";

export default function CursorBackground({
  children,
}: {
  children: React.ReactNode;
}) {
  const [pos, setPos] = useState({ x: 0, y: 0 });

  return (
    <div
      className="relative min-h-screen bg-neutral-900/50 verflow-hidden"
      onMouseMove={(e) => setPos({ x: e.clientX, y: e.clientY })}
    >
      {/* Layer gradasi mengikuti mouse */}
      <div
        className="pointer-events-none fixed inset-0 z-0"
        style={{
          background: `radial-gradient(
            600px at ${pos.x}px ${pos.y}px,
            rgba(147, 51, 234, 0.35),   /* purple-600 */
            rgba(251, 146, 60, 0.15),   /* orange-400 */
            transparent 80%
          )`,
          transition: "background 0.1s ease",
        }}
      />

      {/* Konten utama di atas */}
      <div className="relative z-10">{children}</div>
    </div>
  );
}


================================================
FILE: components/LinksCard.tsx
================================================
import Image from "next/image";
interface LinksCardProps {
    name: string;
    icon?: any;
}

const LinksCard = ({ name, icon }: LinksCardProps) => {
    return (
        <div className=" w-[500px] z-[1] bg-gray-700 rounded-lg cursor-pointer hover:bg-gray-800 hover:-translate-y-3 transition-all ease-in-out duration-300">
            <div className="flex justify-center h-[60px] z-[1] cursor-pointer items-center gap-3">
                <h3 className="text-white">{name}</h3>
                <Image src={icon} alt={name} width={30} height={30} />
            </div>

        </div>
    )
}

export default LinksCard

================================================
FILE: components/Navbar.tsx
================================================
"use client";
import { NavbarLinks } from "@/libs/NavbarLinks";
import Link from "next/link";
import React, { useState } from "react";
import { motion } from "framer-motion";
import { AiOutlineClose, AiOutlineMenu } from "react-icons/ai";

const Navbar: React.FC<{}> = () => {
  const navItemVariants = {
    hidden: { opacity: 0, y: -20 },
    visible: { opacity: 1, y: 0, transition: { duration: 0.5 } },
  };

  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        delayChildren: 0.2,
        staggerChildren: 0.1,
      },
    },
  };

  const [nav, setNav] = useState(false);

  const handleNav = () => {
    setNav(!nav);
  };

  return (
    <div className="w-full h-[5px] bg-['#111'] fixed backdrop-blur-sm py-12 z-50 px-10">
      <motion.div
        variants={containerVariants}
        className="w-full h-full flex flex-row items-center justify-between px-[10px]"
      >
        <Link
          title="Evrea logo"
          href="/"
          className="h-auto w-auto flex flex-row items-center"
        >
          <motion.h1
            variants={navItemVariants}
            className=" bg-clip-text bg-gradient-to-r from-purple-500 to-orange-500 text-transparent text-2xl font-bold"
          >
            Evrea
          </motion.h1>
        </Link>

        {/* Navbar for desktop (sudah benar) */}
        <div className="md:flex hidden">
          <motion.ul
            initial="hidden"
            animate="visible"
            variants={containerVariants}
            className="flex gap-5 items-center"
          >
            {NavbarLinks.map((nav) => (
              <motion.li key={nav.href} variants={navItemVariants}>
                <Link
                  className="group text-white transition-all duration-300 ease-in-out"
                  href={nav.href}
                >
                  <span className="bg-left-bottom bg-gradient-to-r from-purple-500 to-orange-500 font-bold bg-[length:0%_2px] bg-no-repeat group-hover:bg-[length:100%_2px] transition-all duration-500 ease-out">
                    {nav.text}
                  </span>
                </Link>
              </motion.li>
            ))}
          </motion.ul>
        </div>

        {/* Navbar for mobile (bagian yang diperbaiki) */}
        <div className="block md:hidden">
          {/* PERBAIKAN 1: Mengubah div menjadi button untuk aksesibilitas */}
          <button
            onClick={handleNav}
            className="cursor-pointer"
            aria-label={nav ? "Close menu" : "Open menu"} // Memberi label yang jelas
            aria-expanded={nav} // Menandakan status menu (terbuka/tertutup)
            aria-controls="mobile-menu" // Menghubungkan tombol dengan menu
          >
            {nav ? (
              <AiOutlineClose className="text-white" size={20} />
            ) : (
              <AiOutlineMenu size={20} className="text-white" />
            )}
          </button>

          <div
            className={
              nav
                ? "fixed left-0 top-0 w-[60%] min-h-screen bg-gradient-to-r from-purple-500 to-orange-500 z-[1] ease-in-out duration-500"
                : "fixed left-[-100%] top-0 ease-in-out duration-500"
            }
          >
            {/* PERBAIKAN 2: Judul dipindahkan ke luar <ul> */}
            <h1 className="p-4 text-center text-2xl font-bold text-white">
              Evrea
            </h1>

            <ul id="mobile-menu">
              {" "}
              {/* Menambahkan ID untuk dihubungkan dengan aria-controls */}
              {/* PERBAIKAN 3: Struktur <li> -> <Link> dibenarkan */}
              {NavbarLinks.map((item) => (
                <li
                  key={item.href}
                  className="border-b border-b-white rounded-xl top-10 hover:bg-black duration-300 border-gray-600"
                >
                  <Link
                    href={item.href}
                    onClick={() => setNav(false)}
                    className="block p-4 text-black hover:text-white cursor-pointer" // 'block' agar link mengisi seluruh area <li>
                  >
                    {item.text}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </motion.div>
    </div>
  );
};

export default Navbar;


================================================
FILE: components/NebulaEffect.tsx
================================================
export const NebulaEffect = () => {
  return (
    <>
      <div className="fixed inset-0 z-[0]">
        <div className="w-full h-full bg-[radial-gradient(circle_at_25%_40%,rgba(59,130,246,0.6),transparent_70%)] blur-3xl"></div>
      </div>
      <div className="fixed inset-0 z-[0]">
        <div className="w-full h-full bg-[radial-gradient(circle_at_65%_50%,rgba(175,170,224,0.6),transparent_70%)] blur-3xl"></div>
      </div>
      <div className="fixed inset-0 z-[0]">
        <div className="w-full h-full bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.35),transparent_60%)] blur-2xl"></div>
      </div>
    </>
  );
};


================================================
FILE: components/ProjectCard.tsx
================================================
'use client';
import Image from 'next/image';
import Link from 'next/link';
import { FaGithub, FaLink } from 'react-icons/fa';
import { motion } from 'framer-motion';

interface ProjectCardProps {
    srcImg: string;
    demoUrl: string;
    srcGithub: string;
    title: string;
    description: string;
    date: string;
}

const ProjectCard = ({
    srcImg,
    demoUrl,
    srcGithub,
    title,
    description,
    date
}: ProjectCardProps) => {

    // Variants for the container
    const containerVariants = {
        hidden: { opacity: 0 },
        visible: {
            opacity: 1,
            transition: {
                delayChildren: 0.3,
                staggerChildren: 0.2,
            },
        },
    };

    // Variants for the image
    const imageVariants = {
        hidden: { opacity: 0, x: -50 },
        visible: { opacity: 1, x: 0, transition: { duration: 0.5 } },
    };

    // Variants for the text
    const textVariants = {
        hidden: { opacity: 0, x: 50 },
        visible: { opacity: 1, x: 0, transition: { duration: 0.5 } },
    };

    return (
        <motion.div
            className="bg-transparent border border-white p-6 rounded-lg shadow-lg  text-white max-w-md mx-auto flex flex-col justify-between h-full"
            variants={containerVariants}
            initial="hidden"
            animate="visible"
        >
            <motion.div className='mb-5' variants={containerVariants}>
                < motion.div className="relative w-full h-56 z-[1]" variants={imageVariants} >
                    <Image src={srcImg} alt={title} layout="fill" objectFit="cover" className="rounded-lg cursor-pointer object-contain hover:scale-105 transition-all duration-500" />
                </ motion.div>
                <motion.div className="flex justify-between items-center mt-4" variants={textVariants}>
                    <span className="text-sm text-gray-400">{date}</span>
                </motion.div>
                <motion.h3 className="mt-2 text-xl font-semibold text-white" variants={textVariants}>{title}</motion.h3>
                <motion.p className="mt-2 text-gray-300" variants={textVariants}>{description}</motion.p>
            </motion.div >
            <motion.div className="flex justify-center items-center z-[1] gap-4 mt-auto" variants={textVariants}>
                <Link href={srcGithub}>
                    <div className="w-6 h-6 rounded-full">
                        <FaGithub className='w-full h-full' />
                    </div>
                </Link>
                <Link href={demoUrl}>
                    <div className="w-6 h-6 rounded-full">
                        <FaLink className='w-full h-full' />
                    </div>
                </Link>
            </motion.div>
        </motion.div >
    );
};

export default ProjectCard;


================================================
FILE: components/ProjectSection.tsx
================================================
"use client";

import { project_data } from "@/libs/constant";
import { motion } from "framer-motion";
import { useState } from "react";
import { FaGithub, FaExternalLinkAlt, FaCalendar } from "react-icons/fa";
import Image from "next/image";
import Link from "next/link";

export function ProjectsSection() {
  const [activeIndex, setActiveIndex] = useState(0);

  return (
    <motion.div
      className="col-span-full lg:col-span-2 bg-neutral-900/50 border border-neutral-700 rounded-xl p-6"
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5 }}
    >
      {/* Header */}
      <div className="flex items-center gap-3 mb-6">
        <FaGithub className="text-orange-400 text-xl" />
        <h3 className="text-lg font-bold text-white">Projects</h3>
      </div>

      <div className="grid grid-cols-4 gap-6">
        {/* Sidebar Project List */}
        <div className="col-span-1 flex flex-col space-y-3 text-sm">
          {project_data.map((proj, index) => (
            <button
              key={index}
              onClick={() => setActiveIndex(index)}
              className={`text-left transition-colors truncate ${
                activeIndex === index
                  ? "text-orange-400 border-l-2 border-orange-400 pl-2"
                  : "text-gray-400 hover:text-white pl-2"
              }`}
            >
              {proj.title}
            </button>
          ))}
        </div>

        {/* Project Details */}
        <div className="col-span-3">
          <div className="flex items-center gap-3 mb-3">
            <Image
              src={project_data[activeIndex].image}
              alt={project_data[activeIndex].title}
              width={60}
              height={40}
              className="rounded-md border border-neutral-600 object-cover"
            />
            <h4 className="text-white font-semibold text-base">
              {project_data[activeIndex].title}
            </h4>
          </div>

          {/* Date */}
          <div className="flex items-center gap-2 text-gray-400 text-xs mb-3">
            <FaCalendar className="text-xs" />
            {project_data[activeIndex].date}
          </div>

          {/* Description */}
          <p className="text-gray-300 text-sm leading-relaxed mb-4">
            {project_data[activeIndex].description}
          </p>

          {/* Links */}
          <div className="flex gap-3">
            {project_data[activeIndex].linkDemo && (
              <Link
                href={project_data[activeIndex].linkDemo}
                target="_blank"
                rel="noopener noreferrer"
                className="flex items-center gap-1 text-purple-400 hover:text-purple-300 text-sm"
              >
                <FaExternalLinkAlt className="text-xs" /> Demo
              </Link>
            )}
            {project_data[activeIndex].linkGithub && (
              <Link
                href={project_data[activeIndex].linkGithub}
                target="_blank"
                rel="noopener noreferrer"
                className="flex items-center gap-1 text-orange-400 hover:text-orange-300 text-sm"
              >
                <FaGithub className="text-xs" /> Code
              </Link>
            )}
          </div>
        </div>
      </div>
    </motion.div>
  );
}


================================================
FILE: components/Skills.tsx
================================================
"use client";

import { motion } from "framer-motion";
import Image from "next/image";
import { Frontend_skill, Backend_Skill, tools } from "@/libs/constant";

const categories = [
  {
    title: "Frontend",
    data: Frontend_skill,
    color: "from-green-500/20 to-teal-500/20",
  },
  {
    title: "Backend",
    data: Backend_Skill,
    color: "from-blue-500/20 to-purple-500/20",
  },
  { title: "Tools", data: tools, color: "from-orange-500/20 to-red-500/20" },
];

const Skills = () => {
  return (
    <div className="w-full max-w-7xl mx-auto px-4">
      <div className="text-center mb-12">
        <motion.h2
          initial={{ opacity: 0, y: -20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          viewport={{ once: true }}
          className="text-3xl md:text-4xl font-bold bg-gradient-to-r from-blue-400 to-purple-600 bg-clip-text text-transparent mb-4"
        >
          Technical Skills
        </motion.h2>
        <motion.p
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.2 }}
          viewport={{ once: true }}
          className="text-gray-400 text-lg max-w-2xl mx-auto"
        >
          Technologies and tools I work with
        </motion.p>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-8">
        {categories.map((cat, i) => (
          <motion.div
            key={i}
            initial={{ opacity: 0, y: 30, scale: 0.9 }}
            whileInView={{ opacity: 1, y: 0, scale: 1 }}
            transition={{
              duration: 0.6,
              delay: i * 0.1,
              type: "spring",
              stiffness: 100,
            }}
            viewport={{ once: true }}
            whileHover={{
              scale: 1.02,
              transition: { duration: 0.2 },
            }}
            className={`
                            relative overflow-hidden
                            bg-gradient-to-br ${cat.color}
                            backdrop-blur-xl 
                            border border-white/10
                            rounded-3xl p-8
                            shadow-2xl shadow-black/20
                            hover:shadow-3xl hover:shadow-black/30
                            transition-all duration-300
                        `}
          >
            {/* Background Pattern */}
            <div className="absolute inset-0 opacity-5">
              <div className="absolute top-0 right-0 w-32 h-32 bg-white rounded-full -translate-y-16 translate-x-16"></div>
              <div className="absolute bottom-0 left-0 w-24 h-24 bg-white rounded-full translate-y-12 -translate-x-12"></div>
            </div>

            {/* Content */}
            <div className="relative z-10">
              {/* Category Header */}
              <div className="flex items-center justify-between mb-6">
                <h3 className="text-xl font-bold text-white">{cat.title}</h3>
                <div className="w-8 h-1 bg-gradient-to-r from-white/50 to-transparent rounded-full"></div>
              </div>

              {/* Skills Grid */}
              <div className="grid grid-cols-3 sm:grid-cols-4 gap-6">
                {cat.data.map((skill, idx) => (
                  <motion.div
                    key={idx}
                    initial={{ opacity: 0, scale: 0 }}
                    whileInView={{ opacity: 1, scale: 1 }}
                    transition={{
                      duration: 0.4,
                      delay: i * 0.1 + idx * 0.05,
                      type: "spring",
                      stiffness: 200,
                    }}
                    viewport={{ once: true }}
                    whileHover={{
                      scale: 1.1,
                      y: -5,
                      transition: { duration: 0.2 },
                    }}
                    className="group"
                  >
                    <div
                      className="
                                            flex flex-col items-center text-center
                                            p-3 rounded-2xl
                                            
                                            transition-all duration-300
                                            cursor-pointer
                                        "
                    >
                      <div
                        className="
                                                relative w-12 h-12 mb-3
                                                flex items-center justify-center
                                                bg-white/10 rounded-xl
                                                group-hover:bg-white/20
                                                transition-all duration-300
                                            "
                      >
                        <Image
                          src={skill.Image}
                          width={32}
                          height={32}
                          alt={skill.skill_name}
                          className="object-contain filter group-hover:scale-110 transition-transform duration-300"
                        />
                      </div>
                      <p
                        className="
                                                text-xs font-medium text-gray-300 
                                                group-hover:text-white
                                                transition-colors duration-300
                                                leading-tight
                                            "
                      >
                        {skill.skill_name}
                      </p>
                    </div>
                  </motion.div>
                ))}
              </div>

              {/* Skills Count */}
              <div className="mt-6 pt-4 border-t border-white/10">
                <p className="text-xs text-gray-400 text-center">
                  {cat.data.length} skills
                </p>
              </div>
            </div>
          </motion.div>
        ))}
      </div>
    </div>
  );
};

export default Skills;


================================================
FILE: components/about.tsx
================================================
'use client'
import { Link as ScrollLink, Element } from 'react-scroll';
import Skills from '@/components/Skills';
import AboutSection from '@/components/AboutSection';
import { FaArrowDownLong } from "react-icons/fa6";
export const About = () => {
    return (
        <main className='bg-black'>
            <AboutSection />
            <div className='flex justify-center items-center h-5 z-[1] cursor-pointer'>
                <ScrollLink to="skills" smooth={true} duration={1000} className='z-[1] -mt-8'>
                    <FaArrowDownLong className='animate-bounce text-4xl text-white' />
                </ScrollLink>
            </div>
            <Element name="skills" className='lg:min-h-screen h-screen'>
                <Skills />
            </Element>
        </main>
    );
};

================================================
FILE: components/contact.tsx
================================================
"use client";

import { FaMapMarkerAlt, FaPhoneAlt, FaEnvelope } from "react-icons/fa";
import { motion } from "framer-motion";
import { useState } from "react";

const ContactForm = () => {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [subject, setSubject] = useState("");
  const [message, setMessage] = useState("");
  const [status, setStatus] = useState("");

  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setStatus("Sending...");

    try {
      const response = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name, email, subject, message }),
      });

      const data = await response.json();
      setStatus(data.message);
    } catch (error) {
      console.error("Error sending email:", error);
      setStatus("Error sending email");
    } finally {
      setName("");
      setEmail("");
      setSubject("");
      setMessage("");
    }
  };

  return (
    <main className="min-h-screen flex justify-center items-center py-24 px-6 md:px-20">
      <div className="w-full max-w-6xl">
        <motion.div
          className="bg-neutral-900/80 backdrop-blur-sm rounded-2xl shadow-2xl border border-neutral-700/50 overflow-hidden"
          initial={{ opacity: 0, y: 50 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
        >
          <div className="grid grid-cols-1 lg:grid-cols-2">
            {/* Left side - Contact Info */}
            <motion.div
              className="p-8 lg:p-12 bg-gradient-to-br from-neutral-800/50 to-neutral-900/50"
              initial={{ x: -50, opacity: 0 }}
              animate={{ x: 0, opacity: 1 }}
              transition={{ duration: 0.8, delay: 0.2 }}
            >
              <div className="h-full flex flex-col justify-center">
                <h1 className="text-4xl lg:text-5xl text-white font-extrabold tracking-tight mb-4">
                  Get in touch
                </h1>
                <p className="text-lg lg:text-xl font-medium text-gray-300 mb-8">
                  Fill in the form to start a conversation
                </p>

                <div className="space-y-6">
                  <div className="flex items-center text-gray-300">
                    <div className="w-12 h-12 bg-neutral-700/50 rounded-full flex items-center justify-center mr-4">
                      <FaMapMarkerAlt className="w-5 h-5 text-purple-400" />
                    </div>
                    <p className="text-base font-medium">
                      Bandung City, West Java, Indonesia
                    </p>
                  </div>

                  <div className="flex items-center text-gray-300">
                    <div className="w-12 h-12 bg-neutral-700/50 rounded-full flex items-center justify-center mr-4">
                      <FaPhoneAlt className="w-5 h-5 text-purple-400" />
                    </div>
                    <p className="text-base font-medium">+62 851 7536 9960</p>
                  </div>

                  <div className="flex items-center text-gray-300">
                    <div className="w-12 h-12 bg-neutral-700/50 rounded-full flex items-center justify-center mr-4">
                      <FaEnvelope className="w-5 h-5 text-purple-400" />
                    </div>
                    <p className="text-base font-medium">
                      muhamadalfinpratamaa@gmail.com
                    </p>
                  </div>
                </div>
              </div>
            </motion.div>

            {/* Right side - Contact Form */}
            <motion.div
              className="p-8 lg:p-12"
              initial={{ x: 50, opacity: 0 }}
              animate={{ x: 0, opacity: 1 }}
              transition={{ duration: 0.8, delay: 0.4 }}
            >
              <form onSubmit={handleSubmit} className="space-y-6">
                <div>
                  <label
                    htmlFor="name"
                    className="block text-sm font-medium text-gray-300 mb-2"
                  >
                    Full Name
                  </label>
                  <input
                    type="text"
                    id="name"
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                    placeholder="Enter your full name"
                    className="w-full py-3 px-4 rounded-lg bg-neutral-700/50 border border-neutral-600 text-white placeholder-gray-400 font-medium focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500/20 transition-all duration-300"
                    required
                  />
                </div>

                <div>
                  <label
                    htmlFor="email"
                    className="block text-sm font-medium text-gray-300 mb-2"
                  >
                    Email
                  </label>
                  <input
                    type="email"
                    id="email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    placeholder="Enter your email"
                    className="w-full py-3 px-4 rounded-lg bg-neutral-700/50 border border-neutral-600 text-white placeholder-gray-400 font-medium focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500/20 transition-all duration-300"
                    required
                  />
                </div>

                <div>
                  <label
                    htmlFor="subject"
                    className="block text-sm font-medium text-gray-300 mb-2"
                  >
                    Subject
                  </label>
                  <input
                    type="text"
                    id="subject"
                    value={subject}
                    onChange={(e) => setSubject(e.target.value)}
                    placeholder="Enter email subject"
                    className="w-full py-3 px-4 rounded-lg bg-neutral-700/50 border border-neutral-600 text-white placeholder-gray-400 font-medium focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500/20 transition-all duration-300"
                    required
                  />
                </div>

                <div>
                  <label
                    htmlFor="message"
                    className="block text-sm font-medium text-gray-300 mb-2"
                  >
                    Message
                  </label>
                  <textarea
                    id="message"
                    value={message}
                    onChange={(e) => setMessage(e.target.value)}
                    placeholder="Enter your message"
                    rows={5}
                    className="w-full py-3 px-4 rounded-lg bg-neutral-700/50 border border-neutral-600 text-white placeholder-gray-400 font-medium focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500/20 transition-all duration-300 resize-none"
                    required
                  />
                </div>

                <motion.button
                  type="submit"
                  className="w-full bg-gradient-to-r from-purple-500 to-pink-500 text-white font-bold py-3 px-6 rounded-lg hover:from-purple-600 hover:to-pink-600 transition-all duration-300 shadow-lg hover:shadow-purple-500/25"
                  whileHover={{ scale: 1.02 }}
                  whileTap={{ scale: 0.98 }}
                  disabled={status === "Sending..."}
                >
                  {status || "Send Message"}
                </motion.button>

                {status && status !== "Sending..." && (
                  <motion.p
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    className={`text-center text-sm font-medium ${
                      status.includes("Error")
                        ? "text-red-400"
                        : "text-green-400"
                    }`}
                  >
                    {status}
                  </motion.p>
                )}
              </form>
            </motion.div>
          </div>
        </motion.div>
      </div>
    </main>
  );
};

export default ContactForm;


================================================
FILE: libs/NavbarLinks.ts
================================================
export const NavbarLinks = [
  {
    text: "Home",
    href: "/",
  },
  {
    text: "About Me",
    href: "/about",
  },
  {
    text: "Blogs",
    href: "/blogs",
  },
  {
    text: "Contact Me",
    href: "/contact",
  },
];


================================================
FILE: libs/constant.ts
================================================
export const Social_Icons = [
  {
    link: "https://github.com/alfinpratamaa",
    image: "/Github.svg",
    alt: "Github",
  },
  {
    link: "https://www.instagram.com/visfiveor5",
    image: "/Instagram.svg",
    alt: "Instagram",
  },
  {
    link: "https://www.linkedin.com/in/alfinpr/",
    image: "/LinkedIn.svg",
    alt: "LinkedIn",
  },
  {
    link: "https://t.me/visfiveor5",
    image: "/telegram.svg",
    alt: "Telegram",
  },
  {
    link: "https://wa.me/6285175369960",
    image: "/whatsapp.svg",
    alt: "Whatsapp",
  },
];

export const Backend_Skill = [
  {
    skill_name: "Node.js",
    Image:
      "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg",
    width: 80,
    height: 80,
  },
  {
    skill_name: "Express.js",
    Image:
      "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/express/express-original.svg",
    width: 80,
    height: 80,
  },
  {
    skill_name: "NestJS",
    Image: "https://img.jsdelivr.com/github.com/nestjs.png",
    width: 80,
    height: 80,
  },
  {
    skill_name: "Golang",
    Image:
      "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/go/go-original.svg",
    width: 80,
    height: 80,
  },
  {
    skill_name: "PHP",
    Image:
      "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/php/php-original.svg",
    width: 80,
    height: 80,
  },
  {
    skill_name: "Laravel",
    Image: "https://www.svgrepo.com/show/353985/laravel.svg",
    width: 80,
    height: 80,
  },
  {
    skill_name: "PostgreSQL",
    Image:
      "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg",
    width: 80,
    height: 80,
  },
  {
    skill_name: "MySQL",
    Image:
      "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mysql/mysql-original.svg",
    width: 80,
    height: 80,
  },
  {
    skill_name: "MongoDB",
    Image:
      "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original.svg",
    width: 80,
    height: 80,
  },
];

export const Frontend_skill = [
  {
    skill_name: "Html 5",
    Image: "/html.png",
    width: 80,
    height: 80,
  },
  {
    skill_name: "Css",
    Image: "/css.png",
    width: 80,
    height: 80,
  },
  {
    skill_name: "Java Script",
    Image: "/js.png",
    width: 65,
    height: 65,
  },
  {
    skill_name: "Tailwind Css",
    Image: "/tailwind.png",
    width: 80,
    height: 80,
  },
  {
    skill_name: "React",
    Image: "/react.png",
    width: 80,
    height: 80,
  },
  {
    skill_name: "React Query",
    Image: "/reactquery.png",
    width: 80,
    height: 80,
  },
  {
    skill_name: "Type Script",
    Image: "/ts.png",
    width: 80,
    height: 80,
  },
  {
    skill_name: "Next js",
    Image: "/Next.js.png",
    width: 80,
    height: 80,
  },
];

export const tools = [
  {
    skill_name: "Figma",
    Image: "/Figma.svg",
    width: 80,
    height: 80,
  },
  {
    skill_name: "Git",
    Image: "/git.png",
    width: 80,
    height: 80,
  },
  {
    skill_name: "Github",
    Image: "/Github.svg",
    width: 80,
    height: 80,
  },
  {
    skill_name: "VS Code",
    Image: "/vscode.png",
    width: 80,
    height: 80,
  },
  {
    skill_name: "Postman",
    Image: "/postman.png",
    width: 80,
    height: 80,
  },
];

export const project_data = [
  {
    title: "Mangaloomp (Comics Reader)",
    description:
      "Mangaloom is a web application for reading manga online. Built with Next.js and Tailwind CSS, it features a clean UI, search functionality, and a vast collection of manga titles.",
    image: "/mangaloom.png",
    linkDemo: "https://mangaloom.app",
    linkGithub: "https://github.com/Mangaloom/web",
    date: "March 2024 - Present",
  },
  {
    title: "E-Commerce Book Store",
    description:
      "An e-commerce website for books built with Laravel + Livewire and Tailwind CSS. Features include product browsing, shopping cart, user authentication, and admin panel for managing products and orders.",
    image: "/ngabaca.png",
    linkDemo: "https://ngabaca.me",
    linkGithub: "https://github.com/Alfinpratamaa/ngabaca",
    date: "June 2025 - August 2025",
  },
  {
    title: "Selfgalery Web Apps",
    description:
      "Photo gallery application built with Next.js and Tailwind CSS for storing photos. Features upload, delete, and download functionality.",
    image: "/selfgalery.png",
    linkDemo: "https://selfgalery.vercel.app/",
    linkGithub: "https://github.com/Alfinpratamaa/selfgalery",
    date: "January 2024 - February 2024",
  },
  {
    title: "Portfolio",
    description: "Personal portfolio built with Next.js and Tailwind CSS",
    image: "/portfolio.png",
    linkDemo: "https://muhamadalfinpratama.vercel.app/",
    linkGithub: "https://github.com/Alfinpratamaa/portfolio",
    date: "June 2024",
  },
];


================================================
FILE: libs/sanity.client.ts
================================================
import { createClient } from 'next-sanity'

const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID
const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET
const apiVersion = process.env.NEXT_PUBLIC_SANITY_API_VERSION

export const client = createClient({
  projectId,
  dataset,
  apiVersion,
  useCdn: true, 
})

================================================
FILE: next.config.mjs
================================================
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "**",
      },
      {
        protocol: "http",
        hostname: "**",
      },
    ],
  },
  output: "standalone",
};

export default nextConfig;
  

================================================
FILE: package.json
================================================
{
  "name": "out",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build --turbopack",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@portabletext/react": "^4.0.1",
    "@sanity/image-url": "^1.1.0",
    "@types/mailgun-js": "^0.22.18",
    "@types/nodemailer": "^7.0.1",
    "@types/nodemailer-mailgun-transport": "^1.4.6",
    "@types/react-scroll": "^1.8.10",
    "@types/react-typing-effect": "^2.0.7",
    "@vercel/analytics": "^1.5.0",
    "clsx": "^2.1.1",
    "framer-motion": "^12.23.12",
    "mailgun-js": "^0.22.0",
    "next": "^15.5.2",
    "next-sanity": "^10.0.15",
    "next-sitemap": "^4.2.3",
    "nextjs-toploader": "^3.8.16",
    "nodemailer": "^7.0.5",
    "nodemailer-mailgun-transport": "^2.1.5",
    "react": "^19.1.1",
    "react-dom": "^19.1.1",
    "react-icons": "^5.5.0",
    "react-scroll": "^1.9.3",
    "react-tippy": "^1.4.0",
    "react-type-animation": "^3.2.0",
    "sharp": "^0.34.3"
  },
  "devDependencies": {
    "@react-three/drei": "^10.7.4",
    "@react-three/fiber": "^9.3.0",
    "@tailwindcss/postcss": "^4.1.12",
    "@types/node": "^24.3.0",
    "@types/react": "^19.1.11",
    "@types/react-dom": "^19.1.8",
    "autoprefixer": "^10.4.21",
    "eslint": "^9.34.0",
    "eslint-config-next": "^15.5.2",
    "postcss": "^8.5.6",
    "react-intersection-observer": "^9.16.0",
    "tailwindcss": "^4.1.12",
    "three": "^0.179.1",
    "typescript": "^5.9.2"
  },
  "engines": {
    "node": ">=20.x"
  }
}


================================================
FILE: postcss.config.mjs
================================================
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};


================================================
FILE: provider/ClientProvicer.tsx
================================================
"use client";

import NextTopLoader from "nextjs-toploader";

function ClientProvider() {
  return (
    <>
      <NextTopLoader
        showSpinner={false}
        crawlSpeed={200}
        height={3}
        crawl={true}
        color="transparent"
      />

      <style jsx global>{`
        #nprogress .bar {
          background: linear-gradient(to right, #9333ea, #fb923c) !important;
        }
      `}</style>
    </>
  );
}

export { ClientProvider };


================================================
FILE: provider/SkillData.tsx
================================================
'use client';
import { useInView } from 'react-intersection-observer';
import { motion } from 'framer-motion';
import Image from 'next/image';
interface Props {
    src: string;
    width: number;
    height: number;
    index: number;
    name?: string;
}
const SkillData = ({ src, width, height, index, name }: Props) => {
    const [ref, inView] = useInView({
        triggerOnce: true
    })

    const imageVariant = {
        hidden: {
            opacity: 0,
        },
        visible: {
            opacity: 1
        }
    }

    const animationDelay = 0.3
    return (
        <motion.div
            ref={ref}
            initial="hidden"
            variants={imageVariant}
            animate={inView ? "visible" : "hidden"}
            custom={index}
            transition={{ delay: index * animationDelay }}

        >
            <Image src={src} width={width} height={height} alt={name || "image err"} />
        </motion.div>
    )
}

export default SkillData

================================================
FILE: tailwind.config.js
================================================
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: "class",
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",

    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    container: {
      padding: {
        DEFAULT: "1rem",
        sm: "2rem",
        lg: "4rem",
        xl: "15rem",
        "2xl": "22rem",
      },
    },
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
      backgroundColor: {
        primary: "#DD7C7F",
      },
    },
  },
  plugins: [],
};


================================================
FILE: tsconfig.json
================================================
{
  "compilerOptions": {
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": [
        "./*"
      ]
    },
    "target": "ES2017"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}


================================================
FILE: types/index.ts
================================================
export type ProjectFrontmatter = {
  slug?: string;
  title: string;
  publishedAt?: string;
  lastUpdated?: string;
  description: string;
  category?: string;
  techs?: string;
  banner?: string;
  link?: string;
  github?: string;
  youtube?: string;
};