DEV Community: Anna Villarreal

I Love Watching the Storms Roll In

Anna Villarreal — Fri, 27 Mar 2026 02:06:12 +0000

I have always liked the weather radar. First of all, it's rainbow. Second of all, the weather is mysterious and constantly changing. I like the visual aid of seeing what's about to head my way, and making the connection of what the radar looks like versus what is happening outside. I am not a meteorologist. I am a curious observer. I've been building this fun and simple app for myself and to share with students to get them excited about science and weather. Hey it's storm season after all!

I've included the live stream of one of my favorite storm crew's when they go live - the ya'll squad. I obviously take no credit for any of their videos, but I enjoy shoring it with others.

I am using publicly available API keys of free services like NOAA/NWS for radar images. I am Using another free one for air quality information. I hope to set up a weather bug or something of the sort so we can have live data for our location, potentially sharing our data for the greater good. This is one of my latest side projects. Just wanted to share the fun colors.

What weather related apps have you created? I may look into some other radars, but this one is working and I am happy with it for now. If you would like to see the actual site you are welcome to visit it on github pages here:

annavi11arrea1.github.io

SECRET: Click the "Weather Station" title at the top to use it in your location. Let me know what you think!

SIDE NOTE: The video only plays when the stream is live. Otherwise, it displays current info.

The Ultimate Job Finding-Management Tool

Anna Villarreal — Tue, 24 Mar 2026 03:05:20 +0000

I need to go to bed but I want to share my excitement before I crash. I built a tool finally to help me find jobs. I save the description and have ollama check the alignment with my current skills, which gives it a star rating of 1 to 5 stars. This list is then sorted.

Now I can easily collect relevant jobs and apply to the ones that are most aligned to my skill set!

This is a chrome extension built quickly with copilot CLI and local ollama. Fighting automation with semi automation! Haha.

Full view option

Extension pop-out

This was both fun and exciting! I'm probably not done playing with this, I really like it a lot. I have future plans for sure.

I love it also because it's neon and fun and completely personalized.

What do you think? Have you tried something like this?

Edit 3-25-2026:

You guys have me so flattered! It convinced me to take action. I made a database version on main and a local storage version on dev which you are welcome to branch/fork and poke at if you really want to lol.

You guys are literally awesome. Thank you for making my day.

If you like it, give it a star! <3

Repo: Job Seeker Repo

Path of Discovery

Anna Villarreal — Tue, 17 Mar 2026 01:12:55 +0000

This is a submission for the 2026 WeCoded Challenge: Echoes of Experience

A bit personal, a bit all over. Sharing pieces of my uncomfortable journey in the working world.

Illusions of Society

Why is there a glass ceiling if a woman must pay as much as a man for things?

I make 20% less to my male equivalent, but life expenses are the same (if not more if you include the “pink” tax) as what the man would pay. In 2023, that number was precisely 21.8 percent according to this source.

I was once told to not get fat because I'm “not married yet”.

At one of my first jobs, the person that interviewed me told me he thought I was going to be Mexican. Since I look white, you would never guess I was half Mexican.

At a place where I had training, a peer asked me: “Why would anyone want to hire you? You don’t even have a computer science degree.” I looked at the person, knowing that I had built a computer, repaired many others, and he did not. Everything I knew to that point was largely self-taught. What an arrogant fool. I said nothing, because I had nothing productive to say to him at that moment.

Does not having a C.S. degree negate the 10 + years of other work experience? Am I completely incompetent because I hold a science degree currently, not in computers?

I once had an IT position where the clients were often surprised that I was not a man. I was a tomboy as a kid, but sheesh.

This article briefly summarizes some of the benefits of diversity in the workplace.

Diversity should be embraced, not avoided.

Productivity Buffs

If I must work, I want to do something I like.

I used to think programming was for some smart people in a distant land way over there —------------------------------->

A recent book I read called “How to Think Like a Monk” by Jay Shetty, reminded me that everything is a variable. The only thing that is truly with you your whole life is your breath. If that’s the case, then anything is possible. My current financial status, my relationships, everything, variable.

There is no task too difficult that cannot be achieved by small, easy to digest steps. (Thank you Monks) This must be how reverse engineers think.

Reverse engineering. That sounds cool. I purchased a reverse engineering book from the local bookstore and added it to my pile of growing programming books, somewhere between my CompTIA A+ book and SQL Programming Guide. One day.

I do not know where I am going, but I know that I am building. Since I have changed my thinking and begun to get a better grasp of the briefness of human existence, I have been able to put aside all the things that do not serve me (for the most part) and pay attention more to those things that will help take me places to achieve my goals. Learning programming and computer science the last three years has allowed me to stop focusing on all of my supposed problems and slightly uncomfortable reality, and focus on things that are more productive.

General Life

Some people have written about how coding jobs can be stressful, and while I can see that, I’m a workhorse with a non-existent social life. Pretty sure I’d be right at home. (I have had my fair share of social-butterflying.)

I wake up, I go to work, I come home and go to my remote class, I work on projects, I have my daughter on the weekends, I help my parents with random house things (you know, simple woman stuff like repairing the garage door in the freezing cold and family cybersecurity… mom… why did you click that… -.-)

Despite society trying to stuff me into some cute little predefined bundle, I have been just about everything but the expected.

I’ve avoided developing a wrinkle on my forehead by actively trying to not frown my whole life. Some call this OCD. Some call this determination.

Closing Statements

You decide what matters. You set the bar. Make sure you always ask the question: “According to whose standards?” Is it your standards, or someone else’s? Do you blindly follow, or do you think for yourself? Every being should have the freedom to express themselves and live their life in a way that suits them so long as it does not cause harm to others. Help actually, if you are able. <3

Our challenges make us stronger when we come out the other side. Do not be mad the universe gave you challenges, but instead thank it for seeing you as a worthy champion.

Dream/Nightmare: What Kind of Malware is That? 🥶

Anna Villarreal — Sat, 07 Mar 2026 13:10:43 +0000

Another computer dream!

Backstory: The previous day, I had experienced chaos in an environment where many users were receiving emails from a hacked account. This was from a person that many people knew and trusted, however an external account. (Red flag!) The point is basically that non-techies do not have the skills needed to keep themselves safe. If you recognize the name, how likely are you to just trust and click?

If it invokes immediate panic or uncertainty... DO NOT CLICK! --> This is what they want!

I literally got a nightmare from this. Hundreds if not thousands effected. Infected devices. Spread unknown.

The hard truth is that we cannot save people from themselves.

The Dream 🌌

Looming over my own desk, I see a terminal open. I am aware that someone is on the other side. I do not know what they want. I try to befriend them, and of course it doesn't work. After some back and forth communication, I knew this person was weird.

Suddenly, a download starts happening in my browser.

PANIC

I abruptly stop and cancel the download. Another one pops up, followed by another. I can see the percentage completion of each download with a tiny progress bar, and who knows if that was even accurate. Could be a game to make me close the one that looks the most downloaded first, leaving the other ones actually downloading. The more I click, the faster more appear at the top of my browser, trying to download to my computer! More and more kept appearing until they spread nearly all the way across.

I couldn't keep up. I started to actually panic. I ran to the back of my pc, ripping out the power cord and ethernet cable. They can't touch me if there is no connection, right?

I paused for a moment, shocked (no, not electrocuted, LOL). I couldn't believe what just happened.

Not having a computer anymore, I just hopped on over to my boyfriend's PC. The first thing I sense is that person in the terminal again. I could feel the evil laugh a million miles away. The downloads started again. This became a double panic because now I have jeopardized my boyrfriend's PC. What will I tell him I did to his computer? Being responsible for destroying someone else's important things is not a scuff I want on my relationship.

My heart sank, and I felt stupid and useless. Then I FINALLY woke up.

Have you had strange computer dreams? This post is a safe space for sharing. Also, if anyone can give me any insight as to if this is a real world scenario or not, I'd love to hear from your experiences or knowledge! Love you all!!

📨 Pop-out Messaging Extension: Dev Whisper

Anna Villarreal — Sun, 01 Mar 2026 21:39:45 +0000

This is a submission for the DEV Weekend Challenge: Community

This is the fastest I've ever made something functional.

- b r e a t h e s -

The Community

For the past couple years, I have actively used dev as a resource. Learning, discovering, and trying things way out of my league. Because of this, I have learned more than I would have on my own with no other support. When you enter the realm of web development and you don't really have anyone close to you doing it, it's the wild west. Dev has provided a place for all walks of life to learn and push forward to discover new things. For this reason, I chose Dev as my community!

The one thing I noticed about dev is there there was no p2p chat. I thought it would be cool if users could send simple messages together about cool projects, ect. If the chat is implemented by way of an optional extension, then we are never forcing people to deal with the chat. It's truly a personal decision.

Thinking from a community standpoint - I wanted to include all the meme monday memes inside the gif picker in the chat. YES you can probably find your meme you posted 2 months ago. This way, I'm using community data, for the community, to continue enhancing the experience.

What I Built

A free open source messaging app for dev members to communicate with each other without having to share personal information. It's shipped as an extension but has a pop-out option for ease of use.

Demo

Code

AnnaVi11arrea1 / dev_messages

3rd party messaging app that works with Dev.to

Dev.to Messages (Unofficial 3rd Party Extension)

A Chrome extension that adds private direct messaging to Dev.to, with built-in link safety, spam reporting, and a first-contact approval system.

File Structure

dev_messages/
├── manifest.json          MV3 manifest
├── background.js          Service worker – updates unread badge
├── content.js             Injected into dev.to – detects user, adds Message buttons
├── popup.html             All UI views & modals
├── popup.css              Dev.to-inspired styles (380px popup)
├── popup.js               Full SPA app logic
├── js/
│   ├── storage.js         chrome.storage.local wrapper
│   ├── eligibility.js     Dev.to API eligibility check
│   └── linkSafety.js      URL spoofing detection + safe renderer
└── icons/                 16 / 48 / 128 px PNG icons

Features

Feature	Details
Account eligibility	Checks `joined_at` & `articles_count` via the Dev.to public API. Account must be at least 30 days old and have at least 1 published post before sending or receiving messages.
First-contact approval	When someone messages you for the first time,

…

View on GitHub

Meme Search Implementation

Arguably, the most important feature. XD

I wanted not to just pull in the memes, but to allow a user to search them. The best way I figured was to use the alt tags as search parameters. Many of us are nice enough to put alt tags on our stuff, and so I was able to leverage that to get a sort of lazy search going. Hey, it works. I thought that was a little cool and different so that is the snippet I'll be sharing below:

/* gifPicker.js – Fetches meme images from Ben Halpern's Meme Monday posts,
   including every image posted in the comments (community memes). */

const GifPicker = {
  _cache: null,

  async fetchImages() {
    if (this._cache) return this._cache;

    /* ── Step 1: collect all Meme Monday articles ─────────────────────────── */
    const articles = [];
    for (let page = 1; page <= 6; page++) {
      try {
        const res = await fetch(
          `https://dev.to/api/articles?username=ben&per_page=100&page=${page}`
        );
        if (!res.ok) break;
        const data = await res.json();
        if (!data.length) break;
        for (const a of data) {
          if (/meme\s+monday/i.test(a.title)) articles.push(a);
        }
        if (data.length < 100) break;
      } catch { break; }
    }

    /* ── Step 2: collect images with dedup ────────────────────────────────── */
    const seen   = new Set();
    const images = [];
    const add    = (url, title) => {
      if (!url || seen.has(url)) return;
      seen.add(url);
      images.push({ url, title });
    };

    /* Cover images first so they appear at the top of the grid */
    for (const a of articles) {
      if (a.cover_image) add(a.cover_image, a.title);
    }

    /* ── Step 3: fetch all comment threads in parallel ────────────────────── */
    const commentThreads = await Promise.all(
      articles.map(a =>
        fetch(`https://dev.to/api/comments?a_id=${a.id}`)
          .then(r => r.ok ? r.json() : [])
          .catch(() => [])
      )
    );

    for (let i = 0; i < articles.length; i++) {
      this._extractImages(commentThreads[i], articles[i].title, add);
    }

    this._cache = images;
    return images;
  },

  /* Recursively walk comment tree and pull every <img src="…"> with its own alt */
  _extractImages(comments, articleTitle, add) {
    for (const comment of comments) {
      const imgTags = (comment.body_html || '').matchAll(/<img([^>]+)>/gi);
      for (const m of imgTags) {
        const attrs  = m[1];
        const srcM   = attrs.match(/src="([^"]+)"/i);
        const altM   = attrs.match(/alt="([^"]*)"/i);
        if (srcM) {
          const alt = altM?.[1]?.trim() || articleTitle;
          add(srcM[1], alt);
        }
      }
      if (comment.children?.length) {
        this._extractImages(comment.children, articleTitle, add);
      }
    }
  },
};

How I Built It

I very quickly realized that I was going to need a secure database so users could keep their chat history. I'm using Neon's free tier for this project. Give it a whirl! XD. Requests from the extension go to Vercel over HTTPS. Vercel connects to Neon with an encrypted connection. The database is never exposed to the internet, and it is only queried by Vercel's serverless functions.

I used copilot CLI to quickly build up a working template - I would not be able to build something so quickly without it. This is not my first chrome extension, but it is the 'fanciest' one I have made to date.

I tested with my unpacked files in the google chrome extensions. I was lucky enough to test functionality with another dev user. That was amazingly helpful. A big thank you to @trickell for being awesome.

I had fun making a settings and options area for users which includes colors and text sizes for increased accessibility.

Features:

Created with the mindset of reducing spam and annoyances

Account eligibility - Checks joined_at & articles_count via the Dev.to public API. Account must be at least 30 days old and have at least 1 published post before sending or receiving messages.
First-contact approval - When someone messages you for the first time, you see a banner with their opening message and must hit Approve or Deny before the conversation unlocks.
Flag / report spam - Every incoming message has a 🚩 button. Clicking it opens a reason picker (spam, phishing, harassment, inappropriate, other) and marks the message as reported.
Link spoofing detection - Before any link opens, LinkSafety.isSpoofed() compares the visible URL text against the actual href hostname. A red alert is shown if they differ.
Link safety warning - Every link in every message routes through a warning modal that displays the full destination URL before opening it in a new tab.
Local storage persistence - All conversations, approvals, flags, and user data are stored in chrome.storage.local. The extension must be installed and active to read messages.
Unread badge - The extension icon shows a live unread count, updated by the background service worker whenever storage changes

My extension is getting reviewed by google currently... whish me luck! haha

A user must have the extension to test it. Guess I've made myself a guinea pig haven't I. (hides, 😅)

ASCII Whisper: Local P2P Chat with Sound FX and Battleship

Anna Villarreal — Wed, 11 Feb 2026 00:29:42 +0000

This is a group submission for the GitHub Copilot CLI Challenge

What We Built 🧙🏼‍♂️💁🏼‍♀️

We created a P2P chat that runs on your local network. We enabled a “video feed” capability in the terminal by translating the image from your device camera into low resolution ascii with a certain number of “frames per second”. Python reads camera data and translates it into approximate values. This is then displayed in the “video” stream. This is how we have video in the terminal without fancy packages.

ASCII Whisper is:

Simple
Effective
Fast
Secure
Fun for all ages!

Contributors:

@trickell 🦑 John
@annavi11arrea1 🦄 Anna

Tools used:

Github Copilot CLI
Ollama
Python
Pillow
Rich

You are welcome to take a tour of the code on Github. We had SO much fun making this project. There were many gut-busting laughs during development, especially when making sounds. 🤣 John managed the implementation of chat sounds and in-game sound effects. This was done using Python.

🦄 I specifically remember going under my desk in the basement for better sound recording on my cell phone, and trying to artistically whisper “ascii” into the phone. I haven’t done too much work with custom sounds, so my recording studio consists of my cell phone and desk. John proceeded to gaze with amusement. The energy was returned when I saw him positioned under a blanket next to a wall whispering repeatedly “whisper” into his phone. I could not stop laughing, it was extremely entertaining to say the least. 😂

When you open the app, you will hear our hand crafted intro: “a-s-c-i-i w-h-i-s-p-e-rrrr” 🍃

What you see when you launch Ascii Whisper

You enter a user name, select some color options, and then wait for the other person to connect. You will see a preview of your video feed momentarily while you wait for the other person to connect.

Waiting for the other person to connect

Demo

While creating the demo video, the excitement and ridiculousness nearly brought us to tears from laughing.

Contributions

🦑 John added useful in-chat commands.

Commands include:
/help
/ping (John cannot stop laughing, that is my voice)
/battleship
/manual
/togglecamera
/theme
/togglesound

(Yes that’s right, you saw battleship!)

🦑 John also worked on sounds and display layout, polishing up the camera display and adding color themes to choose from. Copilot was used to create basic methods for using sounds, from which John was able to add additional sounds by analyzing the structure in place.

@trickell (John Here!) I just wanted to chime in about the sounds and how much fun I had making these work in the code. So sound_manager.py is using subprocess for mac sounds and *winsound * for windows to play the sounds and threads to keep them actively going as the application is running. In a previous time in my life, I was a sound engineer so getting to create and play with the sound design for the game with Anna, I found that we had a lot of laughs in the creation of quirky and fun sounds using words and throwing some effects on it.


    def play_battleship_start(self):
        """Play sound for battleship game start."""
        if not self.muted:
            thread = threading.Thread(target=self._play_sound, args=(self.battleship_start_sound,), daemon=True)
            thread.start()

    def _play_sound(self, sound_path):
        """Play a sound file using OS-specific methods."""
        if not os.path.exists(sound_path):
            # Sound file not found, silently skip
            return

        try:
            system = platform.system()

            if system == 'Windows':
                self._play_sound_windows(sound_path)
            elif system == 'Darwin':  # macOS
                self._play_sound_macos(sound_path)
            else:  # Linux
                self._play_sound_linux(sound_path)

        except Exception as e:
            # Silently fail - don't interrupt application if sound fails
            pass

I also wanted to touch on the commands. I'm someone who when using applications like vim, nano, github copilot, love the ability to run commands while in the application. When that was missing, I knew something was off about the app because the first thing I wanted the ability to do was alert someone, mute sounds, and exit without having to ctrl-c out of the app. Thus commands happened, and several were born. It makes being inside the app more user friendly.

Copilot helps set up the sound manager.

Debugging video stream with new color themes
🦄 I spent a lot of time getting the “video feed” to work locally, the battleship game complete with trash-talking ai, and user manual. We both contributed to the “voice acting” 100% original noises for your amusement.

Testing on one device

You can test Ascii Whisper on a single machine. Once you have it downloaded or a copy of the project, open two terminals. Then navigate to the project folder.

Start the host with: python main.py –host –device
You may or may not need to include the device id depending on your setup.

Start the client with: python main.py –connect localhost –device

If you are starting the client on a different device on the same network:
python main.py –connect –device

Battleship Game

🦄 When you type the /battleship command, it starts a game of battleship in the chat. Each player places their ships and the game begins. The player that goes first is determined by a dice roll.

Example of battleship game play.

After every turn, the game board is updated and displayed in the chat to help you plan your next move. If there are many lines of chat and the map has disappeared, you can use the /map command to display it once again. If you are feeling very lost, the /manual command will pop open a simple .txt file with instructions in a separate terminal. This way you can keep it open while you play.

Here is a preview of the manual:

Detailed user manual for Ascii Whisper included!

Our Experience with GitHub Copilot CLI 👾

Github Copilot CLI was an amazing tool for helping us develop our plan. When you have an idea, it can be a large task getting something minimal up and running. We were able to get a minimally working version in a short period of time. We knew what we wanted, and Github Copilot CLI got us started on the right foot. This is a very large project to completely write out by hand. But we were able to accomplish a lot in a short period of time. When we ran into issues, Copilot was often helpful at writing out tests for debugging.

🦄 For example, when I was suddenly running into issues with my camera being detected, I asked Copilot why my camera was not displaying anything. I learned from copilot that I may need to provide a device id, and that this is a simple configuration step depending on a user's setup. Cool! I simply started using –device after finding out what device I should be using.

🦑 Copilot was also very helpful when John was adding custom sounds into the battleship game. The sounds were “nested” in the game in the wrong place and Copilot helped him relocate the code to the correct places. This was a bug that occurred after I had added the ai trash-talker.

Links:

Repo: Ascii Whisper

We would love to hear your feedback! Thank you so much for reading!

An Al-go-llama Adventure

Anna Villarreal — Wed, 04 Feb 2026 03:35:52 +0000

This is a submission for the Algolia Agent Studio Challenge: Consumer-Facing Conversational Experiences

What I Built

Hello Everyone!

As an event vendor for 5 years, I know that it can be hard to find events you are looking for. You need to sell at places with your target audience.

It would be really nice to have a natural conversation about what you are looking for, rather than querying hard parameters all the time. It is possible to discover even more opportunities with natural language models. It makes it much easier for the exhausted business owner to say "Find me events to vend at this April near Chicago". Instead of typing, checking, toggling, whatevering-- a bunch of fields.

So let's output some related findings for the very tired Miss Bosswoman CEO!

By the way guys, I've been working on this project here and there through time. This Algolia search intelligent chat bot is a wonderful feature.

Demo

How I Used Algolia Agent Studio

I took this opportunity to learn about Algolia and implement it into one of my projects: GoVend, Connecting vendors to events.

Implementing my first intelligent chat assistant was a challenge for sure. Initially, I set up an Algolia agent with Gemini.

“Carl”, the agent I created in Algolia, would take user queries and find related events in the available data.

You can choose what attributes should be searchable on each index. An index is a group of data on Algolia. For me, I had an “Events” index, which included things like name, date, city, etc. I left most of them on to improve searchability.

Example chosen index in algolia

I explored Algolia’s MCP Server integration. It was fairly straightforward, and I was getting excited about it. By assigning tools to agents, we can build them to be more accurate and useful.

And then of course...

I ran out of API requests as usual. I pushed the envelope a bit here with an Ollama wildcard.

I first connected local Ollama (model: llama3.2:latest)to my app and got that working with my local data.

Why Fast Retrieval Matters

I integrated Algolia's Search API with llama3.2 for natural language event discovery. Users can ask questions like 'Find events in Chicago' and get intelligently formatted results. Algolia's powerful search combined with Ollama's natural language understanding is a winning scenario.

Natural language event search powered by Algolia's search API

I realized that maybe having a fallback method for searches was a good idea to handle errors in production. Llama3.2 will be able to find some event data no matter what.

I used enhanced Algolia search capabilities by using:

Zipcode Detection
Geo-Location Search
- Geocodes the zipcode to latitude/longitude
- Uses Algolia's aroundLatLng geo search
- 50km if query includes "near", "nearby", "close", "around"
- 100km default radius
Distance Display
- Shows distance in miles for each event
- Sorted by proximity automatically
Combined with Time Filters
- Can search "events near 35801 this spring"
- Combines zipcode + seasonal date filtering

Example Queries:

"Find events near 35801"
"What's happening close to 90210 in June?"

Highlights that Align with Algolia’s Standards:

Unique Ollama Integration
Error Handling
Graceful fallback system
Clear logging and debugging
No breaking when services unavailable
Natural Language Processing
Extracts locations from queries
Understands user intent
Aesthetically pleasing results formatting
Real-World Problem Solving
Faced API limits (common in production)
Built resilient solution

The Future:

This was an interesting journey for me, lots of exciting tiny wins, and a couple long drawn out learning experiences. I like that Algolia allows you to configure multiple agents in the background. One day when I stop running out of API requests, I’d like to do a little experiment and have multiple agents talking to each other and see where that ends up.

Repo: GoVend ai_beta

Mystery Resolved: Switching Repeatedly from WSL to PS - Issues

Anna Villarreal — Mon, 02 Feb 2026 12:29:53 +0000

After having previously built an Ubuntu server, I am a little bit more fond of using WSL instead of PS in Windows. Feeling like I am "getting by with something" using linux commands on a windows pc. It's a nice little feature.

But, I ask, what is all of that power good for if you are repeatedly running into super annoying unresolvable permission issues? I have gotten around this somehow until I started using antigravity. Being excited, I installed the new IDE and decided I was gonna do my linux nonsense on there too.

The annoying mount issue rears its head, of course. (Yes I know wizard, should have been a read flag) I proceeded to try to use it anyway. No one is exactly over hear showing me how to stay out of messes. I misuse things, fall on my face, and share it so you don't have the same issue. Grit is one of my superpowers.

Fast forward through over two years of coding like this, and having gotten around it by using things like codespaces or running everything sudo. (Yes I know, I'm banned) XD

The fix: literally 5 minutes of reading.

I should have delt with this before.

I simply had to properly mount WSL before entering my code editor. All I had to do was open a terminal, switch to WSL in said terminal, and type 'code .' This opens your code editor with your projects mounted properly, resolving all permission issues and "things not installed" issues.

What it should NOT look like when you start:

Improperly mounted WSL

What it SHOULD look like:

Properly mounted WSL

HAPPY MONDAY!

Deployed Profile to Google Cloud via AI Interface in Antigravity

Anna Villarreal — Tue, 20 Jan 2026 03:00:10 +0000

This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI

About Me

Hey there.

I have been learning web development for the last few years. To date, I have created a few variations of my portfolio, none of which ever made it to deployment. I am excited for this opportunity to share the latest rendition of my portfolio website in all of its glory.

I have a background in art and I personally like styling. I wanted to translate a little bit of artistic edgy flare without going too terribly wild. That's a bit of a tough one for me. User-friendly this, attention-grabbing that. I wanted to represent myself, and I am not a well defined black and white object. No, I'm more of an ethereal purple and windy blue.

Now presenting for the first time ever, a semi respectable portfolio website: Anna Villarreal

Portfolio

How I Built It

So, I initially had this portfolio laid out in Ruby on Rails. But I hadn't deployed it anywhere. I always felt like something was missing.

Here is screenshot of the previous UI:

Old UI. Good, but not excellent.

When this challenge popped up, I thought it was a great excuse to get my app deployed finally. I also wanted to convert it to a react app, implementing a mobile-first approach. I just really wanted an "app" that would translate well no matter where you were looking at it from.

New tools and approaches I used for this project included:

Antigravity
Google Cloud CLI
Google Cloud Run
Deploying my project within Antigravity by telling the built-in AI what to do!
Tailwind (I usually don't use tailwind because I enjoy styling.)

I had the built-in AI in Antigravity read the repo of my original project. Then I had it translate Ruby on Rails into a react app. (I think that's pretty slick!) I told it which color palette I wanted to stick to and the general mood I wanted for my page. I continued on with a massive amount of tweaking. I really wanted originality, so I crafted an SVG for my background in illustrator. I used an image I generated from midjourney to make the nav bar come alive as well.

What I'm Most Proud Of

This is the most effective profile to date I have created. (Again, actually deployed it. LOL) This profile website balances my whimsical internal artist while keeping the UI and functionallity at the center for users. I am happy with this being my first deployed profile website.

I was really excited to discover that I could deploy my project to Google Cloud Run right from within Antigravity! It was SO FAST. No hours of debugging, at least for me. After a few minutes of prompting, success! Fastest. Deployment. Ever.

And the app itself is fast!

After I was happy with how my app was looking, I simply ran:

I installed Google Cloud CLI:

As someone who has fought with deployments for literally days in the past, this is basically a jaw-dropping experience. Overall, I am happy I tried out the new Antigravity IDE as well as the deployment to Google Cloud Run from within it. And my app is alive! Yay! XD

I couldn't tell you how exciting it was to see this message back from AI:

AI Flashcard Generator With Ollama

Anna Villarreal — Fri, 09 Jan 2026 03:02:10 +0000

TLDR - successfuly got ollama running locally and through Google Colab using ngrok and my VPS.

Intro

As usual, I have gotten massively sidetracked on an interesting web development problem. It all started when I decided to update my yet-to-be-deployed developer profile site. I remembered I had created a small memory card game in vanilla JS and I wanted to share it on my site as well. However I knew it needed more work. Once I figured out which one of my devices it was saved locally on, I quickly pushed it to github.

A Decision was Made

Upon reviewing my tiny game that was over a year old, I decided it needed a massive facelift. I had created it just for learning javascript in a more fun gamified way, so it was simple and basic. It lacked any real function at all besides playing the same game over and over with the tiles in different places each time. My significant other kept talking about Ollama and how I should use it, and finally I came up with this plan of using AI to make my tiles.

View of original game:

This was after I added some styling to the original game.

I took my original code with me downtown to Google AI Studio, where I fed Gemini my original code and explained what I wanted to have happen:

Use my existing code and rebuild it to be mobile-first, using react/vite.
Add functionallity by creating a pdf/text loader area so that a user can generate their own custom flashcards using AI.
Allow a user to select the number of flashcards.
Generate a practice test with a reviewing and print option.
Play their own memory game based on their flashcards.

I tend to run out of my free tiers in about 30 minutes. For this annoying reason, I decided it was time to listen to my significant other and try Ollama locally. I downloaded Ollama and started asking Mr. Ollama questions right away about how I might use it to create questions from text/pdf. I needed to choose a model, and Ollama informed me that Mistral was perfomant and effecient, so I chose to go with that.

After many revisions and error handling I was able to get something minimally functional.

Pdf uploader acting weird

I got the pdfs uploading and sending a prompt to AI for questions and flashcards. I then started to modify the styling since it was massivley bothering me.

I then moved onto test generation by having AI interpret the provided text and create questions for the users, as well as putting questions and answers into a matching game, modeling after my first idea. It was ugly at first, but I was so excited when I got it working and producing the test and games as I wanted. From a functionallity standpoint, this was a win.

YAY! I WIN! Even though I can't even read it! XD

Let me just cut to the ending styling, which I am much more happy about.

In my opinion, much more fun to look at.

Test review with option to print.

Landing page looks good on mobile

If you are also a student, you will see the value here of creating your own flashcards quickly with ease. I am currently fighting with google colab, ngrok, and my VPS to see how I can configure this up for public use at almost no cost. (Broke college student. cough cough, XD) When I figure it out, there will be an announcement lol.

If you are curious about my flashcard app you can find it here:

Flippy Card(Doesn't work hosted, only locally atm)
Or also the repo: Repo

I am open for hearing about suggestions. I am new to react and Ollama so it might be a hot mess. Just playing with stuff and making useful things. XD

The game experience on mobile is pretty solid.

Basically at the end of the day, I got my first open source local model running on my PC.

24 HOURS LATER...

I decided I would try a fresh start on google colab. Blank slate. Now that im sort of familiar with it, I found it was easier to manage the code by executing everything in separate blocks/chunks, instead of trying to run one big fat file. I think part of my original problem was trying to run everything in one "cell" as they call them.

The Process Explained With Tips

Create a new Google Colab Project
Go to ngrok and get your auth token. They have a free one. The endpoint for the free tier cycles so you will have to coninuosly update it in your code as needed, but there is a free tier for students if you are so lucky. Check out ngrok stuff here: ngrok docs

After you have successfully gotten your auth token, head back to your Google Colab project and pop that bad boy right here:

Your gonna need that in a bit.

Break up the code into parts on Google Colab.

Do not attempt to run it all at once. It make debugging miserable. Put different things into different "cells". First you are going to want to install Ollama in Google Colab. The warnings are fine depending on your use case.

It will still run with warnings.

On the bottom right of the notebook, you can change your runtime type if needed.

The next two code blocks should look like this:

Then install dependencies...

Here is a nice snipet of code that the lovely @trickell shared with me to get everything behaving. (I was very thankful after days of defeat.) This will be your next cell your gonna wanna create.


def start_ollama_server() -> None:
    """Starts the Ollama server."""
    subprocess.Popen(['ollama', 'serve'])
    print("Ollama server started.")


def check_ollama_port(port: str) -> None:
    """Check if Ollama server is running at the specified port."""
    try:
        subprocess.run(['sudo', 'lsof', '-i', '-P', '-n'], check=True, capture_output=True, text=True)
        if any(f":{port} (LISTEN)" in line for line in subprocess.run(['sudo', 'lsof', '-i', '-P', '-n'], capture_output=True, text=True).stdout.splitlines()):
            print(f"Ollama is listening on port {port}")
        else:
            print(f"Ollama does not appear to be listening on port {port}.")
    except subprocess.CalledProcessError as e:
         print(f"Error checking Ollama port: {e}")


def setup_ngrok_tunnel(port: str) -> ngrok.NgrokTunnel:
    """Sets up an ngrok tunnel.

    Args:
        port: The port to tunnel.

    Returns:
        The ngrok tunnel object.

    Raises:
        RuntimeError: If the ngrok authtoken is not set.
    """
    ngrok_auth_token = userdata.get('NGROK_AUTHTOKEN')
    if not ngrok_auth_token:
        raise RuntimeError("NGROK_AUTHTOKEN is not set.")

    ngrok.set_auth_token(ngrok_auth_token)
    tunnel = ngrok.connect(port, host_header=f'localhost:{port}')
    print(f"ngrok tunnel created: {tunnel.public_url}")
    return tunnel

Run that, make sure it works, then assign the ngrok port and start ollama server.

Ollama is listening!

Then the last few cells should look like:

Click the link to make sure that the tunnel is active and working. Pull whatever model you intend to be using in yout project.

At this point you have everthing working in Google Colab.

Ollama is running
ngrok makes you a tunnel with your endpoint

Connecting up your virtual private server

Go to your app on your server and make sure that your model name is set correctly as well as all endpoints. I have my endpoint in a .env file. When I say endpoint I mean that ngrock link to clarify.

After many days and hours I can say I built my first app locally with AI, deployed it to my VPS and ran the connected AI part in the cloud through Google Colab and ngrok.

YAY! IT WORKS!

AHHHH NO BUGS....(after many hours)

The Future

Figure out how to keep it running 24/7 for user friendliness
Add user accounts and connect a DB so users can store their tests and cards.

Happy debugging!

2025 ~ Year of Enlightenment

Anna Villarreal — Wed, 24 Dec 2025 17:36:35 +0000

For anyone that is thinking of going boldly in an uncharted direction.

--------------------------------------------

Contemplations of 2025 & Recap

--------------------------------------------

Web Development

My 2025 started off being fresh out of a fast-paced web developer apprenticeship. Armed with a preliminary understanding of full stack web app development, I felt that anything was possible. I continued to work on my app, goVend. An app that connects vendors to events.

I continued exploring:

Ruby on Rails
CSS
Javascript
AWS
Google Cloud

I began exploring:

IT Support
Node.js
Scraping
n8n
GraphQL
SQL
AI
Cloud servers

Combining prior knowledge with new knowledge, learning quickly becomes exponential.

IT Support

I continued learning and collecting certificates throughout the year. Shortly before spring, I completed the Google IT Support Certificate where I found learning about packet composition and transportation at the network layer particularly fascinating. Here is my Dev post about the TCP Header: Networking: TCP Header Explained

I found networking so interesting that I reconfigured my home network, splitting from a modem/router to a more interesting modem and router situation (separate devices) updating to the latest security standards.

With a basic understanding of network communication, suddenly everything became much more interesting. My thinking swung back and forth from “I really want to play with CSS all day and be a remote developer” to “I can fix things! I want to play with devices! OOO SPARKLEY!!!” – a massive problem for focusing energy. Is this a common problem among my peers here?

Employment

I had a tiny proud moment when I completed my Google IT Support Certificate. It was about two months after I completed my web developer apprenticeship that a teaching assistant position became available at the University of Chicago. Excited at the opportunity, (and perhaps slightly terrified) I ran to it. I have absolutely no regrets. Helping students navigate their learning of web development with Ruby on Rails helped me also solidify my own comfort level with Rails as well. A bittersweet end came after two terms of teaching, as the program dynamics evolved.

I had been applying for places before the teaching assistant position ended, since it was predictable. Everywhere I turned, it felt like my skills fell short every time. So then how does one move forward? It didn’t stop me from applying places. After feeling defeated and sad in my job search efforts, I considered the 2025 landscape and the new dynamics of online applications.

This included:

Having an awareness of AI and results filtering.
Fighting against robots to get my resume through the filters.
Catering each and every application resume and cover letter to be as close as possible to the job description.
Having the actual references to back up your claims.
Built a structured approach with rudimentary record keeping. (notepad ftw)

Feel like I am getting filtered out by AI robots from every direction

Kinda feel like the real test here is if you are knowledgeable enough to get your resume past AI, showing your abilities to handle current technologies. XD

Fighting fire with fire!

I started refining my resume and cover letter to the exact job I was applying for. I ran my resume, cover letter, along with the job description through AI to easily craft customizations that were best fit and still aligned with my skills. After each run through AI, I then tweaked it to sound more like me and for accuracy. AI uses overly refined lingo in my opinion -- and lots of other -- choice things.

A really elegant photo of me thinking using firefly. It did a great job! XD Firefly is most excellent for a quick picture.

Using AI saved me a lot of mental exhaustion. AI helped me highlight keywords so that I may not be filtered out by bots. Every time I applied somewhere, I recorded the date, name, and job description. This way, If I received contact, I could easily pick out which one this was in reference to so I didn’t sound like a buffoon. The last thing you want is to have submitted so many applications, that you don’t even remember where you applied and who is calling you.

Within a week of using my newly refined application approach, I received contact from IBM. I was invited to complete a coding challenge. Even though I may have failed the hieroglyphic sorting algorithm (I refuse to cheat!) it proved one thing: My brass knuckle approach to fighting resume filtering was working! I also learned another important lesson: without the use of documentation my basic coding skills were massively lacking.

Experience

My inadequate hard skills made me feel so small I felt invisible again. I was really needing any kind of employment. So, accepting defeat, I started to lean into my IT support. I talked myself into it, “I liked learning about networking and packets…” and “knowing IT support will make me a stronger web developer in the future.” I ferociously went on a hunt for a tech support position. I turned down a Geek Squad position to work for lesser pay at a small local IT company, knowing that the experience gained would be worth more than the pay at a large corporation.

I would make the argument that there are not many web developer females that have stood on ladders at construction sites installing network cabling, security cameras, and access points. Want some comedy? My first experience at a construction site was wearing a pink shirt and wedges atop a ladder with a drill in the ceiling.

An interesting experience... XD

I can’t tell you how amusing it probably was to some onlookers. This experience was followed quickly by purchasing a pair of solid workboots. After scouring the internet for a pair of workboots I didn’t hate, I landed on some black and yellow carbon fiber wolverines. I can say that I like them very much after wearing them a few months. They can be found Here.

In the months that followed, I learned IT helpdesk support, hands on device troubleshooting, and network installation basics. It was very satisfying to put into practice the things that I had been reading about in my 1800-page CompTIA A+ book. And yes, I also got through that book this year and have been studying for the exam on the side, doing practice tests and such.

Several months in, I realized there was no full time work for me available. Paired with no benefits and other external factors, I was on the brink of burnout. I started searching for a new role.

The Present

Look at my exciting box of trinkets! Thanks again nano-banana! XD

I am so excited to have been offered a position at a local school, where I will be a tech support associate. A big upgrade to full time with benefits included. I am very excited to be given a chance to work in a learning environment with other like minded individuals. There is potential for working on coding projects at this new position, which I would happily run towards at the speed of sound. The satisfaction of making sh*t work has no bounds.

Moving Forward

Let's roll back to spring 2025. After poking around at some certificates, I began to feel like I needed something that would bear a massive amount of weight from an experience standpoint. I entered an online master’s in IT program with University of the People. I completed two master's classes with flying colors, database management systems and organizational theory. But I was unsatisfied even after getting an A in both classes. I wanted the nitty-gritty rough and tumbly 0’s and 1’s. I made the conscious decision to step back from a masters in IT to a bachelors in computer science. (For those of you wondering, I already have a bachelors in science, nutrition.) I believe it was the right decision.

As I continue to work in IT support, I will be quietly pursuing my goal of being a creative software engineer/web developer. I feel it will only be a matter of time before the opportunity I am looking for rears its elusive head. Meanwhile I arm myself with a plethora of certificates, education, personal projects, and work experiences.

The lesson of 2025 is to be fiercer than the forces that surround you. To accept defeat not as some sort of incapable loser, but as an enlightening experience. Where do champions come from? The champion is champion because of the 1,000 battles worth of experience. Not because of some fanciful wave of the AI wand, or because of a single win. It is imperative to roll in the mud and do the uncomfortable things if you are to grow. Hold your tiny dream inside your heart and don’t let anyone take it.

Calculate Your Personal Voltage from Binary

Anna Villarreal — Thu, 20 Nov 2025 23:22:05 +0000

I came home today and made a fun thing. Here is said fun thing....

B1T-0-RAMA

It offers a fun place to understand number system conversions better.

It also calculates your personal voltage. What is that?

The letters in your name are converted to binary.
Each byte's voltage is calculated bit by bit.
We get the sum of all the voltages.
We divide the total voltage by the number of bits.
We return that number as your "average voltage".

It's both fun and can be educational.

I am 1.55V. How about you?

DEV Community: Anna Villarreal

I Love Watching the Storms Roll In

The Ultimate Job Finding-Management Tool

Path of Discovery

Illusions of Society

Productivity Buffs

General Life

Closing Statements

Dream/Nightmare: What Kind of Malware is That? 🥶

The Dream 🌌

Share

📨 Pop-out Messaging Extension: Dev Whisper

The Community

What I Built

Demo

Code

AnnaVi11arrea1 / dev_messages

3rd party messaging app that works with Dev.to

Dev.to Messages (Unofficial 3rd Party Extension)

File Structure

Features

Meme Search Implementation

How I Built It

Features:

ASCII Whisper: Local P2P Chat with Sound FX and Battleship

What We Built 🧙🏼‍♂️💁🏼‍♀️

Contributors:

Tools used:

Demo

Contributions

Battleship Game

Our Experience with GitHub Copilot CLI 👾

Links:

An Al-go-llama Adventure

What I Built

Demo

How I Used Algolia Agent Studio

Why Fast Retrieval Matters

Highlights that Align with Algolia’s Standards:

The Future:

Mystery Resolved: Switching Repeatedly from WSL to PS - Issues

Deployed Profile to Google Cloud via AI Interface in Antigravity

About Me

Portfolio

How I Built It

What I'm Most Proud Of

AI Flashcard Generator With Ollama

Intro

A Decision was Made

24 HOURS LATER...

The Process Explained With Tips

Break up the code into parts on Google Colab.

Connecting up your virtual private server

YAY! IT WORKS!

The Future

Happy debugging!

2025 ~ Year of Enlightenment

--------------------------------------------

Contemplations of 2025 & Recap

--------------------------------------------

Web Development

IT Support

Employment

Fighting fire with fire!

Experience

The Present

Moving Forward

Calculate Your Personal Voltage from Binary