DEV Community: Ulrike Herold

New Year, new portfolio

Ulrike Herold — Sun, 18 Jan 2026 08:55:06 +0000

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

About Me

I am Ulrike, a Systems Engineer in training and Data Architect in the making. My background is in taming chaotic datasets—whether it's local council budgets or personal geo-spatial telemetry.

With this portfolio, I wanted to express "me": aesthetically clean, minimal, and focused on technical truth over visual fluff. I don't just solve problems; I optimize the process of solving them. I wanted a site that felt like a "System Log" or a terminal session, reflecting my love for the CLI, efficiency, and the "Type-2 Fun" of debugging.

Portfolio

ulrikedetective.github.io

Repository

https://github.com/UlrikeDetective/hackathon/tree/main/google_portfolioChallenge

How I Built It

I built this application using React 18 and Vite, focusing on a component-based architecture to keep the "system" modular. My development workflow was centered around the Gemini CLI, which allowed me to leverage AI without leaving the terminal. To ensure high-quality outputs, I followed industry best practices—extensively researching articles on Medium, Google AI blogs, and technical newsletters. I implemented these insights by using structured TOML and Markdown files to maintain clean, version-controlled prompts and context.

Google AI Tools (Gemini) Usage:
Gemini acted as my full-stack pair programmer throughout the process:

Prompt Engineering & Context: Using the Gemini CLI and a file-based prompting strategy (TOML/MD), I was able to feed complex architectural requirements to the model, ensuring the code remained idiomatic and aligned with the project's "Modern Hacker" aesthetic.
Design Architecture: We brainstormed the "Ancient Marble and Aegean Sea" color palette (ancient wisdom vibe) and the "Terminal/Monospace" typography to create a unique "Hacker/Researcher" vibe.
Component Logic: Gemini helped generate the React components (Hero, Projects, Skills) based on my specific data structures (like the JSON-styled Skills section).
CSS Art Integration: I had a complex HTML/SVG "Cat & Mouse" animation (inspired from CodePen). Gemini helped me port this into a React component (CatAnimation.jsx), isolate the styles to prevent conflicts with the global theme, and position it perfectly in the footer next to the "poweroff" command.
DevOps: Gemini assisted in writing the GitHub Actions workflow (deploy.yml) to handle a complex monorepo setup, ensuring this project deploys correctly to a subfolder (/portfolio/) alongside my main landing page.

What I'm Most Proud Of

The "Data Cleaning Flex": Instead of just showing the final result of my projects, I created a specific layout block to highlight the messy raw data and the specific logic used to fix it. This tells the real story of data engineering.
The Aesthetic: I love that the site feels like an IDE or Terminal (using JetBrains Mono) but remains warm and inviting due to the "Athens" color theme.
The Footer Surprise: Integrating the interactive "Cat & Mouse" animation in the footer adds a touch of personality and whimsy to an otherwise strict, logical interface. It rewards users who scroll to the end.

--labels dev-tutorial=devnewyear2026

Countdown to Halloween

Ulrike Herold — Sun, 02 Nov 2025 19:16:41 +0000

Submission Form

This is a submission for Frontend Challenge - Halloween Edition, Perfect Landing

What I Built

I built a Halloween-themed landing page that captures the spooky and fun spirit of the season. The page features a real-time countdown to the next Halloween, creating a sense of anticipation. The theme is a mix of modern tech and classic Halloween, inspired by "Wednesday Addams meets The Matrix."

The main features include:

A real-time countdown to Halloween with a "Matrix"-style glitch effect.
An interactive to-do list that highlights the current day's tasks, helping you prepare for the big night.
Animated elements like a floating ghost, a blinking pumpkin, and a growing spiderweb to bring the page to life.
A "Trick or Treat" page that reveals a surprise cocktail animation and a random spooky image.
A dark, modern color palette with accents of green and gold to create a spooky yet elegant atmosphere.
Ambient background music to enhance the spooky vibe, with a toggle to turn it on or off.

Demo

Check out the Live Demo!

Code

The source code can be found here: Github

Journey

My journey in building this project was a fun exploration of CSS and JavaScript to create an immersive Halloween experience.

I started by setting up the basic HTML structure and implementing the core feature: the countdown to Halloween. I then added the animated ghost and pumpkin to give the page some personality.

One of the key features I wanted to include was the to-do list. I implemented a feature to fetch the to-do list from a text file and dynamically display it on the page, with the current day's tasks highlighted.

To enhance the theme, I integrated several CSS art snippets, including a more detailed ghost and pumpkin, a growing spiderweb, and a cocktail animation for the "Trick or Treat" page. This was a great way to add more complex and interesting visuals to the project.

As the project grew, I focused on refining the UI and UX. I updated the color palette to a darker, more modern theme, improved the layout and spacing for a cleaner look, and refactored the code for better maintainability. I also improved the scrolling behavior of the to-do list to make it more user-friendly.

Cooking with Google AI

Ulrike Herold — Tue, 09 Sep 2025 19:51:12 +0000

This is a submission for the Google AI Studio Multimodal Challenge

What I Built

"From Fridge to" is a web applet that helps users reduce food waste and discover new recipes. By simply uploading a photo of their refrigerator's contents, the app leverages Google's Gemini multimodal AI to identify available ingredients. It then intelligently suggests recipes that can be made with those ingredients, providing a practical solution for meal planning and utilizing existing food items.

Demo

Link to applet https://fromfridgeto-578201669268.europe-west1.run.app/ *
Start page of applet

Result page of applet*

How I Used Google AI Studio

I leveraged Google AI Studio by integrating the Gemini 2.5 Flash/Pro model. This allowed me to utilize its powerful multimodal capabilities for both image understanding and text generation. Specifically, Gemini was used to:

Analyze uploaded images of fridge contents to identify and extract individual food items.
Generate creative and relevant recipe suggestions based on the detected ingredients.

Multimodal Features

The core multimodal features of "From Fridge to" are:

Image Recognition (Gemini 2.5 Flash/Pro): The application takes an image input (a photo of a fridge) and processes it using Gemini's vision capabilities to accurately identify various food items and ingredients within the image. This enhances the user experience by automating the ingredient listing process, making it quick and effortless.
Natural Language Generation (Gemini 2.5 Flash/Pro): Based on the identified ingredients, Gemini generates natural language recipe suggestions. This goes beyond simple keyword matching by understanding the context of the ingredients and providing coherent, actionable recipes, significantly enhancing the user's ability to utilize their existing food.

Challenges Faced:

Finding an idea ;-)
API rate limits
Deployment to Google Cloud (encountered some internal errors)

Coffee culture = office culture

Ulrike Herold — Thu, 24 Jul 2025 20:35:14 +0000

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

Inspiration

My inspiration for this project comes from a mobile workspace, working from a cafe with a lot of space and sitting areas where people area sitting in front of their laptops, sipping coffee, and working on their projects. I want to capture the essence of a high desk: the essential laptop from the back, the ever-present cup of coffee and a window in the back with the sun shining in. The style is simple and minimalistic, with a focus on the details that make a workspace feel personal and inviting. The office culture - non office culture.

Demo

The live demo showcases a dynamic and responsive CSS art piece. The entire office desk scene is rendered with HTML and styled with CSS, featuring subtle animations that bring it to life.

Link to Office culture

Key features include:

Pure CSS Art: No image files are used for the artwork.
Interactive Elements: Click on the laptop to reveal a new scene.
Subtle Animations: Gentle animations like the movement of the sun and typing arms.
Responsive Design: The layout gracefully adapts to different screen sizes.

Journey

My journey began with a simple concept: to create a CSS art piece that captures the essence of a modern workspace. I started by building the initial scene with a desk, a laptop, and a coffee cup, all styled with a custom color palette. I then separated the HTML and CSS for better organization.

Next, I added a window with a moving sun to bring the scene to life. I then introduced an interactive element: clicking the laptop reveals a new scene with two figures. These figures, inspired by the provided images, are also created purely with CSS.

I continued to refine the second scene, adding details like smiling mouths, animated arms that simulate typing, and individual laptops and coffee cups for each figure. Throughout the process, I focused on creating a clean, minimalistic, and engaging piece of CSS art.

License

The source code for this project is made available under the MIT License, encouraging open collaboration and reuse.

Screenshot of project

Thanks and have a cup of coffee ;-)

Ice Tea celebration in June

Ulrike Herold — Sat, 07 Jun 2025 18:35:48 +0000

CSS Art Submission Template

This is a submission for Frontend Challenge - June Celebrations, CSS Art: June Celebrations.

Inspiration

For me, switching from hot tea to iced tea is the definitive signal that spring and summer have arrived! I adore experimenting with fresh ingredients to create unique iced tea concoctions. With this CSS art project, I aimed to translate that personal delight into a visual celebration. My goal was to create a different iced tea art piece for each day of June, using a harmonious blend of tea-inspired colors and whimsical CSS art to embody the pure fun and vibrant spirit of the warmer months.

Demo

Live Demo: FrontendChallengeJuneCelebrations

Journey

I'm on a front end - back end learning journey. My journey began with researching the many celebration days that June has to offer. Inspired by the variety, I used AI prompting to help brainstorm and generate 30 unique iced tea names and their ingredients—one for each day of the month. Next, I designed a custom color palette and font theme to give the homepage a fresh, inviting look. I then built the interactive grid for the 30 days, experimenting with several layouts and styles before settling on the final design. The most enjoyable part was creating the CSS art: I iterated through a few different approaches before landing on the playful, tea-inspired illustrations you see now. This project was a blend of research, creativity, and lots of experimentation, and I had a lot of fun bringing it all together!

DEV Community: Ulrike Herold

New Year, new portfolio

About Me

Portfolio

Repository

How I Built It

What I'm Most Proud Of

Countdown to Halloween

Submission Form

What I Built

The main features include:

Demo

Code

Journey

Cooking with Google AI

What I Built

Demo

How I Used Google AI Studio

Multimodal Features

Challenges Faced:

Coffee culture = office culture

Inspiration

Demo

Journey

License

Screenshot of project

Ice Tea celebration in June

CSS Art Submission Template

Inspiration

Demo

Journey

Please leave a comment ;-)