One component, two layouts: the dual view pattern in React

One component, two layouts: the dual view pattern in React My portfolio has two completely different layouts. A grid of cards that open into modals. A full-screen vertical carousel with snap scrolling. They look nothing alike and behave nothing alike. They share one component and one data file. That pattern is worth writing about. The shared data layer Everything starts with projects.js : a flat array of objects, one per project. Four fields each: id , title , techStack , info . Both views import it directly. Neither knows the other exists. export const projects = [ { id : " lunary " , title : " Lunary " , techStack : " Next.js, Prisma, PostgreSQL " , info : " A real-time astrology platform with birth charts, transit tracking, and synastry analysis. " , }, // ... ]; The id doubles as the GitHub repo slug, the image filename key, and the React list key. One field, three uses. That's a different article — the point here is that a single import drives both views. ProjectItem: one componen