increase professionalism and interactivity

components/back-to-top.js

@@ -0,0 +1,75 @@
+class CustomBackToTop extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+            position: fixed;
+            bottom: 2rem;
+            right: 2rem;
+            z-index: 100;
+            opacity: 0;
+            visibility: hidden;
+            transition: all 0.3s ease;
+        }
+
+        :host.visible {
+            opacity: 1;
+            visibility: visible;
+        }
+
+        .back-to-top-btn {
+            width: 50px;
+            height: 50px;
+            background: #EAB308;
+            border: none;
+            border-radius: 50%;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: 0 4px 15px rgba(234, 179, 8, 0.3);
+            transition: all 0.3s ease;
+        }
+
+        .back-to-top-btn:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 8px 25px rgba(234, 179, 8, 0.4);
+        }
+
+        .back-to-top-btn svg {
+            color: black;
+            transition: transform 0.3s ease;
+        }
+
+        .back-to-top-btn:hover svg {
+            transform: translateY(-3px);
+        }
+      </style>
+
+      <button class="back-to-top-btn" id="back-to-top" aria-label="Back to top">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline></svg>
+      </button>
+    `;
+
+    const btn = this.shadowRoot.getElementById('back-to-top');
+    
+    // Show/hide button based on scroll position
+    window.addEventListener('scroll', () => {
+      if (window.scrollY > 500) {
+        this.classList.add('visible');
+      } else {
+        this.classList.remove('visible');
+      }
+    });
+
+    // Scroll to top on click
+    btn.addEventListener('click', () => {
+      window.scrollTo({
+        top: 0,
+        behavior: 'smooth'
+      });
+    });
+  }
+}
+customElements.define('custom-back-to-top', CustomBackToTop);

components/contact.js

@@ -41,13 +41,32 @@ class CustomContact extends HTMLElement {
             transition: all 0.3s ease;
             margin-bottom: 3rem;
         }
+        .email-btn {
+            position: relative;
+            overflow: hidden;
+        }
+
+        .email-btn::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+            transition: left 0.5s ease;
+        }
+
+        .email-btn:hover::before {
+            left: 100%;
+        }
 
         .email-btn:hover {
             background: rgba(234, 179, 8, 0.1);
             transform: translateY(-3px);
+            box-shadow: 0 10px 20px rgba(234, 179, 8, 0.2);
         }
-
-        .social-links {
+.social-links {
             display: flex;
             justify-content: center;
             gap: 2rem;
@@ -57,13 +76,31 @@ class CustomContact extends HTMLElement {
             color: #52525b;
             transition: all 0.3s ease;
         }
+        .social-link {
+            position: relative;
+        }
+
+        .social-link::after {
+            content: '';
+            position: absolute;
+            bottom: -5px;
+            left: 50%;
+            width: 0;
+            height: 2px;
+            background: #EAB308;
+            transition: all 0.3s ease;
+            transform: translateX(-50%);
+        }
+
+        .social-link:hover::after {
+            width: 100%;
+        }
 
         .social-link:hover {
             color: #EAB308;
             transform: translateY(-3px);
         }
-
-        .footer-note {
+.footer-note {
             margin-top: 4rem;
             color: #52525b;
             font-size: 0.875rem;

components/footer.js

@@ -0,0 +1,118 @@
+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+            display: block;
+            background: #0a0a0a;
+            border-top: 1px solid #262626;
+            padding: 4rem 1rem 2rem 1rem;
+        }
+
+        .footer-content {
+            max-width: 1200px;
+            margin: 0 auto;
+            text-align: center;
+        }
+
+        .footer-logo {
+            font-family: 'Fira Code', monospace;
+            font-size: 1.5rem;
+            font-weight: 700;
+            color: #EAB308;
+            margin-bottom: 1.5rem;
+            display: inline-block;
+        }
+
+        .footer-links {
+            display: flex;
+            justify-content: center;
+            gap: 2rem;
+            margin-bottom: 2rem;
+            flex-wrap: wrap;
+        }
+
+        .footer-link {
+            color: #9ca3af;
+            text-decoration: none;
+            font-size: 0.9rem;
+            transition: color 0.3s ease;
+        }
+
+        .footer-link:hover {
+            color: #EAB308;
+        }
+
+        .social-icons {
+            display: flex;
+            justify-content: center;
+            gap: 1.5rem;
+            margin-bottom: 2rem;
+        }
+
+        .social-icon {
+            color: #52525b;
+            transition: all 0.3s ease;
+        }
+
+        .social-icon:hover {
+            color: #EAB308;
+            transform: translateY(-3px);
+        }
+
+        .copyright {
+            color: #52525b;
+            font-size: 0.875rem;
+            font-family: 'Fira Code', monospace;
+            padding-top: 2rem;
+            border-top: 1px solid #1f1f1f;
+        }
+
+        .heart {
+            color: #EAB308;
+            animation: pulse 1s ease infinite;
+        }
+
+        @keyframes pulse {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.2); }
+        }
+      </style>
+
+      <footer>
+        <div class="footer-content">
+            <div class="footer-logo">&lt;KV/&gt;</div>
+            
+            <nav class="footer-links">
+                <a href="#hero" class="footer-link">Home</a>
+                <a href="#about" class="footer-link">About</a>
+                <a href="#skills" class="footer-link">Skills</a>
+                <a href="#projects" class="footer-link">Projects</a>
+                <a href="#contact" class="footer-link">Contact</a>
+            </nav>
+
+            <div class="social-icons">
+                <a href="#" class="social-icon" aria-label="GitHub">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
+                </a>
+                <a href="#" class="social-icon" aria-label="LinkedIn">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
+                </a>
+                <a href="#" class="social-icon" aria-label="Twitter">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
+                </a>
+                <a href="mailto:hello@kentvuong.com" class="social-icon" aria-label="Email">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+                </a>
+            </div>
+
+            <div class="copyright">
+                <p>Built with <span class="heart">♥</span> by Kent Vuong &copy; 2024</p>
+            </div>
+        </div>
+      </footer>
+    `;
+  }
+}
+customElements.define('custom-footer', CustomFooter);

components/hero.js

@@ -123,7 +123,6 @@ class CustomHero extends HTMLElement {
             z-index: 1;
             pointer-events: none;
         }
-
         .grid-bg {
             position: absolute;
             top: 0;
@@ -132,27 +131,103 @@ class CustomHero extends HTMLElement {
             height: 100%;
             background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
             linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
-            background-size: 30px 30px;
+            background-size: 50px 50px;
             z-index: 0;
-            mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
+            mask-image: radial-gradient(circle at center, black 30%, transparent 100%);
+            animation: gridMove 20s linear infinite;
+        }
+
+        @keyframes gridMove {
+            0% { transform: perspective(500px) rotateX(60deg) translateY(0); }
+            100% { transform: perspective(500px) rotateX(60deg) translateY(50px); }
+        }
+
+        .floating-shapes {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            z-index: 1;
+        }
+
+        .shape {
+            position: absolute;
+            border-radius: 50%;
+            opacity: 0.1;
+            animation: float 15s ease-in-out infinite;
+        }
+
+        .shape-1 {
+            width: 300px;
+            height: 300px;
+            background: #EAB308;
+            top: 10%;
+            right: 10%;
+            animation-delay: 0s;
+        }
+
+        .shape-2 {
+            width: 200px;
+            height: 200px;
+            background: #EAB308;
+            bottom: 20%;
+            left: 10%;
+            animation-delay: 5s;
         }
-      </style>
-      
+
+        .shape-3 {
+            width: 150px;
+            height: 150px;
+            background: #EAB308;
+            top: 50%;
+            left: 5%;
+            animation-delay: 10s;
+        }
+
+        @keyframes float {
+            0%, 100% { transform: translateY(0) rotate(0deg); }
+            25% { transform: translateY(-20px) rotate(5deg); }
+            50% { transform: translateY(0) rotate(0deg); }
+            75% { transform: translateY(20px) rotate(-5deg); }
+        }
+
+        .typing-text {
+            display: inline-block;
+            overflow: hidden;
+            border-right: 3px solid #EAB308;
+            white-space: nowrap;
+            animation: typing 3s steps(40, end), blink-caret 0.75s step-end infinite;
+        }
+
+        @keyframes typing {
+            from { width: 0 }
+            to { width: 100% }
+        }
+
+        @keyframes blink-caret {
+            from, to { border-color: transparent }
+            50% { border-color: #EAB308 }
+        }
+</style>
       <div class="grid-bg"></div>
+      <div class="floating-shapes">
+        <div class="shape shape-1"></div>
+        <div class="shape shape-2"></div>
+        <div class="shape shape-3"></div>
+      </div>
       <div class="glow-bg"></div>
-
-      <div class="container animate-fade-in">
+<div class="container animate-fade-in">
         <div class="status-badge">
             <div class="status-dot"></div>
             <span>Open to Work</span>
         </div>
-        
         <h1>
-            Hi, I'm Kent Vuong
+            Hi, I'm <span style="background: linear-gradient(135deg, #EAB308, #CA8A04); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Kent Vuong</span>
             <span class="highlight">Full-Stack & DevOps Engineer</span>
         </h1>
-        
-        <p>
+<p>
             I build scalable web applications and robust cloud infrastructure. 
             Passionate about clean code, automation, and delivering exceptional user experiences.
         </p>

components/preloader.js

@@ -0,0 +1,96 @@
+class CustomPreloader extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: #0a0a0a;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 9999;
+            transition: opacity 0.5s ease, visibility 0.5s ease;
+        }
+
+        :host.hidden {
+            opacity: 0;
+            visibility: hidden;
+        }
+
+        .preloader-content {
+            text-align: center;
+        }
+
+        .loader {
+            width: 60px;
+            height: 60px;
+            border: 3px solid #262626;
+            border-top-color: #EAB308;
+            border-radius: 50%;
+            animation: spin 0.8s linear infinite;
+            margin: 0 auto 1.5rem auto;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+
+        .loading-text {
+            font-family: 'Fira Code', monospace;
+            color: #EAB308;
+            font-size: 0.9rem;
+            letter-spacing: 2px;
+        }
+
+        .progress-bar {
+            width: 200px;
+            height: 2px;
+            background: #262626;
+            margin: 1rem auto 0;
+            border-radius: 2px;
+            overflow: hidden;
+        }
+
+        .progress-fill {
+            height: 100%;
+            background: #EAB308;
+            width: 0;
+            transition: width 0.3s ease;
+        }
+      </style>
+      
+      <div class="preloader-content">
+        <div class="loader"></div>
+        <div class="loading-text">LOADING</div>
+        <div class="progress-bar">
+            <div class="progress-fill" id="progress-fill"></div>
+        </div>
+      </div>
+    `;
+
+    // Simulate loading progress
+    const progressFill = this.shadowRoot.getElementById('progress-fill');
+    let progress = 0;
+    const interval = setInterval(() => {
+      progress += Math.random() * 30;
+      if (progress >= 100) {
+        progress = 100;
+        clearInterval(interval);
+        setTimeout(() => {
+          this.classList.add('hidden');
+          document.body.style.overflow = 'auto';
+        }, 300);
+      }
+      progressFill.style.width = `${progress}%`;
+    }, 200);
+
+    // Prevent scroll while loading
+    document.body.style.overflow = 'hidden';
+  }
+}
+customElements.define('custom-preloader', CustomPreloader);

components/projects.js

@@ -64,12 +64,16 @@ class CustomProjects extends HTMLElement {
                 min-width: calc(50% - 1rem);
             }
         }
+        .project-container {
+            transform-style: preserve-3d;
+            transition: all 0.5s ease;
+        }
 
         .project-container:hover {
             border-color: #EAB308;
+            transform: translateY(-10px) rotateX(5deg);
         }
-
-        .project-image {
+.project-image {
             width: 100%;
             height: 300px;
             object-fit: cover;
@@ -140,13 +144,31 @@ class CustomProjects extends HTMLElement {
         .link-item:hover {
             color: #EAB308;
         }
-
         .link-item svg {
             width: 18px;
             height: 18px;
+            transition: transform 0.3s ease;
+        }
+
+        .link-item:hover svg {
+            transform: translateX(5px);
         }
 
-        .nav-btn {
+        .project-tags {
+            display: flex;
+            gap: 0.5rem;
+            margin-bottom: 1rem;
+        }
+
+        .tag {
+            background: rgba(234, 179, 8, 0.1);
+            color: #EAB308;
+            padding: 0.25rem 0.75rem;
+            border-radius: 9999px;
+            font-size: 0.75rem;
+            font-family: 'Fira Code', monospace;
+        }
+.nav-btn {
             position: absolute;
             top: 50%;
             transform: translateY(-50%);
@@ -246,23 +268,24 @@ class CustomProjects extends HTMLElement {
                     <img src="http://static.photos/technology/640x360/42" alt="Mooshieblob.com Project" class="project-image">
                     
                     <div class="project-content">
+                        <div class="project-tags">
+                            <span class="tag">Featured</span>
+                        </div>
                         <div class="folder-icon">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
                         </div>
-                        
                         <h3>mooshieblob.com</h3>
                         
                         <p>
-                            My fun alias profile showcasing my AI projects and online persona, featuring interactive demos and creative experiments.
+                            My fun alias profile showcasing my AI projects and online persona, featuring interactive demos, creative experiments, and real-time AI integrations.
                         </p>
-                        
                         <div class="tech-stack">
                             <span class="tech-item">Nuxt.js</span>
-                            <span class="tech-item">Tailwind</span>
+                            <span class="tech-item">Tailwind CSS</span>
                             <span class="tech-item">Cloudflare AI</span>
+                            <span class="tech-item">Vercel</span>
                         </div>
-                        
-                        <div class="project-links">
+<div class="project-links">
                             <a href="https://github.com/Mooshieblob1/mooshieblob1.github.io" target="_blank" class="link-item">
                                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
                                 Code
@@ -283,21 +306,27 @@ class CustomProjects extends HTMLElement {
                         <div class="folder-icon">
                             <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
                         </div>
+                        <div class="project-tags">
+                            <span class="tag">Enterprise</span>
+                        </div>
+                        <div class="folder-icon">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
+                        </div>
                         
                         <h3>Cloud Dashboard</h3>
                         
                         <p>
-                            A comprehensive cloud infrastructure monitoring dashboard with real-time metrics, alerts, and automated scaling controls.
+                            A comprehensive cloud infrastructure monitoring dashboard with real-time metrics, intelligent alerts, automated scaling controls, and predictive analytics.
                         </p>
-                        
                         <div class="tech-stack">
                             <span class="tech-item">React</span>
+                            <span class="tech-item">TypeScript</span>
                             <span class="tech-item">AWS</span>
                             <span class="tech-item">Terraform</span>
                             <span class="tech-item">Grafana</span>
+                            <span class="tech-item">Prometheus</span>
                         </div>
-                        
-                        <div class="project-links">
+<div class="project-links">
                             <a href="#" target="_blank" class="link-item">
                                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
                                 Code
@@ -318,21 +347,27 @@ class CustomProjects extends HTMLElement {
                         <div class="folder-icon">
                             <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
                         </div>
+                        <div class="project-tags">
+                            <span class="tag">SaaS</span>
+                        </div>
+                        <div class="folder-icon">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
+                        </div>
                         
                         <h3>E-Commerce Platform</h3>
                         
                         <p>
-                            A full-stack e-commerce solution with headless CMS, payment integration, inventory management, and multi-region deployment.
+                            A full-stack e-commerce solution with headless CMS, seamless payment integration, real-time inventory management, and global multi-region deployment.
                         </p>
-                        
                         <div class="tech-stack">
                             <span class="tech-item">Next.js</span>
                             <span class="tech-item">Stripe</span>
                             <span class="tech-item">PostgreSQL</span>
+                            <span class="tech-item">Redis</span>
                             <span class="tech-item">Docker</span>
+                            <span class="tech-item">GraphQL</span>
                         </div>
-                        
-                        <div class="project-links">
+<div class="project-links">
                             <a href="#" target="_blank" class="link-item">
                                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
                                 Code
@@ -353,21 +388,26 @@ class CustomProjects extends HTMLElement {
                         <div class="folder-icon">
                             <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
                         </div>
+                        <div class="project-tags">
+                            <span class="tag">Infrastructure</span>
+                        </div>
+                        <div class="folder-icon">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
+                        </div>
                         
                         <h3>DevOps Pipeline</h3>
                         
                         <p>
-                            Automated CI/CD pipeline solution with self-hosted runners, security scanning, and multi-environment deployments.
+                            Automated CI/CD pipeline solution with self-hosted runners, comprehensive security scanning, automated testing, and multi-environment deployments.
                         </p>
-                        
                         <div class="tech-stack">
                             <span class="tech-item">GitHub Actions</span>
                             <span class="tech-item">Kubernetes</span>
                             <span class="tech-item">Helm</span>
                             <span class="tech-item">ArgoCD</span>
+                            <span class="tech-item">SonarQube</span>
                         </div>
-                        
-                        <div class="project-links">
+<div class="project-links">
                             <a href="#" target="_blank" class="link-item">
                                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
                                 Code

components/scroll-progress.js

@@ -0,0 +1,37 @@
+class CustomScrollProgress extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 3px;
+            z-index: 9999;
+            pointer-events: none;
+        }
+
+        .progress-bar {
+            height: 100%;
+            background: linear-gradient(90deg, #EAB308, #CA8A04);
+            width: 0%;
+            transition: width 0.1s ease-out;
+            box-shadow: 0 0 10px rgba(234, 179, 8, 0.5);
+        }
+      </style>
+      <div class="progress-bar" id="progress-bar"></div>
+    `;
+
+    const progressBar = this.shadowRoot.getElementById('progress-bar');
+    
+    window.addEventListener('scroll', () => {
+      const scrollTop = window.scrollY;
+      const docHeight = document.documentElement.scrollHeight - window.innerHeight;
+      const progress = (scrollTop / docHeight) * 100;
+      progressBar.style.width = `${progress}%`;
+    });
+  }
+}
+customElements.define('custom-scroll-progress', CustomScrollProgress);

components/skills.js

@@ -99,11 +99,41 @@ class CustomSkills extends HTMLElement {
             color: #d4d4d8;
             transition: all 0.2s;
         }
-
         .tech-item:hover {
             background: #EAB308;
             color: black;
             font-weight: 500;
+            transform: translateY(-2px);
+        }
+
+        .filter-buttons {
+            display: flex;
+            justify-content: center;
+            gap: 1rem;
+            margin-bottom: 3rem;
+            flex-wrap: wrap;
+        }
+
+        .filter-btn {
+            padding: 0.5rem 1.5rem;
+            background: transparent;
+            border: 1px solid #262626;
+            color: #9ca3af;
+            border-radius: 9999px;
+            cursor: pointer;
+            font-size: 0.9rem;
+            font-family: 'Fira Code', monospace;
+            transition: all 0.3s ease;
+        }
+
+        .filter-btn:hover, .filter-btn.active {
+            border-color: #EAB308;
+            color: #EAB308;
+            background: rgba(234, 179, 8, 0.1);
+        }
+
+        .skill-card.hidden {
+            display: none;
         }
       </style>
 
@@ -113,10 +143,17 @@ class CustomSkills extends HTMLElement {
             <p class="subtitle">Technologies I work with</p>
         </div>
 
+        <div class="filter-buttons">
+            <button class="filter-btn active" data-filter="all">All</button>
+            <button class="filter-btn" data-filter="frontend">Frontend</button>
+            <button class="filter-btn" data-filter="backend">Backend</button>
+            <button class="filter-btn" data-filter="devops">DevOps</button>
+        </div>
+
         <div class="skills-grid">
             <!-- Frontend -->
-            <div class="skill-card">
-                <div class="card-icon">
+            <div class="skill-card" data-category="frontend">
+<div class="card-icon">
                     <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg>
                 </div>
                 <h3>Frontend</h3>
@@ -131,10 +168,9 @@ class CustomSkills extends HTMLElement {
                     <li class="tech-item">SCSS</li>
                 </ul>
             </div>
-
             <!-- Backend -->
-            <div class="skill-card">
-                <div class="card-icon">
+            <div class="skill-card" data-category="backend">
+<div class="card-icon">
                     <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
                 </div>
                 <h3>Backend</h3>
@@ -149,10 +185,9 @@ class CustomSkills extends HTMLElement {
                     <li class="tech-item">GraphQL</li>
                 </ul>
             </div>
-
             <!-- DevOps -->
-            <div class="skill-card">
-                <div class="card-icon">
+            <div class="skill-card" data-category="devops">
+<div class="card-icon">
                     <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"></path></svg>
                 </div>
                 <h3>DevOps & Cloud</h3>
@@ -171,5 +206,30 @@ class CustomSkills extends HTMLElement {
       </section>
     `;
   }
+
+  initFilter() {
+    const filterBtns = this.shadowRoot.querySelectorAll('.filter-btn');
+    const skillCards = this.shadowRoot.querySelectorAll('.skill-card');
+
+    filterBtns.forEach(btn => {
+      btn.addEventListener('click', () => {
+        const filter = btn.dataset.filter;
+
+        // Update active button
+        filterBtns.forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+
+        // Filter cards
+        skillCards.forEach(card => {
+          if (filter === 'all' || card.dataset.category === filter) {
+            card.classList.remove('hidden');
+            card.style.animation = 'fadeIn 0.5s ease forwards';
+          } else {
+            card.classList.add('hidden');
+          }
+        });
+      });
+    });
+  }
 }
-customElements.define('custom-skills', CustomSkills);
+customElements.define('custom-skills', CustomSkills);

components/terminal.js

@@ -109,11 +109,39 @@ class CustomTerminal extends HTMLElement {
             width: 0;
             animation: typing 2s steps(40, end) forwards;
         }
-
         @keyframes typing {
             from { width: 0 }
             to { width: 100% }
         }
+
+        .interactive-command {
+            color: #22c55e;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        .interactive-command:hover {
+            color: #4ade80;
+            text-decoration: underline;
+        }
+
+        .file-tree {
+            font-family: 'Fira Code', monospace;
+            color: #a1a1aa;
+            line-height: 1.6;
+        }
+
+        .tree-item {
+            padding: 0.25rem 0;
+        }
+
+        .tree-folder {
+            color: #EAB308;
+        }
+
+        .tree-file {
+            color: #9ca3af;
+        }
       </style>
 
       <section id="about">
@@ -135,40 +163,135 @@ class CustomTerminal extends HTMLElement {
                 
                 <div class="output" id="output-1" style="opacity: 0; animation: fadeIn 0.5s forwards 2.5s;">
                     <strong>> Kent Vuong</strong><br>
-                    > Full-Stack Dev
+                    > Full-Stack Developer & DevOps Engineer<br>
+                    > Building scalable solutions since 2019
                 </div>
 
                 <div class="command-line" style="opacity: 0; animation: fadeIn 0.5s forwards 3s;">
                     <span class="prompt">$</span>
-                    <span class="command typing-effect" style="width: 0; animation: typing 1.5s steps(30, end) forwards 3.5s;">cat skills.txt</span>
+                    <span class="command typing-effect" style="width: 0; animation: typing 1.5s steps(30, end) forwards 3.5s;">ls -la experience/</span>
                 </div>
 
                 <div class="output" id="output-2" style="opacity: 0; animation: fadeIn 0.5s forwards 5.5s;">
-                    <strong>> Cloud | Containers | CI/CD</strong><br>
-                    > Full-Stack | DevOps
+                    <div class="file-tree">
+                        <div class="tree-item tree-folder">📁 .senior-engineer/</div>
+                        <div class="tree-item tree-file">  └── microservices-architecture.yaml</div>
+                        <div class="tree-item tree-folder">📁 .cloud-infrastructure/</div>
+                        <div class="tree-item tree-file">  ├── aws-deployments/</div>
+                        <div class="tree-item tree-file">  ├── kubernetes-clusters/</div>
+                        <div class="tree-item tree-file">  └── ci-cd-pipelines/</div>
+                        <div class="tree-item tree-folder">📁 .web-development/</div>
+                        <div class="tree-item tree-file">  ├── react-applications/</div>
+                        <div class="tree-item tree-file">  ├── nextjs-ssr/</div>
+                        <div class="tree-item tree-file">  └── nodejs-apis/</div>
+                    </div>
                 </div>
 
                 <div class="command-line" style="opacity: 0; animation: fadeIn 0.5s forwards 6s;">
                     <span class="prompt">$</span>
-                    <span class="command typing-effect" style="width: 0; animation: typing 1.5s steps(30, end) forwards 6.5s;">connect --social</span>
+                    <span class="command typing-effect" style="width: 0; animation: typing 1.5s steps(30, end) forwards 6.5s;">cat motivation.txt</span>
                 </div>
                 
                 <div class="output" style="opacity: 0; animation: fadeIn 0.5s forwards 8.5s;">
-                    <a href="#contact" style="color: #EAB308; text-decoration: underline; cursor: pointer;">Initializing handshake...</a>
+                    <strong>> "Code is poetry, infrastructure is the canvas."</strong><br>
+                    > Passionate about creating elegant solutions<br>
+                    > to complex problems. Always learning, always evolving.
+                </div>
+
+                <div class="command-line" style="opacity: 0; animation: fadeIn 0.5s forwards 9s;">
+                    <span class="prompt">$</span>
+                    <span class="interactive-command" id="try-cmd">Try typing a command...</span>
                 </div>
 
                 <div class="command-line">
                     <span class="prompt">$</span>
+                    <input type="text" id="terminal-input" style="background: transparent; border: none; color: #fff; font-family: inherit; font-size: inherit; outline: none; width: calc(100% - 40px);" autocomplete="off">
                     <span class="cursor"></span>
                 </div>
             </div>
         </div>
       </section>
-      
       <style>
         @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
       </style>
     `;
   }
+
+  initTerminal() {
+    const input = this.shadowRoot.getElementById('terminal-input');
+    
+    input.addEventListener('keypress', (e) => {
+      if (e.key === 'Enter') {
+        const command = input.value.trim().toLowerCase();
+        this.handleCommand(command);
+        input.value = '';
+      }
+    });
+  }
+
+  handleCommand(command) {
+    const terminalBody = this.shadowRoot.getElementById('terminal-content');
+    
+    // Create new command line
+    const newCommandLine = document.createElement('div');
+    newCommandLine.className = 'command-line';
+    newCommandLine.innerHTML = `<span class="prompt">$</span><span class="command">${command}</span>`;
+    
+    // Insert before the input line
+    const inputLine = terminalBody.lastElementChild;
+    terminalBody.insertBefore(newCommandLine, inputLine);
+    
+    // Create output
+    const output = document.createElement('div');
+    output.className = 'output';
+    
+    switch(command) {
+      case 'help':
+        output.innerHTML = `<strong>Available commands:</strong><br>
+          > about - Learn more about me<br>
+          > skills - View my technical skills<br>
+          > projects - See my work<br>
+          > contact - Get in touch<br>
+          > clear - Clear terminal`;
+        break;
+      case 'about':
+        output.innerHTML = `<strong>Kent Vuong</strong><br>
+          > Full-Stack & DevOps Engineer<br>
+          > 5+ years of experience<br>
+          > Based in San Francisco, CA`;
+        break;
+      case 'skills':
+        output.innerHTML = `<strong>Core Skills:</strong><br>
+          > Frontend: React, Vue, Next.js<br>
+          > Backend: Node.js, Python, Go<br>
+          > DevOps: AWS, Docker, K8s, Terraform<br>
+          > Databases: PostgreSQL, MongoDB, Redis`;
+        break;
+      case 'projects':
+        output.innerHTML = `<strong>Featured Projects:</strong><br>
+          > mooshieblob.com - AI Showcase<br>
+          > Cloud Dashboard - Infrastructure Monitor<br>
+          > E-Commerce Platform - Full-Stack Solution<br>
+          > DevOps Pipeline - CI/CD Automation`;
+        break;
+      case 'contact':
+        output.innerHTML = `<strong>Let's Connect!</strong><br>
+          > Email: hello@kentvuong.com<br>
+          > GitHub: @Mooshieblob1<br>
+          > LinkedIn: /in/kentvuong<br>
+          > <a href="#contact" style="color: #EAB308;">Jump to Contact Section →</a>`;
+        break;
+      case 'clear':
+        // Remove all command lines except the last one (input)
+        while (terminalBody.children.length > 1) {
+          terminalBody.removeChild(terminalBody.firstChild);
+        }
+        return;
+      default:
+        output.innerHTML = `<span style="color: #ef4444;">Command not found: ${command}</span><br>Type 'help' for available commands.`;
+    }
+    
+    terminalBody.insertBefore(output, inputLine);
+  }
 }
-customElements.define('custom-terminal', CustomTerminal);
+customElements.define('custom-terminal', CustomTerminal);

index.html

@@ -39,11 +39,22 @@
 </head>
 <body class="bg-brand-black text-gray-200 font-sans antialiased overflow-x-hidden selection:bg-brand-yellow selection:text-brand-black">
 
+    <!-- Preloader -->
+    <custom-preloader></custom-preloader>
+    <script src="components/preloader.js"></script>
+
+    <!-- Scroll Progress -->
+    <custom-scroll-progress></custom-scroll-progress>
+    <script src="components/scroll-progress.js"></script>
+
+    <!-- Back to Top -->
+    <custom-back-to-top></custom-back-to-top>
+    <script src="components/back-to-top.js"></script>
+
     <!-- Components -->
     <script src="components/navbar.js"></script>
     <custom-navbar></custom-navbar>
-
-    <main class="relative z-10">
+<main class="relative z-10">
         
         <!-- Hero Section -->
         <script src="components/hero.js"></script>
@@ -64,11 +75,14 @@
         <!-- Contact Section -->
         <script src="components/contact.js"></script>
         <custom-contact></custom-contact>
-
     </main>
 
+    <!-- Footer -->
+    <script src="components/footer.js"></script>
+    <custom-footer></custom-footer>
+
     <script src="script.js"></script>
-    <script>
+<script>
         feather.replace();
     </script>
 <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>

script.js

@@ -1,3 +1,4 @@
+
 // Logic to handle navigation active state based on scroll position
 document.addEventListener('DOMContentLoaded', () => {
     const sections = document.querySelectorAll('section[id]');
@@ -14,11 +15,9 @@ document.addEventListener('DOMContentLoaded', () => {
             if (entry.isIntersecting) {
                 const id = entry.target.getAttribute('id');
                 navLinks.forEach(link => {
-                    link.classList.remove('text-brand-yellow', 'border-brand-yellow');
-                    link.classList.add('text-gray-400', 'border-transparent');
+                    link.classList.remove('active');
                     if (link.getAttribute('href') === `#${id}`) {
-                        link.classList.remove('text-gray-400', 'border-transparent');
-                        link.classList.add('text-brand-yellow', 'border-brand-yellow');
+                        link.classList.add('active');
                     }
                 });
             }
@@ -27,6 +26,114 @@ document.addEventListener('DOMContentLoaded', () => {
 
     sections.forEach(section => observer.observe(section));
 
+    // Scroll reveal animation
+    const revealElements = document.querySelectorAll('.reveal, .reveal-left, .reveal-right');
+    
+    const revealObserver = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('active');
+            }
+        });
+    }, { threshold: 0.1 });
+
+    revealElements.forEach(el => revealObserver.observe(el));
+
+    // Initialize components when DOM is ready
+    const initComponents = () => {
+        // Initialize Terminal
+        const terminal = document.querySelector('custom-terminal');
+        if (terminal && terminal.initTerminal) {
+            setTimeout(() => terminal.initTerminal(), 3000);
+        }
+
+        // Initialize Projects scroll
+        const projects = document.querySelector('custom-projects');
+        if (projects && projects.initScrollNavigation) {
+            projects.initScrollNavigation();
+        }
+
+        // Initialize Skills filter
+        const skills = document.querySelector('custom-skills');
+        if (skills && skills.initFilter) {
+            skills.initFilter();
+        }
+    };
+
     // Dispatch event to notify components that the DOM is ready
     window.dispatchEvent(new Event('app-ready'));
-});
+    
+    // Initialize components
+    initComponents();
+
+    // Parallax effect for hero section
+    window.addEventListener('scroll', () => {
+        const scrolled = window.pageYOffset;
+        const hero = document.querySelector('custom-hero');
+        if (hero) {
+            const shapes = hero.shadowRoot?.querySelector('.floating-shapes');
+            if (shapes) {
+                shapes.style.transform = `translateY(${scrolled * 0.3}px)`;
+            }
+        }
+    });
+
+    // Magnetic button effect
+    const magneticBtns = document.querySelectorAll('.magnetic-btn');
+    magneticBtns.forEach(btn => {
+        btn.addEventListener('mousemove', (e) => {
+            const rect = btn.getBoundingClientRect();
+            const x = e.clientX - rect.left - rect.width / 2;
+            const y = e.clientY - rect.top - rect.height / 2;
+            btn.style.transform = `translate(${x * 0.3}px, ${y * 0.3}px)`;
+        });
+
+        btn.addEventListener('mouseleave', () => {
+            btn.style.transform = 'translate(0, 0)';
+        });
+    });
+
+    // Smooth scroll for anchor links
+    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'
+                });
+            }
+        });
+    });
+
+    // Add reveal classes to skill cards
+    const skillCards = document.querySelectorAll('.skill-card');
+    skillCards.forEach((card, index) => {
+        card.classList.add('reveal');
+        card.style.transitionDelay = `${index * 0.1}s`;
+    });
+
+    // Add reveal classes to project containers
+    const projectContainers = document.querySelectorAll('.project-container');
+    projectContainers.forEach((card, index) => {
+        card.classList.add('reveal');
+        card.style.transitionDelay = `${index * 0.15}s`;
+    });
+});
+
+// Typing effect for hero
+function typeWriter(element, text, speed = 50) {
+    let i = 0;
+    element.innerHTML = '';
+    
+    function type() {
+        if (i < text.length) {
+            element.innerHTML += text.charAt(i);
+            i++;
+            setTimeout(type, speed);
+        }
+    }
+    
+    type();
+}

style.css

@@ -31,17 +31,77 @@ body {
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }
-
 /* Animations */
 @keyframes fadeIn {
     from { opacity: 0; transform: translateY(20px); }
     to { opacity: 1; transform: translateY(0); }
 }
 
+@keyframes slideUp {
+    from { opacity: 0; transform: translateY(40px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes slideInLeft {
+    from { opacity: 0; transform: translateX(-30px); }
+    to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes slideInRight {
+    from { opacity: 0; transform: translateX(30px); }
+    to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes scaleIn {
+    from { opacity: 0; transform: scale(0.9); }
+    to { opacity: 1; transform: scale(1); }
+}
+
 .animate-fade-in {
     animation: fadeIn 0.8s ease-out forwards;
 }
 
+.animate-slide-up {
+    animation: slideUp 0.8s ease-out forwards;
+}
+
+.animate-scale-in {
+    animation: scaleIn 0.6s ease-out forwards;
+}
+
+/* Scroll Reveal Classes */
+.reveal {
+    opacity: 0;
+    transform: translateY(30px);
+    transition: all 0.8s ease;
+}
+
+.reveal.active {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.reveal-left {
+    opacity: 0;
+    transform: translateX(-50px);
+    transition: all 0.8s ease;
+}
+
+.reveal-left.active {
+    opacity: 1;
+    transform: translateX(0);
+}
+
+.reveal-right {
+    opacity: 0;
+    transform: translateX(50px);
+    transition: all 0.8s ease;
+}
+
+.reveal-right.active {
+    opacity: 1;
+    transform: translateX(0);
+}
 /* Blinking Cursor Animation */
 @keyframes blink {
     0%, 100% { opacity: 1; }
@@ -58,7 +118,6 @@ body {
     linear-gradient(90deg, rgba(234, 179, 8, 0.05) 1px, transparent 1px);
     background-size: 40px 40px;
 }
-
 /* Glitch Effect on Hover */
 .glitch-hover:hover {
     animation: glitch 0.3s cubic-bezier(.25, .46, .45, .94) both infinite;
@@ -72,4 +131,63 @@ body {
     60% { transform: translate(2px, 2px) }
     80% { transform: translate(2px, -2px) }
     100% { transform: translate(0) }
-}
+}
+
+/* Smooth Scroll Behavior */
+html {
+    scroll-behavior: smooth;
+}
+
+/* Selection Styling */
+::selection {
+    background: #EAB308;
+    color: #0a0a0a;
+}
+
+/* Focus Styles */
+a:focus, button:focus, input:focus {
+    outline: 2px solid #EAB308;
+    outline-offset: 2px;
+}
+
+/* Improved Button Hover Effects */
+.btn-primary {
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.btn-primary:active {
+    transform: scale(0.95);
+}
+
+/* Card Hover 3D Effect */
+.card-3d {
+    perspective: 1000px;
+}
+
+.card-3d-inner {
+    transition: transform 0.6s;
+    transform-style: preserve-3d;
+}
+
+.card-3d:hover .card-3d-inner {
+    transform: rotateY(5deg) rotateX(5deg);
+}
+
+/* Gradient Text Animation */
+.gradient-text-animate {
+    background: linear-gradient(90deg, #EAB308, #CA8A04, #EAB308);
+    background-size: 200% auto;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    animation: gradientMove 3s linear infinite;
+}
+
+@keyframes gradientMove {
+    0% { background-position: 0% center; }
+    100% { background-position: 200% center; }
+}
+
+/* Magnetic Button Effect */
+.magnetic-btn {
+    transition: transform 0.3s ease;
+}