abhishek-portfolio-template 1.0.0

package/template/src/app/globals.css

@@ -0,0 +1,321 @@
+@import "tailwindcss";
+
+@custom-variant dark (&:is(.dark *));
+@plugin "tailwindcss-animate";
+
+@theme {
+  --color-folder-back: var(--folder-back);
+  --color-folder-front: var(--folder-front);
+  --color-folder-tab: var(--folder-tab);
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  @keyframes spin-slow {
+    from {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  --animate-spin-slow: spin-slow 20s linear infinite;
+}
+
+/* User Provided Variables for Command Menu */
+:root {
+  --hu-font-geist: var(--font-geist);
+  --hu-font-jetbrains: var(--font-jetbrains-mono);
+  --hu-background: 0, 0%, 100%;
+  --hu-foreground: 0, 0%, 14%;
+  --hu-card: 0, 0%, 99%;
+  --hu-card-foreground: 0, 0%, 14%;
+  --hu-primary: 235, 100%, 60%;
+  --hu-primary-foreground: 0, 0%, 98%;
+  --hu-secondary: 0, 0%, 97%;
+  --hu-secondary-foreground: 0, 0%, 20%;
+  --hu-muted: 0, 0%, 97%;
+  --hu-muted-foreground: 0, 0%, 56%;
+  --hu-accent: 0, 0%, 96%;
+  --hu-accent-foreground: 0, 0%, 20%;
+  --hu-destructive: 9, 96%, 47%;
+  --hu-destructive-foreground: 0, 0%, 98%;
+  --hu-border: 0, 0%, 92%;
+  --hu-input: 0, 0%, 100%;
+  --hu-ring: 0, 0%, 71%;
+  --color-fd-background: hsl(var(--hu-background));
+  --color-fd-card: hsl(var(--hu-background));
+}
+
+.dark {
+  --hu-background: 0, 0%, 7%;
+  --hu-foreground: 0, 0%, 100%;
+  --hu-card: 0, 0%, 9%;
+  --hu-card-foreground: 0, 0%, 100%;
+  --hu-primary: 235, 100%, 60%;
+  --hu-primary-foreground: 0, 0%, 98%;
+  --hu-secondary: 0, 0%, 15%;
+  --hu-secondary-foreground: 0, 0%, 100%;
+  --hu-muted: 0, 0%, 15%;
+  --hu-muted-foreground: 0, 0%, 71%;
+  --hu-accent: 0, 0%, 15%;
+  --hu-accent-foreground: 0, 0%, 100%;
+  --hu-destructive: 0, 84%, 50%;
+  --hu-destructive-foreground: 0, 0%, 98%;
+  --hu-border: 0, 0%, 100%, 10%;
+  --hu-input: 0, 0%, 100%, 5%;
+  --hu-ring: 0, 0%, 56%;
+  --color-fd-background: hsl(var(--hu-background));
+  --color-fd-card: hsl(var(--hu-background));
+}
+
+:root {
+  /* Core Dark Theme */
+
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: #ffffff;
+
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+
+  --radius: 0.625rem;
+
+  /* Animated Folder Colors - Using OKLCH values for the specific folder look */
+  /* These values roughly correspond to a warm orange/gold folder */
+  --folder-back: oklch(0.65 0.12 45);
+  --folder-front: oklch(0.7 0.14 50);
+  --folder-tab: oklch(0.6 0.1 40);
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+html,
+body {
+  background-color: #0a0a0a;
+  /* Force dark background immediately */
+  color: #ededed;
+  overscroll-behavior: none;
+  touch-action: manipulation;
+}
+
+body {
+  @apply bg-background text-foreground;
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* --- TIME TRAVELER EASTER EGG (v2) --- */
+.retro-mode {
+  --background: #050505;
+  --foreground: #33ff00;
+  /* Phosphor Green */
+  --muted: #1a2a1a;
+  --muted-foreground: #25b800;
+  --card: #000000;
+  --card-foreground: #33ff00;
+  --border: #33ff00;
+
+  font-family: 'Courier New', Courier, monospace !important;
+  text-shadow: 0 0 2px rgba(51, 255, 0, 0.4), 0 0 8px rgba(51, 255, 0, 0.2);
+  overflow-x: hidden;
+}
+
+.retro-mode body {
+  background-color: #050505 !important;
+}
+
+/* Force Green Wireframe Look */
+.retro-mode * {
+  border-color: rgba(51, 255, 0, 0.3) !important;
+  scrollbar-color: #33ff00 #000;
+}
+
+.retro-mode img,
+.retro-mode video {
+  filter: grayscale(100%) contrast(1.2) brightness(0.8) sepia(100%) hue-rotate(50deg) saturate(3);
+  mix-blend-mode: luminosity;
+  opacity: 0.8;
+}
+
+/* Override text colors globally */
+.retro-mode h1,
+.retro-mode h2,
+.retro-mode h3,
+.retro-mode h4,
+.retro-mode p,
+.retro-mode span,
+.retro-mode div,
+.retro-mode a,
+.retro-mode button {
+  color: #33ff00 !important;
+  letter-spacing: -0.02em;
+}
+
+/* CRT Scanlines & Vignette Overlay */
+.retro-mode::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  background:
+    linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
+    linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
+  background-size: 100% 2px, 3px 100%;
+  pointer-events: none;
+  z-index: 99999;
+}
+
+/* Screen Curve / Vignette */
+.retro-mode::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  background: radial-gradient(circle at center, transparent 60%, rgba(0, 0, 0, 0.6) 100%);
+  pointer-events: none;
+  z-index: 99998;
+}
+
+/* Hide Navbar ONLY when Terminal is Active (Transition) */
+html.terminal-active nav {
+  display: none !important;
+}
+
+html.terminal-active,
+html.terminal-active body {
+  overflow: hidden !important;
+  height: 100vh !important;
+  touch-action: none !important;
+}

package/template/src/app/layout.tsx

@@ -0,0 +1,39 @@
+import type { Metadata, Viewport } from "next";
+import { Outfit } from "next/font/google";
+import { bolivia } from "@/lib/fonts";
+import { NavBar } from "@/components/ui/navbar";
+import "./globals.css";
+
+const outfit = Outfit({
+    subsets: ["latin"],
+    variable: "--font-sans",
+    display: "swap",
+});
+
+export const viewport: Viewport = {
+    themeColor: "#050805",
+    width: "device-width",
+    initialScale: 1,
+    maximumScale: 1,
+    userScalable: false,
+};
+
+export const metadata: Metadata = {
+    title: "Abhishek Singh | Portfolio",
+    description: "A premium portfolio template with Bento layout and smooth animations.",
+};
+
+export default function RootLayout({
+    children,
+}: Readonly<{
+    children: React.ReactNode;
+}>) {
+    return (
+        <html lang="en">
+            <body className={`${outfit.variable} ${bolivia.variable} bg-[#050805] text-[#ededed] antialiased`}>
+                <NavBar />
+                <main>{children}</main>
+            </body>
+        </html>
+    );
+}

package/template/src/app/manifest.ts

@@ -0,0 +1,25 @@
+import { MetadataRoute } from 'next'
+
+export default function manifest(): MetadataRoute.Manifest {
+    return {
+        name: 'Abhishek Singh | Portfolio',
+        short_name: 'Abhishek',
+        description: 'Product Engineer',
+        start_url: '/',
+        display: 'standalone',
+        background_color: '#050805',
+        theme_color: '#050805',
+        icons: [
+            {
+                src: '/icon-192x192.png',
+                sizes: '192x192',
+                type: 'image/png',
+            },
+            {
+                src: '/icon-512x512.png',
+                sizes: '512x512',
+                type: 'image/png',
+            },
+        ],
+    }
+}

package/template/src/app/not-found.tsx

@@ -0,0 +1,16 @@
+import { Error404 } from "@/components/ui/pixeleted-404-not-found";
+
+export default function NotFound() {
+    return (
+        <Error404
+            postcardImage="https://res.cloudinary.com/dap0u41dz/image/upload/v1766866944/Batman_z0yo3k.jpg"
+            postcardAlt="New York City Postcard with Statue of Liberty"
+            curvedTextTop="The General Intelligence"
+            curvedTextBottom="of New York"
+            heading="(404) Looks like the page you're looking for got lost somewhere."
+            subtext="But hey — in New York, even the unexpected detours lead somewhere."
+            backButtonLabel="Back to Home"
+            backButtonHref="/"
+        />
+    );
+}

package/template/src/app/page.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { BentoGallery } from "@/components/home/bento-gallery";
+import { FeaturedProjects } from "@/components/home/featured-projects";
+import { TestimonialsMinimal } from "@/components/ui/minimal-testimonial";
+import { ContactSection } from "@/components/home/contact-section";
+
+export default function Home() {
+    return (
+        <main className="min-h-screen bg-[#0a0a0a] text-white selection:bg-white/20 relative overflow-x-hidden">
+            <div className="relative z-0">
+                <div className="lg:h-screen lg:overflow-hidden flex flex-col pt-24 md:pt-28 lg:pt-0 pb-6 px-4 md:px-8 max-w-[1600px] mx-auto min-h-[calc(100vh-80px)] lg:min-h-0">
+                    <div className="hidden lg:block h-16 shrink-0" />
+                    <div className="flex-1 flex flex-col justify-center">
+                        <BentoGallery />
+                    </div>
+                </div>
+
+                <div className="mt-32 px-4 md:px-8 max-w-[1600px] mx-auto space-y-32 pb-32">
+                    <FeaturedProjects />
+                    <TestimonialsMinimal />
+                    <ContactSection />
+                </div>
+            </div>
+        </main>
+    );
+}

package/template/src/app/robots.ts

@@ -0,0 +1,12 @@
+import { MetadataRoute } from 'next'
+
+export default function robots(): MetadataRoute.Robots {
+    return {
+        rules: {
+            userAgent: '*',
+            allow: '/',
+            disallow: '/admin/',
+        },
+        sitemap: 'https://abhishekkpf.vercel.app/sitemap.xml',
+    }
+}

package/template/src/app/sitemap.ts

@@ -0,0 +1,38 @@
+import { MetadataRoute } from 'next'
+
+export default function sitemap(): MetadataRoute.Sitemap {
+    const baseUrl = 'https://abhishekkpf.vercel.app'
+
+    return [
+        {
+            url: baseUrl,
+            lastModified: new Date(),
+            changeFrequency: 'weekly',
+            priority: 1,
+        },
+        {
+            url: `${baseUrl}/works`,
+            lastModified: new Date(),
+            changeFrequency: 'monthly',
+            priority: 0.9,
+        },
+        {
+            url: `${baseUrl}/about`,
+            lastModified: new Date(),
+            changeFrequency: 'monthly',
+            priority: 0.8,
+        },
+        {
+            url: `${baseUrl}/github`,
+            lastModified: new Date(),
+            changeFrequency: 'daily',
+            priority: 0.8,
+        },
+        {
+            url: `${baseUrl}/contact`,
+            lastModified: new Date(),
+            changeFrequency: 'yearly',
+            priority: 0.7,
+        },
+    ]
+}

package/template/src/app/template.tsx

@@ -0,0 +1,5 @@
+import { PageTransition } from "@/components/ui/page-transition";
+
+export default function Template({ children }: { children: React.ReactNode }) {
+    return <PageTransition>{children}</PageTransition>;
+}

package/template/src/app/works/[slug]/page.tsx

@@ -0,0 +1,50 @@
+import { createClient } from "@/utils/supabase/server";
+import { notFound } from "next/navigation";
+import { ProjectDetailsView } from "@/components/works/project-details-view";
+import { Metadata } from "next";
+
+export const revalidate = 0; // Dynamic rendering
+
+interface WorksDetailProps {
+    params: Promise<{
+        slug: string;
+    }>;
+}
+
+async function getProject(slug: string) {
+    const supabase = await createClient();
+    const { data } = await supabase
+        .from("projects")
+        .select("*")
+        .eq("slug", slug)
+        .single();
+
+    return data;
+}
+
+export async function generateMetadata({ params }: WorksDetailProps): Promise<Metadata> {
+    const { slug } = await params;
+    const project = await getProject(slug);
+    if (!project) return { title: "Project Not Found" };
+    return {
+        title: `${project.title} - Case Study`,
+        description: project.description,
+    };
+}
+
+export default async function ProjectDetailPage({ params }: WorksDetailProps) {
+    const { slug } = await params;
+    const project = await getProject(slug);
+
+    if (!project) {
+        notFound();
+    }
+
+    const { data: contributors } = await (await createClient())
+        .from("project_contributors")
+        .select("*")
+        .eq("project_id", project.id)
+        .order("created_at", { ascending: true });
+
+    return <ProjectDetailsView project={project} contributors={contributors || []} />;
+}

package/template/src/app/works/client.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { CurrentlyWorkingCard } from "@/components/works/currently-working-card";
+import { ProjectGrid } from "@/components/works/project-grid";
+
+import { Project } from "@/types/project";
+
+export function WorksClient({ projects }: { projects: Project[] }) {
+    const currentlyWorking = projects.find(p => p.is_currently_working);
+    const otherProjects = projects.filter(p => !p.is_currently_working);
+
+    return (
+        <main className="min-h-screen bg-[#050505] pt-32 px-6 md:px-12 pb-20 selection:bg-emerald-500/30 selection:text-emerald-50">
+            <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ duration: 0.5 }}
+                className="w-full max-w-[1280px] mx-auto space-y-24"
+            >
+                {/* 1. Currently Working Section */}
+                {currentlyWorking && (
+                    <section>
+                        <CurrentlyWorkingCard project={currentlyWorking} />
+                    </section>
+                )}
+
+                {/* 2. All Projects Section */}
+                {projects.length > 0 && (
+                    <section>
+                        <ProjectGrid projects={projects} />
+                    </section>
+                )}
+
+                {/* Empty State */}
+                {!projects.length && (
+                    <div className="text-center text-white/40 py-20">
+                        <p>No projects found. Use the Admin panel to add your works.</p>
+                    </div>
+                )}
+            </motion.div>
+        </main>
+    );
+}

package/template/src/app/works/page.tsx

@@ -0,0 +1,24 @@
+import { createClient } from "@/utils/supabase/server";
+import { WorksClient } from "./client";
+import { NavBar } from "@/components/ui/navbar";
+
+export const metadata = {
+    title: "Works | Abhishek Singh",
+    description: "A curated list of my projects and current work in progress.",
+};
+
+export default async function WorksPage() {
+    const supabase = await createClient();
+
+    const { data: projects } = await supabase
+        .from("projects")
+        .select("*")
+        .order("display_order", { ascending: true });
+
+    return (
+        <>
+            <NavBar />
+            <WorksClient projects={projects || []} />
+        </>
+    );
+}