2024 wasn’t great for me, but in the last few months, I started seeing some results of my hard work.
In Q1 2025, I was randomly scrolling through Twitter when I met @serafimcloud, the founder of @21st_dev. I messaged him and we had a chat. I made my move and asked if there was any opportunity for me at 21st. He mentioned the ambassador programme and I agreed to be a brand ambassador. In return, I had to publish 20 components every month for 21st and they’d promote my work with some compensation.
I was thrilled because it was my first time earning properly and not just random gigs.
I had that contract for six months but later cancelled it due to some personal reasons.
I used the money to buy a new laptop since my old one was broken and not working well.
For the first time in my life, with my own earnings, I bought a MacBook M4 Max. I was so happy and my parents were incredibly proud, especially my mum. (Love you, mum!)
Later, I also bought a phone with the same earnings.
After my 21st contract, I started working as a designer and designer engineer, mostly as a freelancer with small gigs. A few days later, I opened my own design agency and went full-time. I finished more than four projects in three months and earned the trust of amazing founders.
One day, the CTO of @Cloudflare DM’d me and asked if I wanted to work there! I couldn’t believe it was real. Unfortunately, I had to decline the offer due to medical problems.
Just a day later, the CEO of @vercel DM’d me and asked if I wanted to work at Vercel, Canon Events. I was so happy he helped me get on a call with John Phamous, but I missed the meeting because I had an emergency to the hospital. (I told him about it, but I never got a reply.)
I also got an offer from @elevenlabsio. I had pre-interviewed and interviewed but failed because I didn’t know how to design algorithms and implement data structures.
I’m sorry, that’s unfortunate.
I applied to some of my favourite companies and startups like Vercel, Raycast, Mintlify, and so on.
Although I was rejected from all of them, that didn’t deter me. While working, I also posted my work on Twitter, which led to founders from Twitter contacting me and booking design partner slots. This worked really well, and one founder even booked a slot for 2026 (bhai @dudufolio).
One of my open-source projects, @Ikiform, was selected for Vercel's open-source program. This was a really big achievement for me!
Everything was going well until a few months later when I contacted @DynoDiscord Bot’s founder Brain Tanner, also known as Nooblance. We had a meeting and he hired me as a design engineer to work on different project.
Now, I’m working with Brain as a design engineer to shape the future of Discord bots.
That concludes 2025.

My 2025 Wrapped

Add a button that instantly opens the current page in ChatGPT, Claude, or T3 Chat so users can ask questions about it—without copying or pasting a thing.
<hr>
<h2>Why Add This Button?</h2>
Sometimes your users get stuck. This button helps them get instant, smart answers from AI using your page content.
It’s especially useful for:
<ul>
<li>Code tutorials and examples</li>
<li>Troubleshooting guides</li>
<li>Complex product features</li>
<li>Learning resources</li>
<li>Any help page where a user might need clarification</li>
</ul>
Instead of making users explain the page to ChatGPT, this button does it for them.
<hr>
<h2>Problems with Traditional Help</h2>
Old-school help systems don’t always cut it:
<ul>
<li>Contact forms take time</li>
<li>FAQs don’t cover everything</li>
<li>Search often misses the point</li>
<li>Live chat needs real people</li>
<li>Users want help now</li>
</ul>
This button solves all that by giving users direct, AI-powered assistance based on the exact page they're on.
<hr>
<h2>How It Works</h2>
The idea is simple: We create a button that links to ChatGPT, Claude, and T3 with the current page's URL and title included in the query. These tools then know what the user wants help with.
<hr>
<h2>Step-by-Step Guide</h2>
<h3>1. Create the Button Component</h3>
Create a file called <code>AskAIButton.jsx</code> in your <code>components</code> folder:
<pre><code class="language-jsx">"use client";

import { ChevronDown, ExternalLinkIcon, MessageCircleIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
 DropdownMenu,
 DropdownMenuContent,
 DropdownMenuItem,
 DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

export default function AskAIButton({ slug }) {
 const currentUrl = typeof window !== "undefined" ? window.location.href : "";
 const pageTitle = typeof window !== "undefined" ? document.title : "";

 const q = `Please read the documentation from ${currentUrl} (titled: "${pageTitle}"). I want to discuss or get help with it.`;

 const gpt = `https://chatgpt.com/?${new URLSearchParams({
 hints: "search",
 q,
 })}`;
 const claude = `https://claude.ai/new?${new URLSearchParams({ q })}`;
 const t3 = `https://t3.chat/new?${new URLSearchParams({ q })}`;

 return (
 &#x3C;DropdownMenu>
 &#x3C;DropdownMenuTrigger asChild>
 &#x3C;Button variant="secondary">
 &#x3C;MessageCircleIcon className="size-4" />
 Ask AI
 &#x3C;ChevronDown className="size-4" />
 &#x3C;/Button>
 &#x3C;/DropdownMenuTrigger>
 &#x3C;DropdownMenuContent className="w-56">
 &#x3C;DropdownMenuItem asChild>
 &#x3C;a
 href={gpt}
 target="_blank"
 rel="noreferrer noopener"
 className="flex gap-2"
 >
 ChatGPT &#x3C;ExternalLinkIcon className="size-4 ms-auto" />
 &#x3C;/a>
 &#x3C;/DropdownMenuItem>
 &#x3C;DropdownMenuItem asChild>
 &#x3C;a
 href={claude}
 target="_blank"
 rel="noreferrer noopener"
 className="flex gap-2"
 >
 Claude &#x3C;ExternalLinkIcon className="size-4 ms-auto" />
 &#x3C;/a>
 &#x3C;/DropdownMenuItem>
 &#x3C;DropdownMenuItem asChild>
 &#x3C;a
 href={t3}
 target="_blank"
 rel="noreferrer noopener"
 className="flex gap-2"
 >
 T3 Chat &#x3C;ExternalLinkIcon className="size-4 ms-auto" />
 &#x3C;/a>
 &#x3C;/DropdownMenuItem>
 &#x3C;/DropdownMenuContent>
 &#x3C;/DropdownMenu>
 );
}
</code></pre>
<blockquote>
Note: This example uses UI components from <a href="https://hextaui.com?ref=preetsuthar.me">HextaUI</a>, but you can replace them with any UI library or plain HTML.
</blockquote>
<hr>
<h3>2. Add the Button to Your Page</h3>
<h4>For a Static Page</h4>
<pre><code class="language-jsx">import AskAIButton from "@/components/AskAIButton";

export default function HelpPage() {
 return (
 &#x3C;div>
 &#x3C;h1>Help Page&#x3C;/h1>
 &#x3C;AskAIButton />
 &#x3C;/div>
 );
}
</code></pre>
<h4>For a Dynamic Blog Page (e.g., <code>[slug].jsx</code>)</h4>
<pre><code class="language-jsx">import AskAIButton from "@/components/AskAIButton";

export default function BlogPost({ params }) {
 return (
 &#x3C;div>
 &#x3C;h1>Blog Post&#x3C;/h1>
 &#x3C;AskAIButton slug={params.slug} />
 &#x3C;/div>
 );
}
</code></pre>
<hr>
<h2>Conclusion</h2>
This small addition can dramatically improve your help experience.
<ul>
<li>Makes help pages interactive</li>
<li>Reduces user frustration</li>
<li>Integrates AI tools seamlessly</li>
<li>Helps users get the answers they need fast</li>
</ul>

Add an Ask AI Button in Next.js

<h2>What is llms.txt?</h2>
The <code>llms.txt</code> file helps artificial intelligence (AI) systems better understand your website by providing a clear outline of your site's structure and content, typically using Markdown syntax. It lists important page URLs and describes their content, making it easier for AI to interpret your site.
Having an accurate <code>llms.txt</code> is important—without it, AI tools may struggle to navigate your website or recognize the relationships between different pages. This can decrease your site's visibility in AI-driven search results.
While <code>llms.txt</code> is similar to <code>robots.txt</code> in that both assist web crawlers, they serve distinct roles. <code>robots.txt</code> controls crawler access, whereas <code>llms.txt</code> focuses on describing your site's content for AI understanding.
<h2>How to Create &#x26; Generate Content for llms.txt</h2>
The first step is to create a new file named <code>llms.txt</code> in the root directory of your website.
To generate content for <code>llms.txt</code>, simply head over to <a href="https://llmstxt.firecrawl.dev/">https://llmstxt.firecrawl.dev/</a>.
<img src="https://i.ibb.co/ccQts2Kn/image.png" alt="preview">
Click on <code>Enter Firecrawl API key</code> to enter your Firecrawl API key.
If you don't have one, go to the <a href="https://firecrawl.dev">https://firecrawl.dev</a> website, create a free account, and find your API key.
Once you get the API key, paste it into the llms.txt generator website and hit save.
<img src="https://i.ibb.co/cXr7jDBJ/image.png" alt="preview">
Here, you can enter your website URL, and it will automatically generate the content for you. You can also edit the content as per your requirements.
Now, just enter the URL of the website you want to generate the <code>llms.txt</code> for, and click on <code>Generate</code>.
This will automatically generate the content for your <code>llms.txt</code> file, so you can simply copy and paste it into your <code>llms.txt</code> file.
<img src="https://i.ibb.co/dshptBL9/image.png" alt="preview">
After generating the content, simply copy it and paste it into your <code>llms.txt</code> file.
Once done, deploy your website and you will find your <code>llms.txt</code> file at <code>https://yourwebsite.com/llms.txt</code>.
Here's an example: <a href="https://hextaui.com/llms.txt">https://hextaui.com/llms.txt</a>
Adding <code>llms.txt</code> to your website is a straightforward process that can significantly enhance how AI systems understand and interact with your content. By following the steps outlined above, you can ensure that your site is better equipped for AI-driven applications and search results.
For more information on <code>llms.txt</code>, you can refer to the following resources:
<ul>
<li><a href="https://llmstxt.org/">The /llms.txt file</a></li>
<li><a href="https://docs.firecrawl.dev/">Firecrawl Documentation</a></li>
</ul>

Add llms.txt to your website

When linking two pages in a Next.js application, the built-in <code>&#x3C;Link></code> component allows for seamless client-side navigation. Instead of triggering a full page reload like traditional websites, Next.js uses frontend routing to display the new page instantly, making for a faster user experience.
But that’s not all—Next.js also prefetches linked pages automatically. As soon as a <code>&#x3C;Link></code> element enters the viewport (i.e., becomes visible on screen), Next.js begins preloading the linked page in the background—provided it’s an internal link within your site. This makes navigation nearly instant when users click the link.
However, this prefetching behavior only works in production mode. If you're running your app in development with <code>npm run dev</code>, prefetching won't be triggered. To see it in action, stop the dev server, run <code>npm run build</code> to generate your production bundle, and start the app with <code>npm run start</code>.
You can observe this behavior in your browser’s Network tab. Once the page finishes loading (after the <code>load</code> event fires), links that are already visible (i.e., above the fold) start prefetching. Links that are out of view will be prefetched as the user scrolls them into the viewport.
Prefetching happens automatically on fast internet connections (like Wi-Fi or 3G+), unless the browser sends a <code>Save-Data</code> header indicating a preference for reduced data usage.
If you want to disable prefetching for a specific link, you can do so by passing <code>prefetch={false}</code> to the <code>&#x3C;Link></code> component:
<pre><code class="language-jsx">&#x3C;Link href="/contact" prefetch={false}>
 Contact
&#x3C;/Link>
</code></pre>

preet

currently

writing

My 2025 Wrapped

Add an Ask AI Button in Next.js

Add llms.txt to your website

Prefetching content in Next.js

where i've worked

@21st.devasBrand Ambassador

@InboundasDesign Engineer

work

Staxk

HextaUI

Ikiform

crafts