Forem: Naman Barkiya

How My Website Ranks #1 on ChatGPT Search (And Yours Can Too)

Naman Barkiya — Mon, 05 Jan 2026 20:44:01 +0000

A developer's guide to AEO/GEO - the SEO nobody's talking about yet.

I didn't set out to rank on ChatGPT.

I just built a portfolio. Pushed it to GitHub. Moved on.

Then someone messaged me: "Dude, your template shows up first when I ask ChatGPT for Next.js portfolio templates."

I thought they were trolling. Tried it myself.

They weren't.

My portfolio template was the #1 result for "best Next.js portfolio template GitHub" on ChatGPT search.

No ads. No backlink campaigns. No SEO agency.

So I did what any curious dev would do - I reverse-engineered why.

Turns out, I accidentally nailed something called AEO (Answer Engine Optimization) and GEO (Generative Engine Optimization).

Here's everything I learned.

TL;DR (If You Want the Playbook)

Add JSON-LD schema so AI can understand “who/what” your site is.
Set metadata so crawlers can read + reuse your content (within reason).
Write specific, verifiable content (entities + numbers + links).
Keep the site crawlable (sitemap + robots + clean structure).

The Game Changed (And Most Devs Missed It)

Google isn't the only search engine anymore.

ChatGPT, Perplexity, Claude - they're not just chatbots. They're search engines.

The important part isn't the numbers. It's the behavior shift: people ask AI, not “type keywords”.

But here's the thing: AI search works completely differently.

Google ranks links based on backlinks, domain authority, keywords.

AI engines? They retrieve and cite information. They need to understand your content, not just index it.

Traditional SEO asks: "How do I rank higher?"

AEO/GEO asks: "How do I become the answer?"

Big difference.

The Secret Sauce: JSON-LD Schema

Let's cut to the chase.

The #1 thing that made my portfolio "visible" to AI is structured data.

Specifically, JSON-LD schema markup.

Here's what I added to my homepage:

// app/(root)/page.tsx

const personSchema = {
  "@context": "https://schema.org",
  "@type": "Person",
  name: "Naman Barkiya",
  url: "https://nbarkiya.xyz",
  image: "https://res.cloudinary.com/.../og-image.png",
  jobTitle: "Applied AI Engineer",
  sameAs: ["https://github.com/namanbarkiya", "https://x.com/namanbarkiya"],
};

const softwareSchema = {
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  name: "Next.js Portfolio Template",
  applicationCategory: "DeveloperApplication",
  operatingSystem: "Web",
  offers: {
    "@type": "Offer",
    price: "0",
    priceCurrency: "USD",
  },
  author: {
    "@type": "Person",
    name: "Naman Barkiya",
    url: "https://nbarkiya.xyz",
  },
};

Then injected it into the page:

<Script
  id="schema-person"
  type="application/ld+json"
  dangerouslySetInnerHTML={{ __html: JSON.stringify(personSchema) }}
/>
<Script
  id="schema-software"
  type="application/ld+json"
  dangerouslySetInnerHTML={{ __html: JSON.stringify(softwareSchema) }}
/>

Why this works:

When a crawler hits my page, it doesn't just see a wall of HTML.

It sees structured data that explicitly says:

"This is a Person named Naman Barkiya"
"His job is Applied AI Engineer"
"He's the same as this GitHub profile and Twitter account"
"He authored this software application"

This is how AI builds its knowledge graph. This is how you become citable.

Schema Types You Should Know

Schema Type	When to Use
`Person`	Personal portfolios, about pages
`Organization`	Company websites
`SoftwareApplication`	Dev tools, apps, templates
`Article`	Blog posts, tutorials
`FAQPage`	Q&A sections
`HowTo`	Step-by-step guides

The One Line That Changed Everything

Most websites are invisible to AI search.

Not because the content is bad - but because crawlers often only ingest snippets.

Here's the line that fixes it:

// app/layout.tsx

export const metadata = {
  // ... other metadata
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      "max-image-preview": "large",
      "max-snippet": -1, // ← This is the magic line
    },
  },
};

max-snippet: -1

This tells (some) crawlers: "You can use as much of my content as you want."

Important nuance: this directive is widely recognized for Google (googleBot), and some other crawlers may respect it too. Either way, it’s a good default if your goal is discoverability.

With -1, AI can cite your entire page.

Small change. Massive impact.

Metadata That Actually Matters

Here's my full metadata setup:

export const metadata = {
  metadataBase: new URL("https://nbarkiya.xyz"),

  title: {
    default: "Naman Barkiya - Applied AI Engineer",
    template: "%s | Naman Barkiya - Applied AI Engineer",
  },

  description:
    "Naman Barkiya - Applied AI Engineer working at the intersection of AI, data, and scalable software systems.",

  keywords: [
    "Naman Barkiya",
    "Applied AI Engineer",
    "Next.js Developer",
    "XYZ Inc",
    "Databricks",
    // ... more keywords
  ],

  authors: [
    {
      name: "Naman Barkiya",
      url: "https://nbarkiya.xyz",
    },
  ],

  alternates: {
    canonical: "https://nbarkiya.xyz",
  },

  openGraph: {
    type: "website",
    locale: "en_US",
    url: "https://nbarkiya.xyz",
    title: "Naman Barkiya - Applied AI Engineer",
    description: "Applied AI Engineer working at...",
    siteName: "Naman Barkiya - Applied AI Engineer",
    images: [
      {
        url: "https://res.cloudinary.com/.../og-image.png",
        width: 1200,
        height: 630,
        alt: "Naman Barkiya - Applied AI Engineer",
      },
    ],
  },

  robots: {
    index: true,
    follow: true,
    googleBot: {
      "max-snippet": -1,
      "max-image-preview": "large",
    },
  },
};

Notice the pattern?

I repeat "Naman Barkiya" + "Applied AI Engineer" everywhere:

title.default
description
keywords
authors
openGraph.title
openGraph.siteName

This isn't keyword stuffing. It's entity reinforcement.

AI needs to see the same entity described consistently across multiple signals to build confidence in what it "knows" about you.

Write Content That AI Can Actually Use

Here's something most people miss:

AI doesn't trust vague claims.

This won't get you cited:

❌ "Worked on various web development projects"
❌ "Experienced software engineer"
❌ "Built many applications"

This will:

✅ "Built client dashboard at XYZ serving global traders"
✅ "Reduced API load time by 30%"
✅ "Scaled platform to 3,000+ daily users"

AI models are trained to identify:

Named entities (XYZ, Databricks, Next.js)
Quantified results (30%, 3,000 users, first month)
Verifiable links (company URLs, GitHub repos)

Here's how I structure my experience data:

// config/experience.ts

{
  id: "xyz",
  position: "Software Development Engineer",
  company: "XYZ",
  location: "Mumbai, India",
  startDate: new Date("2024-08-01"),
  endDate: "Present",
  achievements: [
    "Shipped production features within the first month for a trader-facing P&L dashboard",
    "Won XYZ AI Venture Challenge by building data transformation pipelines",
    "Led a 12-member team in an internal hackathon",
  ],
  companyUrl: "https://www.xyz.com",
  skills: ["Typescript", "React", "Databricks", "Python"],
}

Every claim is:

Specific (not vague)
Quantified (where possible)
Verifiable (company URL included)

The Technical Foundation

Don't skip the basics.

Sitemap:

// app/sitemap.ts

import { MetadataRoute } from "next";

export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: "https://nbarkiya.xyz",
      lastModified: new Date(),
      changeFrequency: "monthly",
      priority: 1.0,
    },
    {
      url: "https://nbarkiya.xyz/projects",
      lastModified: new Date(),
      changeFrequency: "monthly",
      priority: 0.8,
    },
    // ... more routes
  ];
}

Robots.txt:

User-agent: *
Allow: /

Sitemap: https://nbarkiya.xyz/sitemap.xml

Simple. Open. Crawlable.

The Complete Checklist

Here's everything in one place:

Schema & Structured Data

[ ] JSON-LD Person schema on homepage
[ ] Additional schemas for your content type (SoftwareApplication, Article, etc.)

Metadata

[ ] max-snippet: -1 in robots config
[ ] Canonical URLs on every page
[ ] authors field with name and URL
[ ] Entity-rich descriptions

Content

[ ] Specific, quantified achievements
[ ] Named entities (companies, tools, technologies)
[ ] External verification links
[ ] Semantic HTML (proper heading hierarchy, lists)

Technical

[ ] Dynamic sitemap
[ ] Open robots.txt
[ ] Fast page loads (AI crawlers have timeouts too)

Final Thoughts

The future of search is AI-first.

Google isn't going anywhere, but it's no longer the only game in town. If your content can't be understood by LLMs, you're invisible to a growing chunk of the internet.

The good news? It's not that hard to fix.

Add schema markup. Open up your snippets. Write specific, verifiable content.

That's it. That's the whole playbook.

I open-sourced my entire portfolio template. You can see all of this implemented:

github.com/namanbarkiya/minimal-next-portfolio

Fork it. Use it. Make it yours.

And maybe someday I'll ask ChatGPT for portfolio templates and see your site at #1.

That'd be pretty cool.

Got questions? Hit me up on Twitter/X or GitHub.

3D Card with Embedded Links Using Three.js and Blender

Naman Barkiya — Tue, 12 Sep 2023 09:39:41 +0000

Ever thought your traditional business card could use a serious upgrade?
Well, I sure did! Buckle up because I'm about to take you on a mind-bending journey into the world of creativity, innovation, and 3D magic. Welcome to the behind-the-scenes tale of my 'Dynamic Portfolio Card' project – where Three.js meets Blender to transform a plain ol' business card into an interactive work of art that'll leave everyone you meet absolutely awestruck! 🚀✨

Live Demo: card.namanbarkiya.xyz
Source Code: Github link

Let's jump right in with a step-by-step guide on how to create this project:

Setting Up the Project: ViteJS and Vanilla JS Template

npm create vite@latest my-3d-card -- --template vanilla

Installing Essential Libraries:
- gsap
- three

npm i three gsap

Creating the HTML Canvas and Script File: Now that we've got the essentials covered, let's set up our index.html file within the project directory. This file will serve as the canvas for our 3D masterpiece and will link to our main script file, main.js.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <link rel="icon" type="image/svg+xml" href="/logo.svg" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Card | Naman Barkiya</title>
    </head>
    <body>
        <canvas class="webgl"></canvas>
        <script type="module" src="./main.js"></script>
    </body>
</html>

Moving Forward with main.js File:

import all necessary packages:

import "./card-style.css";
import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

Now we create a scene for our threejs (Customizing Light Positions):

const scene = new THREE.Scene();

const sizes = {
    width: window.innerWidth,
    height: window.innerHeight,
};

const lightFront = new THREE.DirectionalLight(0xffffff, 0.7);
lightFront.position.set(0, 10, 30);
scene.add(lightFront);

const lightBack = new THREE.DirectionalLight(0xffffff, 0.7);
lightBack.position.set(-30, 10, -30);
scene.add(lightBack);

const lightMid = new THREE.DirectionalLight(0xffffff, 0.7);
lightMid.position.set(30, 10, -30);
scene.add(lightMid);

const pointLight = new THREE.PointLight(0xffffff, 1, 60);
pointLight.position.set(10, 10, 30);
scene.add(pointLight);

const camera = new THREE.PerspectiveCamera(45, sizes.width / sizes.height);
camera.position.z = 30;
scene.add(camera);

const canvas = document.querySelector(".webgl");
const renderer = new THREE.WebGLRenderer({ canvas });
renderer.setSize(sizes.width, sizes.height);
renderer.setClearColor(0x030712, 1);
renderer.setPixelRatio(2);

Before delving into the JavaScript file, let's first craft the star of our show – the 3D model. We'll be using Blender for this creative endeavor. You'll find the Blender file included in the source code. Let's jump into Blender and start bringing our vision to life!

First download the blend file from the link:
drive link for assets of 3d card
Feel free to take your pick: you can either whip up your very own card from scratch or just grab mine and give it your own spin using this Figma file link: figma file link
Once all the files are ready you can go to blender and replace card.png and logo.png in the shading section:
Make the adjustments from the UV Editing Section and set the height and width accordingly (It will already be adjusted if you've downloaded my assets):

Once everything is ready let's export the model in glTF 2.0 (.glb/.gltf) format and you are good to go!

Let's get back to our main.js file

Now that we have our 3D model and three.js scene ready, It's time to now load the model and embed links 🔥

We need a object containing all the links and position on the canvas:

const linkPos = {
    box1: {
        x: 0.7,
        y: 1.21,
        z: 0.03,
        name: "ClickableBox1",
        link: "/naman_barkiya_resume.pdf",
    },
    box2: {
        x: 0.06,
        y: -0.4,
        z: 0.03,
        name: "ClickableBox2",
        link: "https://namanbarkiya.xyz",
    },
    circle1: {
        x: -0.46,
        y: -1.06,
        z: 0.03,
        name: "ClickableCircle1",
        link: "https://github.com/namanbarkiya",
    },
    circle2: {
        x: 0.05,
        y: -1.06,
        z: 0.03,
        name: "ClickableCircle2",
        link: "https://www.linkedin.com/in/naman-barkiya-015323200/",
    },
    circle3: {
        x: 0.55,
        y: -1.06,
        z: 0.03,
        name: "ClickableCircle3",
        link: "mailto:naman.barkiya02@gmail.com",
    },

this object defines each link position on the canvas as you can see in the image:

Let's load the model and align all the link positions with respect to card:

// Load the 3D model
const loader = new GLTFLoader();
let mesh;

loader.load(
    "/naman_card.glb",
    (gltf) => {
        mesh = gltf.scene;

        mesh.traverse((child) => {
            if (child.isMesh) {
                child.name = "ClickablePart1"; // Replace with a meaningful name
            }
        });

        // Optionally, you can set the position, rotation, or scale of the mesh here
        // For example:
        // mesh.position.set(x, y, z);
        // mesh.rotation.set(rx, ry, rz);

        // Increase the size of the mesh
        const scaleFactor = 5;
        mesh.scale.set(scaleFactor, scaleFactor, scaleFactor);

        scene.add(mesh);

        // BOX 1
        const box1Geometry = new THREE.PlaneGeometry(0.5, 0.08);
        const box1Material = new THREE.MeshBasicMaterial({
            color: 0xff0000,
            transparent: true,
            opacity: 0,
        });
        const box1 = new THREE.Mesh(box1Geometry, box1Material);
        box1.position.x = linkPos.box1.x;
        box1.position.y = linkPos.box1.y;
        box1.position.z = linkPos.box1.z;

        box1.name = linkPos.box1.name;
        mesh.add(box1); // Add the circle as a child of the loaded model

        // BOX 1
        const box2Geometry = new THREE.PlaneGeometry(1.2, 0.2);
        const box2Material = new THREE.MeshBasicMaterial({
            color: 0xff0000,
            transparent: true,
            opacity: 0,
        });
        const box2 = new THREE.Mesh(box2Geometry, box2Material);
        box2.position.x = linkPos.box2.x;
        box2.position.y = linkPos.box2.y;
        box2.position.z = linkPos.box2.z;

        box2.name = linkPos.box2.name;
        mesh.add(box2); // Add the circle as a child of the loaded model

        // CIRCLE 1
        const circle1Geometry = new THREE.CircleGeometry(0.16, 32);
        const circle1Material = new THREE.MeshBasicMaterial({
            color: 0xff0000,
            transparent: true,
            opacity: 0,
        });
        const circle1 = new THREE.Mesh(circle1Geometry, circle1Material);
        circle1.position.x = linkPos.circle1.x;
        circle1.position.y = linkPos.circle1.y;
        circle1.position.z = linkPos.circle1.z;

        circle1.name = linkPos.circle1.name;
        mesh.add(circle1); // Add the circle as a child of the loaded model

        // CIRCLE 2
        const circle2Geometry = new THREE.CircleGeometry(0.16, 32);
        const circle2Material = new THREE.MeshBasicMaterial({
            color: 0xff0000,
            transparent: true,
            opacity: 0,
        });
        const circle2 = new THREE.Mesh(circle2Geometry, circle2Material);
        circle2.position.x = linkPos.circle2.x;
        circle2.position.y = linkPos.circle2.y;
        circle2.position.z = linkPos.circle2.z;

        circle2.name = linkPos.circle2.name;
        mesh.add(circle2); // Add the circle as a child of the loaded model

        // CIRCLE 3
        const circle3Geometry = new THREE.CircleGeometry(0.16, 32);
        const circle3Material = new THREE.MeshBasicMaterial({
            color: 0xff0000,
            transparent: true,
            opacity: 0,
        });
        const circle3 = new THREE.Mesh(circle3Geometry, circle3Material);
        circle3.position.x = linkPos.circle3.x;
        circle3.position.y = linkPos.circle3.y;
        circle3.position.z = linkPos.circle3.z;

        circle3.name = linkPos.circle3.name;
        mesh.add(circle3); // Add the circle as a child of the loaded model
        mesh.rotation.y = 0;
        mesh.rotation.z = 0;
        loop();
    },
    undefined,
    (error) => {
        console.error("Error loading 3D model:", error);
    }
);

Then we make the card interactive by adding controls and setting auto rotation play/plause on click:


const controls = new OrbitControls(camera, canvas);
controls.enableDamping = true;
controls.enablePan = false;
controls.enableZoom = false;
controls.autoRotate = false;
controls.minPolarAngle = 1.5;
controls.maxPolarAngle = 1.5;
controls.autoRotateSpeed = 3;

Making the card responsive:

window.addEventListener("resize", () => {
    sizes.height = window.innerHeight;
    sizes.width = window.innerWidth;

    camera.aspect = sizes.width / sizes.height;
    camera.updateProjectionMatrix();
    renderer.setSize(sizes.width, sizes.height);
});

const loop = () => {
    controls.update();
    renderer.render(scene, camera);
    window.requestAnimationFrame(loop);
};

let autoRotate = false;

Opening the links in new tab:

canvas.addEventListener("click", (event) => {
    controls.autoRotate = !autoRotate;
    autoRotate = !autoRotate;

    const mouse = {
        x: (event.clientX / sizes.width) * 2 - 1,
        y: -(event.clientY / sizes.height) * 2 + 1,
    };

    const raycaster = new THREE.Raycaster();
    raycaster.setFromCamera(mouse, camera);

    // Check for intersections with the clickable circle
    const clickableBox1 = scene.getObjectByName(linkPos.box1.name);
    const clickableBox2 = scene.getObjectByName(linkPos.box2.name);
    const clickableCircle1 = scene.getObjectByName(linkPos.circle1.name);
    const clickableCircle2 = scene.getObjectByName(linkPos.circle2.name);
    const clickableCircle3 = scene.getObjectByName(linkPos.circle3.name);

    if (clickableCircle1) {
        const intersects = raycaster.intersectObject(clickableCircle1);

        if (intersects.length > 0) {
            // Replace 'YOUR_HYPERLINK_URL' with the desired URL
            window.open(linkPos.circle1.link, "_blank"); // Opens the link in a new tab
        }
    }

    if (clickableCircle2) {
        const intersects = raycaster.intersectObject(clickableCircle2);

        if (intersects.length > 0) {
            // Replace 'YOUR_HYPERLINK_URL' with the desired URL
            window.open(linkPos.circle2.link, "_blank"); // Opens the link in a new tab
        }
    }

    if (clickableCircle3) {
        const intersects = raycaster.intersectObject(clickableCircle3);

        if (intersects.length > 0) {
            // Replace 'YOUR_HYPERLINK_URL' with the desired URL
            window.open(linkPos.circle3.link, "_blank"); // Opens the link in a new tab
        }
    }

    if (clickableBox1) {
        const intersects = raycaster.intersectObject(clickableBox1);

        if (intersects.length > 0) {
            window.open(linkPos.box1.link, "_blank");
        }
    }

    if (clickableBox2) {
        const intersects = raycaster.intersectObject(clickableBox2);

        if (intersects.length > 0) {
            // Replace 'YOUR_HYPERLINK_URL' with the desired URL
            window.open(linkPos.box2.link, "_blank"); // Opens the link in a new tab
        }
    }
});

Now the last part, adding styles:
- card-style.css:

:root {
    color: rgba(255, 255, 255, 0.87);
    background-color: #242424;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    display: flex;
    place-items: center;
}

.clickable-box {
    cursor: pointer;
}

Conclusion

Well folks, that's a wrap! We've reached the end of this wild ride through the world of 3D creativity and innovation. From a plain old business card to a jaw-dropping "Portfolio Card with embedded links" we've seen it all.

Useful Links

Live Demo: card.namanbarkiya.xyz
Source Code: Github link

Portfolio: namanbarkiya.xyz
Github: namanbarkiya
Linkedin: Naman Barkiya