abhishek-portfolio-template 1.0.0

package/template/src/components/about/about-client.tsx

@@ -0,0 +1,259 @@
+"use client";
+
+import { motion } from "framer-motion";
+import Image from "next/image";
+import Link from "next/link";
+import * as LucideIcons from "lucide-react";
+import {
+    Gamepad2,
+    Film,
+    Plane,
+    Mail,
+    Phone,
+    MapPin,
+    User,
+    Download,
+    ExternalLink
+} from "lucide-react";
+import { RatingInteraction } from "@/components/ui/emoji-rating";
+
+const BentoCard = ({ children, className = "" }: { children: React.ReactNode, className?: string }) => (
+    <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true }}
+        transition={{ duration: 0.5 }}
+        className={`bg-[#111] border border-white/5 rounded-[32px] overflow-hidden ${className}`}
+    >
+        {children}
+    </motion.div>
+);
+
+const Badge = ({ children }: { children: React.ReactNode }) => (
+    <span className="px-3 py-1 rounded-full bg-white/5 border border-white/10 text-xs font-medium text-white/60">
+        {children}
+    </span>
+);
+
+export function AboutClient({ general, experience, education, skills, interests }: any) {
+
+    // Helper to dynamic icon
+    const getIcon = (name: string) => {
+        const Icon = (LucideIcons as any)[name];
+        return Icon ? <Icon size={16} /> : <Gamepad2 size={16} />;
+    };
+
+    return (
+        <div className="max-w-6xl mx-auto space-y-6 px-4 md:px-8 lg:px-12 pt-32 pb-20">
+
+            {/* --- Top Row: Profile & Bio --- */}
+            <div className="grid grid-cols-1 md:grid-cols-12 gap-6">
+                <BentoCard className="md:col-span-4 h-[320px] relative group">
+                    <Image
+                        src={general.profile_image_url || "https://res.cloudinary.com/dap0u41dz/image/upload/v1766771167/file_00000000d51472078b7e2f9d883a6674_majhmb.jpg"}
+                        alt={general.full_name}
+                        fill
+                        className="object-cover opacity-80 group-hover:scale-105 transition-transform duration-500"
+                    />
+                    <div className="absolute inset-x-0 bottom-0 p-6 bg-gradient-to-t from-black/80 to-transparent">
+                        <h1 className="text-2xl font-bold">{general.full_name}</h1>
+                        <p className="text-white/40 text-sm italic">{general.role_title}</p>
+                    </div>
+                </BentoCard>
+
+                <BentoCard className="md:col-span-8 p-8 flex flex-col justify-center">
+                    <p className="text-xl md:text-2xl font-medium leading-relaxed text-white/90 whitespace-pre-line">
+                        {general.bio_description}
+                    </p>
+                    <div className="mt-8 flex flex-wrap gap-3">
+                        <Badge>Founder</Badge>
+                        <Badge>Product Designer</Badge>
+                        <Badge>Systems Thinker</Badge>
+                    </div>
+                </BentoCard>
+            </div>
+
+            {/* --- Interests Row --- */}
+            <BentoCard className="p-6">
+                <div className="flex flex-col md:flex-row md:items-center gap-6">
+                    <span className="text-lg font-semibold border-r border-white/10 pr-6 flex items-center gap-2">
+                        Interests
+                    </span>
+                    <div className="flex flex-wrap gap-4">
+                        {interests.map((item: any, idx: number) => {
+                            const isGaming = item.label === "Gaming";
+                            const content = (
+                                <>
+                                    {getIcon(item.icon_name)}
+                                    <span className="text-sm font-medium">{item.label}</span>
+                                </>
+                            );
+                            const itemClassName = `
+                                flex items-center gap-2 px-4 py-2 rounded-2xl border transition-all duration-300
+                                ${isGaming
+                                    ? "bg-emerald-500/5 border-emerald-500/20 text-emerald-400 cursor-pointer hover:bg-emerald-500/10 hover:scale-105"
+                                    : "bg-white/[0.03] border-white/5 text-white/60"
+                                }
+                            `;
+
+                            if (isGaming) {
+                                return (
+                                    <Link key={idx} href="/gaming" className={itemClassName}>
+                                        {content}
+                                    </Link>
+                                );
+                            }
+
+                            return (
+                                <div key={idx} className={itemClassName}>
+                                    {content}
+                                </div>
+                            );
+                        })}
+                        {interests.length === 0 && <span className="text-sm text-white/20">No interests added yet.</span>}
+                    </div>
+                </div>
+            </BentoCard>
+
+            {/* --- Experience & Education Grid --- */}
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+
+                {/* Experience Cards */}
+                {experience.map((exp: any, idx: number) => (
+                    <BentoCard key={exp.id} className="p-8 space-y-6">
+                        <div className="flex justify-between items-start">
+                            <div>
+                                <h3 className="text-2xl font-bold">{exp.role}</h3>
+                                <p className="text-white/40 text-sm">{exp.company}</p>
+                            </div>
+                            <span className="text-[10px] uppercase tracking-widest px-2 py-1 bg-white/5 border border-white/10 rounded-md">{exp.period}</span>
+                        </div>
+                        <div className="w-full h-px bg-white/5" />
+                        <ul className="space-y-4 text-sm text-white/60">
+                            {exp.description_points?.map((pt: string, i: number) => (
+                                <li key={i} className="flex gap-3">
+                                    <span className="text-white/20">•</span>
+                                    {pt}
+                                </li>
+                            ))}
+                        </ul>
+                    </BentoCard>
+                ))}
+
+                {/* Education Card (Consolidated) */}
+                <BentoCard className="p-8 space-y-8 flex flex-col justify-between">
+                    <div className="space-y-6">
+                        {education.map((edu: any, idx: number) => (
+                            <div key={edu.id} className="flex justify-between items-start">
+                                <div>
+                                    <h3 className="text-xl font-bold">{edu.degree}</h3>
+                                    <p className="text-white/40 text-xs">{edu.institution}</p>
+                                </div>
+                                <span className="text-[10px] px-2 py-0.5 bg-white/5 border border-white/10 rounded">{edu.year}</span>
+                            </div>
+                        ))}
+                        {education.length === 0 && <p className="text-sm text-white/40">No education added.</p>}
+                    </div>
+                </BentoCard>
+            </div>
+
+
+
+            {/* --- Portfolio Row --- */}
+            <BentoCard className="p-6">
+                <div className="flex flex-col md:flex-row md:items-center gap-8">
+                    <span className="text-lg font-bold border-r border-white/10 pr-8">Portfolio</span>
+                    <div className="flex flex-wrap gap-6 text-sm font-medium text-white/40">
+                        <a href="#" className="flex items-center gap-2 hover:text-white transition-colors"><span>Behance</span> <ExternalLink size={14} /></a>
+                        <a href="#" className="flex items-center gap-2 hover:text-white transition-colors"><span>Dribbble</span> <ExternalLink size={14} /></a>
+                        <a href="#" className="flex items-center gap-2 hover:text-white transition-colors"><span>Instagram</span> <ExternalLink size={14} /></a>
+                        <a href="#" className="flex items-center gap-2 hover:text-white transition-colors"><span>LinkedIn</span> <ExternalLink size={14} /></a>
+                    </div>
+                </div>
+            </BentoCard>
+
+            {/* --- Availability & Feedback Grid --- */}
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                {/* Availability Block */}
+                <BentoCard className="p-8">
+                    <div className="flex flex-col h-full justify-between gap-8">
+                        <div>
+                            <h3 className="text-xl font-bold mb-4">Availability</h3>
+                            <p className="text-white/40 text-sm leading-relaxed mb-6">
+                                I am currently open to new opportunities and collaborations. I specialize in building scalable UI systems and fluid frontend experiences.
+                            </p>
+                            <div className="space-y-4">
+                                {["Internships", "Freelance", "Consulting"].map((item) => (
+                                    <div key={item} className="flex items-center gap-3">
+                                        <div className="relative flex h-2 w-2">
+                                            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
+                                            <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
+                                        </div>
+                                        <span className="text-sm font-medium text-white/80">{item}</span>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                        <div className={`flex items-center gap-3 px-4 py-3 rounded-2xl border w-fit transition-colors ${general.is_available ? "bg-emerald-500/5 border-emerald-500/10" : "bg-red-500/5 border-red-500/10"}`}>
+                            <span className={`text-[10px] font-bold uppercase tracking-widest ${general.is_available ? "text-emerald-500" : "text-red-500"}`}>
+                                {general.availability_status}
+                            </span>
+                        </div>
+                    </div>
+                </BentoCard>
+
+                {/* Quick Feedback (Rating) Block */}
+                <BentoCard className="p-8 flex flex-col items-center justify-center text-center">
+                    <RatingInteraction />
+                </BentoCard>
+            </div>
+
+            {/* --- Footer / Details --- */}
+            <BentoCard className="p-8">
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
+                    <div className="flex items-center gap-4">
+                        <div className="w-10 h-10 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center text-white/40">
+                            <User size={18} />
+                        </div>
+                        <div>
+                            <p className="text-[10px] uppercase tracking-widest text-white/40 font-bold">Age</p>
+                            <p className="text-sm font-medium">
+                                {general.birthday ? (
+                                    `${Math.floor((Date.now() - new Date(general.birthday).getTime()) / 31557600000)} Years`
+                                ) : "21 Years"}
+                            </p>
+                        </div>
+                    </div>
+                    <div className="flex items-center gap-4 group cursor-pointer" onClick={() => window.location.href = `mailto:${general.contact_email}`}>
+                        <div className="w-10 h-10 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center text-white/40 group-hover:bg-white/10 transition-colors">
+                            <Mail size={18} />
+                        </div>
+                        <div>
+                            <p className="text-[10px] uppercase tracking-widest text-white/40 font-bold">Email</p>
+                            <p className="text-sm font-medium truncat max-w-[150px]">{general.contact_email}</p>
+                        </div>
+                    </div>
+                    <div className="flex items-center gap-4">
+                        <div className="w-10 h-10 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center text-white/40">
+                            <Phone size={18} />
+                        </div>
+                        <div>
+                            <p className="text-[10px] uppercase tracking-widest text-white/40 font-bold">Phone</p>
+                            <p className="text-sm font-medium">{general.phone_number || "+91 0000000000"}</p>
+                        </div>
+                    </div>
+                    <div className="flex items-center gap-4">
+                        <div className="w-10 h-10 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center text-white/40">
+                            <MapPin size={18} />
+                        </div>
+                        <div>
+                            <p className="text-[10px] uppercase tracking-widest text-white/40 font-bold">Location</p>
+                            <p className="text-sm font-medium">{general.location || "Kolkata, India"}</p>
+                        </div>
+                    </div>
+                </div>
+            </BentoCard>
+
+        </div>
+    );
+}

package/template/src/components/home/bento-gallery.tsx

@@ -0,0 +1,52 @@
+"use client"
+// Rebuilding layout to standard grid
+
+import { motion } from "framer-motion"
+import { IdentityCard } from "./identity-card"
+import { VerticalImageStack } from "@/components/ui/vertical-image-stack"
+import { FocusCard } from "./focus-card"
+import { PhilosophyCard } from "./philosophy-card"
+import { CraftCard } from "./craft-card"
+
+export function BentoGallery() {
+    return (
+        <section className="w-full max-w-[1400px] mx-auto px-4 md:px-6 pb-12 pt-4 md:py-24 lg:py-0">
+
+            {/* 
+                Responsive Bento Grid:
+                - Mobile: 1 Column
+                - Tablet (md): 2 Columns
+                - Desktop (lg): 3 Columns
+            */}
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-min items-start">
+
+                {/* 1. Identity Card - Top Left */}
+                <div className="order-1 md:order-1 lg:col-span-1 h-[450px] md:h-[500px] lg:h-[500px]">
+                    <IdentityCard />
+                </div>
+
+                {/* 2. Gallery/Phone - Center Column (Spans 2 Rows on Desktop) */}
+                <div className="order-2 md:order-3 lg:order-2 md:col-span-1 lg:col-span-1 lg:row-span-2 h-[400px] md:h-[600px] lg:h-[764px] bg-[#111] rounded-[32px] border border-white/5 overflow-hidden relative shadow-2xl">
+                    <div className="absolute inset-0">
+                        <VerticalImageStack />
+                    </div>
+                </div>
+
+                {/* 3. Focus Card - Top Right */}
+                <div className="order-3 md:order-2 lg:order-3 md:col-span-1 lg:col-span-1 h-[550px] md:h-[500px] lg:h-[500px]">
+                    <FocusCard />
+                </div>
+
+                {/* 4. Philosophy Card - Bottom Left */}
+                <div className="order-4 md:order-4 lg:order-4 md:col-span-1 lg:col-span-1 h-[200px] md:h-[240px] lg:h-[240px]">
+                    <PhilosophyCard />
+                </div>
+
+                {/* 5. Craft Card - Bottom Right */}
+                <div className="order-5 md:order-5 lg:order-5 md:col-span-1 lg:col-span-1 h-[200px] md:h-[240px] lg:h-[240px]">
+                    <CraftCard />
+                </div>
+            </div>
+        </section>
+    )
+}

package/template/src/components/home/contact-section.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { motion } from "framer-motion";
+import Link from "next/link";
+import { ArrowRight, Mail } from "lucide-react";
+import { Signature } from "@/components/ui/signature";
+
+export function ContactSection() {
+    return (
+        <section id="contact" className="py-32 relative overflow-hidden">
+            {/* Subtle Signature */}
+            <Signature />
+
+            <div className="flex flex-col items-center justify-center text-center max-w-2xl mx-auto px-4 relative z-10">
+                <h2 className="text-4xl md:text-5xl lg:text-6xl font-medium text-white mb-6">
+                    Let's build something <span className="text-white/40">extraordinary.</span>
+                </h2>
+
+                <p className="text-white/60 text-lg md:text-xl mb-10 max-w-lg">
+                    Currently available for select projects. Let's discuss your vision.
+                </p>
+
+                <Link
+                    href="mailto:abhishek23main@gmail.com"
+                    className="group flex items-center gap-3 bg-white text-black px-8 py-4 rounded-full font-medium hover:bg-white/90 transition-all hover:scale-105 active:scale-95"
+                >
+                    <Mail className="w-5 h-5" />
+                    <span>Start a Project</span>
+                    <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
+                </Link>
+            </div>
+        </section>
+    );
+}

package/template/src/components/home/craft-card.tsx

@@ -0,0 +1,18 @@
+import { DottedMap } from "@/components/ui/dotted-map"
+
+export function CraftCard() {
+    return (
+        <div className="relative w-full h-full min-h-[180px] rounded-[32px] overflow-hidden group border border-white/5 bg-[#111]">
+            <div className="absolute inset-0 flex items-center justify-center opacity-90 transition-opacity duration-100">
+                <DottedMap
+                    className="text-white/40 w-full max-w-[6000px]"
+                    markers={[{ lat: 20.6, lng: 78.96, size: 0.8 }]}
+                    markerColor="#F97316"
+                    dotRadius={0.2}
+                />
+            </div>
+
+
+        </div>
+    )
+}

package/template/src/components/home/featured-projects.tsx

@@ -0,0 +1,186 @@
+"use client";
+
+import { motion } from "framer-motion";
+import Image from "next/image";
+import Link from "next/link";
+import { ArrowUpRight } from "lucide-react";
+import { Project } from "@/lib/data";
+import { useEffect, useState } from "react";
+import { supabase } from "@/lib/supabase";
+
+// Strict type for Supabase response to avoid 'any'
+interface SupabaseProject {
+    id: string;
+    title: string;
+    description: string;
+    tech_stack: string[];
+    image_url: string;
+    slug: string;
+    featured: boolean;
+    display_order: number;
+}
+
+function ProjectCard({ project }: { project: Project }) {
+    return (
+        <Link href={project.link} className="group block h-full">
+            <div className="relative h-full bg-[#111111] border border-white/5 rounded-[24px] overflow-hidden transition-colors duration-500 hover:border-white/10 flex flex-col group-hover:bg-[#161616]">
+                {/* Image Container */}
+                <div className="relative w-full aspect-[16/10] overflow-hidden">
+                    <Image
+                        src={project.image}
+                        alt={project.title}
+                        fill
+                        sizes="(max-width: 768px) 100vw, 50vw"
+                        className="object-cover transition-transform duration-700 ease-[0.25,1,0.5,1] group-hover:scale-105"
+                    />
+                    <div className="absolute inset-0 bg-black/20 group-hover:bg-transparent transition-colors duration-500" />
+                </div>
+
+                {/* Content */}
+                <div className="p-6 flex flex-col flex-1 justify-between">
+                    <div>
+                        <div className="flex items-start justify-between">
+                            <h3 className="text-xl font-medium text-white/90 group-hover:text-white transition-colors">
+                                {project.title}
+                            </h3>
+                            <ArrowUpRight className="w-5 h-5 text-white/30 group-hover:text-white group-hover:-translate-y-1 group-hover:translate-x-1 transition-all duration-300" />
+                        </div>
+                        <p className="mt-2 text-white/50 text-sm leading-relaxed group-hover:text-white/70 transition-colors line-clamp-2">
+                            {project.description}
+                        </p>
+                    </div>
+
+                    <div className="mt-6 flex flex-wrap gap-1.5">
+                        {project.techStack.map((tech) => (
+                            <span
+                                key={tech}
+                                className="px-2.5 py-0.5 rounded-full text-[10px] uppercase tracking-wider font-medium bg-white/5 text-white/40 border border-white/5"
+                            >
+                                {tech}
+                            </span>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </Link>
+    );
+}
+
+function ProjectCardSkeleton() {
+    return (
+        <div className="h-full bg-[#111111] border border-white/5 rounded-[24px] overflow-hidden flex flex-col">
+            {/* Image Skeleton */}
+            <div className="relative w-full aspect-[16/10] bg-white/5 animate-pulse" />
+
+            {/* Content Skeleton */}
+            <div className="p-6 flex flex-col flex-1 justify-between gap-6">
+                <div className="space-y-3">
+                    <div className="flex justify-between items-start">
+                        <div className="h-7 w-1/2 bg-white/5 rounded-md animate-pulse" />
+                        <div className="h-5 w-5 bg-white/5 rounded-md animate-pulse" />
+                    </div>
+                    <div className="space-y-2">
+                        <div className="h-4 w-full bg-white/5 rounded-md animate-pulse" />
+                        <div className="h-4 w-2/3 bg-white/5 rounded-md animate-pulse" />
+                    </div>
+                </div>
+                <div className="flex gap-2">
+                    <div className="h-5 w-16 bg-white/5 rounded-full animate-pulse" />
+                    <div className="h-5 w-12 bg-white/5 rounded-full animate-pulse" />
+                    <div className="h-5 w-20 bg-white/5 rounded-full animate-pulse" />
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export function FeaturedProjects() {
+    const [projects, setProjects] = useState<Project[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [hasError, setHasError] = useState(false);
+
+    useEffect(() => {
+        async function fetchProjects() {
+            try {
+                const { data, error } = await supabase
+                    .from('projects')
+                    .select('*')
+                    .eq('featured', true)
+                    .order('display_order', { ascending: true });
+
+                if (error) {
+                    console.error('Error fetching projects:', error);
+                    setHasError(true);
+                } else if (data) {
+                    // Safe type mapping
+                    const mappedProjects: Project[] = (data as unknown as SupabaseProject[]).map((item) => ({
+                        id: item.id,
+                        title: item.title,
+                        description: item.description,
+                        techStack: item.tech_stack || [],
+                        image: item.image_url,
+                        link: `/works/${item.slug}`,
+                    }));
+                    setProjects(mappedProjects);
+                }
+            } catch (err) {
+                console.error("Unexpected error fetching projects", err);
+                setHasError(true);
+            } finally {
+                setIsLoading(false);
+            }
+        }
+
+        fetchProjects();
+    }, []);
+
+    // Error State
+    if (hasError) {
+        return (
+            <section className="py-20 flex justify-center text-white/40">
+                <p>Unable to load contents</p>
+            </section>
+        );
+    }
+
+    return (
+        <section id="featured-projects" className="py-20">
+            {/* Section Header */}
+            <div className="flex items-center justify-between mb-12 px-2">
+                <h2 className="text-3xl md:text-4xl font-medium text-white/90">
+                    Selected Works
+                </h2>
+                <Link
+                    href="/works"
+                    className="group flex items-center gap-2 text-white/50 hover:text-white transition-colors text-sm md:text-base"
+                >
+                    <span>View All</span>
+                    <ArrowUpRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
+                </Link>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                {isLoading ? (
+                    // Skeleton Loading State
+                    <>
+                        <ProjectCardSkeleton />
+                        <ProjectCardSkeleton />
+                    </>
+                ) : (
+                    // Real Data
+                    projects.map((project, index) => (
+                        <motion.div
+                            key={project.id}
+                            initial={{ opacity: 0, y: 20 }}
+                            whileInView={{ opacity: 1, y: 0 }}
+                            viewport={{ once: true, margin: "-100px" }}
+                            transition={{ duration: 0.5, delay: index * 0.1 }}
+                        >
+                            <ProjectCard project={project} />
+                        </motion.div>
+                    ))
+                )}
+            </div>
+        </section>
+    );
+}