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>ChromaCanvas Studio | Graphic Design Portfolio</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> | |
| <!-- Hero Section --> | |
| <section class="relative h-screen flex items-center justify-center bg-gray-50 overflow-hidden"> | |
| <div class="absolute inset-0 bg-black opacity-20"></div> | |
| <div class="container mx-auto px-6 relative z-10 text-center"> | |
| <h1 class="text-5xl md:text-7xl font-bold mb-6 tracking-tight">Crafting Visual <span class="text-indigo-600">Identities</span></h1> | |
| <p class="text-xl md:text-2xl max-w-3xl mx-auto mb-10">Strategic design solutions that elevate brands and engage audiences. Combining aesthetic sensibility with commercial acumen.</p> | |
| <a href="#portfolio" class="inline-block px-8 py-4 bg-indigo-600 text-white font-medium rounded-full hover:bg-indigo-700 transition duration-300">View Portfolio</a> | |
| </div> | |
| <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce"> | |
| <i data-feather="chevron-down" class="text-gray-700"></i> | |
| </div> | |
| </section> | |
| <!-- Portfolio Categories --> | |
| <section id="portfolio" class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16">Selected Works</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Logo & Brand Identity --> | |
| <a href="logos.html" class="group relative overflow-hidden rounded-xl shadow-lg hover:shadow-xl transition duration-300"> | |
| <img src="http://static.photos/minimal/1200x630/1" alt="Brand Identity Work" 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"> | |
| <div> | |
| <h3 class="text-2xl font-bold text-white mb-2">Logos & Brand Identity</h3> | |
| <p class="text-gray-200">Crafting memorable visual identities that stand the test of time</p> | |
| </div> | |
| </div> | |
| </a> | |
| <!-- Print Design --> | |
| <a href="print.html" class="group relative overflow-hidden rounded-xl shadow-lg hover:shadow-xl transition duration-300"> | |
| <img src="http://static.photos/office/1200x630/2" alt="Print Design Work" 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"> | |
| <div> | |
| <h3 class="text-2xl font-bold text-white mb-2">Print Design</h3> | |
| <p class="text-gray-200">Editorial layouts and printed materials with purpose</p> | |
| </div> | |
| </div> | |
| </a> | |
| <!-- Packaging Design --> | |
| <a href="packaging.html" class="group relative overflow-hidden rounded-xl shadow-lg hover:shadow-xl transition duration-300"> | |
| <img src="http://static.photos/retail/1200x630/3" alt="Packaging Design Work" 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"> | |
| <div> | |
| <h3 class="text-2xl font-bold text-white mb-2">Packaging Design</h3> | |
| <p class="text-gray-200">Products that speak before they're opened</p> | |
| </div> | |
| </div> | |
| </a> | |
| <!-- 3D Design --> | |
| <a href="3d.html" class="group relative overflow-hidden rounded-xl shadow-lg hover:shadow-xl transition duration-300"> | |
| <img src="http://static.photos/technology/1200x630/4" alt="3D Design Work" 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"> | |
| <div> | |
| <h3 class="text-2xl font-bold text-white mb-2">3D Design</h3> | |
| <p class="text-gray-200">Bringing concepts to life in three dimensions</p> | |
| </div> | |
| </div> | |
| </a> | |
| <!-- Illustrations --> | |
| <a href="illustrations.html" class="group relative overflow-hidden rounded-xl shadow-lg hover:shadow-xl transition duration-300"> | |
| <img src="http://static.photos/art/1200x630/5" alt="Illustration Work" 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"> | |
| <div> | |
| <h3 class="text-2xl font-bold text-white mb-2">Illustrations</h3> | |
| <p class="text-gray-200">Handcrafted digital art with personality</p> | |
| </div> | |
| </div> | |
| </a> | |
| <!-- About CTA --> | |
| <a href="about.html" class="group relative overflow-hidden rounded-xl shadow-lg hover:shadow-xl transition duration-300 bg-gray-900 flex items-center justify-center"> | |
| <div class="text-center p-8"> | |
| <h3 class="text-2xl font-bold text-white mb-4">About the Designer</h3> | |
| <p class="text-gray-300 mb-6">Learn about my creative process and professional journey</p> | |
| <span class="inline-block px-6 py-3 border-2 border-white text-white rounded-full hover:bg-white hover:text-gray-900 transition duration-300">My Story</span> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16">Client Testimonials</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-8 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <i data-feather="star" class="text-yellow-400 mr-1"></i> | |
| <i data-feather="star" class="text-yellow-400 mr-1"></i> | |
| <i data-feather="star" class="text-yellow-400 mr-1"></i> | |
| <i data-feather="star" class="text-yellow-400 mr-1"></i> | |
| <i data-feather="star" class="text-yellow-400"></i> | |
| </div> | |
| <p class="text-gray-600 mb-6">"Working with this designer transformed our brand identity. Their attention to detail and strategic approach exceeded all expectations."</p> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/people/80x80/1" alt="Client" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Sarah Johnson</h4> | |
| <p class="text-gray-500 text-sm">CEO, BrandCo</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <i data-feather="star" class="text-yellow-400 mr-1"></i> | |
| <i data-feather="star" class="text-yellow-400 mr-1"></i> | |
| <i data-feather="star" class="text-yellow-400 mr-1"></i> | |
| <i data-feather="star" class="text-yellow-400 mr-1"></i> | |
| <i data-feather="star" class="text-yellow-400"></i> | |
| </div> | |
| <p class="text-gray-600 mb-6">"The packaging design increased our shelf appeal by 40%. Their ability to understand our market was remarkable."</p> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/people/80x80/2" alt="Client" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Michael Chen</h4> | |
| <p class="text-gray-500 text-sm">Product Director, RetailCo</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <i data-feather="star" class="text-yellow-400 mr-1"></i> | |
| <i data-feather="star" class="text-yellow-400 mr-1"></i> | |
| <i data-feather="star" class="text-yellow-400 mr-1"></i> | |
| <i data-feather="star" class="text-yellow-400 mr-1"></i> | |
| <i data-feather="star" class="text-yellow-400"></i> | |
| </div> | |
| <p class="text-gray-600 mb-6">"Our annual report has never looked better. The designer's typographic skills and layout expertise were exceptional."</p> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/people/80x80/3" alt="Client" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Emma Rodriguez</h4> | |
| <p class="text-gray-500 text-sm">Marketing Director, FinanceCorp</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact CTA --> | |
| <section class="py-20 bg-indigo-600 text-white"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to start your project?</h2> | |
| <p class="text-xl max-w-2xl mx-auto mb-10">Let's discuss how we can bring your vision to life with exceptional design.</p> | |
| <a href="contact.html" class="inline-block px-8 py-4 bg-white text-indigo-600 font-medium rounded-full hover:bg-gray-100 transition duration-300">Get in Touch</a> | |
| </div> | |
| </section> | |
| <custom-footer></custom-footer> | |
| <script>feather.replace();</script> | |
| <script src="script.js"></script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |