Add 2 files

index.html

@@ -7,98 +7,223 @@
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
+        /* Apple-style gradient background */
+        body {
+            background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+        }
+        
+        /* Apple-style navbar */
+        .apple-navbar {
+            backdrop-filter: saturate(180%) blur(20px);
+            background-color: rgba(255, 255, 255, 0.8);
+            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        }
+        
+        /* Apple-style cards */
         .project-card {
-            transition: all 0.3s ease;
+            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
             transform: translateY(0);
+            border-radius: 18px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+            border: 1px solid rgba(0, 0, 0, 0.05);
+            overflow: hidden;
         }
         .project-card:hover {
             transform: translateY(-5px);
-            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
         }
+        
+        /* Apple-style tags */
         .tag {
             transition: all 0.2s ease;
+            border-radius: 12px;
+            font-size: 12px;
+            font-weight: 500;
         }
         .tag:hover {
             transform: scale(1.05);
         }
+        
+        /* Status badges */
         .status-badge.completed {
-            background-color: rgba(16, 185, 129, 0.2);
-            color: rgb(16, 185, 129);
+            background-color: rgba(52, 199, 89, 0.2);
+            color: rgb(52, 199, 89);
         }
         .status-badge.in-progress {
-            background-color: rgba(245, 158, 11, 0.2);
-            color: rgb(245, 158, 11);
+            background-color: rgba(255, 149, 0, 0.2);
+            color: rgb(255, 149, 0);
         }
         .status-badge.planned {
-            background-color: rgba(59, 130, 246, 0.2);
-            color: rgb(59, 130, 246);
+            background-color: rgba(0, 122, 255, 0.2);
+            color: rgb(0, 122, 255);
         }
         .status-badge.on-hold {
-            background-color: rgba(239, 68, 68, 0.2);
-            color: rgb(239, 68, 68);
+            background-color: rgba(255, 59, 48, 0.2);
+            color: rgb(255, 59, 48);
         }
+        
+        /* Animations */
         .fade-in {
-            animation: fadeIn 0.5s ease-in-out;
+            animation: fadeIn 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
         }
         @keyframes fadeIn {
             from { opacity: 0; transform: translateY(10px); }
             to { opacity: 1; transform: translateY(0); }
         }
+        
+        /* Apple-style modal */
         .modal-overlay {
             background-color: rgba(0, 0, 0, 0.5);
-            backdrop-filter: blur(4px);
+            backdrop-filter: blur(10px);
+        }
+        .modal-content {
+            border-radius: 20px;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        
+        /* Apple-style inputs */
+        .form-input {
+            border-radius: 12px;
+            border: 1px solid rgba(0, 0, 0, 0.1);
+            transition: all 0.2s ease;
         }
         .form-input:focus {
-            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
+            box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
+            border-color: rgba(0, 122, 255, 0.5);
+        }
+        
+        /* Apple-style buttons */
+        .apple-btn {
+            border-radius: 12px;
+            font-weight: 500;
+            transition: all 0.2s ease;
+        }
+        .apple-btn-primary {
+            background-color: #007AFF;
+            color: white;
+        }
+        .apple-btn-primary:hover {
+            background-color: #0066CC;
+        }
+        .apple-btn-secondary {
+            background-color: rgba(0, 0, 0, 0.05);
+            color: #007AFF;
+        }
+        .apple-btn-secondary:hover {
+            background-color: rgba(0, 0, 0, 0.1);
         }
-        .card-expand {
-            transition: all 0.3s ease;
+        .apple-btn-destructive {
+            background-color: #FF3B30;
+            color: white;
+        }
+        .apple-btn-destructive:hover {
+            background-color: #E60000;
+        }
+        
+        /* Typewriter effect */
+        .typewriter {
+            overflow: hidden;
+            border-right: 2px solid #007AFF;
+            white-space: nowrap;
+            margin: 0 auto;
+            letter-spacing: 0.05em;
+            animation: 
+                typing 1.5s steps(30, end),
+                blink-caret 0.75s step-end infinite;
         }
-        .card-expand:hover {
-            transform: scale(1.02);
+        
+        @keyframes typing {
+            from { width: 0 }
+            to { width: 100% }
         }
+        
+        @keyframes blink-caret {
+            from, to { border-color: transparent }
+            50% { border-color: #007AFF }
+        }
+        
+        /* Apple-style filter tags */
         .filter-tag {
             transition: all 0.2s ease;
+            border-radius: 12px;
+            font-weight: 500;
+            font-size: 14px;
         }
         .filter-tag:hover {
             transform: scale(1.05);
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
         }
         .filter-tag.active {
-            background-color: #6366f1;
+            background-color: #007AFF;
             color: white;
         }
+        
+        /* Apple-style slide in animation */
         .slide-in {
-            animation: slideIn 0.3s ease-out forwards;
+            animation: slideIn 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
         }
         @keyframes slideIn {
             from { transform: translateY(20px); opacity: 0; }
             to { transform: translateY(0); opacity: 1; }
         }
+        
+        /* Apple-style select */
+        select {
+            appearance: none;
+            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+            background-repeat: no-repeat;
+            background-position: right 0.75rem center;
+            background-size: 1em;
+        }
     </style>
 </head>
-<body class="bg-gray-50 min-h-screen">
-    <div class="container mx-auto px-4 py-12">
-        <!-- Header -->
+<body class="min-h-screen">
+    <!-- Apple-style navbar -->
+    <nav class="apple-navbar fixed top-0 left-0 right-0 z-50 py-3 px-6">
+        <div class="container mx-auto flex justify-between items-center">
+            <div class="flex items-center space-x-6">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-gray-800">
+                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+                    <polyline points="14 2 14 8 20 8"></polyline>
+                    <line x1="16" y1="13" x2="8" y2="13"></line>
+                    <line x1="16" y1="17" x2="8" y2="17"></line>
+                    <polyline points="10 9 9 9 8 9"></polyline>
+                </svg>
+                <span class="text-gray-800 font-medium">Project Dashboard</span>
+            </div>
+            <div>
+                <button id="addProjectBtn" class="apple-btn apple-btn-primary px-4 py-2 flex items-center">
+                    <i class="fas fa-plus mr-2"></i> New Project
+                </button>
+            </div>
+        </div>
+    </nav>
+
+    <div class="container mx-auto px-4 pt-24 pb-12">
+        <!-- Header with typewriter effect -->
         <div class="text-center mb-12">
-            <h1 class="text-4xl font-bold text-gray-800 mb-2">Project Dashboard</h1>
-            <p class="text-lg text-gray-600 max-w-2xl mx-auto">Track and manage all your projects in one place</p>
+            <h1 class="text-4xl font-bold text-gray-900 mb-2">
+                <span class="typewriter">Manage Your Projects</span>
+            </h1>
+            <p class="text-lg text-gray-600 max-w-2xl mx-auto">Track and organize all your development projects in one place</p>
             
             <!-- Filter Controls -->
             <div class="flex flex-wrap justify-center gap-3 mt-6">
-                <button onclick="filterProjects('all')" class="filter-tag px-4 py-2 bg-indigo-600 text-white rounded-full hover:bg-indigo-700 transition active">
+                <button onclick="filterProjects('all')" class="filter-tag px-4 py-2 apple-btn-primary active">
                     All Projects
                 </button>
-                <button onclick="filterProjects('completed')" class="filter-tag px-4 py-2 border border-gray-300 rounded-full hover:bg-gray-100 transition">
+                <button onclick="filterProjects('completed')" class="filter-tag px-4 py-2 apple-btn-secondary">
                     Completed
                 </button>
-                <button onclick="filterProjects('in-progress')" class="filter-tag px-4 py-2 border border-gray-300 rounded-full hover:bg-gray-100 transition">
+                <button onclick="filterProjects('in-progress')" class="filter-tag px-4 py-2 apple-btn-secondary">
                     In Progress
                 </button>
-                <button onclick="filterProjects('planned')" class="filter-tag px-4 py-2 border border-gray-300 rounded-full hover:bg-gray-100 transition">
+                <button onclick="filterProjects('planned')" class="filter-tag px-4 py-2 apple-btn-secondary">
                     Planned
                 </button>
-                <button onclick="filterProjects('on-hold')" class="filter-tag px-4 py-2 border border-gray-300 rounded-full hover:bg-gray-100 transition">
+                <button onclick="filterProjects('on-hold')" class="filter-tag px-4 py-2 apple-btn-secondary">
                     On Hold
                 </button>
             </div>
@@ -106,7 +231,7 @@
             <!-- Technology Filter -->
             <div class="mt-6">
                 <label for="technologyFilter" class="block text-sm font-medium text-gray-700 mb-2">Filter by Technology:</label>
-                <select id="technologyFilter" onchange="filterByTechnology()" class="border border-gray-300 rounded-lg py-2 px-3 focus:outline-none focus:border-indigo-500">
+                <select id="technologyFilter" onchange="filterByTechnology()" class="border border-gray-200 rounded-lg py-2 px-3 focus:outline-none focus:border-blue-500 bg-white w-64">
                     <option value="all">All Technologies</option>
                     <!-- Options will be populated dynamically -->
                 </select>
@@ -114,7 +239,7 @@
         </div>
 
         <!-- Projects Grid -->
-        <div id="projectsContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+        <div id="projectsContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
             <!-- Project cards will be inserted here dynamically -->
         </div>
 
@@ -124,25 +249,18 @@
                 <i class="fas fa-folder-open text-5xl text-gray-300 mb-4"></i>
                 <h3 class="text-xl font-medium text-gray-700 mb-2">No projects found</h3>
                 <p class="text-gray-500 mb-4">Add a new project or adjust your filters</p>
-                <button id="addProjectBtnEmpty" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-full inline-flex items-center transition">
+                <button id="addProjectBtnEmpty" class="apple-btn apple-btn-primary px-6 py-2 inline-flex items-center">
                     <i class="fas fa-plus mr-2"></i> Add Project
                 </button>
             </div>
         </div>
-
-        <!-- Add Project Button -->
-        <div class="fixed bottom-8 right-8">
-            <button id="addProjectBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white w-14 h-14 rounded-full flex items-center justify-center shadow-lg transition transform hover:scale-110">
-                <i class="fas fa-plus text-xl"></i>
-            </button>
-        </div>
     </div>
 
     <!-- Add/Edit Project Modal -->
     <div id="projectModal" class="fixed inset-0 z-50 hidden">
         <div class="modal-overlay absolute inset-0"></div>
-        <div class="flex items-center justify-center min-h-screen">
-            <div class="bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto m-4 card-expand slide-in">
+        <div class="flex items-center justify-center min-h-screen p-4">
+            <div class="modal-content bg-white rounded-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto m-4 slide-in">
                 <div class="p-6">
                     <div class="flex justify-between items-center mb-4">
                         <h3 id="modalTitle" class="text-xl font-bold text-gray-800">Add New Project</h3>
@@ -157,12 +275,12 @@
                         <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                             <div>
                                 <label for="projectName" class="block text-sm font-medium text-gray-700 mb-1">Project Name *</label>
-                                <input type="text" id="projectName" required class="w-full border border-gray-300 rounded-lg py-2 px-3 form-input focus:outline-none focus:border-indigo-500">
+                                <input type="text" id="projectName" required class="w-full form-input py-2 px-3">
                             </div>
                             
                             <div>
                                 <label for="projectStatus" class="block text-sm font-medium text-gray-700 mb-1">Status *</label>
-                                <select id="projectStatus" required class="w-full border border-gray-300 rounded-lg py-2 px-3 focus:outline-none focus:border-indigo-500">
+                                <select id="projectStatus" required class="w-full form-input py-2 px-3">
                                     <option value="planned">Planned</option>
                                     <option value="in-progress">In Progress</option>
                                     <option value="completed">Completed</option>
@@ -173,58 +291,58 @@
                         
                         <div>
                             <label for="projectImage" class="block text-sm font-medium text-gray-700 mb-1">Image URL</label>
-                            <input type="url" id="projectImage" class="w-full border border-gray-300 rounded-lg py-2 px-3 form-input focus:outline-none focus:border-indigo-500">
+                            <input type="url" id="projectImage" class="w-full form-input py-2 px-3">
                         </div>
                         
                         <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                             <div>
                                 <label for="projectDateRange" class="block text-sm font-medium text-gray-700 mb-1">Date Range</label>
-                                <input type="text" id="projectDateRange" placeholder="e.g. Jan 2023 - Mar 2023" class="w-full border border-gray-300 rounded-lg py-2 px-3 form-input focus:outline-none focus:border-indigo-500">
+                                <input type="text" id="projectDateRange" placeholder="e.g. Jan 2023 - Mar 2023" class="w-full form-input py-2 px-3">
                             </div>
                             
                             <div>
                                 <label for="projectTechnologies" class="block text-sm font-medium text-gray-700 mb-1">Technologies (comma separated) *</label>
-                                <input type="text" id="projectTechnologies" required placeholder="e.g. React, Node.js, MongoDB" class="w-full border border-gray-300 rounded-lg py-2 px-3 form-input focus:outline-none focus:border-indigo-500">
+                                <input type="text" id="projectTechnologies" required placeholder="e.g. React, Node.js, MongoDB" class="w-full form-input py-2 px-3">
                             </div>
                         </div>
                         
                         <div>
                             <label for="projectDescription" class="block text-sm font-medium text-gray-700 mb-1">Description *</label>
-                            <textarea id="projectDescription" rows="3" required class="w-full border border-gray-300 rounded-lg py-2 px-3 form-input focus:outline-none focus:border-indigo-500"></textarea>
+                            <textarea id="projectDescription" rows="3" required class="w-full form-input py-2 px-3"></textarea>
                         </div>
                         
                         <div>
                             <label for="projectTags" class="block text-sm font-medium text-gray-700 mb-1">Tags (comma separated)</label>
-                            <input type="text" id="projectTags" placeholder="e.g. web, mobile, api" class="w-full border border-gray-300 rounded-lg py-2 px-3 form-input focus:outline-none focus:border-indigo-500">
+                            <input type="text" id="projectTags" placeholder="e.g. web, mobile, api" class="w-full form-input py-2 px-3">
                         </div>
                         
                         <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                             <div>
                                 <label for="projectGithub" class="block text-sm font-medium text-gray-700 mb-1">GitHub Link</label>
-                                <input type="url" id="projectGithub" class="w-full border border-gray-300 rounded-lg py-2 px-3 form-input focus:outline-none focus:border-indigo-500">
+                                <input type="url" id="projectGithub" class="w-full form-input py-2 px-3">
                             </div>
                             
                             <div>
                                 <label for="projectDemo" class="block text-sm font-medium text-gray-700 mb-1">Demo Link</label>
-                                <input type="url" id="projectDemo" class="w-full border border-gray-300 rounded-lg py-2 px-3 form-input focus:outline-none focus:border-indigo-500">
+                                <input type="url" id="projectDemo" class="w-full form-input py-2 px-3">
                             </div>
                             
                             <div>
                                 <label for="projectReadme" class="block text-sm font-medium text-gray-700 mb-1">README Link</label>
-                                <input type="url" id="projectReadme" class="w-full border border-gray-300 rounded-lg py-2 px-3 form-input focus:outline-none focus:border-indigo-500">
+                                <input type="url" id="projectReadme" class="w-full form-input py-2 px-3">
                             </div>
                         </div>
                         
                         <div>
                             <label for="projectNotes" class="block text-sm font-medium text-gray-700 mb-1">Notes</label>
-                            <textarea id="projectNotes" rows="3" class="w-full border border-gray-300 rounded-lg py-2 px-3 form-input focus:outline-none focus:border-indigo-500"></textarea>
+                            <textarea id="projectNotes" rows="3" class="w-full form-input py-2 px-3"></textarea>
                         </div>
                         
                         <div class="flex justify-end space-x-3 pt-4">
-                            <button type="button" id="cancelModalBtn" class="px-4 py-2 border border-gray-300 rounded-full text-gray-700 hover:bg-gray-50 transition">
+                            <button type="button" id="cancelModalBtn" class="apple-btn apple-btn-secondary px-4 py-2">
                                 Cancel
                             </button>
-                            <button type="submit" id="saveProjectBtn" class="px-4 py-2 bg-indigo-600 text-white rounded-full hover:bg-indigo-700 transition">
+                            <button type="submit" id="saveProjectBtn" class="apple-btn apple-btn-primary px-4 py-2">
                                 Save Project
                             </button>
                         </div>
@@ -237,8 +355,8 @@
     <!-- Project Details Modal -->
     <div id="detailsModal" class="fixed inset-0 z-50 hidden">
         <div class="modal-overlay absolute inset-0"></div>
-        <div class="flex items-center justify-center min-h-screen">
-            <div class="bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto m-4 card-expand slide-in">
+        <div class="flex items-center justify-center min-h-screen p-4">
+            <div class="modal-content bg-white rounded-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto m-4 slide-in">
                 <div class="p-6">
                     <div class="flex justify-between items-center mb-4">
                         <h3 id="detailsTitle" class="text-xl font-bold text-gray-800">Project Details</h3>
@@ -252,10 +370,10 @@
                     </div>
                     
                     <div class="flex justify-end space-x-3 pt-6">
-                        <button id="deleteDetailsBtn" class="px-4 py-2 bg-red-600 text-white rounded-full hover:bg-red-700 transition">
+                        <button id="deleteDetailsBtn" class="apple-btn apple-btn-destructive px-4 py-2">
                             Delete Project
                         </button>
-                        <button id="editDetailsBtn" class="px-4 py-2 bg-indigo-600 text-white rounded-full hover:bg-indigo-700 transition">
+                        <button id="editDetailsBtn" class="apple-btn apple-btn-primary px-4 py-2">
                             Edit Project
                         </button>
                     </div>
@@ -267,8 +385,8 @@
     <!-- Delete Confirmation Modal -->
     <div id="deleteModal" class="fixed inset-0 z-50 hidden">
         <div class="modal-overlay absolute inset-0"></div>
-        <div class="flex items-center justify-center min-h-screen">
-            <div class="bg-white rounded-xl shadow-xl w-full max-w-md m-4 card-expand slide-in">
+        <div class="flex items-center justify-center min-h-screen p-4">
+            <div class="modal-content bg-white rounded-xl w-full max-w-md m-4 slide-in">
                 <div class="p-6">
                     <div class="flex justify-between items-center mb-4">
                         <h3 class="text-xl font-bold text-gray-800">Confirm Deletion</h3>
@@ -280,10 +398,10 @@
                     <p id="deleteMessage" class="text-gray-700 mb-6">Are you sure you want to delete this project?</p>
                     
                     <div class="flex justify-end space-x-3">
-                        <button id="cancelDeleteBtn" class="px-4 py-2 border border-gray-300 rounded-full text-gray-700 hover:bg-gray-50 transition">
+                        <button id="cancelDeleteBtn" class="apple-btn apple-btn-secondary px-4 py-2">
                             Cancel
                         </button>
-                        <button id="confirmDeleteBtn" class="px-4 py-2 bg-red-600 text-white rounded-full hover:bg-red-700 transition">
+                        <button id="confirmDeleteBtn" class="apple-btn apple-btn-destructive px-4 py-2">
                             Delete
                         </button>
                     </div>
@@ -469,7 +587,7 @@
         // Create a project card element
         function createProjectCard(project) {
             const card = document.createElement('div');
-            card.className = 'project-card bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg fade-in';
+            card.className = 'project-card bg-white fade-in';
             card.dataset.id = project.id;
             card.dataset.status = project.status;
             card.dataset.technologies = project.technologies ? project.technologies.join(',') : '';
@@ -500,8 +618,8 @@
                 <div class="h-48 overflow-hidden">
                     ${project.image_link ? 
                         `<img src="${project.image_link}" alt="${project.name}" class="w-full h-full object-cover">` : 
-                        `<div class="w-full h-full bg-gray-200 flex items-center justify-center">
-                            <i class="fas fa-image text-4xl text-gray-400"></i>
+                        `<div class="w-full h-full bg-gray-100 flex items-center justify-center">
+                            <i class="fas fa-image text-4xl text-gray-300"></i>
                         </div>`
                     }
                 </div>
@@ -517,7 +635,7 @@
                     ${project.technologies && project.technologies.length > 0 ? 
                         `<div class="flex flex-wrap gap-2 mb-2">
                             ${project.technologies.map(tech => `
-                                <span class="tag text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded-full">
+                                <span class="tag text-xs bg-blue-100 text-blue-800 px-2 py-1">
                                     ${tech}
                                 </span>
                             `).join('')}
@@ -527,7 +645,7 @@
                     ${project.tags && project.tags.length > 0 ? 
                         `<div class="flex flex-wrap gap-2 mb-4">
                             ${project.tags.map(tag => `
-                                <span class="tag text-xs bg-gray-100 text-gray-800 px-2 py-1 rounded-full">
+                                <span class="tag text-xs bg-gray-100 text-gray-800 px-2 py-1">
                                     ${tag}
                                 </span>
                             `).join('')}
@@ -538,19 +656,19 @@
                         <span>${project.date_range || 'No date specified'}</span>
                         <div class="flex space-x-2">
                             ${project.github_link ? `
-                                <a href="${project.github_link}" target="_blank" class="text-gray-700 hover:text-gray-900 transition" title="GitHub">
+                                <a href="${project.github_link}" target="_blank" class="text-gray-700 hover:text-blue-600 transition" title="GitHub">
                                     <i class="fab fa-github"></i>
                                 </a>
                             ` : ''}
                             
                             ${project.demo_link ? `
-                                <a href="${project.demo_link}" target="_blank" class="text-gray-700 hover:text-gray-900 transition" title="Live Demo">
+                                <a href="${project.demo_link}" target="_blank" class="text-gray-700 hover:text-blue-600 transition" title="Live Demo">
                                     <i class="fas fa-external-link-alt"></i>
                                 </a>
                             ` : ''}
                             
                             ${project.readme_link ? `
-                                <a href="${project.readme_link}" target="_blank" class="text-gray-700 hover:text-gray-900 transition" title="README">
+                                <a href="${project.readme_link}" target="_blank" class="text-gray-700 hover:text-blue-600 transition" title="README">
                                     <i class="fas fa-book"></i>
                                 </a>
                             ` : ''}
@@ -577,10 +695,10 @@
             
             // Update active filter button
             document.querySelectorAll('.filter-tag').forEach(btn => {
-                btn.classList.remove('active', 'bg-indigo-600', 'text-white');
+                btn.classList.remove('active', 'bg-blue-600', 'text-white');
                 if ((status === 'all' && btn.textContent.trim() === 'All Projects') || 
                     (status !== 'all' && btn.textContent.trim() === status.charAt(0).toUpperCase() + status.slice(1))) {
-                    btn.classList.add('active', 'bg-indigo-600', 'text-white');
+                    btn.classList.add('active', 'bg-blue-600', 'text-white');
                 }
             });
             
@@ -741,7 +859,7 @@
                                 <h4 class="font-medium text-gray-800 mb-1">Technologies</h4>
                                 <div class="flex flex-wrap gap-2">
                                     ${project.technologies.map(tech => `
-                                        <span class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded-full">${tech}</span>
+                                        <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">${tech}</span>
                                     `).join('')}
                                 </div>
                             </div>
@@ -752,7 +870,7 @@
                                 <h4 class="font-medium text-gray-800 mb-1">Tags</h4>
                                 <div class="flex flex-wrap gap-2">
                                     ${project.tags.map(tag => `
-                                        <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">${tag}</span>
+                                        <span class="text-xs bg-gray-100 text-gray-800 px-2 py-1 rounded">${tag}</span>
                                     `).join('')}
                                 </div>
                             </div>
@@ -853,7 +971,7 @@
                 tags: projectTags.value ? projectTags.value.split(',').map(tag => tag.trim()).filter(tag => tag) : [],
                 github_link: projectGithub.value.trim(),
                 demo_link: projectDemo.value.trim(),
-                readme_link: projectReadme.value.trim(),
+                readme_link = projectReadme.value.trim(),
                 status: projectStatus.value,
                 technologies: projectTechnologies.value ? projectTechnologies.value.split(',').map(tech => tech.trim()).filter(tech => tech) : [],
                 notes: projectNotes.value.trim(),

prompts.txt

@@ -1,2 +1,3 @@
 Make it look like this visually and add animations : <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Project Dashboard</title>     <script src="https://cdn.tailwindcss.com"></script>     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">     <style>         .project-card {             transition: all 0.3s ease;             transform: translateY(0);         }         .project-card:hover {             transform: translateY(-5px);             box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);         }         .tag {             transition: all 0.2s ease;         }         .tag:hover {             transform: scale(1.05);         }         .status-badge.completed {             background-color: #10b98120;             color: #10b981;         }         .status-badge.in-progress {             background-color: #f59e0b20;             color: #f59e0b;         }         .status-badge.planned {             background-color: #3b82f620;             color: #3b82f6;         }     </style> </head> <body class="bg-gray-50 min-h-screen">     <div class="container mx-auto px-4 py-12">         <!-- Header -->         <div class="text-center mb-12">             <h1 class="text-4xl font-bold text-gray-800 mb-2">My Projects</h1>             <p class="text-lg text-gray-600 max-w-2xl mx-auto">A collection of my recent work, experiments, and contributions</p>                          <!-- Filter Controls -->             <div class="flex flex-wrap justify-center gap-3 mt-6">                 <button onclick="filterProjects('all')" class="px-4 py-2 bg-indigo-600 text-white rounded-full hover:bg-indigo-700 transition">All Projects</button>                 <button onclick="filterProjects('completed')" class="px-4 py-2 border border-gray-300 rounded-full hover:bg-gray-100 transition">Completed</button>                 <button onclick="filterProjects('in-progress')" class="px-4 py-2 border border-gray-300 rounded-full hover:bg-gray-100 transition">In Progress</button>                 <button onclick="filterProjects('planned')" class="px-4 py-2 border border-gray-300 rounded-full hover:bg-gray-100 transition">Planned</button>             </div>         </div>          <!-- Projects Grid -->         <div id="projects-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">             <!-- Projects will be dynamically inserted here -->         </div>     </div>      <script>         // Sample project data         const projects = [             {                 id: 1,                 title: "E-commerce Platform",                 description: "A full-stack e-commerce solution with payment integration, inventory management, and analytics dashboard.",                 image: "https://images.unsplash.com/photo-1555529669-e69e7aa0ba9a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",                 status: "completed",                 tags: ["React", "Node.js", "MongoDB", "Stripe"],                 github: "https://github.com",                 demo: "https://example.com",                 date: "Jun 2023"             },             {                 id: 2,                 title: "Task Management App",                 description: "Collaborative task management application with real-time updates, team assignments, and progress tracking.",                 image: "https://images.unsplash.com/photo-1541462608143-67571c6738dd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",                 status: "in-progress",                 tags: ["Vue.js", "Firebase", "Tailwind CSS"],                 github: "https://github.com",                 demo: null,                 date: "Aug 2023 - Present"             },             {                 id: 3,                 title: "Health & Fitness Tracker",                 description: "Mobile application for tracking workouts, nutrition, and health metrics with personalized recommendations.",                 image: "https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",                 status: "planned",                 tags: ["React Native", "GraphQL", "PostgreSQL"],                 github: null,                 demo: null,                 date: "Coming Soon"             },             {                 id: 4,                 title: "Portfolio Website",                 description: "Personal portfolio website showcasing projects, skills, and contact information with a clean, modern design.",                 image: "https://images.unsplash.com/photo-1633356122544-f134324a6cee?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",                 status: "completed",                 tags: ["HTML", "CSS", "JavaScript"],                 github: "https://github.com",                 demo: "https://example.com",                 date: "Apr 2023"             },             {                 id: 5,                 title: "Weather Dashboard",                 description: "Interactive weather application showing current conditions, forecasts, and historical data visualization.",                 image: "https://images.unsplash.com/photo-1601134467661-3d775b999c8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",                 status: "in-progress",                 tags: ["React", "OpenWeather API", "Chart.js"],                 github: "https://github.com",                 demo: "https://example.com",                 date: "Jul 2023 - Present"             },             {                 id: 6,                 title: "Recipe Finder",                 description: "Discover recipes based on ingredients you have, with nutritional information and step-by-step instructions.",                 image: "https://images.unsplash.com/photo-1546069901-ba9599a7e63c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",                 status: "planned",                 tags: ["Angular", "Spoonacular API", "Bootstrap"],                 github: null,                 demo: null,                 date: "Coming Soon"             }         ];          // Render all projects initially         document.addEventListener('DOMContentLoaded', () => {             renderProjects(projects);         });          // Function to render projects         function renderProjects(projectsToRender) {             const container = document.getElementById('projects-container');             container.innerHTML = '';                          projectsToRender.forEach(project => {                 const projectCard = document.createElement('div');                 projectCard.className = 'project-card bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg';                                  // Determine status text and styling                 let statusText, statusClass;                 switch(project.status) {                     case 'completed':                         statusText = 'Completed';                         statusClass = 'completed';                         break;                     case 'in-progress':                         statusText = 'In Progress';                         statusClass = 'in-progress';                         break;                     case 'planned':                         statusText = 'Planned';                         statusClass = 'planned';                         break;                 }                                  projectCard.innerHTML = `                     <div class="h-48 overflow-hidden">                         <img src="${project.image}" alt="${project.title}" class="w-full h-full object-cover">                     </div>                     <div class="p-6">                         <div class="flex justify-between items-start mb-2">                             <h3 class="text-xl font-semibold text-gray-800">${project.title}</h3>                             <span class="status-badge ${statusClass} text-xs font-medium px-2.5 py-0.5 rounded-full">                                 ${statusText}                             </span>                         </div>                         <p class="text-gray-600 text-sm mb-4">${project.description}</p>                                                  <div class="flex flex-wrap gap-2 mb-4">                             ${project.tags.map(tag => `                                 <span class="tag text-xs bg-gray-100 text-gray-800 px-3 py-1 rounded-full">                                     ${tag}                                 </span>                             `).join('')}                         </div>                                                  <div class="flex justify-between items-center text-sm text-gray-500">                             <span>${project.date}</span>                             <div class="flex space-x-2">                                 ${project.github ? `                                     <a href="${project.github}" target="_blank" class="text-gray-700 hover:text-gray-900 transition">                                         <i class="fab fa-github"></i>                                     </a>                                 ` : ''}                                 ${project.demo ? `                                     <a href="${project.demo}" target="_blank" class="text-gray-700 hover:text-gray-900 transition">                                         <i class="fas fa-external-link-alt"></i>                                     </a>                                 ` : ''}                             </div>                         </div>                     </div>                 `;                                  container.appendChild(projectCard);             });         }          // Filter projects by status         function filterProjects(status) {             if (status === 'all') {                 renderProjects(projects);             } else {                 const filteredProjects = projects.filter(project => project.status === status);                 renderProjects(filteredProjects);             }         }     </script> <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=JamesToth/project-manager-app" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> </html>
-check and add these features : Okay, I will update the PRD to reflect the exact list of project information fields you specified for the JSON structure, plus include the additional relevant fields from our previous iteration.  Here is the revised PRD:  ---  ## Product Requirements Document: Simple Project Manager App (Card View)  **Version:** 1.2 **Date:** May 19, 2025 **Prepared By:** [Your Name/Team Name]  ---  ### 1. Introduction  #### 1.1 Purpose The purpose of this document is to define the requirements for a simple Project Manager App that visualizes projects as interactive cards. The application will utilize HTML, CSS (specifically Tailwind CSS for styling), and JavaScript to provide core functionalities to add, view, edit, and delete project entries. Project data will be stored and managed in a JSON format, capturing specific details including project ID, name, image link, date range, description, tags, GitHub link, demo link, README link, and other relevant metadata.  #### 1.2 Goals * Provide a visually appealing dashboard displaying projects as distinct cards, populated with data from a JSON source. * Enable users to easily record and view a specific set of key details for each project on its card or in a detail view. * Allow users to update project information using an editing mechanism that modifies the JSON data. * Provide the ability to remove project entries from the JSON data structure. * Leverage modern web technologies (HTML, Tailwind CSS, JavaScript) for a responsive and dynamic user interface. * Manage project data using a structured JSON format with defined fields.  #### 1.3 Target Audience Individuals or small teams who need a simple, personal, web-based tool to track multiple projects, preferring a visual card-based overview and a lightweight technical implementation using standard web technologies and a defined JSON data structure.  ### 2. Features  #### 2.1 Core Features  ##### 2.1.1 Data Structure & Storage (JSON) * **Description:** The application will manage all project data using a consistent JSON structure, where each project is an object with specific keys (fields). * **Functionality:** The application will define and adhere to the following JSON structure for each project object:     * `id`: Unique identifier (string or number)     * `name`: Project name (string)     * `image_link`: URL to a project image/thumbnail (string)     * `date_range`: String representing the duration of the project (e.g., "Jan 2023 - Mar 2023", "2 Weeks") (string)     * `description`: Short project description (string)     * `tags`: Array of strings representing keywords or technologies (array of strings)     * `github_link`: URL to the GitHub repository (string)     * `demo_link`: URL to a live demo or deployment (string)     * `readme_link`: URL to the project's README file (string)     * `status`: Current status (e.g., "Not Started", "In Progress", "Completed", "On Hold") (string)     * `technologies`: Array of strings representing the technology stack used (array of strings)     * `notes`: Additional notes or details (string)     * `created_at`: Timestamp of when the project was added (string/timestamp format)     * `updated_at`: Timestamp of when the project was last updated (string/timestamp format) * **Data Source:** Project data shall be loaded from a designated JSON source (e.g., a local file served statically, or a simple API endpoint) upon application load.  ##### 2.1.2 View Projects as Cards (Dynamic Rendering) * **Description:** Projects fetched from the JSON data will be dynamically rendered as visually distinct cards on a dashboard based on their fields. * **Functionality:**     * JavaScript will read the project data from the loaded JSON array of objects.     * For each project object, JavaScript will generate the necessary HTML structure for a project card, populating elements with data from the corresponding JSON fields.     * These generated project cards will be injected into a container element in the HTML. * **Card Design:** Each card shall display the following details pulled from the JSON data:     * Project Image (using `image_link`)     * Project Title (`name`)     * Status Badge (`status` - color-coded, e.g., Green for Completed, Yellow for In Progress)     * Short Description (`description` - potentially truncated)     * List of Tags (`tags` - styled as pills/badges)     * Links (Icons/Buttons) for GitHub (`github_link`), Live Demo (`demo_link`), and README (`readme_link`), if available. * **Layout:** Cards will be arranged in a responsive grid using Tailwind CSS classes:     * 1 column on small screens (mobile)     * 2 columns on medium screens (tablets)     * 3 or more columns on large screens (desktops)  ##### 2.1.3 Add Project * **Description:** Users shall be able to add a new project entry which will be appended to the JSON data structure. * **Functionality:**     * A user interface (e.g., a form or modal) will be provided to input details for a new project, covering all fields defined in the JSON structure (though some may be optional).     * Upon submission, JavaScript will create a new project object based on the input, automatically generating a unique `id` and setting `created_at` and `updated_at` timestamps.     * The new project object will be added to the in-memory project data array.     * The UI will refresh to display the newly added project card.     * A mechanism is required to save the updated JSON data back to the source (see Scope).  ##### 2.1.4 Edit Project * **Description:** Users shall be able to modify the details of an existing project, updating the corresponding object in the JSON data structure. * **Functionality:**     * Each project card will have an option (e.g., an edit button or clicking the card) to open an editing interface (form or modal).     * The editing interface will be pre-populated with the current details of the selected project, pulled from its JSON object.     * Users can modify any of the editable project fields.     * Upon saving, JavaScript will update the specific project object in the in-memory data array based on its unique `id`, and update the `updated_at` timestamp.     * The specific project card or the entire UI will refresh to show the updated details.     * A mechanism is required to save the updated JSON data back to the source (see Scope).  ##### 2.1.5 Delete Project * **Description:** Users shall be able to remove a project entry, deleting the corresponding object from the JSON data structure. * **Functionality:**     * Each project card will have an option (e.g., a delete button).     * Clicking delete will prompt a confirmation dialog (`FR12`).     * Upon confirmation, JavaScript will remove the specific project object (identified by its `id`) from the in-memory data array.     * The specific project card will be removed from the UI.     * A mechanism is required to save the updated JSON data back to the source (see Scope).  #### 2.2 Optional Interactivity Features * **Filtering:** Add controls (buttons, dropdowns) to filter the displayed cards based on criteria like `tags`, `technologies`, or `status`. * **Detail View:** Clicking a card could open a modal or navigate to a separate view to display full details, potentially including fields not shown on the collapsed card view and offering the Edit/Delete options there.  ### 3. User Stories  * As a user, I want to see all my projects displayed as clear, visual cards populated with specific details like name, image, description, and status, so I can quickly get an overview. * As a user, I want the project cards to show relevant links like GitHub, Demo, and README directly so I can access them easily. * As a user, I want to add a new project by filling out a form that includes fields for name, image link, date range, description, tags, and all the links (GitHub, demo, readme), so it's stored with all its details. * As a user, I want to update any detail of an existing project, such as changing the status, description, or links, using an edit function on the card. * As a user, I want to delete a project card and its associated data from my list when it's no longer needed, after confirming my action. * As a user, I want the project cards to arrange themselves in a responsive grid layout that looks good on my phone, tablet, and desktop. * As a user, I want the project status to be clearly visible and potentially color-coded on the card. * (Optional) As a user, I want to be able to filter the projects displayed based on the tags or technologies used. * (Optional) As a user, when I click a card, I want to see all the project details, including notes and dates, in a popup or separate screen.  ### 4. Requirements  #### 4.1 Functional Requirements * FR1: The application shall load project data from a JSON source following the specified structure upon initialization. * FR2: The application shall store project data in a JavaScript array containing objects that conform to the specified JSON structure. * FR3: The application shall dynamically generate and display HTML project cards based on the data in the JavaScript array using the specified JSON fields. * FR4: Each project card shall display the `name`, `image_link`, `status` (visually indicated), `description` (potentially truncated), `tags`, `github_link` (if available), `demo_link` (if available), and `readme_link` (if available). * FR5: The application shall provide an interface (form/modal) to input details for a new project, including fields: `name`, `image_link`, `date_range`, `description`, `tags`, `github_link`, `demo_link`, `readme_link`, `status`, `technologies`, `notes`. * FR6: Adding a new project shall create a new object in the in-memory JavaScript array conforming to the specified structure. * FR7: A unique `id` shall be automatically generated for each new project. * FR8: `created_at` and `updated_at` timestamps shall be automatically recorded upon project creation. * FR9: The application shall provide an interface (form/modal) to edit the details of an existing project, pre-populating fields from the selected project object. * FR10: Editing a project shall update the corresponding object in the in-memory JavaScript array based on its `id`. * FR11: The `updated_at` timestamp shall be updated when a project is edited. * FR12: Deleting a project shall remove the corresponding object from the in-memory JavaScript array based on its `id`. * FR13: The application shall update the UI (add/edit/remove cards) to reflect changes in the in-memory data array without a full page reload. * FR14: The application shall prompt the user for confirmation before deleting a project. * FR15: The `id` and `name` fields shall be considered mandatory upon project creation via the Add interface. * FR16: (Optional) The application shall provide controls to filter the displayed project cards based on specified criteria (`tags`, `status`, `technologies`). * FR17: (Optional) Clicking a project card shall display additional details (`date_range`, `technologies`, `notes`, `created_at`, `updated_at`) in a modal or separate view, and potentially include the edit/delete options there.  #### 4.2 Non-Functional Requirements * NFR1: **Usability:** The card-based dashboard and editing/adding interfaces should be intuitive and easy for users to understand and operate. * NFR2: **Performance:** The application should load and render project cards efficiently, ideally showing a quick initial load and smooth updates for a moderate number of projects. * NFR3: **Responsiveness:** The application layout, particularly the project card grid, shall adapt gracefully to different screen sizes (mobile, tablet, desktop) using Tailwind CSS. * NFR4: **Maintainability:** The code structure (HTML, CSS, JavaScript) should be organized and well-commented to allow for easy maintenance and future enhancements. Tailwind CSS class usage should be consistent. * NFR5: **Data Integrity:** While the persistence mechanism is scoped separately, the in-memory management of the JSON array must ensure data is correctly added, updated, and deleted within the application session according to the defined structure. * NFR6: **Aesthetics:** The visual design, leveraging Tailwind CSS, should be clean, modern, and visually appealing, including consistent spacing, typography, shadows, and hover effects on cards. Status badges should be clearly distinguishable. * NFR7: **Data Structure Adherence:** The application's logic for reading, writing, and manipulating data must strictly adhere to the defined JSON field names and expected data types.  ### 5. Scope  #### 5.1 In Scope * Defining and using the specified JSON structure for project data (`id`, `name`, `image_link`, `date_range`, `description`, `tags`, `github_link`, `demo_link`, `readme_link`, `status`, `technologies`, `notes`, `created_at`, `updated_at`). * Loading project data from a JSON source at application startup into a JavaScript array. * Dynamically rendering project data as responsive cards using HTML, Tailwind CSS, and JavaScript, displaying the relevant fields on the cards. * Implementing the responsive grid layout for project cards using Tailwind CSS. * Functionality to Add, Edit, and Delete project objects within the *in-memory* JavaScript data array, updating the specified fields. * Generating unique `id` and timestamps (`created_at`, `updated_at`) for new projects and updating `updated_at` on edits. * Basic validation for mandatory fields (`id`, `name`). * (Optional) Implementation of filtering controls based on specified criteria and/or a detailed view modal displaying all fields. * Utilizing Tailwind CSS for all styling requirements.  #### 5.2 Out of Scope * **Persistence Mechanism:** The specific implementation of *saving* the modified JSON data from the in-memory array back to a persistent source (e.g., writing to a local file, integrating with a backend API). This PRD defines the *in-memory* manipulation and the data structure, but the saving/loading process outside of the initial load needs to be designed and implemented separately based on the deployment environment. * User authentication or multi-user support. * Advanced querying, sorting (beyond basic display order from JSON), or reporting features. * Real-time collaboration or data synchronization across multiple users/devices. * Integrated task management within projects. * Complex data validation or robust error handling (e.g., handling network errors on fetch, malformed JSON). * Unit or integration testing.  ### 6. Success Metrics  * **JSON Structure Compliance:** The application successfully loads and processes JSON data conforming to the specified structure. * **Dynamic Rendering Accuracy:** Project cards are correctly generated and populated with data from the JSON fields. * **Responsiveness:** The grid layout correctly adapts across target device screen sizes. * **Core Feature Functionality:** Add, Edit, and Delete operations successfully manipulate the project objects in the in-memory JSON array and update the UI accordingly. * **Data Field Adherence:** All specified JSON fields are correctly handled during data loading, display, adding, and editing. * (If Persistence Added): Successful saving and loading of changes to/from the persistent JSON source across application sessions.  ### 7. Future Considerations (Potential Future Features)  * Implementation of a persistence layer (e.g., using Local Storage for simple local apps, or integrating with a backend API) to save changes permanently. * Advanced filtering, sorting, and search functionality across all specified fields. * Expanding the detail view or modal to allow inline editing. * Options for different visual layouts (e.g., list view). * Implementing pagination or infinite scrolling for large project lists. * Basic data export (e.g., download modified JSON). * More robust input validation and user feedback during Add/Edit operations.  ---
+check and add these features : Okay, I will update the PRD to reflect the exact list of project information fields you specified for the JSON structure, plus include the additional relevant fields from our previous iteration.  Here is the revised PRD:  ---  ## Product Requirements Document: Simple Project Manager App (Card View)  **Version:** 1.2 **Date:** May 19, 2025 **Prepared By:** [Your Name/Team Name]  ---  ### 1. Introduction  #### 1.1 Purpose The purpose of this document is to define the requirements for a simple Project Manager App that visualizes projects as interactive cards. The application will utilize HTML, CSS (specifically Tailwind CSS for styling), and JavaScript to provide core functionalities to add, view, edit, and delete project entries. Project data will be stored and managed in a JSON format, capturing specific details including project ID, name, image link, date range, description, tags, GitHub link, demo link, README link, and other relevant metadata.  #### 1.2 Goals * Provide a visually appealing dashboard displaying projects as distinct cards, populated with data from a JSON source. * Enable users to easily record and view a specific set of key details for each project on its card or in a detail view. * Allow users to update project information using an editing mechanism that modifies the JSON data. * Provide the ability to remove project entries from the JSON data structure. * Leverage modern web technologies (HTML, Tailwind CSS, JavaScript) for a responsive and dynamic user interface. * Manage project data using a structured JSON format with defined fields.  #### 1.3 Target Audience Individuals or small teams who need a simple, personal, web-based tool to track multiple projects, preferring a visual card-based overview and a lightweight technical implementation using standard web technologies and a defined JSON data structure.  ### 2. Features  #### 2.1 Core Features  ##### 2.1.1 Data Structure & Storage (JSON) * **Description:** The application will manage all project data using a consistent JSON structure, where each project is an object with specific keys (fields). * **Functionality:** The application will define and adhere to the following JSON structure for each project object:     * `id`: Unique identifier (string or number)     * `name`: Project name (string)     * `image_link`: URL to a project image/thumbnail (string)     * `date_range`: String representing the duration of the project (e.g., "Jan 2023 - Mar 2023", "2 Weeks") (string)     * `description`: Short project description (string)     * `tags`: Array of strings representing keywords or technologies (array of strings)     * `github_link`: URL to the GitHub repository (string)     * `demo_link`: URL to a live demo or deployment (string)     * `readme_link`: URL to the project's README file (string)     * `status`: Current status (e.g., "Not Started", "In Progress", "Completed", "On Hold") (string)     * `technologies`: Array of strings representing the technology stack used (array of strings)     * `notes`: Additional notes or details (string)     * `created_at`: Timestamp of when the project was added (string/timestamp format)     * `updated_at`: Timestamp of when the project was last updated (string/timestamp format) * **Data Source:** Project data shall be loaded from a designated JSON source (e.g., a local file served statically, or a simple API endpoint) upon application load.  ##### 2.1.2 View Projects as Cards (Dynamic Rendering) * **Description:** Projects fetched from the JSON data will be dynamically rendered as visually distinct cards on a dashboard based on their fields. * **Functionality:**     * JavaScript will read the project data from the loaded JSON array of objects.     * For each project object, JavaScript will generate the necessary HTML structure for a project card, populating elements with data from the corresponding JSON fields.     * These generated project cards will be injected into a container element in the HTML. * **Card Design:** Each card shall display the following details pulled from the JSON data:     * Project Image (using `image_link`)     * Project Title (`name`)     * Status Badge (`status` - color-coded, e.g., Green for Completed, Yellow for In Progress)     * Short Description (`description` - potentially truncated)     * List of Tags (`tags` - styled as pills/badges)     * Links (Icons/Buttons) for GitHub (`github_link`), Live Demo (`demo_link`), and README (`readme_link`), if available. * **Layout:** Cards will be arranged in a responsive grid using Tailwind CSS classes:     * 1 column on small screens (mobile)     * 2 columns on medium screens (tablets)     * 3 or more columns on large screens (desktops)  ##### 2.1.3 Add Project * **Description:** Users shall be able to add a new project entry which will be appended to the JSON data structure. * **Functionality:**     * A user interface (e.g., a form or modal) will be provided to input details for a new project, covering all fields defined in the JSON structure (though some may be optional).     * Upon submission, JavaScript will create a new project object based on the input, automatically generating a unique `id` and setting `created_at` and `updated_at` timestamps.     * The new project object will be added to the in-memory project data array.     * The UI will refresh to display the newly added project card.     * A mechanism is required to save the updated JSON data back to the source (see Scope).  ##### 2.1.4 Edit Project * **Description:** Users shall be able to modify the details of an existing project, updating the corresponding object in the JSON data structure. * **Functionality:**     * Each project card will have an option (e.g., an edit button or clicking the card) to open an editing interface (form or modal).     * The editing interface will be pre-populated with the current details of the selected project, pulled from its JSON object.     * Users can modify any of the editable project fields.     * Upon saving, JavaScript will update the specific project object in the in-memory data array based on its unique `id`, and update the `updated_at` timestamp.     * The specific project card or the entire UI will refresh to show the updated details.     * A mechanism is required to save the updated JSON data back to the source (see Scope).  ##### 2.1.5 Delete Project * **Description:** Users shall be able to remove a project entry, deleting the corresponding object from the JSON data structure. * **Functionality:**     * Each project card will have an option (e.g., a delete button).     * Clicking delete will prompt a confirmation dialog (`FR12`).     * Upon confirmation, JavaScript will remove the specific project object (identified by its `id`) from the in-memory data array.     * The specific project card will be removed from the UI.     * A mechanism is required to save the updated JSON data back to the source (see Scope).  #### 2.2 Optional Interactivity Features * **Filtering:** Add controls (buttons, dropdowns) to filter the displayed cards based on criteria like `tags`, `technologies`, or `status`. * **Detail View:** Clicking a card could open a modal or navigate to a separate view to display full details, potentially including fields not shown on the collapsed card view and offering the Edit/Delete options there.  ### 3. User Stories  * As a user, I want to see all my projects displayed as clear, visual cards populated with specific details like name, image, description, and status, so I can quickly get an overview. * As a user, I want the project cards to show relevant links like GitHub, Demo, and README directly so I can access them easily. * As a user, I want to add a new project by filling out a form that includes fields for name, image link, date range, description, tags, and all the links (GitHub, demo, readme), so it's stored with all its details. * As a user, I want to update any detail of an existing project, such as changing the status, description, or links, using an edit function on the card. * As a user, I want to delete a project card and its associated data from my list when it's no longer needed, after confirming my action. * As a user, I want the project cards to arrange themselves in a responsive grid layout that looks good on my phone, tablet, and desktop. * As a user, I want the project status to be clearly visible and potentially color-coded on the card. * (Optional) As a user, I want to be able to filter the projects displayed based on the tags or technologies used. * (Optional) As a user, when I click a card, I want to see all the project details, including notes and dates, in a popup or separate screen.  ### 4. Requirements  #### 4.1 Functional Requirements * FR1: The application shall load project data from a JSON source following the specified structure upon initialization. * FR2: The application shall store project data in a JavaScript array containing objects that conform to the specified JSON structure. * FR3: The application shall dynamically generate and display HTML project cards based on the data in the JavaScript array using the specified JSON fields. * FR4: Each project card shall display the `name`, `image_link`, `status` (visually indicated), `description` (potentially truncated), `tags`, `github_link` (if available), `demo_link` (if available), and `readme_link` (if available). * FR5: The application shall provide an interface (form/modal) to input details for a new project, including fields: `name`, `image_link`, `date_range`, `description`, `tags`, `github_link`, `demo_link`, `readme_link`, `status`, `technologies`, `notes`. * FR6: Adding a new project shall create a new object in the in-memory JavaScript array conforming to the specified structure. * FR7: A unique `id` shall be automatically generated for each new project. * FR8: `created_at` and `updated_at` timestamps shall be automatically recorded upon project creation. * FR9: The application shall provide an interface (form/modal) to edit the details of an existing project, pre-populating fields from the selected project object. * FR10: Editing a project shall update the corresponding object in the in-memory JavaScript array based on its `id`. * FR11: The `updated_at` timestamp shall be updated when a project is edited. * FR12: Deleting a project shall remove the corresponding object from the in-memory JavaScript array based on its `id`. * FR13: The application shall update the UI (add/edit/remove cards) to reflect changes in the in-memory data array without a full page reload. * FR14: The application shall prompt the user for confirmation before deleting a project. * FR15: The `id` and `name` fields shall be considered mandatory upon project creation via the Add interface. * FR16: (Optional) The application shall provide controls to filter the displayed project cards based on specified criteria (`tags`, `status`, `technologies`). * FR17: (Optional) Clicking a project card shall display additional details (`date_range`, `technologies`, `notes`, `created_at`, `updated_at`) in a modal or separate view, and potentially include the edit/delete options there.  #### 4.2 Non-Functional Requirements * NFR1: **Usability:** The card-based dashboard and editing/adding interfaces should be intuitive and easy for users to understand and operate. * NFR2: **Performance:** The application should load and render project cards efficiently, ideally showing a quick initial load and smooth updates for a moderate number of projects. * NFR3: **Responsiveness:** The application layout, particularly the project card grid, shall adapt gracefully to different screen sizes (mobile, tablet, desktop) using Tailwind CSS. * NFR4: **Maintainability:** The code structure (HTML, CSS, JavaScript) should be organized and well-commented to allow for easy maintenance and future enhancements. Tailwind CSS class usage should be consistent. * NFR5: **Data Integrity:** While the persistence mechanism is scoped separately, the in-memory management of the JSON array must ensure data is correctly added, updated, and deleted within the application session according to the defined structure. * NFR6: **Aesthetics:** The visual design, leveraging Tailwind CSS, should be clean, modern, and visually appealing, including consistent spacing, typography, shadows, and hover effects on cards. Status badges should be clearly distinguishable. * NFR7: **Data Structure Adherence:** The application's logic for reading, writing, and manipulating data must strictly adhere to the defined JSON field names and expected data types.  ### 5. Scope  #### 5.1 In Scope * Defining and using the specified JSON structure for project data (`id`, `name`, `image_link`, `date_range`, `description`, `tags`, `github_link`, `demo_link`, `readme_link`, `status`, `technologies`, `notes`, `created_at`, `updated_at`). * Loading project data from a JSON source at application startup into a JavaScript array. * Dynamically rendering project data as responsive cards using HTML, Tailwind CSS, and JavaScript, displaying the relevant fields on the cards. * Implementing the responsive grid layout for project cards using Tailwind CSS. * Functionality to Add, Edit, and Delete project objects within the *in-memory* JavaScript data array, updating the specified fields. * Generating unique `id` and timestamps (`created_at`, `updated_at`) for new projects and updating `updated_at` on edits. * Basic validation for mandatory fields (`id`, `name`). * (Optional) Implementation of filtering controls based on specified criteria and/or a detailed view modal displaying all fields. * Utilizing Tailwind CSS for all styling requirements.  #### 5.2 Out of Scope * **Persistence Mechanism:** The specific implementation of *saving* the modified JSON data from the in-memory array back to a persistent source (e.g., writing to a local file, integrating with a backend API). This PRD defines the *in-memory* manipulation and the data structure, but the saving/loading process outside of the initial load needs to be designed and implemented separately based on the deployment environment. * User authentication or multi-user support. * Advanced querying, sorting (beyond basic display order from JSON), or reporting features. * Real-time collaboration or data synchronization across multiple users/devices. * Integrated task management within projects. * Complex data validation or robust error handling (e.g., handling network errors on fetch, malformed JSON). * Unit or integration testing.  ### 6. Success Metrics  * **JSON Structure Compliance:** The application successfully loads and processes JSON data conforming to the specified structure. * **Dynamic Rendering Accuracy:** Project cards are correctly generated and populated with data from the JSON fields. * **Responsiveness:** The grid layout correctly adapts across target device screen sizes. * **Core Feature Functionality:** Add, Edit, and Delete operations successfully manipulate the project objects in the in-memory JSON array and update the UI accordingly. * **Data Field Adherence:** All specified JSON fields are correctly handled during data loading, display, adding, and editing. * (If Persistence Added): Successful saving and loading of changes to/from the persistent JSON source across application sessions.  ### 7. Future Considerations (Potential Future Features)  * Implementation of a persistence layer (e.g., using Local Storage for simple local apps, or integrating with a backend API) to save changes permanently. * Advanced filtering, sorting, and search functionality across all specified fields. * Expanding the detail view or modal to allow inline editing. * Options for different visual layouts (e.g., list view). * Implementing pagination or infinite scrolling for large project lists. * Basic data export (e.g., download modified JSON). * More robust input validation and user feedback during Add/Edit operations.  ---
+good now make it apple style website and also add typewriter effect