Humber Baking Co.

<div class="row g-5"> <div class="col-lg-6"> <h2 class="fw-bold text-white mb-4">The Challenge</h2> <p class="text-white-50 lead mb-5">To create a compelling brand identity for a fictional bakery that stands out in a crowded market, while designing an intuitive mobile app for ordering on campus.</p> <h3 class="fw-bold text-white mb-3 mt-5">Brand Identity</h3> <p class="text-white-50 mb-4">We moved away from traditional bakery beiges and browns, opting for a <strong>Royal Purple</strong> palette to signify creativity and quality. The typography uses <strong>Open Sans</strong> for clean, digital-first legibility.</p> <div class="d-flex gap-3 mt-4"><span class="badge bg-dark border border-secondary p-3 rounded-pill text-white">#6a1b9a</span> <span class="badge bg-dark border border-secondary p-3 rounded-pill text-white">Open Sans</span> <span class="badge bg-dark border border-secondary p-3 rounded-pill text-white">AR Models</span></div> </div> <div class="col-lg-6"> <div class="rounded-4 overflow-hidden border border-secondary bg-black bg-opacity-50 position-relative shadow-lg" style="height: 500px;"><!-- THE SECRET FIX: Use this div instead of model-viewer directly --> <div class="model-placeholder" style="width: 100%; height: 100%;" data-src="/assets/chocolate.glb" data-poster="https://i.ibb.co/X7SP3zQ/Humber-Baking-Co-Preview.png" data-alt="3D Chocolate Cake">&nbsp;</div> <div class="position-absolute bottom-0 start-0 w-100 p-3 text-center bg-gradient-to-t from-black"><small class="text-white-50">Interactive 3D Model</small></div> </div> </div> </div> <hr class="my-5 border-secondary opacity-25"> <div class="row justify-content-center"> <div class="col-lg-8"> <h2 class="fw-bold text-white mb-5 text-center">Design Process</h2> <div class="d-flex gap-4 mb-5"> <div class="display-1 fw-bold text-secondary opacity-25">01</div> <div> <h4 class="fw-bold text-white">Research</h4> <p class="text-white-50">Analyzed student ordering habits and dietary filtering needs.</p> </div> </div> <div class="d-flex gap-4 mb-5"> <div class="display-1 fw-bold text-secondary opacity-25">02</div> <div> <h4 class="fw-bold text-white">Prototyping</h4> <p class="text-white-50">Created low-fidelity wireframes in Adobe XD to map user flows.</p> </div> </div> <div class="d-flex gap-4 mb-5"> <div class="display-1 fw-bold text-secondary opacity-25">03</div> <div> <h4 class="fw-bold text-white">High-Fidelity</h4> <p class="text-white-50">Applied the "Purple Premium" visual language and integrated AR concepts.</p> </div> </div> </div> </div>

<div class="row g-5"> <div class="col-lg-6"> <h2 class="fw-bold text-white mb-4">The Challenge</h2> <p class="text-white-50 lead mb-5">To create a compelling brand identity for a fictional bakery that stands out in a crowded market, while designing an intuitive mobile app for ordering on campus.</p> <h3 class="fw-bold text-white mb-3 mt-5">Brand Identity</h3> <p class="text-white-50 mb-4">We moved away from traditional bakery beiges and browns, opting for a <strong>Royal Purple</strong> palette to signify creativity and quality. The typography uses <strong>Open Sans</strong> for clean, digital-first legibility.</p> <div class="d-flex gap-3 mt-4"><span class="badge bg-dark border border-secondary p-3 rounded-pill text-white">#6a1b9a</span> <span class="badge bg-dark border border-secondary p-3 rounded-pill text-white">Open Sans</span> <span class="badge bg-dark border border-secondary p-3 rounded-pill text-white">AR Models</span></div> </div> <div class="col-lg-6"> <div class="rounded-4 overflow-hidden border border-secondary bg-black bg-opacity-50 position-relative shadow-lg" style="height: 500px;"><!-- THE SECRET FIX: Use this div instead of model-viewer directly --> <div class="model-placeholder" style="width: 100%; height: 100%;" data-src="/assets/chocolate.glb" data-poster="https://i.ibb.co/X7SP3zQ/Humber-Baking-Co-Preview.png" data-alt="3D Chocolate Cake">&nbsp;</div> <div class="position-absolute bottom-0 start-0 w-100 p-3 text-center bg-gradient-to-t from-black"><small class="text-white-50">Interactive 3D Model</small></div> </div> </div> </div> <hr class="my-5 border-secondary opacity-25"> <div class="row justify-content-center"> <div class="col-lg-8"> <h2 class="fw-bold text-white mb-5 text-center">Design Process</h2> <div class="d-flex gap-4 mb-5"> <div class="display-1 fw-bold text-secondary opacity-25">01</div> <div> <h4 class="fw-bold text-white">Research</h4> <p class="text-white-50">Analyzed student ordering habits and dietary filtering needs.</p> </div> </div> <div class="d-flex gap-4 mb-5"> <div class="display-1 fw-bold text-secondary opacity-25">02</div> <div> <h4 class="fw-bold text-white">Prototyping</h4> <p class="text-white-50">Created low-fidelity wireframes in Adobe XD to map user flows.</p> </div> </div> <div class="d-flex gap-4 mb-5"> <div class="display-1 fw-bold text-secondary opacity-25">03</div> <div> <h4 class="fw-bold text-white">High-Fidelity</h4> <p class="text-white-50">Applied the "Purple Premium" visual language and integrated AR concepts.</p> </div> </div> </div> </div>