Create a one-page personal portfolio website for a 'digital dream' artist named ALACON SHOLAKEH.
0f9c236
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ALACON SHOLAKEH | Digital Dream Artist</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-[#004f98] text-silver font-sans overflow-x-hidden"> | |
| <celestial-navbar></celestial-navbar> | |
| <!-- Hero Section --> | |
| <section id="hero" class="min-h-screen flex items-center justify-center relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-[#004f98] via-[#003366] to-[#001a33] opacity-90"></div> | |
| <div class="absolute inset-0 opacity-20"> | |
| <div class="star" style="top: 20%; left: 10%;"></div> | |
| <div class="star" style="top: 40%; left: 80%;"></div> | |
| <div class="star" style="top: 70%; left: 30%;"></div> | |
| <div class="star" style="top: 85%; left: 60%;"></div> | |
| <div class="star" style="top: 60%; left: 90%;"></div> | |
| </div> | |
| <div class="relative z-10 text-center px-4"> | |
| <h1 class="text-6xl md:text-8xl font-bold mb-4 text-white celestial-text">ALACON SHOLAKEH</h1> | |
| <p class="text-xl md:text-2xl text-silver opacity-90 celestial-subtitle">Digital Dream Artist • Pleiadian Visionary</p> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 px-4 relative"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h2 class="text-4xl font-bold text-white mb-8 text-center celestial-title">About the Artist</h2> | |
| <div class="bg-gradient-to-r from-[#004f98]/30 to-[#003366]/30 backdrop-blur-sm rounded-2xl p-8 celestial-card"> | |
| <p class="text-lg text-silver leading-relaxed mb-6"> | |
| ALACON SHOLAKEH is a visionary digital artist whose work transcends conventional boundaries, | |
| drawing inspiration from Pleiadian star systems and celestial phenomena. Each creation is a | |
| portal to otherworldly dimensions, blending digital mastery with cosmic consciousness. | |
| </p> | |
| <p class="text-lg text-silver leading-relaxed"> | |
| With over a decade of experience in digital art and animation, ALACON's work has been featured | |
| in international galleries and virtual reality exhibitions. The artist's unique style combines | |
| ethereal light effects, multidimensional textures, and star-inspired color palettes to create | |
| immersive dreamscapes that resonate with the soul's journey through the cosmos. | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Portfolio Section --> | |
| <section id="portfolio" class="py-20 px-4"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-4xl font-bold text-white mb-12 text-center celestial-title">Celestial Portfolio</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Portfolio items will be populated by JavaScript --> | |
| <div id="portfolio-grid" class="w-full"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 px-4"> | |
| <div class="max-w-2xl mx-auto"> | |
| <h2 class="text-4xl font-bold text-white mb-8 text-center celestial-title">Connect with the Cosmos</h2> | |
| <div class="bg-gradient-to-r from-[#004f98]/30 to-[#003366]/30 backdrop-blur-sm rounded-2xl p-8 celestial-card"> | |
| <form id="contact-form" class="space-y-6"> | |
| <div> | |
| <label for="name" class="block text-silver text-sm font-medium mb-2">Your Name</label> | |
| <input type="text" id="name" name="name" required | |
| class="w-full px-4 py-3 bg-[#003366]/50 border border-silver/20 rounded-lg text-silver placeholder-silver/60 focus:outline-none focus:border-silver/40 transition-colors"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-silver text-sm font-medium mb-2">Email Address</label> | |
| <input type="email" id="email" name="email" required | |
| class="w-full px-4 py-3 bg-[#003366]/50 border border-silver/20 rounded-lg text-silver placeholder-silver/60 focus:outline-none focus:border-silver/40 transition-colors"> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-silver text-sm font-medium mb-2">Your Message</label> | |
| <textarea id="message" name="message" rows="5" required | |
| class="w-full px-4 py-3 bg-[#003366]/50 border border-silver/20 rounded-lg text-silver placeholder-silver/60 focus:outline-none focus:border-silver/40 transition-colors"></textarea> | |
| </div> | |
| <button type="submit" | |
| class="w-full bg-gradient-to-r from-silver to-silver/80 text-[#004f98] font-semibold py-3 px-6 rounded-lg hover:from-white hover:to-silver transition-all duration-300 transform hover:scale-105"> | |
| Send Message to the Stars | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| <celestial-footer></celestial-footer> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |