Fix Project section

css/style.css

@@ -75,26 +75,65 @@ hr::after {
   width: 40px;
 }
 
+/* --- Projects --- */
+.projects {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  gap: 25px;
+  margin-top: 20px;
+}
+
 .project {
-  background: var(--glass-light);
-  backdrop-filter: blur(10px);
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(15px);
   border: 1px solid var(--glass-border);
   border-radius: 25px;
-  padding: 20px;
-  width: 300px;
-  color: #fff;
-  text-decoration: none;
+  padding: 25px;
   transition: 0.3s;
 }
 
-.project:hover {
-  background: rgba(255, 255, 255, 0.12);
-  border-color: var(--accent-yellow);
+.project-header {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  margin-bottom: 15px;
 }
 
-.project img {
-  width: 100%;
+.project-header img {
+  width: 80px;
+  height: 80px;
   border-radius: 15px;
+  object-fit: cover;
+  border: 1px solid var(--glass-border);
+}
+
+.project-info h2 {
+  margin: 0;
+  font-size: 1.5rem;
+  color: #fff;
+}
+
+/* --- Etiquettes (Tags) --- */
+.tag {
+  display: inline-block;
+  padding: 4px 12px;
+  border-radius: 50px;
+  font-size: 0.75rem;
+  font-weight: bold;
+  text-transform: uppercase;
+  backdrop-filter: blur(5px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  margin-top: 5px;
+}
+
+.purple-tag {
+  background: rgba(147, 51, 234, 0.2);
+  color: #d8b4fe;
+}
+
+.yellow-tag {
+  background: rgba(234, 179, 8, 0.2);
+  color:#fde047;
 }
 
 .video-container {