Type Specimen Poster

<!-- Content Only (Hero is managed by template) --> <p>&nbsp;</p> <!-- 1. The Project & History --> <div class="row g-5 mb-5 align-items-center"> <div class="col-lg-6" data-aos="fade-right"> <h2 class="fw-bold text-white mb-4">The Project</h2> <p class="lead text-white-50 mb-4">This project is a case study and commercial type specimen poster for the <strong>ITC Avant Garde Gothic</strong> typeface. My goal was to capture the revolutionary, geometric spirit of the original <em>Avant Garde</em> magazine.</p> <p class="text-white-50">Designed by <strong>Herb Lubalin</strong> and <strong>Tom Carnase</strong> in 1970, the typeface is characterized by its geometric perfection and aggressive, interlocking ligatures.</p> </div> <div class="col-lg-6" data-aos="fade-left"> <div class="p-4 border border-secondary bg-black bg-opacity-50 rounded-4 shadow-lg"> <h3 class="h5 text-white mb-4 fw-bold text-center">The Designers</h3> <div class="row g-3 text-center"> <div class="col-6"> <div class="ratio ratio-1x1 mb-3 rounded-circle overflow-hidden border border-secondary"><img class="object-fit-cover w-100 h-100" src="/assets/typespecimen/lubalin-herb.jpg" alt="Herb Lubalin"></div> <small class="text-white fw-bold">Herb Lubalin</small></div> <div class="col-6"> <div class="ratio ratio-1x1 mb-3 rounded-circle overflow-hidden border border-secondary"><img class="object-fit-cover w-100 h-100" src="/assets/typespecimen/TomCarnase.jfif" alt="Tom Carnase"></div> <small class="text-white fw-bold">Tom Carnase</small></div> </div> </div> </div> </div> <hr class="my-5 border-secondary opacity-25" data-aos="fade-in"><!-- 2. The Typeface Showcase --> <div class="text-center mb-5" data-aos="fade-up"> <h2 class="fw-bold text-white">The Typeface</h2> <p class="text-white-50">Geometric structure met with artistic flair.</p> </div> <div class="row g-4 mb-5"> <div class="col-lg-6" data-aos="fade-right"> <div class="p-4 h-100 border border-secondary bg-white bg-opacity-05 rounded-4 d-flex flex-column align-items-center"> <h4 class="text-white fw-bold mb-4">Primary Styles</h4> <div class="rounded-3 overflow-hidden shadow-lg w-100"><img class="img-fluid w-100 object-fit-cover" src="/assets/typespecimen/fontstyles.png" alt="Avant Garde Font Styles"></div> </div> </div> <div class="col-lg-6" data-aos="fade-left"> <div class="p-4 h-100 border border-secondary bg-white bg-opacity-05 rounded-4 d-flex flex-column align-items-center"> <h4 class="text-white fw-bold mb-4">Extended Weights</h4> <div class="rounded-3 overflow-hidden shadow-lg w-100"><img class="img-fluid w-100 object-fit-cover" src="/assets/typespecimen/morestyles.png" alt="More Styles"></div> </div> </div> </div> <!-- 3. The Poster --> <div class="row justify-content-center mb-5" data-aos="zoom-in"> <div class="col-lg-10"> <div class="text-center mb-4"> <h2 class="fw-bold text-white">Design 100 Project</h2> <p class="text-white-50">Promotional poster showcasing the font's versatility.</p> </div> <div class="p-2 border border-secondary bg-black bg-opacity-50 rounded-4 shadow-lg position-relative group cursor-pointer" data-bs-toggle="modal" data-bs-target="#posterModal"><img class="img-fluid rounded-3 w-100" src="/assets/typespecimen/jv_posterproject-02.jpg" alt="Type Specimen Poster"> <!-- Hover Overlay --> <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center bg-black bg-opacity-50 opacity-0 group-hover-opacity transition-all duration-300 rounded-3"><span class="text-white fw-bold border border-white px-4 py-2 rounded-pill backdrop-blur">View Full Size</span></div> </div> </div> </div> <!-- 4. Legacy Grid --> <div class="row g-4" data-aos="fade-up"> <div class="col-md-4"> <div class="rounded-4 overflow-hidden border border-secondary h-100"><img class="img-fluid w-100 h-100 object-fit-cover" src="/assets/typespecimen/vincent-haws-final.jpg" alt="Vincent Haws"></div> </div> <div class="col-md-4"> <div class="rounded-4 overflow-hidden border border-secondary h-100"><img class="img-fluid w-100 h-100 object-fit-cover" src="/assets/typespecimen/people.png" alt="Avant Garde People"></div> </div> <div class="col-md-4"> <div class="p-4 h-100 border border-secondary bg-gradient-to-br from-gray-900 to-black rounded-4 d-flex align-items-center justify-content-center text-center"> <div> <h3 class="fw-bold text-white mb-3">Legacy</h3> <p class="text-white-50 mb-0">Released by ITC in 1970, Avant Garde Gothic remains one of the most recognizable typefaces in history, defining the aesthetic of the 70s and beyond.</p> </div> </div> </div> </div> <!-- Modal --> <div id="posterModal" class="modal fade" tabindex="-1" aria-hidden="true"> <div class="modal-dialog modal-xl modal-dialog-centered"> <div class="modal-content bg-transparent border-0 shadow-none"> <div class="modal-body p-0 position-relative"><button class="btn-close btn-close-white position-absolute top-0 end-0 m-3 z-index-10" type="button" data-bs-dismiss="modal" aria-label="Close"></button> <img class="img-fluid rounded-4 shadow-lg border border-secondary" src="/assets/typespecimen/jv_posterproject-02.jpg" alt="Full Poster"></div> </div> </div> </div>

<!-- Content Only (Hero is managed by template) --> <p>&nbsp;</p> <!-- 1. The Project & History --> <div class="row g-5 mb-5 align-items-center"> <div class="col-lg-6" data-aos="fade-right"> <h2 class="fw-bold text-white mb-4">The Project</h2> <p class="lead text-white-50 mb-4">This project is a case study and commercial type specimen poster for the <strong>ITC Avant Garde Gothic</strong> typeface. My goal was to capture the revolutionary, geometric spirit of the original <em>Avant Garde</em> magazine.</p> <p class="text-white-50">Designed by <strong>Herb Lubalin</strong> and <strong>Tom Carnase</strong> in 1970, the typeface is characterized by its geometric perfection and aggressive, interlocking ligatures.</p> </div> <div class="col-lg-6" data-aos="fade-left"> <div class="p-4 border border-secondary bg-black bg-opacity-50 rounded-4 shadow-lg"> <h3 class="h5 text-white mb-4 fw-bold text-center">The Designers</h3> <div class="row g-3 text-center"> <div class="col-6"> <div class="ratio ratio-1x1 mb-3 rounded-circle overflow-hidden border border-secondary"><img class="object-fit-cover w-100 h-100" src="/assets/typespecimen/lubalin-herb.jpg" alt="Herb Lubalin"></div> <small class="text-white fw-bold">Herb Lubalin</small></div> <div class="col-6"> <div class="ratio ratio-1x1 mb-3 rounded-circle overflow-hidden border border-secondary"><img class="object-fit-cover w-100 h-100" src="/assets/typespecimen/TomCarnase.jfif" alt="Tom Carnase"></div> <small class="text-white fw-bold">Tom Carnase</small></div> </div> </div> </div> </div> <hr class="my-5 border-secondary opacity-25" data-aos="fade-in"><!-- 2. The Typeface Showcase --> <div class="text-center mb-5" data-aos="fade-up"> <h2 class="fw-bold text-white">The Typeface</h2> <p class="text-white-50">Geometric structure met with artistic flair.</p> </div> <div class="row g-4 mb-5"> <div class="col-lg-6" data-aos="fade-right"> <div class="p-4 h-100 border border-secondary bg-white bg-opacity-05 rounded-4 d-flex flex-column align-items-center"> <h4 class="text-white fw-bold mb-4">Primary Styles</h4> <div class="rounded-3 overflow-hidden shadow-lg w-100"><img class="img-fluid w-100 object-fit-cover" src="/assets/typespecimen/fontstyles.png" alt="Avant Garde Font Styles"></div> </div> </div> <div class="col-lg-6" data-aos="fade-left"> <div class="p-4 h-100 border border-secondary bg-white bg-opacity-05 rounded-4 d-flex flex-column align-items-center"> <h4 class="text-white fw-bold mb-4">Extended Weights</h4> <div class="rounded-3 overflow-hidden shadow-lg w-100"><img class="img-fluid w-100 object-fit-cover" src="/assets/typespecimen/morestyles.png" alt="More Styles"></div> </div> </div> </div> <!-- 3. The Poster --> <div class="row justify-content-center mb-5" data-aos="zoom-in"> <div class="col-lg-10"> <div class="text-center mb-4"> <h2 class="fw-bold text-white">Design 100 Project</h2> <p class="text-white-50">Promotional poster showcasing the font's versatility.</p> </div> <div class="p-2 border border-secondary bg-black bg-opacity-50 rounded-4 shadow-lg position-relative group cursor-pointer" data-bs-toggle="modal" data-bs-target="#posterModal"><img class="img-fluid rounded-3 w-100" src="/assets/typespecimen/jv_posterproject-02.jpg" alt="Type Specimen Poster"> <!-- Hover Overlay --> <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center bg-black bg-opacity-50 opacity-0 group-hover-opacity transition-all duration-300 rounded-3"><span class="text-white fw-bold border border-white px-4 py-2 rounded-pill backdrop-blur">View Full Size</span></div> </div> </div> </div> <!-- 4. Legacy Grid --> <div class="row g-4" data-aos="fade-up"> <div class="col-md-4"> <div class="rounded-4 overflow-hidden border border-secondary h-100"><img class="img-fluid w-100 h-100 object-fit-cover" src="/assets/typespecimen/vincent-haws-final.jpg" alt="Vincent Haws"></div> </div> <div class="col-md-4"> <div class="rounded-4 overflow-hidden border border-secondary h-100"><img class="img-fluid w-100 h-100 object-fit-cover" src="/assets/typespecimen/people.png" alt="Avant Garde People"></div> </div> <div class="col-md-4"> <div class="p-4 h-100 border border-secondary bg-gradient-to-br from-gray-900 to-black rounded-4 d-flex align-items-center justify-content-center text-center"> <div> <h3 class="fw-bold text-white mb-3">Legacy</h3> <p class="text-white-50 mb-0">Released by ITC in 1970, Avant Garde Gothic remains one of the most recognizable typefaces in history, defining the aesthetic of the 70s and beyond.</p> </div> </div> </div> </div> <!-- Modal --> <div id="posterModal" class="modal fade" tabindex="-1" aria-hidden="true"> <div class="modal-dialog modal-xl modal-dialog-centered"> <div class="modal-content bg-transparent border-0 shadow-none"> <div class="modal-body p-0 position-relative"><button class="btn-close btn-close-white position-absolute top-0 end-0 m-3 z-index-10" type="button" data-bs-dismiss="modal" aria-label="Close"></button> <img class="img-fluid rounded-4 shadow-lg border border-secondary" src="/assets/typespecimen/jv_posterproject-02.jpg" alt="Full Poster"></div> </div> </div> </div>