Spaces:
Running
Running
Create an Artist website, portal with gallery of images, about and contact. Mdoern artistic design site, with animations of background,. For the artist '
480cff5 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>About | Stephanie Trujillo</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link:after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: 0; | |
| left: 0; | |
| background-color: currentColor; | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover:after { | |
| width: 100%; | |
| } | |
| .timeline-item:not(:last-child):after { | |
| content: ''; | |
| position: absolute; | |
| left: 7px; | |
| top: 24px; | |
| height: calc(100% - 24px); | |
| width: 2px; | |
| background: rgba(255, 255, 255, 0.2); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100 font-sans"> | |
| <!-- Navigation --> | |
| <nav class="py-6 px-4 md:px-12 lg:px-24 flex justify-between items-center"> | |
| <a href="index.html" class="text-2xl font-bold tracking-tight">Stephanie Trujillo</a> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="gallery.html" class="nav-link">Gallery</a> | |
| <a href="about.html" class="nav-link font-medium">About</a> | |
| <a href="contact.html" class="nav-link">Contact</a> | |
| </div> | |
| <button class="md:hidden focus:outline-none" id="mobile-menu-button"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </nav> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="hidden fixed inset-0 bg-black bg-opacity-90 z-50 flex flex-col items-center justify-center space-y-8"> | |
| <button id="close-menu" class="absolute top-6 right-6 p-2"> | |
| <i data-feather="x"></i> | |
| </button> | |
| <a href="gallery.html" class="text-2xl">Gallery</a> | |
| <a href="about.html" class="text-2xl">About</a> | |
| <a href="contact.html" class="text-2xl">Contact</a> | |
| </div> | |
| <!-- About Section --> | |
| <main class="py-12 px-4 md:px-12 lg:px-24"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="flex flex-col lg:flex-row gap-12 items-center mb-16"> | |
| <div class="lg:w-1/2" data-aos="fade-right"> | |
| <img src="http://static.photos/people/640x360/1" alt="Stephanie Trujillo" class="w-full rounded-lg shadow-xl"> | |
| </div> | |
| <div class="lg:w-1/2" data-aos="fade-left"> | |
| <h1 class="text-4xl font-bold mb-6">About Stephanie</h1> | |
| <p class="text-lg mb-6">Stephanie Trujillo is a contemporary artist whose work explores the intersection of color, form, and human emotion. Born in Santa Fe, New Mexico, her artistic journey began at an early age, inspired by the vibrant landscapes and rich cultural heritage of the Southwest.</p> | |
| <p class="text-lg mb-6">Her multidisciplinary approach combines traditional painting techniques with experimental mixed media, creating works that challenge perceptions and invite contemplation.</p> | |
| <div class="flex space-x-4"> | |
| <a href="contact.html" class="px-6 py-3 bg-white text-gray-900 rounded-full font-medium hover:bg-opacity-90 transition">Contact</a> | |
| <a href="gallery.html" class="px-6 py-3 border border-white rounded-full font-medium hover:bg-white hover:bg-opacity-10 transition">View Gallery</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Artist Statement --> | |
| <section class="mb-16" data-aos="fade-up"> | |
| <h2 class="text-3xl font-bold mb-8">Artist Statement</h2> | |
| <div class="bg-gray-800 p-8 rounded-lg"> | |
| <p class="text-lg italic mb-4">"My work is an exploration of the spaces between - between color and form, between emotion and expression, between the tangible and the ephemeral."</p> | |
| <p class="text-lg mb-4">Through layered textures and vibrant palettes, I seek to capture the complexity of human experience. Each piece begins with an emotion or memory, which then evolves through the process of creation into something both personal and universal.</p> | |
| <p class="text-lg">I believe art should challenge, comfort, and ultimately connect us to deeper parts of ourselves and each other. My hope is that viewers find their own stories within my work, creating a dialogue that extends beyond the canvas.</p> | |
| </div> | |
| </section> | |
| <!-- Timeline --> | |
| <section data-aos="fade-up"> | |
| <h2 class="text-3xl font-bold mb-8">Exhibitions & Education</h2> | |
| <div class="space-y-8"> | |
| <div class="timeline-item relative pl-8"> | |
| <div class="absolute left-0 top-0 w-4 h-4 rounded-full bg-white"></div> | |
| <h3 class="text-xl font-semibold mb-2">Solo Exhibition: "Chromatic Dialogues"</h3> | |
| <p class="text-gray-400 mb-1">Modern Art Gallery, Santa Fe | 2023</p> | |
| <p>First major solo exhibition featuring 25 original works exploring color theory and emotional resonance.</p> | |
| </div> | |
| <div class="timeline-item relative pl-8"> | |
| <div class="absolute left-0 top-0 w-4 h-4 rounded-full bg-white"></div> | |
| <h3 class="text-xl font-semibold mb-2">Group Exhibition: "New Voices in Contemporary Art"</h3> | |
| <p class="text-gray-400 mb-1">Denver Art Center | 2022</p> | |
| <p>Featured alongside 12 emerging artists in this critically acclaimed showcase.</p> | |
| </div> | |
| <div class="timeline-item relative pl-8"> | |
| <div class="absolute left-0 top-0 w-4 h-4 rounded-full bg-white"></div> | |
| <h3 class="text-xl font-semibold mb-2">MFA in Fine Arts</h3> | |
| <p class="text-gray-400 mb-1">California Institute of the Arts | 2018-2020</p> | |
| <p>Specialized in mixed media and experimental techniques under renowned artist mentors.</p> | |
| </div> | |
| <div class="timeline-item relative pl-8"> | |
| <div class="absolute left-0 top-0 w-4 h-4 rounded-full bg-white"></div> | |
| <h3 class="text-xl font-semibold mb-2">BFA in Painting</h3> | |
| <p class="text-gray-400 mb-1">University of New Mexico | 2014-2018</p> | |
| <p>Graduated with honors, focusing on color theory and abstract expressionism.</p> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="py-8 px-4 md:px-12 lg:px-24 border-t border-gray-800"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <p>© 2023 Stephanie Trujillo. All rights reserved.</p> | |
| <div class="flex space-x-6 mt-4 md:mt-0"> | |
| <a href="#" aria-label="Instagram"><i data-feather="instagram"></i></a> | |
| <a href="#" aria-label="Twitter"><i data-feather="twitter"></i></a> | |
| <a href="#" aria-label="Facebook"><i data-feather="facebook"></i></a> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-in-out', | |
| once: true | |
| }); | |
| feather.replace(); | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| const closeMenuButton = document.getElementById('close-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.remove('hidden'); | |
| mobileMenu.classList.add('flex'); | |
| }); | |
| closeMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.add('hidden'); | |
| mobileMenu.classList.remove('flex'); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |