// sections/Landing.jsx — index page: hero, PI & Vision, the tracklist. // v2 "Liner Notes" — the box-set becomes an album-sleeve tracklist. function LinerLabel({ children, color, chip }) { // Small-caps eyebrow with a pastel chip. `color` (legacy) tints the text; // `chip` sets the square's fill — falls back to coral. return (
{children}
); } function TrackRow({ section, index, onSelect }) { const [hover, setHover] = React.useState(false); return (
onSelect(section.id)} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={{ display: 'flex', alignItems: 'baseline', gap: 16, padding: '20px 4px', borderBottom: '1px solid var(--c-border)', cursor: 'pointer', background: hover ? '#FAFBFC' : 'transparent', transition: 'background 160ms' }}> Side {section.side} {section.title} {section.tagline} {String(index + 1).padStart(2, '0')}
); } // Flat tape card — the calm descendant of the skeuomorphic cassette. function TapeCard({ section, onSelect }) { const [hover, setHover] = React.useState(false); return (
onSelect(section.id)} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={{ background: '#FFFFFF', border: `1px solid ${hover ? 'var(--c-smoke)' : 'var(--c-border)'}`, padding: 22, cursor: 'pointer', transition: 'border-color 180ms, transform 240ms var(--ease-spring)', transform: hover ? 'translateY(-3px)' : 'translateY(0)', display: 'flex', flexDirection: 'column', gap: 14 }}>
Side {section.side} {section.type}
{/* flat tape: label strip + two line reels */}
{section.title}
{section.sublabel}
{[0, 1].map((i) =>
)}
{section.tagline}
Play
); } // Self-ranked competence across the five TU/e expertise areas. function EaRanking() { const items = [ ['01', 'MDC', 'Math, Data & Computing'], ['02', 'T&R', 'Technology & Realization'], ['03', 'U&S', 'User & Society'], ['04', 'B&E', 'Business & Entrepreneurship'], ['05', 'C&A', 'Creativity & Aesthetics']]; return (
Self-ranked competence
All at a decent level
{items.map(([rank, code, name], i) =>
{rank} {code} {name}
)}
); } // One reference point in the Inspiration grid: image slot + name + reflection. function InspirationCard({ slotId, placeholder, name, meta, chip, children }) { return (
{name}
{meta}

{children}

); } function LandingSection({ sections, onSelect, caseOpen, editorialStyle }) { return (
{/* HERO */}
FBP Portfolio · 2023–2026

Merijn
Verhaak

Industrial Design · TU/e · 2023–2026

Welcome to my Graduation portfolio. I'll try to strike a combination between FBP reflections and the bachelor. 

{/* A1 · VISION */}
A1 · Vision

People in control of their technology.

I want to let users be in control of their technology, addressing the space between total rejection of technology and passive acceptance.

In my first semester of industrial design I hit a breaking point from the self-hatred I carried in my forming years, and something had to change. I am not alone in my struggle with mental health, especially when social media and algorithms have had a negative impact on the wellbeing of younger adults (Haidt, 2024). Digital minimalism has risen as a counter movement to the exploitative patterns of big tech: algorithm-based content, infinite scroll, short form content, and AI that is too kind and keeps asking follow-up questions (Newport, 2019). All of it to keep you paying with your attention (Williams, 2018).

I am building a healthier relationship with technology by curating my algorithms, avoiding manipulative patterns, and instructing AI not to be sycophantic or ask continuing questions. That is why I want to make design interventions that help people use technology intentionally, not compulsively. With intentionality comes friction, and not every user has the time or need for it. My FBP is a direct expression of this: a physical AI tutor device inspired by the Socratic method. It takes away the screen, gives the user agency over when and how to engage through conversation, and uses Socratic questioning instead of giving direct answers.

{/* A2 · PROFESSIONAL IDENTITY */}
A2 · Professional Identity

A curiosity-driven generalist.

I am a generalist driven by curiosity to get a basic understanding of most topics, drawing inspiration from areas that don't fully overlap but combine in a unique way. Even in year 1 I called myself a jack of all trades; what improved since is analyzing why and how that works, making me a curiosity-driven generalist.

My perfectionism was a big hurdle. It made me struggle to find an identity and vision that felt like me. I wanted to keep my self-critical attitude, but the mindset was negative because I treated mistakes as failures. My answer keeps that sharpness while shifting the mindset: kintsugi, based on the wabi-sabi philosophy of embracing imperfection (Koren, 2008), I read as a metaphor for iteration, where breaking and mending things makes something more beautiful.

I developed a nuanced stance on AI. I place real importance on the agency of work: using AI as a tool to realize your ideas is fine, as long as every design decision remains yours.

I still have difficulties reaching out to people, something that has been part of me forever, though during my studies I started to improve and trust others to do their work.

I struggle with visual storytelling, while I am good at explaining things and getting an idea across. This semester I became a PI&V mentor, which I enjoy and which lets me explore why I like explaining things and sharing knowledge. My EA ranking is MDC, T&R, U&S, B&E, C&A.

{/* A3 · Into the FBP — PI&V + Courses, side by side */}
A3 · Into the FBP
{/* How my PI&V framed my FBP */}

How my PI&V framed my FBP.

My motivation for choosing PI&V as the reflective lens to center the tutor around, was because of my 1st year where I struggled with defining my vision to now where I feel a lot more confident and shared my knowledge as a mentor to help newer students.

The expert interviews helped me position my prototype in the wider PI&V ecosystem as a pre-coaching tool rather than a replacement for coaching, which resolved the concern about undermining community learning. This was due to the threat of the Socratic tutor replacing the in-person student meetings, and this was fair. In my opinion the most important part of PI&V is the humanity of it.

{/* How courses fed the FBP */}

How courses fed the FBP.

The system prompt for the tutor was my first real system prompt engineering, getting an AI to reply exactly how I wanted. I consider this interaction design, since it is the main way the user engages with the tutor, and it is also where I aimed to invoke a behavioural change in how users reflect, which points back to CBL P1 and my recycling project.

To define the core vision I did a lot of literature review to base my claims (see Figure 3). First in Design & Research, which is also where I did thematic analysis for the first time, using probe kits instead of interviews (Braun & Clarke, 2006). Both were how I integrated U&S into the project, since I started valuing a well-researched problem statement in CBL P3.

The system diagram built on the speech-to-speech pipeline I made in CBL P3, this time mixing local models with APIs and using OOCSI (Funk, 2019), which was covered extensively in Designing Connected Experiences along with system diagramming (see Figure 4). I have used OOCSI over 5 courses. MDC is the role I am confident executing in a project.

CAD modelling for shape exploration and the bookmark prototype is a skill I started in Designing Actuated Systems and has become my way of visual communication instead of sketching, combining T&R and C&A.

To work out how the service should run I made a service model blueprint connecting the system diagram to the intended user experience, something I first did in Design Innovation Methods. The cost analysis is part of the FBP, but I could have integrated B&E better; it is more of a box-check that could be done properly.

{/* Course evidence — pictures from the courses that fed the FBP */}
{/* THE TRACKLIST */}
B · The Tapes
03 sides
{caseOpen ?
{sections.map((s, i) => )}
:
{sections.map((s) => )}
}
Click a side to play it. ⏏ Eject brings you back to this index.
); } window.LandingSection = LandingSection; window.LinerLabel = LinerLabel;