add challenge 11(portifolio)

2026-03-06 21:36:22 +01:00 · 2025-06-19 01:03:59 +02:00
parent 8faefd26ae
commit 5245c6f9b1
27 changed files with 1937 additions and 0 deletions
--- a/11/portifolio(work_in_progress)/.test/.sql/portfolio.sql
+++ b/11/portifolio(work_in_progress)/.test/.sql/portfolio.sql
@@ -0,0 +1,24 @@
+-- Create database
+CREATE DATABASE IF NOT EXISTS portfolio;
+USE portfolio;
+
+-- Create projects table
+CREATE TABLE IF NOT EXISTS projects (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    title VARCHAR(255) NOT NULL,
+    description TEXT,
+    image_url VARCHAR(255),
+    project_url VARCHAR(255),
+    tags VARCHAR(255),
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Insert a sample project
+INSERT INTO projects (title, description, image_url, project_url, tags)
+VALUES (
+    'Sample Project',
+    'This is a sample project description.',
+    'assets/sample.jpg',
+    'https://example.com',
+    'html,css,school'
+); 
--- a/11/portifolio(work_in_progress)/.test/.sql/update_projects.sql
+++ b/11/portifolio(work_in_progress)/.test/.sql/update_projects.sql
@@ -0,0 +1,5 @@
+-- Add long_description column to projects table
+ALTER TABLE projects ADD COLUMN long_description TEXT AFTER description;
+
+-- Update existing projects with long descriptions (optional)
+UPDATE projects SET long_description = description WHERE long_description IS NULL; 
--- a/11/portifolio(work_in_progress)/.test/test-dark-mode.html
+++ b/11/portifolio(work_in_progress)/.test/test-dark-mode.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dark Mode Test</title>
+    
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    
+    <!-- Tailwind CSS CDN -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        dark: {
+                            bg: '#0f172a',
+                            card: '#334155',
+                            text: '#f1f5f9'
+                        }
+                    },
+                    fontFamily: {
+                        'sans': ['Inter', 'system-ui', 'sans-serif'],
+                    }
+                }
+            }
+        }
+    </script>
+    
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="css/styles.css">
+    <link rel="stylesheet" href="css/animations.css">
+</head>
+<body class="min-h-screen bg-gray-100 dark:bg-dark-bg text-gray-900 dark:text-white transition-colors duration-200">
+    <div class="container mx-auto px-4 py-8">
+        <h1 class="text-4xl font-bold mb-8 text-center">Dark Mode Test Page</h1>
+        
+        <div class="max-w-md mx-auto bg-white dark:bg-dark-card p-6 rounded-lg shadow-lg">
+            <h2 class="text-2xl font-semibold mb-4">Test Content</h2>
+            <p class="text-gray-700 dark:text-gray-300 mb-4">
+                This is a test page to verify that the dark mode toggle button appears and works correctly.
+            </p>
+            <p class="text-sm text-gray-500 dark:text-gray-400">
+                You should see a dark mode toggle button in the bottom-left corner of the screen.
+            </p>
+        </div>
+        
+        <div class="mt-8 text-center">
+            <a href="index.php" class="btn-primary inline-block">Back to Main Page</a>
+        </div>
+    </div>
+
+    <!-- Scripts -->
+    <script src="js/dark-mode.js"></script>
+    
+    <script>
+        // Additional debugging
+        console.log('Test page loaded');
+        setTimeout(() => {
+            const button = document.getElementById('theme-toggle');
+            if (button) {
+                console.log('✅ Dark mode button found:', button);
+                console.log('Button styles:', window.getComputedStyle(button));
+            } else {
+                console.log('❌ Dark mode button not found');
+            }
+        }, 1000);
+    </script>
+</body>
+</html> 
--- a/11/portifolio(work_in_progress)/assets/favicon.svg
+++ b/11/portifolio(work_in_progress)/assets/favicon.svg
@@ -0,0 +1,60 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <defs>
+    <linearGradient id="mainGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#2563eb" />
+      <stop offset="100%" stop-color="#4f46e5" />
+    </linearGradient>
+    <radialGradient id="shine" cx="70%" cy="30%" r="60%">
+      <stop offset="0%" stop-color="#fff" stop-opacity="0.7"/>
+      <stop offset="100%" stop-color="#fff" stop-opacity="0"/>
+    </radialGradient>
+    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="0" dy="2" stdDeviation="2.5" flood-color="#6366f1" flood-opacity="0.25"/>
+    </filter>
+    <radialGradient id="glow" cx="50%" cy="50%" r="50%">
+      <stop offset="60%" stop-color="#a5b4fc" stop-opacity="0.18"/>
+      <stop offset="100%" stop-color="#6366f1" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="purpleOverlay" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#a78bfa" stop-opacity="0.18"/>
+      <stop offset="100%" stop-color="#7c3aed" stop-opacity="0.22"/>
+    </linearGradient>
+  </defs>
+  <!-- Background -->
+  <rect x="2" y="2" width="60" height="60" rx="16" fill="url(#mainGradient)"/>
+  <!-- Subtle purple overlay -->
+  <rect x="2" y="2" width="60" height="60" rx="16" fill="url(#purpleOverlay)"/>
+  <!-- Faint geometric grid (more purple, more visible) -->
+  <g opacity="0.22">
+    <rect x="14" y="14" width="36" height="36" rx="8" fill="none" stroke="#a78bfa" stroke-width="1.2"/>
+    <line x1="32" y1="14" x2="32" y2="50" stroke="#a78bfa" stroke-width="1"/>
+    <line x1="14" y1="32" x2="50" y2="32" stroke="#a78bfa" stroke-width="1"/>
+  </g>
+  <!-- Soft glowing ring -->
+  <circle cx="32" cy="32" r="23" fill="none" stroke="url(#glow)" stroke-width="7"/>
+  <!-- Shine overlay for premium look -->
+  <ellipse cx="38" cy="18" rx="18" ry="8" fill="url(#shine)"/>
+  <!-- Stylized P with purple highlight and indigo shadow -->
+  <g filter="url(#shadow)">
+    <path d="M22 48V16h12q10 0 10 8.5t-10 8.5h-8v15z" fill="#fff"/>
+    <path d="M30 20h4q6 0 6 4.5t-6 4.5h-4z" fill="#6366f1"/>
+    <path d="M28 28q7 0 7-4.5" stroke="#a78bfa" stroke-width="2.2" fill="none" opacity="0.85"/>
+  </g>
+  <!-- Accent star -->
+  <g>
+    <polygon points="52,10 53,13 56,13 53.5,15 54.5,18 52,16.5 49.5,18 50.5,15 48,13 51,13" fill="#ffe066" opacity="0.95"/>
+    <polygon points="52,11.5 52.7,13.5 54.5,13.5 53,14.7 53.7,16.5 52,15.5 50.3,16.5 51,14.7 49.5,13.5 51.3,13.5" fill="#fff" opacity="0.7"/>
+    <!-- Indigo accent dot near star -->
+    <circle cx="57" cy="12" r="1.1" fill="#6366f1" opacity="0.85"/>
+  </g>
+  <!-- Accent dot cluster (more purple/indigo) -->
+  <g>
+    <circle cx="16" cy="48" r="1.3" fill="#a78bfa" opacity="0.95"/>
+    <circle cx="19" cy="50" r="0.7" fill="#7c3aed" opacity="0.85"/>
+    <circle cx="14.5" cy="51.5" r="0.5" fill="#6366f1" opacity="0.85"/>
+  </g>
+  <!-- Strong indigo inner border -->
+  <rect x="7" y="7" width="50" height="50" rx="12" fill="none" stroke="#6366f1" stroke-width="1.5" opacity="0.45"/>
+  <!-- Subtle white border -->
+  <rect x="2" y="2" width="60" height="60" rx="16" fill="none" stroke="#fff" stroke-width="1.5" opacity="0.18"/>
+</svg> 
--- a/11/portifolio(work_in_progress)/assets/img_68532b2c9db398.90652024.webp
+++ b/11/portifolio(work_in_progress)/assets/img_68532b2c9db398.90652024.webp
--- a/11/portifolio(work_in_progress)/assets/img_68532c22650974.25780946.webp
+++ b/11/portifolio(work_in_progress)/assets/img_68532c22650974.25780946.webp
--- a/11/portifolio(work_in_progress)/assets/img_685332e2c19726.68679915.webp
+++ b/11/portifolio(work_in_progress)/assets/img_685332e2c19726.68679915.webp
--- a/11/portifolio(work_in_progress)/assets/img_68533428d7dbf7.04812047.webp
+++ b/11/portifolio(work_in_progress)/assets/img_68533428d7dbf7.04812047.webp
--- a/11/portifolio(work_in_progress)/assets/img_68533897b6e606.91354272.webp
+++ b/11/portifolio(work_in_progress)/assets/img_68533897b6e606.91354272.webp
--- a/11/portifolio(work_in_progress)/assets/img_68533a4fae17a2.61602173.webp
+++ b/11/portifolio(work_in_progress)/assets/img_68533a4fae17a2.61602173.webp
--- a/11/portifolio(work_in_progress)/assets/img_68533d573a8017.49535201.webp
+++ b/11/portifolio(work_in_progress)/assets/img_68533d573a8017.49535201.webp
--- a/11/portifolio(work_in_progress)/assets/img_6853423c94f733.00653812.webp
+++ b/11/portifolio(work_in_progress)/assets/img_6853423c94f733.00653812.webp
--- a/11/portifolio(work_in_progress)/assets/img_685343f1288b20.49230464.webp
+++ b/11/portifolio(work_in_progress)/assets/img_685343f1288b20.49230464.webp
--- a/11/portifolio(work_in_progress)/assets/pano_left.webp
+++ b/11/portifolio(work_in_progress)/assets/pano_left.webp
--- a/11/portifolio(work_in_progress)/css/animations.css
+++ b/11/portifolio(work_in_progress)/css/animations.css
@@ -0,0 +1,240 @@
+/* Custom animations and keyframes */
+
+/* Fade in animation */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+/* Slide up animation */
+@keyframes slideUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Bounce in animation */
+@keyframes bounceIn {
+    0% {
+        opacity: 0;
+        transform: scale(0.3);
+    }
+    50% {
+        opacity: 1;
+        transform: scale(1.05);
+    }
+    70% {
+        transform: scale(0.9);
+    }
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+/* Pulse animation */
+@keyframes pulse {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
+}
+
+/* Shimmer effect for loading states */
+@keyframes shimmer {
+    0% {
+        background-position: -200px 0;
+    }
+    100% {
+        background-position: calc(200px + 100%) 0;
+    }
+}
+
+/* Floating animation */
+@keyframes float {
+    0%, 100% {
+        transform: translateY(0px);
+    }
+    50% {
+        transform: translateY(-10px);
+    }
+}
+
+/* Gradient animation */
+@keyframes gradientShift {
+    0% {
+        background-position: 0% 50%;
+    }
+    50% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0% 50%;
+    }
+}
+
+/* Typing animation */
+@keyframes typing {
+    from {
+        width: 0;
+    }
+    to {
+        width: 100%;
+    }
+}
+
+/* Blink animation for cursor */
+@keyframes blink {
+    0%, 50% {
+        opacity: 1;
+    }
+    51%, 100% {
+        opacity: 0;
+    }
+}
+
+/* Utility classes for animations */
+.animate-fade-in {
+    animation: fadeIn 0.6s ease-out;
+}
+
+.animate-slide-up {
+    animation: slideUp 0.8s ease-out;
+}
+
+.animate-bounce-in {
+    animation: bounceIn 1s ease-out;
+}
+
+.animate-pulse {
+    animation: pulse 2s infinite;
+}
+
+.animate-float {
+    animation: float 3s ease-in-out infinite;
+}
+
+.animate-gradient {
+    background-size: 200% 200%;
+    animation: gradientShift 3s ease infinite;
+}
+
+.animate-shimmer {
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
+    background-size: 200px 100%;
+    animation: shimmer 1.5s infinite;
+}
+
+/* Staggered animations for lists */
+.stagger-animation > * {
+    opacity: 0;
+    animation: slideUp 0.6s ease-out forwards;
+}
+
+.stagger-animation > *:nth-child(1) { animation-delay: 0.1s; }
+.stagger-animation > *:nth-child(2) { animation-delay: 0.2s; }
+.stagger-animation > *:nth-child(3) { animation-delay: 0.3s; }
+.stagger-animation > *:nth-child(4) { animation-delay: 0.4s; }
+.stagger-animation > *:nth-child(5) { animation-delay: 0.5s; }
+.stagger-animation > *:nth-child(6) { animation-delay: 0.6s; }
+
+/* Hover animations */
+.hover-lift {
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.hover-lift:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
+}
+
+.hover-scale {
+    transition: transform 0.3s ease;
+}
+
+.hover-scale:hover {
+    transform: scale(1.05);
+}
+
+.hover-glow {
+    transition: box-shadow 0.3s ease;
+}
+
+.hover-glow:hover {
+    box-shadow: 0 0 20px rgba(79, 172, 254, 0.4);
+}
+
+/* Loading spinner */
+.spinner {
+    width: 40px;
+    height: 40px;
+    border: 4px solid rgba(0, 0, 0, 0.1);
+    border-left-color: #4facfe;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* Text reveal animation */
+.text-reveal {
+    overflow: hidden;
+    position: relative;
+}
+
+.text-reveal::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--bg-primary);
+    animation: textReveal 1.5s ease-out forwards;
+}
+
+@keyframes textReveal {
+    0% {
+        transform: translateX(0);
+    }
+    100% {
+        transform: translateX(100%);
+    }
+}
+
+/* Parallax effect */
+.parallax {
+    transform: translateZ(0);
+    will-change: transform;
+}
+
+/* Smooth scrolling */
+html {
+    scroll-behavior: smooth;
+}
+
+/* Reduced motion for accessibility */
+@media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+    }
+} 
--- a/11/portifolio(work_in_progress)/css/styles.css
+++ b/11/portifolio(work_in_progress)/css/styles.css
@@ -0,0 +1,306 @@
+/* Custom CSS for enhanced styling with dark/light theme support */
+
+/* Custom properties for theme colors */
+:root {
+  --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+  --accent-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+  --success-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
+  
+  /* Light theme colors */
+  --bg-primary: #ffffff;
+  --bg-secondary: #f8fafc;
+  --bg-card: #ffffff;
+  --text-primary: #1e293b;
+  --text-secondary: #64748b;
+  --border-color: #e2e8f0;
+  --shadow-color: rgba(0, 0, 0, 0.1);
+  --shadow-hover: rgba(0, 0, 0, 0.15);
+  
+  /* Animation variables */
+  --transition-fast: 0.2s ease;
+  --transition-normal: 0.3s ease;
+  --transition-slow: 0.5s ease;
+}
+
+/* Dark theme colors */
+.dark {
+  --bg-primary: #0f172a;
+  --bg-secondary: #1e293b;
+  --bg-card: #334155;
+  --text-primary: #f1f5f9;
+  --text-secondary: #94a3b8;
+  --border-color: #475569;
+  --shadow-color: rgba(0, 0, 0, 0.3);
+  --shadow-hover: rgba(0, 0, 0, 0.4);
+}
+
+/* Global styles */
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  transition: background-color var(--transition-normal), color var(--transition-normal);
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  line-height: 1.6;
+}
+
+/* Enhanced header with gradient and animation */
+header {
+  background: var(--primary-gradient) !important;
+  position: relative;
+  overflow: hidden;
+}
+
+header::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+  animation: float 20s ease-in-out infinite;
+}
+
+@keyframes float {
+  0%, 100% { transform: translateY(0px) rotate(0deg); }
+  50% { transform: translateY(-20px) rotate(180deg); }
+}
+
+/* Enhanced project cards */
+.project-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: 16px;
+  box-shadow: 0 4px 6px var(--shadow-color);
+  transition: all var(--transition-normal);
+  position: relative;
+  overflow: hidden;
+}
+
+.project-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: var(--accent-gradient);
+  transform: scaleX(0);
+  transition: transform var(--transition-normal);
+}
+
+.project-card:hover::before {
+  transform: scaleX(1);
+}
+
+.project-card:hover {
+  transform: translateY(-8px) scale(1.02);
+  box-shadow: 0 20px 25px var(--shadow-hover);
+  border-color: transparent;
+}
+
+/* Enhanced images */
+.project-image {
+  border-radius: 12px;
+  transition: transform var(--transition-normal);
+  position: relative;
+  overflow: hidden;
+}
+
+.project-card:hover .project-image {
+  transform: scale(1.05);
+}
+
+.project-image::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
+  transform: translateX(-100%);
+  transition: transform var(--transition-slow);
+}
+
+.project-card:hover .project-image::after {
+  transform: translateX(100%);
+}
+
+/* Enhanced tags */
+.tag {
+  background: var(--accent-gradient);
+  color: white;
+  font-weight: 500;
+  border-radius: 20px;
+  padding: 4px 12px;
+  font-size: 0.75rem;
+  transition: all var(--transition-fast);
+  position: relative;
+  overflow: hidden;
+}
+
+.tag::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
+  transition: left var(--transition-slow);
+}
+
+.tag:hover::before {
+  left: 100%;
+}
+
+.tag:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+}
+
+/* Enhanced buttons */
+.btn-primary {
+  background: var(--primary-gradient);
+  color: white;
+  border: none;
+  border-radius: 12px;
+  padding: 12px 24px;
+  font-weight: 600;
+  transition: all var(--transition-normal);
+  position: relative;
+  overflow: hidden;
+}
+
+.btn-primary::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 var(--transition-slow);
+}
+
+.btn-primary:hover::before {
+  left: 100%;
+}
+
+.btn-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
+}
+
+/* Enhanced modal */
+.modal-overlay {
+  backdrop-filter: blur(8px);
+  background: rgba(0, 0, 0, 0.6);
+}
+
+.modal-content {
+  background: var(--bg-card);
+  border-radius: 20px;
+  border: 1px solid var(--border-color);
+  box-shadow: 0 25px 50px var(--shadow-hover);
+}
+
+/* Enhanced theme toggle */
+.theme-toggle {
+  background: var(--bg-card);
+  border: 2px solid var(--border-color);
+  border-radius: 50%;
+  box-shadow: 0 4px 12px var(--shadow-color);
+  transition: all var(--transition-normal);
+}
+
+.theme-toggle:hover {
+  transform: scale(1.1) rotate(180deg);
+  box-shadow: 0 8px 20px var(--shadow-hover);
+}
+
+/* Loading animation */
+.loading {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border: 3px solid var(--border-color);
+  border-radius: 50%;
+  border-top-color: var(--primary-gradient);
+  animation: spin 1s ease-in-out infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Enhanced typography */
+h1, h2, h3 {
+  background: var(--primary-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+header h1 {
+  color: #f0f6ff;
+  background: none;
+  -webkit-background-clip: initial;
+  -webkit-text-fill-color: initial;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--bg-secondary);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--accent-gradient);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--secondary-gradient);
+}
+
+/* Responsive enhancements */
+@media (max-width: 768px) {
+  .project-card:hover {
+    transform: translateY(-4px) scale(1.01);
+  }
+  
+  .theme-toggle:hover {
+    transform: scale(1.05) rotate(90deg);
+  }
+}
+
+/* Focus states for accessibility */
+button:focus,
+a:focus {
+  outline: 2px solid var(--accent-gradient);
+  outline-offset: 2px;
+}
+
+/* Print styles */
+@media print {
+  .theme-toggle,
+  .modal-overlay {
+    display: none !important;
+  }
+  
+  .project-card {
+    break-inside: avoid;
+    box-shadow: none;
+    border: 1px solid #ccc;
+  }
+} 
--- a/11/portifolio(work_in_progress)/db/add_project.php
+++ b/11/portifolio(work_in_progress)/db/add_project.php
@@ -0,0 +1,159 @@
+<?php
+require_once '../php/config.php';
+
+$message = '';
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $title = $_POST['title'] ?? '';
+    $description = $_POST['description'] ?? '';
+    $long_description = $_POST['long_description'] ?? '';
+    $project_url = $_POST['project_url'] ?? '';
+    $tags = $_POST['tags'] ?? '';
+    $image_url = '';
+    // Handle image upload
+    if (isset($_FILES['image_file']) && $_FILES['image_file']['error'] === UPLOAD_ERR_OK) {
+        $ext = pathinfo($_FILES['image_file']['name'], PATHINFO_EXTENSION);
+        $filename = uniqid('img_', true) . '.' . strtolower($ext);
+        $target = '/var/www/alvnx.xyz/public_html/assets/' . $filename;
+        if (move_uploaded_file($_FILES['image_file']['tmp_name'], $target)) {
+            $image_url = 'assets/' . $filename;
+        } else {
+            $message = '<div class="bg-red-100 text-red-800 p-3 rounded mb-4">Image upload failed.</div>';
+        }
+    } else if (!empty($_POST['image_url'])) {
+        $image_url = $_POST['image_url'];
+    }
+    if (!$message) {
+        try {
+            $pdo = get_pdo();
+            $stmt = $pdo->prepare('INSERT INTO projects (title, description, long_description, image_url, project_url, tags) VALUES (?, ?, ?, ?, ?, ?)');
+            $stmt->execute([$title, $description, $long_description, $image_url, $project_url, $tags]);
+            $message = '<div class="bg-green-100 text-green-800 p-3 rounded mb-4">Project added successfully!</div>';
+        } catch (Exception $e) {
+            $message = '<div class="bg-red-100 text-red-800 p-3 rounded mb-4">Error: ' . htmlspecialchars($e->getMessage()) . '</div>';
+        }
+    }
+}
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Add Project</title>
+    
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    
+    <!-- Tailwind CSS CDN -->
+    <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        dark: {
+                            bg: '#0f172a',
+                            card: '#334155',
+                            text: '#f1f5f9'
+                        }
+                    },
+                    fontFamily: {
+                        'sans': ['Inter', 'system-ui', 'sans-serif'],
+                    }
+                }
+            }
+        }
+    </script>
+    
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="../css/styles.css">
+    <link rel="stylesheet" href="../css/animations.css">
+    
+    <!-- Favicon -->
+    <link rel="icon" type="image/svg+xml" href="../assets/favicon.svg">
+</head>
+<body class="min-h-screen flex items-center justify-center transition-colors duration-200">
+    <!-- Back to home button -->
+    <a href="../index.php" class="fixed top-6 left-6 btn-primary inline-flex items-center space-x-2 z-50 animate-bounce-in">
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
+        </svg>
+        <span>Back to Home</span>
+    </a>
+
+    <div class="bg-white dark:bg-dark-card p-8 rounded-2xl shadow-xl w-full max-w-2xl mx-4 transition-colors duration-200 border border-gray-200 dark:border-gray-600">
+        <div class="flex justify-between items-center mb-8">
+            <div>
+                <h1 class="text-3xl font-bold mb-2 text-gray-800 dark:text-white">Add New Project</h1>
+                <p class="text-gray-600 dark:text-gray-400">Create a new project for your portfolio</p>
+            </div>
+            <a href="index.php" class="text-gray-600 dark:text-gray-400 hover:underline font-medium px-4 py-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
+                <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
+                </svg>
+                Back to Projects
+            </a>
+        </div>
+        
+        <?= $message ?>
+        
+        <form method="post" enctype="multipart/form-data" class="space-y-6">
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div>
+                    <label class="block font-medium mb-3 text-gray-700 dark:text-gray-300">Title *</label>
+                    <input type="text" name="title" class="w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" required>
+                </div>
+                <div>
+                    <label class="block font-medium mb-3 text-gray-700 dark:text-gray-300">Project URL</label>
+                    <input type="text" name="project_url" class="w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" placeholder="https://example.com">
+                </div>
+            </div>
+            
+            <div>
+                <label class="block font-medium mb-3 text-gray-700 dark:text-gray-300">Short Description</label>
+                <textarea name="description" class="w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" rows="3" placeholder="Brief description of your project"></textarea>
+            </div>
+            
+            <div>
+                <label class="block font-medium mb-3 text-gray-700 dark:text-gray-300">Long Description</label>
+                <textarea name="long_description" class="w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" rows="6" placeholder="Detailed description of your project, technologies used, challenges faced, etc."></textarea>
+            </div>
+            
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div>
+                    <label class="block font-medium mb-3 text-gray-700 dark:text-gray-300">Image Upload</label>
+                    <input type="file" name="image_file" accept="image/*" class="w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors">
+                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">Upload an image file (JPG, PNG, GIF)</p>
+                </div>
+                <div>
+                    <label class="block font-medium mb-3 text-gray-700 dark:text-gray-300">Or Image URL</label>
+                    <input type="text" name="image_url" class="w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" placeholder="assets/myimg.jpg">
+                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">Or provide a URL to an image</p>
+                </div>
+            </div>
+            
+            <div>
+                <label class="block font-medium mb-3 text-gray-700 dark:text-gray-300">Tags</label>
+                <input type="text" name="tags" class="w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" placeholder="HTML, CSS, JavaScript, React">
+                <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">Separate tags with commas (e.g., HTML, CSS, JavaScript)</p>
+            </div>
+            
+            <div class="flex gap-4 pt-4">
+                <button type="submit" class="btn-primary px-8 py-3">
+                    <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+                    </svg>
+                    Add Project
+                </button>
+                <a href="index.php" class="text-gray-600 dark:text-gray-400 hover:underline font-medium px-8 py-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">Cancel</a>
+            </div>
+        </form>
+    </div>
+
+    <!-- Scripts -->
+    <script src="../js/dark-mode.js"></script>
+</body>
+</html> 
--- a/11/portifolio(work_in_progress)/db/index.php
+++ b/11/portifolio(work_in_progress)/db/index.php
@@ -0,0 +1,255 @@
+<?php
+session_start();
+if (!isset($_SESSION['logged_in']) || !$_SESSION['logged_in']) {
+    header('Location: login.php');
+    exit;
+}
+if (isset($_GET['logout'])) {
+    session_destroy();
+    header('Location: login.php');
+    exit;
+}
+require_once '../php/config.php';
+
+// Handle delete
+if (isset($_GET['delete'])) {
+    $id = intval($_GET['delete']);
+    try {
+        $pdo = get_pdo();
+        $pdo->prepare('DELETE FROM projects WHERE id = ?')->execute([$id]);
+        $message = '<div class="bg-green-100 text-green-800 p-3 rounded mb-4">Project deleted.</div>';
+    } catch (Exception $e) {
+        $message = '<div class="bg-red-100 text-red-800 p-3 rounded mb-4">Error: ' . htmlspecialchars($e->getMessage()) . '</div>';
+    }
+}
+
+// Handle update
+if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['edit_id'])) {
+    $id = intval($_POST['edit_id']);
+    $title = $_POST['title'] ?? '';
+    $description = $_POST['description'] ?? '';
+    $long_description = $_POST['long_description'] ?? '';
+    $project_url = $_POST['project_url'] ?? '';
+    $tags = $_POST['tags'] ?? '';
+    $image_url = $_POST['image_url'] ?? '';
+    // Handle image upload
+    if (isset($_FILES['image_file']) && $_FILES['image_file']['error'] === UPLOAD_ERR_OK) {
+        $ext = pathinfo($_FILES['image_file']['name'], PATHINFO_EXTENSION);
+        $filename = uniqid('img_', true) . '.' . strtolower($ext);
+        $target = '/var/www/alvnx.xyz/public_html/assets/' . $filename;
+        if (move_uploaded_file($_FILES['image_file']['tmp_name'], $target)) {
+            $image_url = 'assets/' . $filename;
+        } else {
+            $message = '<div class="bg-red-100 text-red-800 p-3 rounded mb-4">Image upload failed.</div>';
+        }
+    }
+    if (!$message) {
+        try {
+            $pdo = get_pdo();
+            $stmt = $pdo->prepare('UPDATE projects SET title=?, description=?, long_description=?, image_url=?, project_url=?, tags=? WHERE id=?');
+            $stmt->execute([$title, $description, $long_description, $image_url, $project_url, $tags, $id]);
+            $message = '<div class="bg-green-100 text-green-800 p-3 rounded mb-4">Project updated.</div>';
+        } catch (Exception $e) {
+            $message = '<div class="bg-red-100 text-red-800 p-3 rounded mb-4">Error: ' . htmlspecialchars($e->getMessage()) . '</div>';
+        }
+    }
+}
+
+// Fetch all projects
+try {
+    $pdo = get_pdo();
+    $projects = $pdo->query('SELECT * FROM projects ORDER BY created_at DESC')->fetchAll();
+} catch (Exception $e) {
+    $projects = [];
+    $message = '<div class="bg-red-100 text-red-800 p-3 rounded mb-4">Error: ' . htmlspecialchars($e->getMessage()) . '</div>';
+}
+
+// If editing, fetch project
+$edit_project = null;
+if (isset($_GET['edit'])) {
+    $id = intval($_GET['edit']);
+    foreach ($projects as $p) {
+        if ($p['id'] == $id) {
+            $edit_project = $p;
+            break;
+        }
+    }
+}
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Manage Projects</title>
+    
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    
+    <!-- Tailwind CSS CDN -->
+    <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        dark: {
+                            bg: '#0f172a',
+                            card: '#334155',
+                            text: '#f1f5f9'
+                        }
+                    },
+                    fontFamily: {
+                        'sans': ['Inter', 'system-ui', 'sans-serif'],
+                    }
+                }
+            }
+        }
+    </script>
+    
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="../css/styles.css">
+    <link rel="stylesheet" href="../css/animations.css">
+    
+    <!-- Favicon -->
+    <link rel="icon" type="image/svg+xml" href="../assets/favicon.svg">
+</head>
+<body class="min-h-screen transition-colors duration-200">
+    <!-- Back to home button -->
+    <a href="../index.php" class="fixed top-6 left-6 btn-primary inline-flex items-center space-x-2 z-50 animate-bounce-in">
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
+        </svg>
+        <span>Back to Home</span>
+    </a>
+
+    <div class="max-w-7xl mx-auto p-6 relative">
+        <!-- Header -->
+        <div class="flex justify-between items-center mb-8">
+            <div>
+                <h1 class="text-4xl font-bold mb-2 text-gray-800 dark:text-white">Manage Projects</h1>
+                <p class="text-gray-600 dark:text-gray-400">Add, edit, and manage your portfolio projects</p>
+            </div>
+            <div class="flex gap-4">
+                <a href="add_project.php" class="btn-primary inline-flex items-center space-x-2">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+                    </svg>
+                    <span>Add New Project</span>
+                </a>
+                <a href="?logout=1" class="bg-white dark:bg-dark-card text-gray-700 dark:text-gray-300 px-6 py-3 rounded-lg shadow-lg hover:shadow-xl font-medium transition-all duration-200 border border-gray-200 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700">
+                    <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
+                    </svg>
+                    Logout
+                </a>
+            </div>
+        </div>
+
+        <!-- Messages -->
+        <?= $message ?? '' ?>
+
+        <!-- Edit Form -->
+        <?php if ($edit_project): ?>
+            <div class="mb-8 bg-white dark:bg-dark-card p-8 rounded-2xl shadow-xl transition-colors duration-200 border border-gray-200 dark:border-gray-600">
+                <h2 class="text-2xl font-semibold mb-6 text-gray-800 dark:text-white flex items-center">
+                    <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
+                    </svg>
+                    Edit Project
+                </h2>
+                <form method="post" enctype="multipart/form-data" class="space-y-6">
+                    <input type="hidden" name="edit_id" value="<?= $edit_project['id'] ?>">
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        <div>
+                            <label class="block font-medium mb-3 text-gray-700 dark:text-gray-300">Title</label>
+                            <input type="text" name="title" class="w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" value="<?= htmlspecialchars($edit_project['title']) ?>" required>
+                        </div>
+                        <div>
+                            <label class="block font-medium mb-3 text-gray-700 dark:text-gray-300">Project URL</label>
+                            <input type="text" name="project_url" class="w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" value="<?= htmlspecialchars($edit_project['project_url']) ?>">
+                        </div>
+                    </div>
+                    <div>
+                        <label class="block font-medium mb-3 text-gray-700 dark:text-gray-300">Short Description</label>
+                        <textarea name="description" class="w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" rows="2"><?= htmlspecialchars($edit_project['description']) ?></textarea>
+                    </div>
+                    <div>
+                        <label class="block font-medium mb-3 text-gray-700 dark:text-gray-300">Long Description</label>
+                        <textarea name="long_description" class="w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" rows="4"><?= htmlspecialchars($edit_project['long_description'] ?? '') ?></textarea>
+                    </div>
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        <div>
+                            <label class="block font-medium mb-3 text-gray-700 dark:text-gray-300">Current Image</label>
+                            <?php if ($edit_project['image_url']): ?>
+                                <img src="../<?= htmlspecialchars($edit_project['image_url']) ?>" alt="" class="h-32 w-32 object-cover rounded-lg mb-2 border border-gray-200 dark:border-gray-600">
+                            <?php else: ?>
+                                <div class="h-32 w-32 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center border border-gray-200 dark:border-gray-600">
+                                    <span class="text-gray-500 dark:text-gray-400 text-sm">No image</span>
+                                </div>
+                            <?php endif; ?>
+                        </div>
+                        <div>
+                            <label class="block font-medium mb-3 text-gray-700 dark:text-gray-300">Upload New Image</label>
+                            <input type="file" name="image_file" accept="image/*" class="w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors">
+                        </div>
+                    </div>
+                    <div>
+                        <label class="block font-medium mb-3 text-gray-700 dark:text-gray-300">Or Image URL</label>
+                        <input type="text" name="image_url" class="w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" value="<?= htmlspecialchars($edit_project['image_url']) ?>">
+                    </div>
+                    <div>
+                        <label class="block font-medium mb-3 text-gray-700 dark:text-gray-300">Tags</label>
+                        <input type="text" name="tags" class="w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" value="<?= htmlspecialchars($edit_project['tags']) ?>">
+                        <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">Separate tags with commas</p>
+                    </div>
+                    <div class="flex gap-4">
+                        <button type="submit" class="btn-primary px-6 py-3">
+                            <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                            </svg>
+                            Save Changes
+                        </button>
+                        <a href="index.php" class="text-gray-600 dark:text-gray-400 hover:underline font-medium px-6 py-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">Cancel</a>
+                    </div>
+                </form>
+            </div>
+        <?php endif; ?>
+
+        <!-- Projects Grid -->
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+            <?php foreach ($projects as $project): ?>
+                <div class="project-card p-6 transition-all duration-200 hover-lift">
+                    <?php if ($project['image_url']): ?>
+                        <img src="../<?= htmlspecialchars($project['image_url']) ?>" alt="" class="project-image h-48 w-full object-cover rounded-lg mb-4">
+                    <?php endif; ?>
+                    <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-white"><?= htmlspecialchars($project['title']) ?></h3>
+                    <p class="text-gray-700 dark:text-gray-300 mb-4 line-clamp-2"><?= htmlspecialchars($project['description']) ?></p>
+                    <?php if ($project['tags']): ?>
+                        <div class="mb-4 flex flex-wrap gap-2">
+                            <?php foreach (explode(',', $project['tags']) as $tag): ?>
+                                <span class="tag text-xs"><?= htmlspecialchars(trim($tag)) ?></span>
+                            <?php endforeach; ?>
+                        </div>
+                    <?php endif; ?>
+                    <div class="flex justify-between items-center">
+                        <?php if ($project['project_url']): ?>
+                            <a href="<?= htmlspecialchars($project['project_url']) ?>" target="_blank" class="text-blue-600 dark:text-blue-400 hover:underline text-sm font-medium">View Project →</a>
+                        <?php endif; ?>
+                        <div class="flex gap-3">
+                            <a href="?edit=<?= $project['id'] ?>" class="bg-blue-600 dark:bg-blue-700 text-white px-4 py-2 rounded-lg hover:bg-blue-700 dark:hover:bg-blue-800 transition-colors text-sm font-medium">Edit</a>
+                            <a href="?delete=<?= $project['id'] ?>" class="bg-red-600 dark:bg-red-700 text-white px-4 py-2 rounded-lg hover:bg-red-700 dark:hover:bg-red-800 transition-colors text-sm font-medium" onclick="return confirm('Delete this project?');">Delete</a>
+                        </div>
+                    </div>
+                </div>
+            <?php endforeach; ?>
+        </div>
+    </div>
+
+    <!-- Scripts -->
+    <script src="../js/dark-mode.js"></script>
+</body>
+</html> 
--- a/11/portifolio(work_in_progress)/db/login.php
+++ b/11/portifolio(work_in_progress)/db/login.php
@@ -0,0 +1,129 @@
+<?php
+session_start();
+
+// Change these credentials as needed
+$USERNAME = 'admin';
+$PASSWORD = 'password123';
+
+$error = '';
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $user = $_POST['username'] ?? '';
+    $pass = $_POST['password'] ?? '';
+    if ($user === $USERNAME && $pass === $PASSWORD) {
+        $_SESSION['logged_in'] = true;
+        header('Location: index.php');
+        exit;
+    } else {
+        $error = 'Invalid username or password.';
+    }
+}
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login - Manage Projects</title>
+    
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    
+    <!-- Tailwind CSS CDN -->
+    <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        dark: {
+                            bg: '#0f172a',
+                            card: '#334155',
+                            text: '#f1f5f9'
+                        }
+                    },
+                    fontFamily: {
+                        'sans': ['Inter', 'system-ui', 'sans-serif'],
+                    }
+                }
+            }
+        }
+    </script>
+    
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="../css/styles.css">
+    <link rel="stylesheet" href="../css/animations.css">
+    
+    <!-- Favicon -->
+    <link rel="icon" type="image/svg+xml" href="../assets/favicon.svg">
+</head>
+<body class="min-h-screen flex items-center justify-center transition-colors duration-200">
+    <!-- Back to home button -->
+    <a href="../index.php" class="fixed top-6 left-6 btn-primary inline-flex items-center space-x-2 z-50 animate-bounce-in">
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
+        </svg>
+        <span>Back to Home</span>
+    </a>
+
+    <!-- Login form container -->
+    <div class="bg-white dark:bg-dark-card p-8 rounded-2xl shadow-xl w-full max-w-md mx-4 transition-colors duration-200 border border-gray-200 dark:border-gray-600">
+        <div class="text-center mb-8">
+            <h1 class="text-3xl font-bold mb-2 text-gray-800 dark:text-white">Sign In</h1>
+            <p class="text-gray-600 dark:text-gray-400">Access your project management dashboard</p>
+        </div>
+        
+        <?php if ($error): ?>
+            <div class="bg-red-100 dark:bg-red-900/50 text-red-800 dark:text-red-200 p-4 rounded-lg mb-6 border border-red-200 dark:border-red-800 animate-bounce-in">
+                <div class="flex items-center space-x-2">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                    </svg>
+                    <span><?= htmlspecialchars($error) ?></span>
+                </div>
+            </div>
+        <?php endif; ?>
+        
+        <form method="post" class="space-y-6">
+            <div>
+                <label class="block font-medium mb-3 text-gray-700 dark:text-gray-300">Username</label>
+                <div class="relative">
+                    <svg class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
+                    </svg>
+                    <input type="text" name="username" 
+                           class="w-full pl-10 pr-4 py-3 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" 
+                           placeholder="Enter your username" 
+                           required autofocus>
+                </div>
+            </div>
+            
+            <div>
+                <label class="block font-medium mb-3 text-gray-700 dark:text-gray-300">Password</label>
+                <div class="relative">
+                    <svg class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
+                    </svg>
+                    <input type="password" name="password" 
+                           class="w-full pl-10 pr-4 py-3 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" 
+                           placeholder="Enter your password" 
+                           required>
+                </div>
+            </div>
+            
+            <button type="submit" class="btn-primary w-full py-3 text-lg font-semibold">
+                <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path>
+                </svg>
+                Sign In
+            </button>
+        </form>
+
+    </div>
+
+    <!-- Scripts -->
+    <script src="../js/dark-mode.js"></script>
+</body>
+</html> 
--- a/11/portifolio(work_in_progress)/index.php
+++ b/11/portifolio(work_in_progress)/index.php
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="My School Projects Portfolio - A showcase of all my academic work">
+    <title>My School Projects Portfolio</title>
+    
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        dark: {
+                            bg: '#0f172a',
+                            card: '#334155',
+                            text: '#f1f5f9'
+                        }
+                    },
+                    fontFamily: {
+                        'sans': ['Inter', 'system-ui', 'sans-serif'],
+                    },
+                    animation: {
+                        'fade-in': 'fadeIn 0.5s ease-in-out',
+                        'slide-up': 'slideUp 0.6s ease-out',
+                        'bounce-in': 'bounceIn 0.8s ease-out',
+                    }
+                }
+            }
+        }
+    </script>
+    
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="css/styles.css">
+    <link rel="stylesheet" href="css/animations.css">
+    
+    <!-- Favicon -->
+    <link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
+    
+    <!-- Prevent source map errors -->
+    <script>
+        window.addEventListener('error', function(e) {
+            if (e.filename && e.filename.includes('source-map')) {
+                e.preventDefault();
+            }
+        });
+    </script>
+</head>
+<body class="min-h-screen transition-colors duration-200">
+    <!-- Enhanced header with gradient and animations -->
+    <header class="relative overflow-hidden mb-8 shadow-lg bg-gradient-to-r from-blue-600 to-indigo-700">
+        <div class="relative z-10 p-8 text-white">
+            <div class="container mx-auto">
+                <div class="flex justify-between items-start">
+                    <div class="flex-1">
+                        <h1 class="text-5xl md:text-6xl font-extrabold mb-3 leading-tight animate-slide-up text-white">
+                            My School Projects Portfolio
+                        </h1>
+                        <p class="text-xl text-blue-100 dark:text-blue-200 mb-6 leading-relaxed animate-slide-up" style="animation-delay: 0.2s;">
+                            A showcase of all my school projects, loaded from a database.
+                        </p>
+                        <div class="flex items-center space-x-4 animate-slide-up" style="animation-delay: 0.4s;">
+                            <div class="flex items-center space-x-2 text-blue-100">
+                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                                </svg>
+                                <span class="text-sm">Dynamic content</span>
+                            </div>
+                            <div class="flex items-center space-x-2 text-blue-100">
+                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zM21 5a2 2 0 00-2-2h-4a2 2 0 00-2 2v12a4 4 0 004 4h4a2 2 0 002-2V5z"></path>
+                                </svg>
+                                <span class="text-sm">Responsive design</span>
+                            </div>
+                        </div>
+                    </div>
+                    <a href="db/login.php" class="btn-primary hidden md:inline-flex items-center space-x-2 animate-bounce-in" style="animation-delay: 0.6s;">
+                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                        </svg>
+                        <span>Manage</span>
+                    </a>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Mobile manage button -->
+        <div class="md:hidden absolute top-4 right-4 z-20">
+            <a href="db/login.php" class="btn-primary text-sm px-4 py-2">
+                Manage
+            </a>
+        </div>
+    </header>
+
+    <!-- Main content -->
+    <main class="container mx-auto px-4 pb-20">
+        <!-- Projects grid with enhanced styling -->
+        <div id="projects" class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 stagger-animation"></div>
+    </main>
+
+    <!-- Enhanced footer -->
+    <footer class="bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 mt-20">
+        <div class="container mx-auto px-4 py-8">
+            <div class="text-center text-gray-600 dark:text-gray-400">
+                <p>&copy; 2025 School Projects Portfolio. Built with modern web technologies.</p>
+                <!--<div class="mt-4 flex justify-center space-x-6">
+                    <a href="php/test_db.php" class="text-sm text-blue-600 dark:text-blue-400 hover:underline transition-colors">Test DB Connection</a>
+                    <a href="php/phpinfo.php" class="text-sm text-blue-600 dark:text-blue-400 hover:underline transition-colors">PHP Info</a>
+                </div>-->
+            </div>
+        </div>
+    </footer>
+
+    <!-- Scripts -->
+    <script src="js/main.js"></script>
+    <script src="js/dark-mode.js"></script>
+    
+    <!-- Ensure dark mode works -->
+    <script>
+        // Force dark mode initialization
+        setTimeout(() => {
+            if (typeof initDarkMode === 'function') {
+                initDarkMode();
+            } else {
+                console.error('initDarkMode function not found');
+            }
+        }, 500);
+    </script>
+</body>
+</html> 
--- a/11/portifolio(work_in_progress)/js/dark-mode.js
+++ b/11/portifolio(work_in_progress)/js/dark-mode.js
@@ -0,0 +1,143 @@
+// Dark mode functionality with enhanced animations
+function initDarkMode() {
+    
+    // Check for saved theme preference or use system preference
+    const savedTheme = localStorage.getItem('theme');
+    const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    
+    if (savedTheme === 'dark' || (!savedTheme && systemPrefersDark)) {
+        document.documentElement.classList.add('dark');
+    } else {
+
+    }
+
+    // Remove existing toggle button if it exists
+    const existingButton = document.getElementById('theme-toggle');
+    if (existingButton) {
+        existingButton.remove();
+    }
+
+    // Create and add the theme toggle button with fallback styling
+    const toggleButton = document.createElement('button');
+    toggleButton.id = 'theme-toggle';
+    toggleButton.setAttribute('aria-label', 'Toggle dark mode');
+    
+    // Use inline styles as fallback
+    const isDark = document.documentElement.classList.contains('dark');
+    toggleButton.style.cssText = `
+        position: fixed;
+        bottom: 1rem;
+        left: 1rem;
+        z-index: 9999;
+        background: ${isDark ? '#334155' : '#ffffff'};
+        border: 2px solid ${isDark ? '#475569' : '#e2e8f0'};
+        border-radius: 50%;
+        padding: 0.75rem;
+        box-shadow: 0 4px 12px ${isDark ? 'rgba(0,0,0,0.3)' : 'rgba(0,0,0,0.1)'};
+        transition: all 0.3s ease;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 3rem;
+        height: 3rem;
+    `;
+    
+    toggleButton.innerHTML = `
+        <svg class="w-6 h-6 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="color: ${isDark ? '#f1f5f9' : '#1e293b'}">
+            <path class="sun-icon" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+            <path class="moon-icon" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" style="display: ${isDark ? 'block' : 'none'}" />
+        </svg>
+    `;
+    
+    document.body.appendChild(toggleButton);
+
+    // Add click handler with enhanced animation
+    toggleButton.addEventListener('click', () => {
+        
+        // Add click animation
+        toggleButton.style.transform = 'scale(0.9)';
+        setTimeout(() => {
+            toggleButton.style.transform = '';
+        }, 150);
+
+        // Toggle theme
+        const newIsDark = document.documentElement.classList.toggle('dark');
+        localStorage.setItem('theme', newIsDark ? 'dark' : 'light');
+        
+        // Update button styles
+        toggleButton.style.background = newIsDark ? '#334155' : '#ffffff';
+        toggleButton.style.borderColor = newIsDark ? '#475569' : '#e2e8f0';
+        toggleButton.style.boxShadow = newIsDark ? '0 4px 12px rgba(0,0,0,0.3)' : '0 4px 12px rgba(0,0,0,0.1)';
+        
+        const svg = toggleButton.querySelector('svg');
+        svg.style.color = newIsDark ? '#f1f5f9' : '#1e293b';
+        
+        const sunIcon = toggleButton.querySelector('.sun-icon');
+        const moonIcon = toggleButton.querySelector('.moon-icon');
+        
+        if (newIsDark) {
+            sunIcon.style.display = 'none';
+            moonIcon.style.display = 'block';
+        } else {
+            sunIcon.style.display = 'block';
+            moonIcon.style.display = 'none';
+        }
+        
+        // Add theme transition effect
+        addThemeTransitionEffect();
+    });
+
+    // Listen for system theme changes
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+        if (!localStorage.getItem('theme')) {
+            if (e.matches) {
+                document.documentElement.classList.add('dark');
+            } else {
+                document.documentElement.classList.remove('dark');
+            }
+        }
+    });
+}
+
+function addThemeTransitionEffect() {
+    // Create a temporary overlay for smooth transition
+    const overlay = document.createElement('div');
+    overlay.style.cssText = `
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: ${document.documentElement.classList.contains('dark') ? '#0f172a' : '#ffffff'};
+        z-index: 9998;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.3s ease;
+    `;
+    document.body.appendChild(overlay);
+
+    // Fade in and out
+    requestAnimationFrame(() => {
+        overlay.style.opacity = '0.1';
+        setTimeout(() => {
+            overlay.style.opacity = '0';
+            setTimeout(() => {
+                if (document.body.contains(overlay)) {
+                    document.body.removeChild(overlay);
+                }
+            }, 300);
+        }, 150);
+    });
+}
+
+// Initialize dark mode when the DOM is loaded
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initDarkMode);
+} else {
+    // DOM is already loaded
+    initDarkMode();
+}
+
+// Also try to initialize after a short delay to ensure everything is ready
+setTimeout(initDarkMode, 100); 
--- a/11/portifolio(work_in_progress)/js/main.js
+++ b/11/portifolio(work_in_progress)/js/main.js
@@ -0,0 +1,188 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const container = document.getElementById('projects');
+    
+    // Add loading state with enhanced spinner
+    container.innerHTML = '<div class="col-span-full text-center p-8"><div class="spinner mx-auto mb-4"></div><p class="text-gray-500 dark:text-gray-400">Loading projects...</p></div>';
+    
+    // Create modal element with enhanced styling
+    const modal = document.createElement('div');
+    modal.className = 'modal-overlay fixed inset-0 hidden items-center justify-center z-50 transition-opacity duration-300';
+    modal.innerHTML = `
+        <div class="modal-content max-w-4xl w-full mx-4 max-h-[90vh] overflow-y-auto transform transition-all duration-300 scale-95 opacity-0">
+            <div class="p-8">
+                <div class="flex justify-between items-start mb-6">
+                    <h2 class="text-3xl font-bold"></h2>
+                    <button class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700" onclick="closeModal()">
+                        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                        </svg>
+                    </button>
+                </div>
+                <div class="modal-content">
+                    <div class="modal-image mb-6"></div>
+                    <div class="modal-description text-gray-700 dark:text-gray-300 mb-6 text-lg"></div>
+                    <div class="modal-tags mb-6"></div>
+                    <div class="modal-links"></div>
+                </div>
+            </div>
+        </div>
+    `;
+    document.body.appendChild(modal);
+
+    // Add modal functions to window
+    window.openModal = (project) => {
+        const modalTitle = modal.querySelector('h2');
+        const modalImage = modal.querySelector('.modal-image');
+        const modalDescription = modal.querySelector('.modal-description');
+        const modalTags = modal.querySelector('.modal-tags');
+        const modalLinks = modal.querySelector('.modal-links');
+        const modalContent = modal.querySelector('.modal-content');
+
+        modalTitle.textContent = project.title;
+        
+        if (project.image_url) {
+            modalImage.innerHTML = `<img src="${project.image_url}" alt="${project.title}" class="project-image w-full h-96 object-cover shadow-lg">`;
+        } else {
+            modalImage.innerHTML = '<div class="w-full h-96 bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900 dark:to-purple-900 rounded-lg flex items-center justify-center"><svg class="w-24 h-24 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg></div>';
+        }
+
+        modalDescription.innerHTML = `
+            <p class="text-lg mb-4 leading-relaxed">${project.description || ''}</p>
+            ${project.long_description ? `<p class="mt-6 leading-relaxed text-gray-600 dark:text-gray-400">${project.long_description}</p>` : ''}
+        `;
+
+        if (project.tags) {
+            modalTags.innerHTML = `
+                <div class="flex flex-wrap gap-2">
+                    ${project.tags.split(',').map(tag => 
+                        `<span class="tag">${tag.trim()}</span>`
+                    ).join('')}
+                </div>
+            `;
+        } else {
+            modalTags.innerHTML = '';
+        }
+
+        modalLinks.innerHTML = project.project_url ? 
+            `<a href="${project.project_url}" target="_blank" class="btn-primary inline-block">View Project →</a>` : '';
+
+        // Show modal with animation
+        modal.classList.remove('hidden');
+        modal.classList.add('flex');
+        document.body.style.overflow = 'hidden';
+        
+        // Trigger animation
+        requestAnimationFrame(() => {
+            modalContent.classList.remove('scale-95', 'opacity-0');
+            modalContent.classList.add('scale-100', 'opacity-100');
+        });
+    };
+
+    window.closeModal = () => {
+        const modalContent = modal.querySelector('.modal-content');
+        
+        // Start closing animation
+        modalContent.classList.remove('scale-100', 'opacity-100');
+        modalContent.classList.add('scale-95', 'opacity-0');
+        
+        // Wait for animation to finish before hiding
+        setTimeout(() => {
+            modal.classList.add('hidden');
+            modal.classList.remove('flex');
+            document.body.style.overflow = '';
+        }, 300);
+    };
+
+    // Close modal when clicking outside
+    modal.addEventListener('click', (e) => {
+        if (e.target === modal) {
+            closeModal();
+        }
+    });
+
+    // Close modal with Escape key
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
+            closeModal();
+        }
+    });
+    
+    // Enhanced project fetching with error handling
+    fetch('php/get_projects.php')
+        .then(res => {
+            if (!res.ok) {
+                throw new Error(`HTTP error! status: ${res.status}`);
+            }
+            return res.json();
+        })
+        .then(projects => {
+            if (!Array.isArray(projects) || projects.length === 0) {
+                container.innerHTML = `
+                    <div class="col-span-full text-center p-8">
+                        <div class="w-24 h-24 mx-auto mb-4 text-gray-400">
+                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+                            </svg>
+                        </div>
+                        <p class="text-gray-500 dark:text-gray-400 text-lg">No projects found.</p>
+                        <p class="text-sm text-gray-400 dark:text-gray-500 mt-2">Projects will appear here once added.</p>
+                    </div>`;
+                return;
+            }
+            
+            container.innerHTML = '';
+            
+            // Add projects with CSS animations
+            projects.forEach((project) => {
+                const card = document.createElement('div');
+                card.className = 'project-card p-5 flex flex-col cursor-pointer hover-lift';
+                
+                card.onclick = () => openModal(project);
+                
+                if (project.image_url) {
+                    card.innerHTML += `<img src="${project.image_url}" alt="${project.title}" class="project-image mb-4 h-40 object-cover w-full">`;
+                } else {
+                    card.innerHTML += `<div class="project-image mb-4 h-40 bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900 dark:to-purple-900 rounded-lg flex items-center justify-center"><svg class="w-16 h-16 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg></div>`;
+                }
+                
+                card.innerHTML += `
+                    <h2 class="text-xl font-semibold mb-2">${project.title}</h2>
+                    <p class="text-gray-700 dark:text-gray-300 mb-3 flex-grow">${project.description || ''}</p>
+                    ${project.tags ? `<div class="mb-3 flex flex-wrap gap-1">${project.tags.split(',').map(tag => `<span class="tag text-xs">${tag.trim()}</span>`).join('')}</div>` : ''}
+                    ${project.project_url ? `<a href="${project.project_url}" target="_blank" class="mt-auto inline-block text-blue-600 dark:text-blue-400 hover:underline font-medium transition-colors" onclick="event.stopPropagation()">View Project →</a>` : ''}
+                `;
+                
+                container.appendChild(card);
+            });
+        })
+        .catch(err => {
+            console.error('Error fetching projects:', err);
+            container.innerHTML = `
+                <div class="col-span-full text-center p-8">
+                    <div class="w-24 h-24 mx-auto mb-4 text-red-400">
+                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                        </svg>
+                    </div>
+                    <p class="text-red-500 dark:text-red-400 mb-2 text-lg">Failed to load projects.</p>
+                    <p class="text-sm text-gray-500 dark:text-gray-400">Error: ${err.message}</p>
+                    <button onclick="location.reload()" class="btn-primary mt-4">Try Again</button>
+                </div>`;
+        });
+});
+
+// Add fadeInUp animation
+const style = document.createElement('style');
+style.textContent = `
+    @keyframes fadeInUp {
+        from {
+            opacity: 0;
+            transform: translateY(20px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+`;
+document.head.appendChild(style); 
--- a/11/portifolio(work_in_progress)/php/config.php
+++ b/11/portifolio(work_in_progress)/php/config.php
@@ -0,0 +1,18 @@
+<?php
+// config.php
+$host = '100.125.62.25'; // Change if your MySQL server is elsewhere
+$db   = 'portfolio'; // Change to your database name
+$user = 'portifolio'; // Change to your MySQL username
+$pass = 'S](L8WpeW_(EGyBP'; // Change to your MySQL password
+$charset = 'utf8mb4';
+
+$dsn = "mysql:host=$host;dbname=$db;charset=$charset";
+$options = [
+    PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION,
+    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
+    PDO::ATTR_EMULATE_PREPARES   => false,
+];
+function get_pdo() {
+    global $dsn, $user, $pass, $options;
+    return new PDO($dsn, $user, $pass, $options);
+} 
--- a/11/portifolio(work_in_progress)/php/get_projects.php
+++ b/11/portifolio(work_in_progress)/php/get_projects.php
@@ -0,0 +1,21 @@
+<?php
+// Enable error reporting
+error_reporting(E_ALL);
+ini_set('display_errors', 1);
+
+// Add CORS headers
+header('Access-Control-Allow-Origin: *');
+header('Access-Control-Allow-Methods: GET');
+header('Content-Type: application/json');
+
+require_once 'config.php';
+
+try {
+    $pdo = get_pdo();
+    $stmt = $pdo->query('SELECT id, title, description, long_description, image_url, project_url, tags, created_at FROM projects ORDER BY created_at DESC');
+    $projects = $stmt->fetchAll(PDO::FETCH_ASSOC);
+    echo json_encode($projects);
+} catch (Exception $e) {
+    http_response_code(500);
+    echo json_encode(['error' => $e->getMessage()]);
+} 
--- a/11/portifolio(work_in_progress)/php/phpinfo.php
+++ b/11/portifolio(work_in_progress)/php/phpinfo.php
@@ -0,0 +1 @@
+<?php phpinfo();
--- a/11/portifolio(work_in_progress)/php/test_db.php
+++ b/11/portifolio(work_in_progress)/php/test_db.php
@@ -0,0 +1,17 @@
+<?php
+error_reporting(E_ALL);
+ini_set('display_errors', 1);
+
+require_once 'config.php';
+
+try {
+    $pdo = get_pdo();
+    echo "Database connection successful!<br>";
+    
+    // Test query
+    $stmt = $pdo->query('SELECT COUNT(*) as count FROM projects');
+    $result = $stmt->fetch();
+    echo "Number of projects in database: " . $result['count'];
+} catch (Exception $e) {
+    echo "Error: " . $e->getMessage();
+} 
--- a/11/portifolio(work_in_progress)/robots.txt
+++ b/11/portifolio(work_in_progress)/robots.txt
@@ -0,0 +1,160 @@
+# Allow all well-behaved bots
+User-agent: *
+Disallow:
+
+# Block specific bots
+User-agent: AI2Bot
+Disallow: /db
+
+User-agent: Ai2Bot-Dolma
+Disallow: /db
+
+User-agent: aiHitBot
+Disallow: /db
+
+User-agent: Amazonbot
+Disallow: /db
+
+User-agent: anthropic-ai
+Disallow: /db
+
+User-agent: Applebot
+Disallow: /db
+
+User-agent: Applebot-Extended
+Disallow: /db
+
+User-agent: Brightbot 1.0
+Disallow: /db
+
+User-agent: Bytespider
+Disallow: /db
+
+User-agent: CCBot
+Disallow: /db
+
+User-agent: ChatGPT-User
+Disallow: /db
+
+User-agent: Claude-Web
+Disallow: /db
+
+User-agent: ClaudeBot
+Disallow: /db
+
+User-agent: cohere-ai
+Disallow: /db
+
+User-agent: cohere-training-data-crawler
+Disallow: /db
+
+User-agent: Cotoyogi
+Disallow: /db
+
+User-agent: Crawlspace
+Disallow: /db
+
+User-agent: Diffbot
+Disallow: /db
+
+User-agent: DuckAssistBot
+Disallow: /db
+
+User-agent: FacebookBot
+Disallow: /db
+
+User-agent: Factset_spyderbot
+Disallow: /db
+
+User-agent: FirecrawlAgent
+Disallow: /db
+
+User-agent: FriendlyCrawler
+Disallow: /db
+
+User-agent: GPTBot
+Disallow: /db
+
+User-agent: iaskspider/2.0
+Disallow: /db
+
+User-agent: ICC-Crawler
+Disallow: /db
+
+User-agent: ImagesiftBot
+Disallow: /db
+
+User-agent: img2dataset
+Disallow: /db
+
+User-agent: imgproxy
+Disallow: /db
+
+User-agent: ISSCyberRiskCrawler
+Disallow: /db
+
+User-agent: Kangaroo Bot
+Disallow: /db
+
+User-agent: Meta-ExternalAgent
+Disallow: /db
+
+User-agent: Meta-ExternalFetcher
+Disallow: /db
+
+User-agent: NovaAct
+Disallow: /db
+
+User-agent: OAI-SearchBot
+Disallow: /db
+
+User-agent: omgili
+Disallow: /db
+
+User-agent: omgilibot
+Disallow: /db
+
+User-agent: Operator
+Disallow: /db
+
+User-agent: PanguBot
+Disallow: /db
+
+User-agent: Perplexity-User
+Disallow: /db
+
+User-agent: PerplexityBot
+Disallow: /db
+
+User-agent: PetalBot
+Disallow: /db
+
+User-agent: Scrapy
+Disallow: /db
+
+User-agent: SemrushBot-OCOB
+Disallow: /db
+
+User-agent: SemrushBot-SWA
+Disallow: /db
+
+User-agent: Sidetrade indexer bot
+Disallow: /db
+
+User-agent: TikTokSpider
+Disallow: /db
+
+User-agent: Timpibot
+Disallow: /db
+
+User-agent: VelenPublicWebCrawler
+Disallow: /db
+
+User-agent: Webzio-Extended
+Disallow: /db
+
+User-agent: YouBot
+Disallow: /db
+
+# Sitemap location
+Sitemap: https://alvnx.xyz/sitemap.xml