Why I Built a Greeting Site You Can "Remix" 🎨

Charlene Anne — Tue, 27 Jan 2026 01:07:13 +0000

Digital messages are usually a one-way street. You send it, they read it, done. I wanted to flip that and give the recipient a "remix" button for their own messages.

The Tech Stack (Keep it Simple)

I didn't want to overcomplicate this or pay for a database, so I went lean:

Frontend: GitHub Pages (Free and reliable).

Backend: Node.js/Express on Hugging Face Spaces.

The AI: Gemini 2.5 Flash-Lite. It’s fast, and the 1,000 RPD free tier is a lifesaver for hobby projects.

The Coolest Part: Zero-DB Persistence 💾

Instead of saving greetings to a database, I used LZ-String to compress the message data into a Base64 string and shoved it directly into the URL. The "Magic Link" contains everything the frontend needs to decode and display the message. No server-side storage required!

Challenges & Lessons

Prompt engineering for "Minion-speak" was harder than I thought. I had to use strict System Instructions to make sure the AI didn't just translate words but actually kept the "chaotic energy" of the characters.

Check out the live site: greetstyle.com

Checkout the source: Github

I'd love to know have you ever tried building a "database-less" app using URL states? Let's chat in the comments! 👇

🤖🌸 Introducing my Cyber-Cottage Portfolio: An AI & Automation Journey

Charlene Anne — Mon, 26 Jan 2026 23:51:13 +0000

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

About Me

I am a Computer Science graduate with over 8 years of technical experience across the IT spectrum—spanning DevOps, QA, and my current role as a Business Insights Analyst at BPO. Recently, I’ve had the courage to focus on my true passion: the intersection of AI and Automation.

My portfolio, Cyber-Cottage, represents the collision of two worlds: Cyberpunk and Cottagecore. It expresses my drive for a high-tech career while staying rooted in the simple joys of nature and crafting. With my birthday on February 8th, I am choosing this moment to officially pivot into the field of AI & Automation, using intelligent systems to bridge the gap between complex data and real-world efficiency.

Portfolio

Interact with Aura, my AI Greenhouse guide. My skills and projects "bloom" as you engage with the interface! Aura is powered by Gemini 1.5 Flash and is trained on my professional history and project documentation.

Visit my Live Portfolio

How I Built It

Building this was a hands-on exercise in end-to-end AI systems architecture.

The Tech Stack

Backend: Node.js with Express to securely handle API requests.
Frontend: Tailwind CSS (Aesthetic) and Alpine.js (Reactive State).
AI Core: Gemini 1.5 Flash via the Google Generative AI SDK.
AI-First Dev: Developed within Antigravity, Google’s AI-first IDE, allowing for rapid iteration and debugging.

Architecture & Security
To keep my Gemini API key safe, I architected a server-side proxy. By using a Node.js backend to communicate with Google’s servers, sensitive credentials never reach the client’s browser.

Adaptive UX: Multi-Dimensional State Management
I designed a highly personalized user experience by implementing a custom Light/Dark mode toggle that goes beyond simple color shifts. Using React state and CSS variables, the platform dynamically re-architects its entire visual identity based on the user's preference.

Dark Mode (Cyberpunk): Transitions the UI into a high-contrast, futuristic sci-fi aesthetic with glowing neon accents and deep charcoal tones.

Light Mode (Cottagecore): Re-skins the site into a soft, 'Sakura' cherry blossom theme, utilizing pastel palettes and organic textures.

This implementation demonstrates System-Level Thinking: I'm not just toggling a class, but managing a global state that ensures accessibility and environmental comfort, proving the architecture is built with the end-user in mind.

The Brains: Contextual System Prompting
- I engineered Aura's knowledge through a structured system prompt:
- Identity Injection: A witty "AI Greenhouse Guide" persona.
- Knowledge Base Partitioning: Structured data regarding my work history.
- Zero-Cache Architecture: Configured headers to ensure every interaction is fresh and reactive.

Automated Deployment
The app is containerized with Docker and deployed on Google Cloud Run.

# Final Deployment Command (Sanitized)
gcloud run deploy ai-portfolio \
  --source . \
  --region asia-southeast1 \
  --set-env-vars EMAIL_USER="<GMAIL>",EMAIL_PASS="<APP_PASSWORD>",GEMINI_API_KEY="<KEY>" \
  --labels dev-tutorial=devnewyear2026 \
  --allow-unauthenticated

What I'm Most Proud Of

"Every 'Signal Lost' eventually became a 'Transmission Successful.'"

I am most proud of my learning progress and resilience. During this challenge, I faced numerous syntax errors and complex deployment hurdles—from Docker registry mismatches to GCP IAM permission loops. In the past, these technical roadblocks might have been discouraging, but this time, I leaned into the process.

I spent nights retrying, debugging, and learning alongside my AI agent—treating every error not as a failure, but as a "level-up" in my technical understanding.

Key Technical Wins:

Resilient Debugging: Resolved critical CI/CD pathing issues to ensure a seamless "Push-to-Deploy" workflow.

Agentic Orchestration: Successfully moved from "chatting" with AI to building with it, orchestrating agents to deliver a production-ready cloud system.

A Personal Milestone: Successfully launching this portfolio and GreetStyle AI (my generative AI card app) is the best early birthday gift I could give myself.

I’m entering this new year of life with a re-ignited passion for building.

I'd love to know what you think! Feel free to comment on your suggestions and observations!

Thanks for viewing!

DEV Community: Charlene Anne