Create a polished graphic design portfolio website for an experienced designer showcasing work produced over multiple years. The website should feel professional, confident, and refined, suitable for agencies, studios, and direct clients.
6494c8b verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Packaging Design | ChromaCanvas Studio</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| </head> | |
| <body class="bg-white text-gray-900 font-sans antialiased"> | |
| <custom-navbar></custom-navbar> | |
| <!-- Category Header --> | |
| <section class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Packaging Design</h1> | |
| <p class="text-xl max-w-3xl mx-auto">Creating shelf presence that connects with consumers through strategic form, function, and visual storytelling.</p> | |
| </div> | |
| </section> | |
| <!-- Portfolio Grid --> | |
| <section class="py-20"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Project 1 --> | |
| <a href="project-packaging1.html" class="project-card group relative overflow-hidden rounded-xl shadow-lg"> | |
| <img src="http://static.photos/retail/1200x630/31" alt="Beverage Packaging" class="w-full h-80 object-cover transition duration-500 group-hover:scale-105"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6 opacity-0 group-hover:opacity-100 transition duration-300"> | |
| <div> | |
| <h3 class="text-2xl font-bold text-white mb-2">Artisan Tea Co.</h3> | |
| <p class="text-gray-200">Premium Tea Packaging</p> | |
| <p class="text-gray-300 text-sm mt-2">2023</p> | |
| </div> | |
| </div> | |
| </a> | |
| <!-- Project 2 --> | |
| <a href="project-packaging2.html" class="project-card group relative overflow-hidden rounded-xl shadow-lg"> | |
| <img src="http://static.photos/retail/1200x630/32" alt="Skincare Packaging" class="w-full h-80 object-cover transition duration-500 group-hover:scale-105"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6 opacity-0 group-hover:opacity-100 transition duration-300"> | |
| <div> | |
| <h3 class="text-2xl font-bold text-white mb-2">Botanical Skincare</h3> | |
| <p class="text-gray-200">Sustainable Packaging System</p> | |
| <p class="text-gray-300 text-sm mt-2">2022</p> | |
| </div> | |
| </div> | |
| </a> | |
| <!-- Project 3 --> | |
| <a href="project-packaging3.html" class="project-card group relative overflow-hidden rounded-xl shadow-lg"> | |
| <img src="http://static.photos/retail/1200x630/33" alt="Food Packaging" class="w-full h-80 object-cover transition duration-500 group-hover:scale-105"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6 opacity-0 group-hover:opacity-100 transition duration-300"> | |
| <div> | |
| <h3 class="text-2xl font-bold text-white mb-2">Organic Snacks</h3> | |
| <p class="text-gray-200">Food Packaging Redesign</p> | |
| <p class="text-gray-300 text-sm mt-2">2021</p> | |
| </div> | |
| </div> | |
| </a> | |
| <!-- Project 4 --> | |
| <a href="project-packaging4.html" class="project-card group relative overflow-hidden rounded-xl shadow-lg"> | |
| <img src="http://static.photos/retail/1200x630/34" alt="Luxury Packaging" class="w-full h-80 object-cover transition duration-500 group-hover:scale-105"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6 opacity-0 group-hover:opacity-100 transition duration-300"> | |
| <div> | |
| <h3 class="text-2xl font-bold text-white mb-2">Signature Fragrance</h3> | |
| <p class="text-gray-200">Luxury Perfume Packaging</p> | |
| <p class="text-gray-300 text-sm mt-2">2020</p> | |
| </div> | |
| </div> | |
| </a> | |
| <!-- Project 5 --> | |
| <a href="project-packaging5.html" class="project-card group relative overflow-hidden rounded-xl shadow-lg"> | |
| <img src="http://static.photos/retail/1200x630/35" alt="Wine Label" class="w-full h-80 object-cover transition duration-500 group-hover:scale-105"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6 opacity-0 group-hover:opacity-100 transition duration-300"> | |
| <div> | |
| <h3 class="text-2xl font-bold text-white mb-2">Vineyard Collection</h3> | |
| <p class="text-gray-200">Wine Label Series</p> | |
| <p class="text-gray-300 text-sm mt-2">2019</p> | |
| </div> | |
| </div> | |
| </a> | |
| <!-- Project 6 --> | |
| <a href="project-packaging6.html" class="project-card group relative overflow-hidden rounded-xl shadow-lg"> | |
| <img src="http://static.photos/retail/1200x630/36" alt="Gift Box" class="w-full h-80 object-cover transition duration-500 group-hover:scale-105"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6 opacity-0 group-hover:opacity-100 transition duration-300"> | |
| <div> | |
| <h3 class="text-2xl font-bold text-white mb-2">Holiday Collection</h3> | |
| <p class="text-gray-200">Limited Edition Gift Boxes</p> | |
| <p class="text-gray-300 text-sm mt-2">2018</p> | |
| </div> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <custom-footer></custom-footer> | |
| <script>feather.replace();</script> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |