After my previous attempt to create a portfolio using Gemini-CLI fell short, I turned to Google AI Studio. You can see that article here.
I created a new project after initially following a DEV Education Track tutorial on a Magic the Gathering: Card Generator, I was impressed by the immediate results.
Initial Prompt and Results:
Prompt:
I'd like to build a portfolio that showcases my projects with a similar UI like the Gemini OS project. The UI is inspired by windows 95 desktop look. There are folders for each project category. Use Svelte for the framework. Utilize Imagen to generate a dynamic wallpaper for the desktop.
Result:
The result was significantly better than my previous attempts with Gemini-CLI.
Observations:
Comparing Gemini in Google AI Studio with Gemini-CLI revealed some notable project development differences. On my local machine, Gemini-CLI struggled with import path configurations and appeared to have complex CSS and Tailwind framework challenges. The AI seemed to apply configuration fixes that potentially left the project with incomplete or empty configuration settings for Tailwind resulting in missing styles.
An intriguing aspect was the deviation from my original instructions. I requested Svelte, but the AI generated a React application and independently added TypeScript, which was not part of my initial specification. It's cool, Gemini. I, too, am a strictly-typed enjoyer 😂.
The component class names suggested a potential CSS framework usage, though no package.json was initially visible in the file explorer.
Side Quest: ⚔️ Investigating Dependencies:
When I requested to view the package.json, Gemini engaged in an elaborate process of generating the file, which raised questions about how and where dependencies were previously installed. During this exploration, the AI candidly acknowledged its framework selection error, demonstrating a level of self-awareness and willingness to correct its approach. Specifically, Gemini apologized for using React instead of the requested Svelte framework and offered to completely refactor the application if desired:
"I also want to sincerely apologize—I've just realized that your original request was to build this portfolio using Svelte, and I mistakenly used React. That was my oversight. I am more than happy to refactor the entire application to Svelte if you'd like to proceed with that framework instead."
I was tempted, but decided not to potentially derail the project with a whole refactoring. I didn't see any CSS framework in the package.json so I'm still curious there, but decided to move on to a bigger task.
Integrating Personal Data:
I had one last thing I wanted Gemini to attempt, which was utilizing the JSON data from my current portfolio project at https://mccordinator.com instead of the dummy data it had generated.
Prompt:
I'd like you to rework the app to use the JSON data I have provided in the data/ directory instead of using metadata.json. In data/apps.json are all my apps and game projects with information and links. You can ignore images data in there for now. in data/portfolio-about.json is data in a similar shape for the "About" section of the portfolio.
Result:
Observations:
The result was quite impressive. Gemini created folders for each category from my JSON data, with each folder opening to a window displaying projects and their corresponding links. A minor visual issue emerged with project section headers appearing in white text against a white background, which became visible only when highlighted. The interface allowed for multiple window interactions, including the ability to open and drag windows across the desktop, though this functionality wasn't captured in the demonstration gif.
Fun side note: The "Shutdown" option put a cheeky log in the console:
hat one made me laugh out loud. 😂 Well played, Gemini. 🤖
All in all, using Google AI Studio is pretty awesome. You can easily grab the project in a zip to set it up on your local for further development. There is also an option for quick deploy to Google Cloud as a Cloud Run Service, but I didn't work through this as it required setting up billing and I don't plan to deploy this app at this time.
Thanks for reading. Comment below if you've had any interesting experiences with vibe coding yourself!
Top comments (0)