DEV Community: Matt Mccord

Senior / Junior Dev CSS Art Contest Submission

Matt Mccord — Sun, 27 Jul 2025 23:41:40 +0000

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, CSS Art: Office Culture.

Inspiration

I came across this image online of a senior shielding a junior from the perils of the work week, probably on Reddit, and I really love the sentiment behind it. It captures the nurturing dynamic between seniors and juniors, which can also apply to other work relationships where leaders guide their team members.

Demo

(View at 0.5x scale if its too big for embed window)

Journey

First off, my inspiration and reference photo:

I really love that image! I couldn't find the creator, so if you know who it is, please leave a comment!

For my process, I used some light JavaScript to "trace" my inspiration image. I could toggle the reference image on and off by pressing "T" and show or hide all the CSS with "Y." This helped me ensure I was getting the lines just right.

At first, I was using divs with rounded edges, but after moving from junior to senior, I realized I needed a more powerful tool: clip-path: polygon(). This was the real game-changer! You provide the polygon() function with x and y coordinates for each vertex, allowing you to create any shape you need. I found that you can't add a border to the polygon, so each piece of armor and the senior has a black shape behind it, with a slightly smaller colored shape in front to create the outline effect.

I did all the work locally with vs code and chrome browser / devtools, then once finished created a codepen.

My workflow / desktop layout looked like this:

Toggling the reference image:

Layout / workspace on one monitor:

Using opacity and group border indicators:

Takeaways

This was a fun project and I got a lot of practice with clip-path and had some fun experimenting. In the future I'm looking to add the details to the armor and some lighting effects using gradients!

Thanks for checking out my entry! Please leave a reaction if you enjoyed it, and a comment if you have your own entry or have used clip-path and/or polygon() in interesting ways!

View the Github for this project here.

Google AI Studio - The Game of WAR!

Matt Mccord — Fri, 11 Jul 2025 17:08:15 +0000

This post is my submission for DEV Education Track: Build Apps with Google AI Studio.

What I Built

I was curious if Gemini could build a card game, so I went with something with simple rules like the game of WAR.

Prompt:
"Let's make an app that is the card game of war. Use React. Use CSS to design and draw the card faces. The game should start out as 1 player vs 1 player with player 1's deck on the left and player 2's deck on the right. Then they play the game of war. The following is the info and rules of the card game War"

And then I pasted in the info / about / rules from https://bicyclecards.com/how-to-play/war

Initial Result (after some layout rearranging and adding auto-play option):

Afterwards, I tweaked the UI more, shifted the bottom left card text and icon to the bottom right to align with common playing cards, added animations, tweaked the rules to give each player less starting cards (one suit each), added Imagen to make custom artwork for each card face (a warrior or fighter looking type), each card back (no details given here form me), and artwork for a victory screen (asked it to have one knight flexing and one celebrating). And then had Gemini optimize the number of api calls being made to Imagen.

Demo

Play The Game of WAR here
(Hopefully Imagen API key won't run out, but if it does there is fallback artwork).

Intro Screen

Main Game Screen

Victory!

My Experience

I had a good experience. I took it slow after the initial prompt and only asked for one to a few things at a time as long as they were simple. For more complex asks, I prompted those individually. Gemini also had the logic for when a tie happens and you keep playing for all the cards played since the tie, so it is a complete game of War!

It was fun and only took me maybe ~3 hours with a couple small breaks.

I did find that sometimes if I was interacting with the app while Gemini was trying to do its thing, then something wouldn't properly save (or maybe the dev server didn't proper restart?). I wouldn't see the new changes, even after refreshing from the preview window. I would have to let Gemini know this then it would do it's thing and then refresh. This is more likely a Google AI Studio related issue.

Vibe Coding a New Portfolio with Google AI Studio!

Matt Mccord — Wed, 09 Jul 2025 00:52:38 +0000

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!

Vibe Coding a New Portfolio with Gemini-CLI

Matt Mccord — Wed, 02 Jul 2025 21:12:26 +0000

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:

Integrate the Color Palette: I'll add your specified colors to the Tailwind CSS configuration so I can use them throughout the application.
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.
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.
Format Window Content: I'll refactor the content inside the "Experience" and "Skills" windows to be more organized and readable.
Style Desktop Icons: I'll redesign the desktop icons to look less like plain text and more like actual clickable icons.
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!