About This Site

A prompt asked to track travel budget and finances. Claude suggested several approaches including a budget page on the site, a spreadsheet, or a budgeting app. After the spreadsheet option was rejected, Claude built a full budget page with pre-filled estimates across 10 categories — flights, accommodation, food, transport, activities, shopping, and more.

The budget page was expanded with an expense log form to record individual purchases — with description, amount, category, budget item, city, and date. Through several rounds of prompting, Claude made the logged expenses update the category actuals in the table above, added the ability to edit and delete entries, and made unassigned expenses appear as dynamic rows in their category section.

Claude researched popular charting libraries and recommended Chart.js for its lightweight CDN-friendly approach. Three interactive charts were added: estimated vs actual by category (horizontal bar), spending by category (doughnut), and spending by city (doughnut). All charts update in real time as expenses are added or removed.

Since the budget data lives in localStorage (local to each browser), a prompt asked about syncing between phone and computer. Claude discussed several options and built an import/export feature — download expense data as a JSON file or copy to clipboard, then import on another device by uploading the file or pasting the JSON. Supports merging with existing data or replacing all data.

A discussion about creating a mobile app led to Claude recommending a Progressive Web App (PWA) as the simplest approach. Claude added a manifest, service worker, and app icons so family members can visit the site on their phone and add it to their home screen — it opens full-screen like a native app and works offline. A notification banner appears when site updates are available.

A discussion about how the budget page would be used differently during planning vs travel led to creating a separate lightweight /log/ page optimized for quick on-the-go expense entry on a phone. A floating "+" button was also added to the budget page for quick access. The import/export was moved to its own /sync/ page to keep things focused.

As a Canadian traveling to Portugal, pre-trip expenses are in CAD while on-the-ground spending is in EUR. Claude added a currency toggle and editable exchange rate to the budget page, a currency selector on every expense entry, and per-item native currency on all budget items. All totals, charts, and category breakdowns convert automatically to whichever display currency is selected.

Claude looked up the favicon from mariatta.ca on GitHub, then designed a new one combining the "M" monogram with a Portuguese flag diagonal split — green and red — to represent both Mariatta's personal brand and the Portugal trip.

The initial itinerary had arrival in Porto on August 21. The first prompt changed the arrival to August 22, and Claude shifted every date across all three cities — Porto, Lisbon, and Aveiro — including individual day dates, transport dates, and the overview page.

September 3 is our 20th wedding anniversary. Claude searched for fine dining restaurants in Aveiro suitable for the occasion, recommended Salpoente (Michelin-recognised, in a converted salt warehouse), and added it to both the itinerary and the restaurant list.

PyCon Portugal takes place September 3–4 in Aveiro. Claude added two conference days to the itinerary, updated the return-to-Porto schedule, added a departure day (Sep 5), and adjusted the total trip length from 13 to 14 nights across all pages.

Claude added website URLs and Google Maps links to every activity across all three cities. This involved updating the Activity type to support optional url and mapUrl fields, updating the DayCard component to render clickable link buttons, and adding links to approximately 40+ activities.

Each city page got an interactive map (using Leaflet and OpenStreetMap) showing all attractions, hotels, and restaurants as color-coded pins. Claude created a reusable MapSection component, added a MapPoint type, and populated coordinates for every point of interest across all three cities.

The original overview page had 6 brief tips. Claude expanded this into 4 categorized sections (Money & Payments, Weather & Packing, Getting Around, Practical Tips) with 19 detailed tips covering currency, tipping culture, what to pack, inter-city trains, public transit cards, rideshare apps, power adapters, language, and health/safety.

The original plan had an evening return to Porto on Sep 4. A prompt changed this to a morning return on Sep 5, which meant updating the transport info, restructuring the last two days of the itinerary, and removing the need for an overnight in Porto.

A personal tradition: taking ice cream selfies at tech conferences. Claude researched gelato shops in Aveiro and added suggestions to both PyCon days — Gelados de Portugal (with Portuguese-inspired flavours like ovos moles) and Gelataria Italiana.

Rather than building a separate Python backend (which was discussed and rejected as over-engineering), Claude built a checklist page within the existing Astro site. It has 8 categories and 48 items covering flights, accommodation, documents, PyCon registration, activity bookings, packing, and pre-departure tasks. Progress is tracked with checkboxes persisted in localStorage, with a progress bar and per-category completion counts.

The color palette was updated to reflect the Portuguese flag — green, red, and yellow accents throughout the site, from the navigation active states to rating stars, section labels, progress bars, and the hero gradient.

This page — explaining what the site is, how it was made, and the prompts used to build it.