Website overhaul

src/scripts/form.js

@@ -0,0 +1,22 @@
+// Form submission
+function setupForm() {
+  const form = document.getElementById("contact-form");
+  if (form) {
+    form.addEventListener("submit", function (e) {
+      e.preventDefault();
+
+      // Simple form validation
+      const name = document.getElementById("name").value;
+      const email = document.getElementById("email").value;
+      const message = document.getElementById("message").value;
+
+      if (name && email && message) {
+        // In a real implementation, you would send the form data to a server
+        alert("Thank you for your message! We will get back to you soon.");
+        form.reset();
+      } else {
+        alert("Please fill in all required fields.");
+      }
+    });
+  }
+}

src/scripts/main.js

@@ -0,0 +1,27 @@
+// Initialize everything when DOM is loaded
+document.addEventListener("DOMContentLoaded", function () {
+  // Initialize components
+  if (typeof createStars === "function") createStars();
+  if (typeof updateNavigation === "function") updateNavigation();
+  if (typeof setupForm === "function") setupForm();
+  if (typeof setupMobileNavigation === "function") setupMobileNavigation();
+
+  // Set up event listeners
+  window.addEventListener("scroll", updateNavigation);
+
+  // Smooth scrolling for navigation links
+  document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
+    anchor.addEventListener("click", function (e) {
+      e.preventDefault();
+      const targetId = this.getAttribute("href");
+      if (targetId === "#") return;
+
+      const targetElement = document.querySelector(targetId);
+      if (targetElement) {
+        targetElement.scrollIntoView({
+          behavior: "smooth",
+        });
+      }
+    });
+  });
+});

src/scripts/navigation.js

@@ -0,0 +1,33 @@
+// Navigation scroll effect
+function updateNavigation() {
+  const navigation = document.getElementById("navigation");
+  if (window.scrollY > 50) {
+    navigation.classList.add("scrolled");
+  } else {
+    navigation.classList.remove("scrolled");
+  }
+}
+
+// Mobile navigation functionality
+function setupMobileNavigation() {
+  const burgerMenu = document.getElementById("burger-menu");
+  const mainNav = document.getElementById("main-nav");
+
+  if (burgerMenu && mainNav) {
+    burgerMenu.addEventListener("click", function () {
+      mainNav.classList.toggle("active");
+      burgerMenu.classList.toggle("active");
+      document.body.classList.toggle("nav-open");
+    });
+
+    // Close menu when clicking on a link
+    const navLinks = mainNav.querySelectorAll("a");
+    navLinks.forEach((link) => {
+      link.addEventListener("click", function () {
+        mainNav.classList.remove("active");
+        burgerMenu.classList.remove("active");
+        document.body.classList.remove("nav-open");
+      });
+    });
+  }
+}

src/scripts/overview.js

@@ -0,0 +1,56 @@
+// Counter animation for stats
+document.addEventListener("DOMContentLoaded", function() {
+    const counters = document.querySelectorAll('.stat-number');
+    let hasCounted = false;
+
+    function animateCounters() {
+        if (hasCounted) return;
+
+        counters.forEach(counter => {
+            const target = parseInt(counter.getAttribute('data-count'));
+            const duration = 2000; // 2 seconds
+            const frameDuration = 1000 / 60; // 60 frames per second
+            const totalFrames = Math.round(duration / frameDuration);
+            let frame = 0;
+
+            const counterInterval = setInterval(() => {
+                frame++;
+                const progress = frame / totalFrames;
+                const currentCount = Math.round(target * progress);
+
+                counter.textContent = currentCount;
+
+                if (frame === totalFrames) {
+                    clearInterval(counterInterval);
+                }
+            }, frameDuration);
+
+            counter.classList.add('animated');
+        });
+
+        hasCounted = true;
+    }
+
+    // Check if element is in viewport
+    function isInViewport(element) {
+        const rect = element.getBoundingClientRect();
+        return (
+            rect.top >= 0 &&
+            rect.left >= 0 &&
+            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+        );
+    }
+
+    // Check on scroll and on load
+    function checkCounters() {
+        const statsContainer = document.querySelector('.stats-container');
+        if (statsContainer && isInViewport(statsContainer)) {
+            animateCounters();
+            window.removeEventListener('scroll', checkCounters);
+        }
+    }
+
+    window.addEventListener('scroll', checkCounters);
+    checkCounters(); // Check on page load
+});

src/scripts/portfolioCard.js

@@ -0,0 +1,228 @@
+class PortfolioCard extends HTMLElement {
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+
+    const icon = this.getAttribute("icon") || "fas fa-code";
+    const title = this.getAttribute("title") || "Project Title";
+    const desc = this.getAttribute("desc") || "Project description goes here.";
+    const tags = (this.getAttribute("tags") || "").split(",");
+    const link = this.getAttribute("link") || "#";
+    const collaboration = this.getAttribute("collaboration") || "";
+
+    shadow.innerHTML = `
+      <!-- Font Awesome inside Shadow DOM -->
+      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+      <!-- Use global styles.css from index.html -->
+      <link rel="stylesheet" href="src/styles/styles.css">
+
+      <style>
+        /* Collaboration badge styling */
+        .collaboration-badge {
+          display: inline-flex;
+          align-items: center;
+          gap: 0.4rem;
+          background: linear-gradient(135deg, #3b82f6, #2563eb);
+          color: white;
+          padding: 0.3rem 0.8rem;
+          border-radius: 20px;
+          font-size: 0.75rem;
+          margin-top: 0.5rem;
+          margin-bottom: 1rem;
+          animation: pulse 2s infinite;
+        }
+        
+        @keyframes pulse {
+          0% {
+            box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
+          }
+          70% {
+            box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
+          }
+          100% {
+            box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
+          }
+        }
+        
+        /* Enhanced card animations */
+        .portfolio-item {
+          opacity: 0;
+          transform: translateY(20px);
+          animation: fadeInUp 0.6s ease forwards;
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+        }
+        
+        @keyframes fadeInUp {
+          from {
+            opacity: 0;
+            transform: translateY(20px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+        
+        /* Portfolio title with icon */
+        .portfolio-title {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+        }
+        
+        .portfolio-content {
+          display: flex;
+          flex-direction: column;
+          flex: 1;
+          padding: 1.5rem;
+        }
+        
+        .portfolio-tags {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 0.5rem;
+          margin-bottom: 1.5rem;
+        }
+        
+        /* Full-width Enhanced Button Styles */
+        .portfolio-btn-container {
+          margin-top: auto;
+          padding: 0 1.5rem 1.5rem;
+        }
+        
+        .portfolio-btn {
+          width: 100%;
+          position: relative;
+          overflow: hidden;
+          z-index: 1;
+          padding: 1rem 1.8rem;
+          border-radius: 8px;
+          font-weight: 600;
+          letter-spacing: 0.5px;
+          text-transform: uppercase;
+          font-size: 0.9rem;
+          transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
+          border: 2px solid transparent;
+          background: linear-gradient(135deg, var(--purple), var(--purple-dark));
+          color: white;
+          box-shadow: 0 4px 15px var(--shadow-purple);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          gap: 0.8rem;
+          text-decoration: none;
+          text-align: center;
+        }
+        
+        .portfolio-btn::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background: linear-gradient(135deg, var(--purple-dark), var(--purple-muted));
+          z-index: -1;
+          transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
+          transform: scaleX(0);
+          transform-origin: right;
+        }
+        
+        .portfolio-btn:hover::before {
+          transform: scaleX(1);
+          transform-origin: left;
+        }
+        
+        .portfolio-btn:hover {
+          transform: translateY(-3px);
+          box-shadow: 0 8px 25px rgba(168, 85, 247, 0.4);
+          border-color: var(--purple-light);
+        }
+        
+        .portfolio-btn:active {
+          transform: translateY(0);
+          box-shadow: 0 4px 15px var(--shadow-purple);
+        }
+        
+        .portfolio-btn i {
+          font-size: 1rem;
+          transition: transform 0.3s ease;
+        }
+        
+        .portfolio-btn:hover i {
+          transform: translateX(4px);
+        }
+        
+        .portfolio-btn::after {
+          content: '';
+          position: absolute;
+          top: -50%;
+          left: -50%;
+          width: 200%;
+          height: 200%;
+          background: linear-gradient(
+            to bottom right,
+            rgba(255, 255, 255, 0.2),
+            rgba(255, 255, 255, 0.1) 20%,
+            rgba(255, 255, 255, 0) 50%,
+            rgba(255, 255, 255, 0) 100%
+          );
+          transform: rotate(30deg) translateY(-150%);
+          transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
+        }
+        
+        .portfolio-btn:hover::after {
+          transform: rotate(30deg) translateY(150%);
+        }
+        
+        .portfolio-btn:focus {
+          outline: 2px solid var(--purple-light);
+          outline-offset: 2px;
+        }
+        
+        /* Responsive adjustments */
+        @media (max-width: 768px) {
+          .portfolio-btn {
+            padding: 0.9rem 1.5rem;
+            font-size: 0.85rem;
+          }
+        }
+      </style>
+
+      <div class="portfolio-item">
+        <div class="portfolio-img">
+          <i class="${icon}"></i>
+        </div>
+        <div class="portfolio-content">
+          <h3 class="portfolio-title">
+            <i class="${icon}"></i> ${title}
+          </h3>
+          <p class="portfolio-desc">${desc}</p>
+          ${
+            collaboration
+              ? `
+            <div class="collaboration-badge">
+              <i class="fas fa-users"></i> ${collaboration}
+            </div>
+          `
+              : ""
+          }
+          <div class="portfolio-tags">
+            ${tags
+              .map((tag) => `<span class="tag">${tag.trim()}</span>`)
+              .join("")}
+          </div>
+        </div>
+        <div class="portfolio-btn-container">
+          <a href="${link}" target="_blank" class="portfolio-btn">
+            <i class="fas fa-arrow-right"></i> Explore Project
+          </a>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define("portfolio-card", PortfolioCard);

src/scripts/portfolioFilter.js

@@ -0,0 +1,95 @@
+// Portfolio filtering functionality
+document.addEventListener("DOMContentLoaded", function () {
+  // Get all portfolio items
+  const portfolioItems = document.querySelectorAll("portfolio-card");
+  const filterButtons = document.querySelectorAll(".filter-btn");
+  const searchInput = document.getElementById("project-search");
+
+  // Create a container for no results message
+  const noResults = document.createElement("div");
+  noResults.className = "no-results";
+  noResults.innerHTML = `
+    <i class="fas fa-search"></i>
+    <h3>No projects found</h3>
+    <p>Try adjusting your search or filter criteria</p>
+  `;
+
+  // Function to filter portfolio items
+  function filterPortfolio() {
+    const activeFilter =
+      document.querySelector(".filter-btn.active").dataset.filter;
+    const searchTerm = searchInput.value.toLowerCase();
+    let visibleItems = 0;
+
+    portfolioItems.forEach((item) => {
+      const tags = item.getAttribute("tags").toLowerCase();
+      const title = item.getAttribute("title").toLowerCase();
+      const desc = item.getAttribute("desc").toLowerCase();
+
+      // Check if item matches the active filter
+      const matchesFilter =
+        activeFilter === "all" ||
+        tags.includes(activeFilter) ||
+        title.includes(activeFilter) ||
+        desc.includes(activeFilter);
+
+      // Check if item matches the search term
+      const matchesSearch =
+        searchTerm === "" ||
+        title.includes(searchTerm) ||
+        desc.includes(searchTerm) ||
+        tags.includes(searchTerm);
+
+      // Show or hide the item based on filters
+      if (matchesFilter && matchesSearch) {
+        item.style.display = "block";
+        visibleItems++;
+
+        // Add animation for appearing items
+        item.style.animation = "fadeInUp 0.5s ease forwards";
+      } else {
+        item.style.display = "none";
+      }
+    });
+
+    // Show no results message if needed
+    const portfolioGrid = document.querySelector(".portfolio-grid");
+    const existingNoResults = portfolioGrid.querySelector(".no-results");
+
+    if (visibleItems === 0) {
+      if (!existingNoResults) {
+        portfolioGrid.appendChild(noResults);
+      }
+    } else if (existingNoResults) {
+      portfolioGrid.removeChild(existingNoResults);
+    }
+  }
+
+  // Add click event listeners to filter buttons
+  filterButtons.forEach((button) => {
+    button.addEventListener("click", function () {
+      // Remove active class from all buttons
+      filterButtons.forEach((btn) => btn.classList.remove("active"));
+
+      // Add active class to clicked button
+      this.classList.add("active");
+
+      // Filter portfolio items
+      filterPortfolio();
+    });
+  });
+
+  // Add input event listener to search field
+  searchInput.addEventListener("input", filterPortfolio);
+
+  // Add keyboard shortcut for search (Ctrl/Cmd + F)
+  document.addEventListener("keydown", function (e) {
+    if ((e.ctrlKey || e.metaKey) && e.key === "f") {
+      e.preventDefault();
+      searchInput.focus();
+    }
+  });
+
+  // Initialize filter on page load
+  filterPortfolio();
+});

src/scripts/stars.js

@@ -0,0 +1,22 @@
+// Create stellar background
+function createStars() {
+  const stars = document.getElementById("stars");
+  const count = 150;
+  stars.innerHTML = ""; // Clear any existing stars
+
+  for (let i = 0; i < count; i++) {
+    const star = document.createElement("div");
+    star.classList.add("star");
+
+    const size = Math.random() * 3;
+    star.style.width = `${size}px`;
+    star.style.height = `${size}px`;
+
+    star.style.left = `${Math.random() * 100}%`;
+    star.style.top = `${Math.random() * 100}%`;
+
+    star.style.animationDelay = `${Math.random() * 5}s`;
+
+    stars.appendChild(star);
+  }
+}

src/styles/styles.css

@@ -0,0 +1,998 @@
+/* Modern CSS Reset and Variables */
+:root {
+  /* Color System */
+  --bg-primary: #0a0a0a;
+  --bg-secondary: #111111;
+  --bg-tertiary: #1a1a1a;
+  --bg-card: #161616;
+  --bg-card-hover: #1e1e1e;
+
+  --text-primary: #ffffff;
+  --text-secondary: #b3b3b3;
+  --text-muted: #737373;
+
+  --accent-primary: #00f5ff;
+  --accent-secondary: #7c3aed;
+  --accent-gradient: linear-gradient(135deg, #00f5ff, #7c3aed);
+
+  --border-subtle: #262626;
+  --border-accent: #333333;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
+  --shadow-glow: 0 0 20px rgba(0, 245, 255, 0.1);
+
+  /* Border Radius */
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 24px;
+
+  /* Spacing */
+  --spacing-xs: 0.5rem;
+  --spacing-sm: 1rem;
+  --spacing-md: 1.5rem;
+  --spacing-lg: 2rem;
+  --spacing-xl: 3rem;
+  --spacing-2xl: 4rem;
+
+  /* Typography */
+  --font-primary: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-mono: "JetBrains Mono", "Fira Code", Consolas, monospace;
+
+  /* Z-Index Scale */
+  --z-navigation: 1000;
+  --z-modal: 1100;
+  --z-tooltip: 1200;
+}
+
+/* Reset */
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+  font-size: 16px;
+}
+
+body {
+  font-family: var(--font-primary);
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  line-height: 1.6;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Links */
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+/* Lists */
+ul,
+ol {
+  list-style: none;
+}
+
+/* Images */
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Focus States */
+*:focus {
+  outline: 2px solid var(--accent-primary);
+  outline-offset: 2px;
+}
+
+/* Background Effects */
+.animated-bg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  background: radial-gradient(
+      circle at 20% 50%,
+      rgba(124, 58, 237, 0.08) 0%,
+      transparent 50%
+    ),
+    radial-gradient(
+      circle at 80% 20%,
+      rgba(0, 245, 255, 0.06) 0%,
+      transparent 50%
+    ),
+    radial-gradient(
+      circle at 40% 80%,
+      rgba(124, 58, 237, 0.04) 0%,
+      transparent 50%
+    );
+}
+
+.stars {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: -1;
+}
+
+.star {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  background: rgba(255, 255, 255, 0.8);
+  border-radius: 50%;
+  animation: twinkle 3s infinite ease-in-out;
+}
+
+@keyframes twinkle {
+  0%,
+  100% {
+    opacity: 0.3;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.2);
+  }
+}
+
+/* Navigation */
+nav {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  background: rgba(10, 10, 10, 0.8);
+  backdrop-filter: blur(20px);
+  border-bottom: 1px solid var(--border-subtle);
+  z-index: var(--z-navigation);
+  transition: all 0.3s ease;
+}
+
+nav.scrolled {
+  background: rgba(10, 10, 10, 0.95);
+  box-shadow: var(--shadow-lg);
+}
+
+.nav-container {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 0 var(--spacing-lg);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 80px;
+}
+
+.logo {
+  font-weight: 800;
+  font-size: 1.5rem;
+  background: var(--accent-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.nav-links {
+  display: flex;
+  gap: var(--spacing-lg);
+}
+
+.nav-links a {
+  color: var(--text-secondary);
+  font-weight: 500;
+  font-size: 0.9rem;
+  transition: all 0.3s ease;
+  position: relative;
+  padding: var(--spacing-xs) 0;
+}
+
+.nav-links a:hover {
+  color: var(--accent-primary);
+}
+
+.nav-links a::after {
+  content: "";
+  position: absolute;
+  bottom: -8px;
+  left: 0;
+  width: 0;
+  height: 2px;
+  background: var(--accent-primary);
+  transition: width 0.3s ease;
+}
+
+.nav-links a:hover::after {
+  width: 100%;
+}
+
+.mobile-menu-btn {
+  display: none;
+  background: none;
+  border: none;
+  color: var(--text-primary);
+  font-size: 1.5rem;
+  cursor: pointer;
+  padding: var(--spacing-xs);
+  border-radius: var(--radius-sm);
+  transition: background 0.3s ease;
+}
+
+.mobile-menu-btn:hover {
+  background: var(--bg-card);
+}
+
+/* Container */
+.container {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 0 var(--spacing-lg);
+}
+
+/* Hero Section */
+.hero {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  padding-top: 80px;
+}
+
+.hero-content {
+  max-width: 800px;
+  margin: 0 auto;
+  text-align: center;
+  padding: var(--spacing-lg) 0;
+}
+
+.hero h1 {
+  font-size: clamp(2.5rem, 6vw, 4rem);
+  font-weight: 800;
+  margin-bottom: var(--spacing-md);
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+}
+
+.hero h1 .highlight {
+  background: var(--accent-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.hero p {
+  font-size: 1.25rem;
+  color: var(--text-secondary);
+  margin-bottom: var(--spacing-xl);
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+  line-height: 1.6;
+}
+
+.hero-buttons {
+  display: flex;
+  gap: var(--spacing-sm);
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+/* Buttons */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  padding: 0.875rem var(--spacing-lg);
+  border-radius: var(--radius-md);
+  font-weight: 600;
+  font-size: 0.9rem;
+  text-decoration: none;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  border: none;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-primary {
+  background: var(--accent-gradient);
+  color: var(--bg-primary);
+  box-shadow: var(--shadow-glow);
+}
+
+.btn-primary:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 25px rgba(0, 245, 255, 0.3);
+}
+
+.btn-secondary {
+  background: transparent;
+  color: var(--text-primary);
+  border: 2px solid var(--border-accent);
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background: var(--bg-card);
+  border-color: var(--accent-primary);
+  transform: translateY(-2px);
+}
+
+/* Sections */
+.section {
+  padding: 6rem 0;
+}
+
+.section-header {
+  text-align: center;
+  margin-bottom: var(--spacing-2xl);
+}
+
+.section-title {
+  font-size: clamp(2rem, 4vw, 3rem);
+  font-weight: 700;
+  margin-bottom: var(--spacing-sm);
+  letter-spacing: -0.02em;
+}
+
+.section-subtitle {
+  font-size: 1.125rem;
+  color: var(--text-secondary);
+  max-width: 600px;
+  margin: 0 auto;
+  line-height: 1.6;
+}
+
+/* Projects */
+.project-category {
+  margin-bottom: var(--spacing-2xl);
+}
+
+.category-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: var(--spacing-lg);
+  color: var(--text-primary);
+}
+
+.projects-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  gap: var(--spacing-lg);
+}
+
+.project-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-lg);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+}
+
+.project-card::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  background: var(--accent-gradient);
+}
+
+.project-card:hover {
+  transform: translateY(-8px);
+  background: var(--bg-card-hover);
+  box-shadow: var(--shadow-xl);
+  border-color: var(--border-accent);
+}
+
+.project-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 60px;
+  height: 60px;
+  background: var(--accent-gradient);
+  border-radius: var(--radius-md);
+  margin-bottom: var(--spacing-md);
+  font-size: 1.5rem;
+  color: var(--bg-primary);
+}
+
+.project-card h3 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: var(--spacing-sm);
+  color: var(--text-primary);
+}
+
+.project-card p {
+  color: var(--text-secondary);
+  margin-bottom: var(--spacing-md);
+  line-height: 1.6;
+}
+
+.project-status {
+  display: inline-block;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  background: rgba(0, 245, 255, 0.1);
+  color: var(--accent-primary);
+  border-radius: var(--radius-sm);
+  font-size: 0.8rem;
+  font-weight: 500;
+  font-family: var(--font-mono);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.project-status.active {
+  background: rgba(34, 197, 94, 0.1);
+  color: #22c55e;
+}
+
+.project-status.development {
+  background: rgba(249, 115, 22, 0.1);
+  color: #f97316;
+}
+
+/* Team */
+.team-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: var(--spacing-lg);
+  margin-top: var(--spacing-lg);
+}
+
+.team-member {
+  background: var(--bg-card);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-lg);
+  text-align: center;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.team-member:hover {
+  transform: translateY(-8px);
+  background: var(--bg-card-hover);
+  box-shadow: var(--shadow-xl);
+  border-color: var(--border-accent);
+}
+
+.member-avatar {
+  width: 120px;
+  height: 120px;
+  background: var(--accent-gradient);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 2.5rem;
+  color: var(--bg-primary);
+  margin: 0 auto var(--spacing-md);
+  position: relative;
+}
+
+.member-avatar::after {
+  content: "";
+  position: absolute;
+  inset: 3px;
+  background: var(--bg-card);
+  border-radius: 50%;
+  z-index: 1;
+}
+
+.member-avatar i {
+  z-index: 2;
+  position: relative;
+}
+
+.team-member h3 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: var(--spacing-xs);
+}
+
+.team-role {
+  color: var(--accent-primary);
+  font-weight: 500;
+  margin-bottom: var(--spacing-sm);
+  font-family: var(--font-mono);
+  font-size: 0.9rem;
+}
+
+.team-member p {
+  color: var(--text-secondary);
+  line-height: 1.6;
+}
+
+/* About Section */
+.about-content {
+  max-width: 800px;
+  margin: 0 auto;
+  text-align: center;
+}
+
+.about-content p {
+  font-size: 1.125rem;
+  color: var(--text-secondary);
+  margin-bottom: var(--spacing-lg);
+  line-height: 1.7;
+  text-align: left;
+}
+
+.about-content p:last-child {
+  margin-bottom: 0;
+}
+
+/* Vision Section */
+.vision-content {
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.vision-text {
+  text-align: center;
+  margin-bottom: var(--spacing-2xl);
+}
+
+.vision-text p {
+  font-size: 1.125rem;
+  color: var(--text-secondary);
+  line-height: 1.7;
+  max-width: 700px;
+  margin: 0 auto;
+}
+
+.principles-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: var(--spacing-lg);
+}
+
+.principle-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-lg);
+  text-align: center;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.principle-card:hover {
+  transform: translateY(-5px);
+  background: var(--bg-card-hover);
+  box-shadow: var(--shadow-lg);
+  border-color: var(--border-accent);
+}
+
+.principle-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 80px;
+  height: 80px;
+  background: var(--accent-gradient);
+  border-radius: 50%;
+  margin: 0 auto var(--spacing-md);
+  font-size: 1.8rem;
+  color: var(--bg-primary);
+}
+
+.principle-card h4 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-bottom: var(--spacing-sm);
+  color: var(--text-primary);
+}
+
+.principle-card p {
+  color: var(--text-secondary);
+  line-height: 1.6;
+}
+
+/* Contact Section */
+.contact-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--spacing-2xl);
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.contact-methods {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-lg);
+}
+
+.contact-item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-sm);
+}
+
+.contact-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 50px;
+  height: 50px;
+  background: var(--accent-gradient);
+  border-radius: var(--radius-md);
+  font-size: 1.2rem;
+  color: var(--bg-primary);
+  flex-shrink: 0;
+}
+
+.contact-details h4 {
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin-bottom: var(--spacing-xs);
+  color: var(--text-primary);
+}
+
+.contact-details a {
+  color: var(--text-secondary);
+  transition: color 0.3s ease;
+}
+
+.contact-details a:hover {
+  color: var(--accent-primary);
+}
+
+/* Contact Form */
+.contact-form {
+  background: var(--bg-card);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-xl);
+}
+
+.form-group {
+  margin-bottom: var(--spacing-md);
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: var(--spacing-xs);
+  font-weight: 500;
+  color: var(--text-primary);
+  font-size: 0.9rem;
+}
+
+.form-group input,
+.form-group select,
+.form-group textarea {
+  width: 100%;
+  padding: var(--spacing-sm);
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  color: var(--text-primary);
+  font-size: 0.95rem;
+  font-family: var(--font-primary);
+  transition: all 0.3s ease;
+}
+
+.form-group input:focus,
+.form-group select:focus,
+.form-group textarea:focus {
+  outline: none;
+  border-color: var(--accent-primary);
+  box-shadow: 0 0 0 3px rgba(0, 245, 255, 0.1);
+}
+
+.form-group textarea {
+  resize: vertical;
+  min-height: 120px;
+  font-family: var(--font-primary);
+}
+
+.form-group select {
+  cursor: pointer;
+}
+
+.contact-form .btn {
+  width: 100%;
+  justify-content: center;
+  margin-top: var(--spacing-sm);
+}
+
+/* Footer */
+.footer {
+  background: var(--bg-secondary);
+  border-top: 1px solid var(--border-subtle);
+  padding: var(--spacing-2xl) 0 var(--spacing-lg);
+}
+
+.footer-content {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr 1fr;
+  gap: var(--spacing-xl);
+  margin-bottom: var(--spacing-xl);
+}
+
+.footer-brand .logo {
+  font-size: 1.5rem;
+  margin-bottom: var(--spacing-sm);
+  display: block;
+}
+
+.footer-brand p {
+  color: var(--text-secondary);
+  margin-bottom: var(--spacing-lg);
+  line-height: 1.6;
+  max-width: 300px;
+}
+
+.footer-social {
+  display: flex;
+  gap: var(--spacing-sm);
+}
+
+.social-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  background: var(--bg-card);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  color: var(--text-secondary);
+  font-size: 1.1rem;
+  transition: all 0.3s ease;
+}
+
+.social-link:hover {
+  background: var(--accent-gradient);
+  color: var(--bg-primary);
+  transform: translateY(-2px);
+  border-color: transparent;
+}
+
+.footer-links h4 {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: var(--spacing-sm);
+}
+
+.footer-links ul {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+
+.footer-links a {
+  color: var(--text-secondary);
+  font-size: 0.9rem;
+  transition: color 0.3s ease;
+}
+
+.footer-links a:hover {
+  color: var(--accent-primary);
+}
+
+.footer-bottom {
+  border-top: 1px solid var(--border-subtle);
+  padding-top: var(--spacing-lg);
+}
+
+.footer-bottom-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--spacing-sm);
+}
+
+.footer-bottom p {
+  color: var(--text-muted);
+  font-size: 0.9rem;
+}
+
+.footer-badges {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.badge {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-xs) var(--spacing-sm);
+  background: var(--bg-card);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  font-size: 0.8rem;
+  color: var(--text-muted);
+}
+
+.badge i {
+  color: var(--accent-primary);
+}
+
+/* Responsive Design */
+@media (max-width: 1024px) {
+  .nav-container {
+    padding: 0 var(--spacing-md);
+  }
+
+  .container {
+    padding: 0 var(--spacing-md);
+  }
+
+  .footer-content {
+    grid-template-columns: 1fr 1fr;
+    gap: var(--spacing-lg);
+  }
+
+  .contact-container {
+    grid-template-columns: 1fr;
+    gap: var(--spacing-xl);
+  }
+}
+
+@media (max-width: 768px) {
+  .mobile-menu-btn {
+    display: block;
+  }
+
+  .nav-links {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    background: var(--bg-secondary);
+    border-top: 1px solid var(--border-subtle);
+    flex-direction: column;
+    padding: var(--spacing-lg);
+  }
+
+  .nav-links.active {
+    display: flex;
+  }
+
+  .nav-links a::after {
+    display: none;
+  }
+
+  .hero h1 {
+    font-size: clamp(2rem, 8vw, 3rem);
+  }
+
+  .hero p {
+    font-size: 1.1rem;
+  }
+
+  .hero-buttons {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .section {
+    padding: 4rem 0;
+  }
+
+  .projects-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .team-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .principles-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .footer-content {
+    grid-template-columns: 1fr;
+    text-align: center;
+    gap: var(--spacing-lg);
+  }
+
+  .footer-brand p {
+    max-width: none;
+  }
+
+  .footer-social {
+    justify-content: center;
+  }
+
+  .footer-bottom-content {
+    flex-direction: column;
+    text-align: center;
+    gap: var(--spacing-sm);
+  }
+}
+
+@media (max-width: 480px) {
+  .container {
+    padding: 0 var(--spacing-sm);
+  }
+
+  .nav-container {
+    padding: 0 var(--spacing-sm);
+  }
+
+  .hero-content {
+    padding: var(--spacing-sm) 0;
+  }
+
+  .project-card,
+  .team-member,
+  .principle-card,
+  .contact-form {
+    padding: var(--spacing-md);
+  }
+
+  .section-header {
+    margin-bottom: var(--spacing-xl);
+  }
+
+  .contact-form {
+    padding: var(--spacing-lg);
+  }
+}
+
+/* Animations and Interactions */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+
+  .star {
+    animation: none;
+  }
+}
+
+/* Print Styles */
+@media print {
+  .animated-bg,
+  .stars,
+  nav,
+  .hero-buttons,
+  .contact-form,
+  .footer-social {
+    display: none;
+  }
+
+  body {
+    background: white;
+    color: black;
+  }
+
+  .section {
+    padding: 2rem 0;
+  }
+}