Refactor code structure for improved readability and maintainability

src/app/admin/projects/projects.html

@@ -0,0 +1,78 @@
+<article class="projects" data-page="projects">
+
+    <header>
+        <h2 class="h2 article-title">Projects</h2>
+    </header>
+
+    <section class="projects">
+
+        <ul class="filter-list">
+
+            <li class="filter-item">
+                <button [ngClass]="{active: filter === 'All'}" (click)="filterProjects('All')">All</button>
+            </li>
+
+            @for (category of model.projectsCategories; track category) {
+            <li class="filter-item">
+                <button (click)="filterProjects(category)" [ngClass]="{active: filter === category}">{{category}}</button>
+            </li>
+            }
+
+        </ul>
+
+        <div class="filter-select-box" (click)="categoryClicked = !categoryClicked">
+
+            <button class="filter-select" [ngClass]="{active: categoryClicked}">
+
+                <div class="select-value">{{filter}}</div>
+
+                <div class="select-icon">
+                    <i class="fa-regular fa-chevron-down"></i>
+                </div>
+
+            </button>
+
+            <ul class="select-list">
+
+                <li class="select-item">
+                    <button (click)="filterProjects('All')">All</button>
+                </li>
+
+                @for (category of model.projectsCategories; track category) {
+                <li class="select-item">
+                    <button (click)="filterProjects(category)">{{category}}</button>
+                </li>
+                }
+
+            </ul>
+        </div>
+
+        <ul class="project-list">
+
+            @for (project of projects; track project) {
+            <li class="project-item  active">
+                <a>
+
+                    <figure class="project-img">
+                        <!-- <div class="project-item-icon-box">
+                <ion-icon name="eye-outline"></ion-icon>
+              </div> -->
+
+                        <img src="{{imagesOrigin + project.imagePath}}" loading="lazy">
+                    </figure>
+
+                    <h3 class="project-title">{{project.name}}</h3>
+                    <div class="project-category">
+                        @for (responsibility of project.responsibilities; track responsibility; let i = $index) {
+                        <span class="inline">{{i > 0 ? ', ' + responsibility : responsibility}}</span>
+                        }
+                    </div>
+                </a>
+            </li>
+            }
+
+        </ul>
+
+    </section>
+
+</article>