Spaces:

kazzykaned
/

create-a-one-page-pe-146voay

Running

App Files Files Community

kazzykaned commited on Nov 4

Commit

0f9c236

verified ·

1 Parent(s): ead5b2f

Create a one-page personal portfolio website for a 'digital dream' artist named ALACON SHOLAKEH.

Browse files

The design must have a celestial theme inspired by Pleiadian star influences. Use a dark blue background (HEX: #004f98) with silver and white text. Please use subtle gradients with the blue color to create a sense of depth, like a nebula or deep space.

The website must include four sections:
1. A large 'hero section' at the top with the artist's name.
2. An 'About' section.
3. A 'Portfolio' section formatted as an image gallery.
4. A 'Contact' section with a simple form.

Please add subtle, smooth animations, like gentle fade-in effects on text and a simple, clean hover effect for the portfolio gallery items.

Files changed (4) hide show

README.md +7 -4
index.html +102 -19
script.js +172 -0
style.css +186 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Create A One Page Pe 146voay
-emoji: 🏆
-colorFrom: gray
 colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Create-a-one-page-pe-146voay
+colorFrom: yellow
 colorTo: gray
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,102 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<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>

script.js ADDED Viewed

	@@ -0,0 +1,172 @@

+// Portfolio data - using placeholder images from static.photos
+const portfolioItems = [
+    {
+        id: 1,
+        title: "Stellar Genesis",
+        description: "Digital painting inspired by star formation",
+        image: "http://static.photos/abstract/640x360/1",
+        category: "digital"
+    },
+    {
+        id: 2,
+        title: "Pleiadian Dreamscape",
+        description: "3D render of celestial architecture",
+        image: "http://static.photos/blue/640x360/2",
+        category: "3d"
+    },
+    {
+        id: 3,
+        title: "Cosmic Convergence",
+        description: "Mixed media digital collage",
+        image: "http://static.photos/gradient/640x360/3",
+        category: "mixed"
+    },
+    {
+        id: 4,
+        title: "Nebula Reflections",
+        description: "Interactive digital installation",
+        image: "http://static.photos/black/640x360/4",
+        category: "interactive"
+    },
+    {
+        id: 5,
+        title: "Starlight Symphony",
+        description: "Animated visual composition",
+        image: "http://static.photos/white/640x360/5",
+        category: "animation"
+    },
+    {
+        id: 6,
+        title: "Celestial Harmony",
+        description: "VR experience concept art",
+        image: "http://static.photos/monochrome/640x360/6",
+        category: "vr"
+    }
+];
+// Initialize the portfolio gallery
+function initPortfolio() {
+    const portfolioGrid = document.getElementById('portfolio-grid');
+    portfolioItems.forEach(item => {
+        const portfolioItem = document.createElement('div');
+        portfolioItem.className = 'portfolio-item fade-in';
+        portfolioItem.innerHTML = `
+            <img src="${item.image}" alt="${item.title}" class="portfolio-image">
+            <div class="portfolio-overlay">
+                <h3 class="text-white text-xl font-semibold mb-2">${item.title}</h3>
+                <p class="text-silver text-sm">${item.description}</p>
+            </div>
+        `;
+        portfolioGrid.appendChild(portfolioItem);
+    });
+}
+// Contact form handling
+function initContactForm() {
+    const contactForm = document.getElementById('contact-form');
+    contactForm.addEventListener('submit', function(e) {
+        e.preventDefault();
+        // Get form data
+        const formData = new FormData(contactForm);
+        const data = Object.fromEntries(formData);
+        // Simple validation
+        if (!data.name || !data.email || !data.message) {
+            showNotification('Please fill in all fields', 'error');
+            return;
+        }
+        // Simulate form submission
+        showNotification('Message sent to the cosmos! ALACON will respond soon.', 'success');
+        contactForm.reset();
+    });
+}
+// Notification system
+function showNotification(message, type = 'info') {
+    const notification = document.createElement('div');
+    notification.className = `fixed top-4 right-4 z-50 p-4 rounded-lg shadow-lg transform transition-all duration-300 ${
+        type === 'success' ? 'bg-green-500' :
+        type === 'error' ? 'bg-red-500' : 'bg-blue-500'
+    } text-white`;
+    notification.textContent = message;
+    document.body.appendChild(notification);
+    // Animate in
+    setTimeout(() => {
+        notification.style.transform = 'translateX(0)';
+    }, 100);
+    // Remove after 5 seconds
+    setTimeout(() => {
+        notification.style.transform = 'translateX(100%)';
+        setTimeout(() => {
+            document.body.removeChild(notification);
+        }, 300);
+    }, 5000);
+}
+// Scroll animations
+function initScrollAnimations() {
+    const observerOptions = {
+        threshold: 0.1,
+        rootMargin: '0px 0px -50px 0px'
+    };
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('visible');
+            }
+        });
+    }, observerOptions);
+    // Observe all fade-in elements
+    document.querySelectorAll('.fade-in').forEach(el => {
+        observer.observe(el);
+    });
+}
+// Smooth scrolling for navigation
+function initSmoothScroll() {
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function (e) {
+            e.preventDefault();
+            const target = document.querySelector(this.getAttribute('href'));
+            if (target) {
+                target.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'start'
+                });
+            }
+        });
+    });
+}
+// Initialize everything when DOM is loaded
+document.addEventListener('DOMContentLoaded', function() {
+    initPortfolio();
+    initContactForm();
+    initScrollAnimations();
+    initSmoothScroll();
+    // Add some random stars to the hero section
+    addRandomStars();
+});
+// Add random stars for celestial effect
+function addRandomStars() {
+    const heroSection = document.getElementById('hero');
+    const starsContainer = heroSection.querySelector('.absolute.opacity-20');
+    for (let i = 0; i < 15; i++) {
+        const star = document.createElement('div');
+        star.className = 'star';
+        star.style.top = `${Math.random() * 100}%`;
+        star.style.left = `${Math.random() * 100}%`;
+        star.style.animationDelay = `${Math.random() * 3}s`;
+        star.style.width = `${Math.random() * 3 + 1}px`;

style.css CHANGED Viewed

@@ -1,28 +1,196 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+:root {
+    --celestial-blue: #004f98;
+    --deep-space: #001a33;
+    --nebula-purple: #2d1b69;
+    --silver: #c0c0c0;
+    --starlight: #ffffff;
+}
 body {
+    font-family: 'Inter', sans-serif;
+    scroll-behavior: smooth;
+}
+/* Celestial Animations */
+@keyframes float {
+    0%, 100% { transform: translateY(0px); }
+    50% { transform: translateY(-10px); }
+}
+@keyframes twinkle {
+    0%, 100% { opacity: 0.3; }
+    50% { opacity: 1; }
+}
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+@keyframes nebulaPulse {
+    0%, 100% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+}
+/* Star Elements */
+.star {
+    position: absolute;
+    width: 2px;
+    height: 2px;
+    background: white;
+    border-radius: 50%;
+    animation: twinkle 3s infinite;
+}
+.star:nth-child(2n) {
+    animation-delay: 1s;
+}
+.star:nth-child(3n) {
+    animation-delay: 2s;
+}
+/* Celestial Text Effects */
+.celestial-text {
+    background: linear-gradient(135deg, #ffffff 0%, #c0c0c0 50%, #a8a8a8 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    animation: fadeInUp 1.5s ease-out;
+}
+.celestial-title {
+    background: linear-gradient(135deg, #ffffff 0%, #c0c0c0 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+.celestial-subtitle {
+    animation: fadeInUp 1.5s ease-out 0.5s both;
 }
+.celestial-card {
+    animation: fadeInUp 1s ease-out;
+    border: 1px solid rgba(192, 192, 192, 0.1);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
 }
+/* Portfolio Gallery Styles */
+.portfolio-item {
+    position: relative;
+    overflow: hidden;
+    border-radius: 12px;
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    border: 1px solid rgba(192, 192, 192, 0.1);
 }
+.portfolio-item:hover {
+    transform: translateY(-8px) scale(1.02);
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
+    border-color: rgba(192, 192, 192, 0.3);
 }
+.portfolio-image {
+    width: 100%;
+    height: 300px;
+    object-fit: cover;
+    transition: transform 0.6s ease;
 }
+.portfolio-item:hover .portfolio-image {
+    transform: scale(1.1);
+}
+.portfolio-overlay {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: linear-gradient(transparent, rgba(0, 79, 152, 0.9));
+    padding: 2rem 1.5rem 1.5rem;
+    transform: translateY(100%);
+    transition: transform 0.4s ease;
+}
+.portfolio-item:hover .portfolio-overlay {
+    transform: translateY(0);
+}
+/* Navigation Styles */
+.nav-link {
+    position: relative;
+    transition: all 0.3s ease;
+}
+.nav-link::after {
+    content: '';
+    position: absolute;
+    bottom: -5px;
+    left: 0;
+    width: 0;
+    height: 2px;
+    background: linear-gradient(90deg, #c0c0c0, #ffffff);
+    transition: width 0.3s ease;
+}
+.nav-link:hover::after {
+    width: 100%;
+}
+/* Form Styles */
+input, textarea {
+    backdrop-filter: blur(10px);
+}
+input:focus, textarea:focus {
+    backdrop-filter: blur(15px);
+}
+/* Responsive Design */
+@media (max-width: 768px) {
+    .celestial-text {
+        font-size: 3rem !important;
+    }
+    .portfolio-item {
+        margin-bottom: 2rem;
+    }
+}
+/* Scroll Animations */
+.fade-in {
+    opacity: 0;
+    transform: translateY(30px);
+    transition: all 0.8s ease;
+}
+.fade-in.visible {
+    opacity: 1;
+    transform: translateY(0);
+}
+/* Nebula Background Effect */
+body::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background:
+        radial-gradient(circle at 20% 80%, rgba(45, 27, 105, 0.1) 0%, transparent 50%),
+        radial-gradient(circle at 80% 20%, rgba(0, 79, 152, 0.1) 0%, transparent 50%),
+        radial-gradient(circle at 40% 40%, rgba(0, 26, 51, 0.1) 0%, transparent 50%);
+    animation: nebulaPulse 20s ease-in-out infinite;
+    pointer-events: none;
+    z-index: -1;
+}