Robert Grauer

Project 1 (This Website)

This portfolio is a living project, built from the ground up to showcase my skills in front-end development and my journey leveraging AI tools. The design prioritizes clean typography, whitespace, and a minimalist aesthetic, reflecting a deliberate and professional approach. It is fully responsive and demonstrates my ability to translate a design concept into a functional web experience.

Development Workflow & Tech Stack

CC Claude Code
VS VS Code
CL Claude
CW Cowork
GA Gemini Assist
GM Google Gemini
VC Version Control
H5 Semantic HTML
C3 CSS3 & Grid
JS Vanilla JS
RD Responsive Design
NF Netlify
CF Cloudflare

Hover over or tap a tool above to see how it was utilized in building this portfolio.

Project 2: API Concepts - The Restaurant Metaphor

Understanding APIs (Application Programming Interfaces) is crucial in modern software. This interactive demonstration uses a familiar restaurant scenario to explain the Request/Response cycle.

How to use: Pick a tab (POST, GET, or DELETE) to select an HTTP method, fill in the control below it, then click the action button to send the request and watch the Client → API → Server flow animate in the Network Log. Try the Knowledge Check quiz once you've experimented with all three methods.

POST Request: Placing an Order

Sends data to the server to create a new resource.

GET Request: Reading the Menu

Retrieves existing data from the server without modifying it.

DELETE Request: Canceling an Order

Removes a specific resource from the server.

🧑‍💻 Client (You)
➡️ Request ➡️
🤵 API (Waiter)
⬅️ Response ⬅️
👨‍🍳 Server (Chef)

Network Log:

Select an HTTP method above and send a request...

Knowledge Check

Test your understanding of API concepts and HTTP methods:

Project 3: SAP Data Hierarchy Explorer

Understanding underlying data structures is essential for successful data migration and governance. This interactive tool explores the hierarchy of the SAP Vendor Master (Procure to Pay) object, showcasing the relationships between general, company code, and purchasing data.

How to use: Click a tab (LFA1, LFB1, or LFM1) to view that table's fields and see its branch highlight in the hierarchy diagram. Hover over any field name for a definition tooltip, then use the tables to answer the Knowledge Check questions below.

LFA1: Vendor Master (General Section)

Key Field: LIFNR

LIFNRNAME1ORT01LAND1
100001Acme CorpNew YorkUS
100002Globex IncLondonGB

LFB1: Vendor Master (Company Code)

Key Fields: LIFNR, BUKRS

LIFNRBUKRSAKONTZTERM
100001US0131000NT30
100001EU0131000NT15

LFM1: Vendor Master (Purchasing Organization)

Key Fields: LIFNR, EKORG

LIFNREKORGWAERS
100001P001USD
100002P002GBP
Vendor Master (P2P)
LFA1General
🔑 LIFNR
LFB1Co. Code
🔑 LIFNR
🔑 BUKRS
LFM1Purch. Org.
🔑 LIFNR
🔑 EKORG

Knowledge Check

Use the SAP tables above to trace the relational data and answer the following questions:

Project 4: AI Training Matrix Generator

AI adoption isn't one-size-fits-all. Different departments require targeted enablement paths. Enter a corporate role below to dynamically generate a tailored, three-phase AI learning matrix.

How to use: Select a business role from the sidebar to generate its tailored AI curriculum roadmap on the right.

Business Roles

Course Roadmap

Course 1: AI Literacy & Ethics

Foundational knowledge on LLMs, data privacy, and identifying AI hallucinations.

Course 2: Prompt Engineering Basics

Techniques for drafting effective prompts to automate daily workflows and communications.

Course 3: AI for Data Analysis

Leveraging Code Interpreter and data tools to summarize, visualize, and query datasets.

Course 4: Strategic AI Implementation

Evaluating AI ROI, identifying departmental use cases, and leading AI transformation.

Course 5: Custom GPTs & APIs

Building tailored AI assistants using internal knowledge bases and system integrations.

Generated Content

A showcase of AI-generated multimedia used for micro-learning and technical enablement.

Video Generation: Micro-Learning

🛠️ The Engineering Prompt:

"A bright, colorful, Sesame Street-style educational video featuring expressive felt puppet characters. A teenage-looking puppet customer sits at a retro diner counter and hands a paper order slip (representing a data request) to a cheerful puppet waiter (representing the API). The waiter happily takes the order and slides the ticket through a pass-through window to an energetic puppet chef (the Server) who starts cooking. The setting is vibrant, inviting, and evenly lit like a high-quality children's television show, 4k resolution, fun and lively camera framing."

Audio Generation: Podcast

🛠️ The Engineering Prompt:

"Generate a short conversational podcast intro featuring two engaging voices (one dynamic host, one tech-expert co-host). They are expert technical trainers who excel at storytelling. The Host warmly welcomes listeners to the 'Enablement Edge' podcast and introduces today's topic: demystifying APIs. The Expert Co-host jumps in enthusiastically, introducing the classic restaurant analogy. They banter smoothly back and forth: the Host plays the hungry customer (the Client) placing an order, while the Expert explains how the Waiter acts as the API, carrying the data payload safely to the Chef (the Server) in the kitchen. The tone is highly educational, energetic, and professional."

Audio Generation: Podcast (Japanese)

🛠️ The Engineering Prompt:

"Generate a short conversational podcast intro featuring two engaging voices (one dynamic host, one tech-expert co-host). They are expert technical trainers who excel at storytelling. The Host warmly welcomes listeners to the 'Enablement Edge' podcast and introduces today's topic: demystifying APIs. This is for the APJ region. Be sure to research, respect, and embrace cultural and professional expectations in this region."

A Larger Project

Query Quest: Learn SQL Through a Roguelike Adventure

Query Quest is a full standalone game built to teach SQL fundamentals through hands-on challenges. Navigate a branching map across three Acts, writing real SQL against an in-browser database to clear each room, collect gold and relics, and survive to the end.

How to play: From the title screen, start a run and pick your path through the map, node by node. Tutorial nodes teach a new SQL concept safe from risk, then ask you to write a matching query yourself. Challenge nodes present a problem — write a SQL query in the editor and run it; matching the expected result clears the room. Mystery nodes are a gamble for gold, relics, or a setback, and shops let you spend gold on relics that carry bonuses for the rest of the run. Manage your health carefully: a wrong or failed query at a challenge node costs you, and running out ends the attempt.

Click here to play Query Quest →