Our Portfolio's Origin Story: A Co-Design Adventure

Hey everyone! Ever had a project in mind that initially felt like a solo mission and ended up being a jam session with talented collaborators, both human and artificial? That's how the making of this portfolio went. It all started with an idea, a good friend, and a Figma canvas. From there, it was supercharged with AI brainpower—first from ChatGPT for high-level planning, and then with the incredible, and at times challenging, coding assistance of Cursor.

I had this vision for an interactive, developer-centric space. The core idea of it was having a terminal-themed interface, because what screams "developer" more than a good old command line, right? But it was supposed to be inviting, not intimidating, packed with useful info, and genuinely fun to explore.

This project was also a personal learning journey. I was new to some of the key technologies I had in mind, like Next.js and Tailwind CSS. The path wasn't always linear. We started with that Figma design, got an initial implementation up and running with AI's help, and then began a series of iterations, tweaking UI/UX elements, adding new features, and refining the experience bit by bit. It's a common narrative in software development, but one that took on new dimensions with different AI tools being actively involved in the process.

There's a lot of talk about AI replacing developers. Honestly, there were moments during this project, especially in the early days when Cursor was rapidly generating code, that I felt a flicker of that concern. Was my role diminishing? But as we'll see, particularly when we get to the nitty-gritty of features like the terminal piece, the reality was different.

It all began with a brainstorming session with a talented designer friend, Yash Mouje (check out his work at https://yashmouje.com/), who is also a skilled developer. We were kicking around ideas for a portfolio that would stand out. Yash fired up Figma, and together we started sketching out the initial look and feel, which is where the terminal theme quickly took center stage.

We planned for this portfolio to be interactive and developer-focused (in terms of the aesthetic and functionality), as well as serve as a hub for my work.

With a cool Figma design in hand, the next big question was: how do we turn this into a real, working thing? And what's the smartest way to build it, especially given my learning goals? This is where ChatGPT came into the picture. I fed our Figma concepts and my objectives into the o3 model which is great at visual reasoning, and it helped us refine the vision into a set of potential features, user flows, and tech stacks. I mentioned I wanted to learn Next.js and Tailwind CSS, but had no prior experience. ChatGPT listed the pros and cons of different frameworks and libraries. It helped me confirm that Next.js and Tailwind were a solid choice for the goals, and finally, distilled all the information into a detailed document going over the Minimum Viable Product (MVP).

This set the stage for Cursor to help with the actual coding.

With a plan in place, it was time to write some code. This is where Cursor shined, becoming my day-to-day AI pair programmer. The initial phase was exciting as Cursor (powered by Gemini) helped rapidly translate the Figma designs and ChatGPT's MVP details into a a working application, even though the initial look didn't really match what I had in my mind. We got the basic structure up, implemented core navigation, and started fleshing out the content sections. It felt like development on fast-forward.

Once that first version was up and running, the real work of refinement began. This is where the project turned into a more typical development cycle of iterative enhancements, UI/UX tweaks, and feature additions. It was during this phase that the collaboration with AI was more evident to me, as opposed to just having AI do all the job.

The GotoPrompt is the idea that started as an idea in our initial Figma jam and was turned into the command bar that you see at the bottom of your screen (if not on mobile). This is where a lot of the magic happens. Bringing it to life was a bit challenging.

Initially, I was blown away as I saw Cursor was rapidly implementing the features I had in mind. However, there were moments I felt a twinge of that existential dread some developers talk about; "Is AI making me obsolete?" It seemed like Cursor was handling so much. However, the GotoPrompt became a clear example of where that didn't seem to be the case (at least for now :D ).

Here's what I aimed for and what got built, with some important lessons along the way:

• It Looks the Part: Styled to mimic a terminal prompt, always there at the bottom.
• Knows Where You Are: It displays breadcrumbs (like /blog/tag/react), and you can click 'em to go back.
• Takes "Commands": You can click it and type things like cd /blog or 'cd ..' to navigate
• Smart Suggestions: As you type, it offers autocomplete suggestions. This is where we hit our first major snag.
  • What happened: Cursor initially built the autocomplete logic using a series of if/else statements. As we added more commands and complexity, this structure became increasingly convoluted and noticeably slow. Every time I asked for optimizations, the AI, bless its digital heart, would often just add more conditional logic, inadvertently making it less efficient. I realized the AI wasn't conceptualizing the problem optimally as it was stuck in a negative pattern. I stepped in and suggested a complete overhaul of the suggestion engine, proposing a Trie data structure (who would have thought Leetcode prep would come in handy!). I explained the concept, and then Cursor was able to help implement it. This dramatically improved performance and made the suggestion logic much cleaner. 1 point to the humans team!
• Contextual Commands: The command bar needed to be smart and offer dynamic commands based on your current location in the website (e.g., suggesting blog tags when you're in the blog section). This was where the second stumble happened.
  • What happened: Cursor's first attempt was to manage all of this context-awareness client-side. This involved fetching and processing a lot of data directly in the browser, leading to a sluggish user experience and complex state management. The AI was trying to build data filtering and processing logic directly into the component, which felt like the wrong approach for performance and scalability. I paused the "let the AI cook" approach and took a step back. I thought about a more robust solution: a dedicated server-side API endpoint to handle the logic for generating these contextual commands. I sketched out the API's purpose, and then worked with Cursor to implement it. This shifted the heavy lifting to the server, making the client-side suggestions much leaner and faster. Another point to the humans team :D
• Speedy Search (Thanks to the Trie): With the Trie in place, the static command search became lightning fast.
• Action Hero: It executes your commands, routing you around the Next.js app or opening external links.

Now, developing new serverless functions and API routes were new territory for me. However, I quickly learned the underlying structure of it. The API route is supposed to dynamically generate command suggestions based on your current path. For instance, when you're in the /blog sections, it needs to look into MDX file frontmatter to suggest navigation to articles or tags, whereas on /projects, it serves up commands based on project keywords. Basic rate-limiting and input validation were also added to the API for safety.

Here's a diagram detailing how the API works:

Building the command bar was actually a sample of the development of the entire project: initial AI-driven acceleration, followed by human intervention when the AI's path wasn't optimal, leading to a stronger, more efficient solution. It taught me that while AI can be an incredible coding partner, it is not (yet) a replacement for architectural insight and problem-solving.

A command bar for the sake of being a command bar doesn't make a website. I also needed a solid foundation for the overall structure of the main application layout. With Cursor's help, we sketched out:

• A homepage with minimal design
• A Navbar component that collapses neatly.
• A Footer component with a bit of personality: It shows dynamic info like my inferred location and current time (a fun touch we brainstormed!)
• And, of course, the persistent bottom bar, home to the GotoPrompt (the command bar).

First impressions count! The homepage, designed with those initial Figma vibes in mind, sets the tone.My name and roles ("Researcher | Developer | AI Enthusiast") have a neat little animation when the page loads and react to hover. Continuing the theme, the main navigation links on the homepage are presented as if they're commands you'd type. The links to my external profiles (LinkedIn, GitHub) were also put into a corner for easy access.

With the navigation system in place (thanks to a lot of back-and-forth with Cursor!), it was time to build out the actual content sections. Most of these are served via a flexible dynamic routing setup for content pages, a pattern that Gemini in Cursor helped me understand and implement effectively.

This is my "About Me" section (you can visit it at /whoami), but we tried to make it a bit more comprehensive by adding a bit about my personal philosophy and what drives me, a rundown of my technical and soft skills, my educational background, and some highlights from hackathon projects I've been a part of.

This is the showcase! I used a custom ProjectCard component to lay out details for each project (check them out at /projects). They include the title, description, my role, and the tech stack, as well as the challenges I faced, the approach I took, and the outcomes. They also have optional external link, often to a GitHub repo, And a unique keyword for each project that links to the projects. These keywords are also integrated neatly with the command bar; If you're on the /projects page, you can type a project's keyword into the prompt (or cd keyword), and it'll open its external link!

Pretty straightforward – this page (find it at /contact) is all about making it easy to get in touch: Email, LinkedIn, and GitHub profile links are all there.

Given the slightly unconventional interface, we figured a user guide (/howto) would come in pretty handy. This page explains the ins and outs of using the command bar, how to filter blog posts by tags and even sub-tags, using those project keywords on the /projects page, and quick pointers to other informational sections.

Separate from the main blog, the /papers section lists academic papers from a JSON data file. This was more straightforward, but still, structuring the data and rendering it cleanly was a bit of a challenge.

A portfolio needs a blog, and I wanted mine to handle all kinds of content. This meant looking into MDX.

The blog is powered by MDX, allowing JSX in Markdown. Setting this up with next-mdx-remote/rsc and various rehype/remark plugins was a learning curve. Standard stuff like rehype-slug, rehype-autolink-headings, and remark-gfm were things that were initially integrated (Many of these are part of the Unified/Remark/Rehype ecosystem). From the get-go, our Figma designs hinted at needing special components. <TableOfContents />, <CollapsibleHeadingDynamic />, math components, and <MermaidDynamic /> were all developed iteratively.

Organizing by tags was also very important. I wanted a multi-level tag filtering system, which handles navigation to specific tag combinations where each tag can have its own theme! This required complex routing and data-fetching logic in Next.js.

My last addition was simple academic-style citations (using a <Ref /> component) and a bibliography (via a <References /> component) sounded like a neat feature. Little did I know...

First, the citation and bibliography components were born. A custom tooltip, though... oh boy. I wanted a nice little hover effect, and I was determined to make it happen. But as a React/Tailwind newbie, this was tough. Positioning, data fetching, stickiness; all the classic tooltip problems was amplified by my learning curve with React and Tailwind CSS. I tried dynamic recalculations, retry mechanisms, global listeners, debouncing... each attempt was a learning experience, and a failure xD After many cycles, it became clear (through discussions with myself and my AI assistants) that the complexity was outweighing the benefit. The super-custom tooltip was a time sink. I finally decided to forget about the custom logic and switched to native browser tooltips. Functional, but clunky. However, I might soon develop a minimalist custom tooltip with a simpler logic.

Development is rarely a straight path, and this portfolio was no exception. Throughout the journey, many small but critical challenges were tackled with AI support, especially from Cursor. AI accelerated what would have otherwise been slow, manual problem-solving. Iterative improvements to features like GotoPrompt also benefitted from quick prototyping and debugging with AI.

This project became a powerful case study for me in human-AI collaboration. Starting with a shared Figma design laid the creative foundation, while ChatGPT guided early-stage planning—defining the MVP and validating tech stack decisions, and Cursor (powered by models like Claude and Gemini) helped with the rest. As someone new to Next.js and Tailwind CSS, the AI made me feel like ambitious goals are finally within reach.

I hope you enjoyed this peek behind the curtain of how this portfolio was co-created! Feel free to explore, try out the commands in the command bar, and let me know if you have any questions or spot any sneaky bugs I missed!