i need it very very professional type

components/artwork-modal.js

@@ -0,0 +1,128 @@
+class ArtworkModal extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          z-index: 9998;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          opacity: 0;
+          pointer-events: none;
+          transition: opacity 0.4s cubic-bezier(0.33, 1, 0.68, 1);
+        }
+        :host([open]) {
+          opacity: 1;
+          pointer-events: all;
+        }
+        .modal-backdrop {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background: rgba(0, 0, 0, 0.88);
+          backdrop-filter: blur(20px);
+          -webkit-backdrop-filter: blur(20px);
+        }
+        .modal-container {
+          position: relative;
+          width: 90%;
+          max-width: 1200px;
+          max-height: 90vh;
+          background: white;
+          border-radius: 24px;
+          overflow: hidden;
+          box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+          transform: scale(0.95);
+          transition: transform 0.4s cubic-bezier(0.33, 1, 0.68, 1);
+          z-index: 1;
+        }
+        :host([open]) .modal-container {
+          transform: scale(1);
+        }
+        .modal-content {
+          display: grid;
+          grid-template-columns: 1fr 1fr;
+          height: 100%;
+        }
+        .modal-image {
+          height: 100%;
+          background-size: cover;
+          background-position: center;
+        }
+        .modal-details {
+          padding: 3rem;
+          overflow-y: auto;
+        }
+        .close-button {
+          position: absolute;
+          top: 1.5rem;
+          right: 1.5rem;
+          width: 2.5rem;
+          height: 2.5rem;
+          border-radius: 50%;
+          background: white;
+          border: none;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          z-index: 2;
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+          transition: all 0.3s ease;
+        }
+        .close-button:hover {
+          transform: rotate(90deg);
+        }
+      </style>
+      <div class="modal-backdrop"></div>
+      <div class="modal-container">
+        <button class="close-button">
+          <i data-feather="x"></i>
+        </button>
+        <div class="modal-content">
+          <div class="modal-image"></div>
+          <div class="modal-details">
+            <h3 class="artwork-title"></h3>
+            <p class="artwork-meta"></p>
+            <p class="artwork-description"></p>
+          </div>
+        </div>
+      </div>
+    `;
+
+    this.closeButton = this.shadowRoot.querySelector('.close-button');
+    this.closeButton.addEventListener('click', () => this.close());
+    this.shadowRoot.querySelector('.modal-backdrop').addEventListener('click', () => this.close());
+  }
+
+  open(artworkData) {
+    const image = this.shadowRoot.querySelector('.modal-image');
+    const title = this.shadowRoot.querySelector('.artwork-title');
+    const meta = this.shadowRoot.querySelector('.artwork-meta');
+    const desc = this.shadowRoot.querySelector('.artwork-description');
+
+    image.style.backgroundImage = `url(${artworkData.image})`;
+    title.textContent = artworkData.title;
+    meta.textContent = `${artworkData.medium} | ${artworkData.year}`;
+    desc.textContent = artworkData.description;
+
+    this.setAttribute('open', '');
+    document.body.style.overflow = 'hidden';
+    feather.replace();
+  }
+
+  close() {
+    this.removeAttribute('open');
+    document.body.style.overflow = '';
+  }
+}
+
+customElements.define('artwork-modal', ArtworkModal);

index.html

@@ -8,6 +8,8 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@700&family=IBM+Plex+Mono&family=Lora:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
     <link href="https://fonts.cdnfonts.com/css/clash-display" rel="stylesheet">
+    <link href="https://api.fontshare.com/v2/css?f[]=satoshi@900,700,500,300,400&display=swap" rel="stylesheet">
+    <link href="https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@800,700,500,300,400&display=swap" rel="stylesheet">
 <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.js

@@ -180,28 +180,59 @@ const cursorTrail = document.createElement('div');
             }
         });
     });
-
     // Artwork modal functionality
-    const artworkButtons = document.querySelectorAll('[data-artwork]');
-    artworkButtons.forEach(button => {
-        button.addEventListener('click', function() {
-            const artworkId = this.getAttribute('data-artwork');
-            // In a real implementation, you would show a modal with the artwork details
-            console.log(`Viewing artwork ${artworkId}`);
+    const artworkModal = document.createElement('artwork-modal');
+    document.body.appendChild(artworkModal);
+
+    const artworkButtons = document.querySelectorAll('.professional-card button');
+    artworkButtons.forEach((button, index) => {
+        button.addEventListener('click', () => {
+            const card = button.closest('.professional-card');
+            const img = card.querySelector('img');
+            const title = card.querySelector('h3').textContent;
+            const meta = card.querySelector('p').textContent;
+            
+            artworkModal.open({
+                image: img.src,
+                title: title,
+                medium: meta.split('|')[0].trim(),
+                year: meta.split('|')[1].trim(),
+                description: 'This artwork represents a unique blend of digital techniques and creative vision. Each element was carefully crafted to evoke emotion and tell a visual story.'
+            });
         });
     });
-
     // Form submission
     const contactForm = document.querySelector('form');
     if (contactForm) {
         contactForm.addEventListener('submit', function(e) {
             e.preventDefault();
-            // In a real implementation, you would send the form data to a server
-            alert('Thank you for your message! I will get back to you soon.');
-            this.reset();
+            
+            // Show success state
+            const submitButton = this.querySelector('button[type="submit"]');
+            submitButton.innerHTML = '<i data-feather="check"></i> Message Sent';
+            submitButton.disabled = true;
+            
+            // Add micro-interaction
+            gsap.to(submitButton, {
+                scale: 0.95,
+                duration: 0.2,
+                yoyo: true,
+                repeat: 1,
+                ease: "power1.inOut",
+                onComplete: () => {
+                    setTimeout(() => {
+                        this.reset();
+                        submitButton.innerHTML = 'Send Message <i data-feather="send" class="ml-2 inline"></i>';
+                        submitButton.disabled = false;
+                        feather.replace();
+                    }, 2000);
+                }
+            });
+            
+            feather.replace();
         });
     }
-    // Enhanced Intersection Observer for animations
+// Enhanced Intersection Observer for animations
     const animateOnScroll = () => {
         const elements = document.querySelectorAll('[data-animate]');
         

style.css

@@ -296,8 +296,9 @@
     --font-mono: 'IBM Plex Mono', monospace;
     --font-serif: 'Lora', serif;
     --font-display: 'Clash Display', sans-serif;
-    
-    /* Enhanced color system */
+    --font-sans: 'Satoshi', 'Inter', sans-serif;
+    --font-decorative: 'Cabinet Grotesk', 'Space Grotesk', sans-serif;
+/* Enhanced color system */
     --color-primary: 14, 165, 233;
     --color-secondary: 124, 58, 237;
     --color-accent: 236, 72, 153;
@@ -373,26 +374,28 @@ h6 { font-size: var(--text-lg); }
 
 /* Typography Enhancements */
 .professional-headline {
-    font-family: var(--font-display);
+    font-family: var(--font-decorative);
     font-size: var(--text-6xl);
-    line-height: 0.9;
+    line-height: 0.95;
     letter-spacing: -0.03em;
-    font-weight: 700;
+    font-weight: 900;
     text-transform: none;
-    background: linear-gradient(90deg, 
-        rgba(var(--color-primary), 0.95), 
-        rgba(var(--color-secondary), 0.95));
+    background: linear-gradient(91.83deg, 
+        rgba(var(--color-primary), 0.95) 0%, 
+        rgba(var(--color-secondary), 0.95) 100%);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
     text-shadow: 
-        0 1px 1px rgba(0,0,0,0.05),
-        0 2px 2px rgba(0,0,0,0.05),
-        0 4px 4px rgba(0,0,0,0.05);
+        0 1px 1px rgba(0,0,0,0.03),
+        0 2px 2px rgba(0,0,0,0.03),
+        0 4px 4px rgba(0,0,0,0.03),
+        0 8px 8px rgba(0,0,0,0.03);
     position: relative;
     display: inline-block;
+    padding-bottom: 0.5rem;
+    margin-bottom: 1.5rem;
 }
-
 .professional-headline::after {
     content: '';
     position: absolute;
@@ -520,15 +523,21 @@ h6 { font-size: var(--text-lg); }
 .professional-card {
     position: relative;
     overflow: hidden;
-    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
     transform: translateZ(0);
     will-change: transform;
-    border-radius: 16px;
-    box-shadow: 0 30px 60px -20px rgba(0,0,0,0.1);
+    border-radius: 24px;
+    box-shadow: 
+        0 1px 1px rgba(0,0,0,0.04),
+        0 2px 2px rgba(0,0,0,0.04),
+        0 4px 4px rgba(0,0,0,0.04),
+        0 8px 8px rgba(0,0,0,0.04),
+        0 16px 16px rgba(0,0,0,0.04);
     background: white;
-    border: 1px solid rgba(var(--color-dark), 0.05);
+    border: 1px solid rgba(var(--color-dark), 0.03);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
 }
-
 .professional-card::before {
     content: '';
     position: absolute;