Vibe Coding a New Portfolio with Gemini-CLI

I experimented with Gemini-CLI to scaffold a retro-OS–inspired portfolio, then iterated on it via prompts only. I have an existing portfolio like this at https://mccordinator.com, but I wanted to see what Gemini would do with a brand new project and high-level description of that portfolio. The following is a breakdown of what I did versus what Gemini did.

Environment Setup

• Node.js v23.
• Followed Gemini-CLI GitHub instructions to install and configure.
• Generated a Google AI Studio API key and set it via PowerShell:
  • $ setx GEMINI_API_KEY "YOUR_API_KEY"

Initial Prompt
I supplied this prompt to Gemini-CLI running in a powershell window:
“Scaffold an interactive portfolio in a retro OS theme. Desktop mimics Windows 95/98; mobile mimics iOS. Use Vite, React, TypeScript, Tailwind CSS, and the latest dependencies. Pull my resume from my supplised resume PDF.” (I pointed to the location of the PDF and gemini was able to access it after I moved it in to the project dir, after it told me it cannot access files outside of the project dir).

Gemini reported these actions while performing them in sequence:

• Created a new Vite project (React + TypeScript).
• Installed & configured Tailwind CSS via PostCSS.
• Parsed the resume into JSON data files under src/data.
• Built a basic Windows-style taskbar and “About Me” window component.

First Scaffold & Fixes
Gemini ran the dev server at http://localhost:5173/ so I could check it all out.
An error appeared: [plugin:vite:css] [postcss] It looks like you're trying to use tailwindcss directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install @tailwindcss/postcss and update your PostCSS configuration.

I told gemini about the error and that we need to fix it before I can view the app.
Gemini reported that it fixed a Tailwind PostCSS error by installing @tailwindcss/postcss and updating postcss.config.js.

I saw a couple more errors which I manually corrected since they were very simple (they will keep appearing later and I will then prompt gemini about them):

• An over-nested ../ import paths in Window.tsx. (One too many "../" in path).
• Removed stray newlines/invisible characters in skills.json causing parsing error.

After these fixes, the app loaded without console errors:

Feature Expansion
I prompted Gemini “I am able to see the app with no errors in the console. Thanks! Let's continue to build it out as the UI is very incomplete.” (purposely vague to see where it goes)

Gemini reported these actions after ~125 seconds:

• Added draggable windows.
• Created desktop icons (About Me, Experience, Skills) opening on double-click.
• Implemented closable windows.
• Built a basic Start menu.

I corrected one more import path mistake that had been repeated when gemini updated a .tsx file, then verified the app rendered again without errors:

Refining the Desktop UI
Gemini asked me if I’d like to refine the desktop UI or start building out the mobile UI. Vibe coding is a lot about working with and iterating and giving the right details but I don’t want to make this an extremely long article.

I will give it one more chance to refine the desktop UI based on a prompt with the following laundry list of items:

• The windows are fully transparent so when they overlap it makes it really hard to read the text inside the windows.
• The content inside the windows is also not formatted very well and is kind of a mush of text.
• The window itself needs some padding around the content.
• The buttons at the top right of the window are so small they are very hard to click. They need to be bigger like on a windows application.
• The maximize and minimize buttons seem to not be working on the windows as well.
• The “about me” “Experience” and “Skills” from the top taskbar are just plain text links that are not obvious the user should click. Let’s make them at least buttons and put them more near the center of the screen.
• Let’s also move the taskbar to the bottom of the screen and make sure the Start button is positioned inside of it to the left.
• Let’s also bring some color to this UI using the following colors in order from lightest to darkest: #b3cbb9; #8fb996; #709775; #415d43; #111d13;”

Gemini gave me a plan and started executing:
Here's my plan:

1. Integrate the Color Palette: I'll add your specified colors to the Tailwind CSS configuration so I can use them throughout the application.
2. Fix Window Transparency & Padding: I'll give the windows a solid, opaque background color from your palette and add proper padding to the content area.
3. Improve Window Buttons: I'll resize and restyle the minimize, maximize, and close buttons to be more prominent and user-friendly. I'll also add the logic for minimizing and maximizing windows.
4. Format Window Content: I'll refactor the content inside the "Experience" and "Skills" windows to be more organized and readable.
5. Style Desktop Icons: I'll redesign the desktop icons to look less like plain text and more like actual clickable icons.
6. Refine Taskbar & Start Menu: I'll ensure the taskbar is correctly positioned at the bottom and apply the new color scheme to it and the Start Menu for a cohesive look.

Gemini reported these actions after about ~145 seconds

• Updated Tailwind config with the specified colors.
• Made windows opaque and added padding.
• Resized and wired up window controls.
• Reformatted content inside windows.
• Restyled desktop icons as buttons.
• Repositioned and themed the bottom taskbar and Start menu.

Gemini again recreated all the previous path errors by adding one too many “../”. But this time instead of manually fixing them, I prompted: “it seems when you are writing imports of the user, experience, and skills data you are adding one too many "../" to the import path causing build errors. Can you remove those and resolve the paths correctly?”

Gemini replied “You are absolutely right. I apologize for that oversight. Incorrect relative paths are a common and frustrating error. I will correct the import paths in the Desktop.tsx
Component.” and it did so, then I was able to see the app again:

I observed the following:

• Good:
  • Window minimize, maximize, and close buttons were properly resized.
  • Minimize and maximize functionality was implemented.
  • Content formatting was a bit better without any guidance.
• Nope:
  • Windows remained transparent.
  • No colors applied.
  • Taskbar, Start button, and it’s icons are still oddly positioned.

Reflections
Precise prompting is essential for desired theming, functionality, etc. in a lot of instances.
Tailwind’s complexity may have confused Gemini’s CSS generation.
Total time: ~1 hour to scaffold, debug, and add core interactions.
The draggable-window feature is something I may add to my live portfolio at https://mccordinator.com. It’s not a new idea, but now I have an example implementation to study!

Since this was my first time vibe coding with an AI, I'm curious to learn about any tips and tricks others have for vibe coding and prompting. Comment below and let me know your thoughts!