Travel Diary
A travel diary that almost writes itself.
Some parts of these notes were clarified and refined using AI tools such as ChatGPT, Gemini, and Claude. All ideas are my own, and I reviewed and edited all the text myself.
Scope: Final project · ISKB82 AI in Practice
/
@ MUNI
/
Role: Solo design + dev
/
Year: 2026
Open the diary
Open the diary
Live now — Italy, Japan, Portugal, Greece.
/
Context
(01)
Every trip leaves me with a pile of inputs.
I come home from a trip and it's all scattered — voice memos, Apple Notes, Google Maps lists, photos, a journal in Notion. I want to share it: with family, with friends, and with the people who land on my portfolio.
Voice memos
Talked-out thoughts from the road.
Apple Notes
Quick fragments, jotted on the go.
Google Maps lists
Pinned places worth coming back to.
Photos
The trip as I actually saw it.
notion journal lives here too — that one's mostly for me
/
Challenge
(02)
Challenge.
Two ways to do this, and both lose. By hand I never finish — the writing dies in drafts and the trip never gets published. Drop it into a generic blog and it gets flattened — the CMS template eats my voice and my style. I wanted neither.
Writing by hand
Work that ends up in a draft and never ships.
A generic blog
A CMS template where my voice and style disappear.
/
Audience & Research
(03)
Readers want the tips, not my notebook.
The research was light — informal talks with family and friends, no surveys, no numbers. One thing came through clearly: what pulls people in is the tips and tricks and the Google Maps lists. The personal diary? That's mostly for me. So the tip moves to the front, and the story becomes optional context.
The reader
Practical tips and places to actually go.
The recruiter
A craft signal — how I build a product.
Readers want the tips, not my notebook.
honest scope — a few people from my circle, no metrics to dress it up
/
Vision
(04)
Vision.
Raw inputs
→
AI condenses
→
a daily entry in my voice
A hand-designed travel diary on the site — not a template. From my raw inputs, an AI pipeline composes a daily entry in my own style. I hold the taste and the voice; the pipeline holds the volume.
I hold the voice. AI holds the volume.
/
Prototype
(05)
One page, one bento.
The diary detail is a single page laid out as a bento grid — everything from a trip in one frame. It opens as a full-screen overlay that springs out of the card you tapped, so there's no jarring page reload.
jholec.com/travel
Slideshow
Photos and video, with a FOTO/VIDEO badge and captions.
Map
Leaflet on dark CartoDB tiles, pins straight from the config.
Tips
Apple Reminders style, with round checkboxes.
Notepad
Caveat font on aged paper, typed out on load.
/
AI Pipeline
(06)
Inputs in, entry out.
It's config-driven. Each part of the page has a config; my Claude Code workflow pushes changes into Framer over MCP. I hand it my notes, it finds the Google Maps list itself, I send the photos — subagents do the rest, condensing everything into an entry written in my custom style.
Inputs
Apple Notes · Google Maps list · photos
→
Claude Code + subagents
over Framer MCP
→
The entry
config-driven, in my custom writing style
Claude Code
·
Framer MCP
·
Framer
·
Subagents
The AI is in the build and the condensing — not the generating. I hold the editing and the voice.
single-file component — framer won't import across files, so everything lives in one ~650-line file
/
Testing & Iterations
(07)
Three changes from one test.
The test was light — a few people from my circle, the same crowd as the research, no scores or success rates. But it was enough to surface three concrete fixes, and I shipped all three.
MAP
Static map
→
Expandable map
NOTEPAD
Short note
→
Expandable teaser
TIPS
One generic link
→
Categorized lists — nature, food, coffee, shopping
every "after" is live in the prototype, not a mockup
/
Ethics
(08)
A low-risk app — but traces still stay behind.
Nothing here is high-stakes, but a travel diary still leaves a footprint. I named the ones that matter rather than pretend they don't exist.
Photos & GDPR
Faces and people who didn't sign up to be posted.
Location traces
Vendor lock-in
The whole thing leans on Framer and one toolchain.
Accessibility
Still a gap I haven't fully closed.
AI Disclosure banner already deployed (EU AI Act, Art. 50) — the same one you saw at the top.
easy to skip ethics on a "fun" project — which is exactly why i didn't
/
Take-aways
(09)
Take-aways.
Where AI actually helped
AI earned its place in the plumbing. It helped me build the pipeline and the code, structure the ethics analysis so I didn't forget the boring-but-important parts, and sort through feedback fast. The volume work — that's where it shines.
Where it fell short
AI can't replace a real test, and it won't catch my own insider bias — I'd test outside my bubble next time, and bring ethics in as an entry condition, not an afterthought. And left unguarded, it flattens my voice. Keeping that voice was the one thing I refused to delegate.
progress over perfection — shipped, then honest about what's missing
/
The Meta Angle
(10)
An experiment inside an experiment inside an experiment.
Claude Code ran with me through the whole course. It automated the workflow. That workflow generated the Framer component you're looking at. And the AI didn't stop there — it also helped build the course presentation and this very case study. Through all of it, one thing stayed mine: the writing voice.
AI holds the volume. I hold the judgment.
yes, this paragraph too — written by me, on purpose
/
Try It
(11)
The diary is live — read along.
Open it, scroll a trip, and tell me what you'd change. I'd love to hear your feedback!
Live now — 4 countries: Italy, Japan, Portugal, Greece. More on the way.