Refactor code structure for improved readability and maintainability

src/app/admin/about/about.html

@@ -0,0 +1,34 @@
+<article class="about  active" data-page="about">
+    <header>
+        <h2 class="h2 article-title">About me</h2>
+    </header>
+
+    <section class="about-text">
+        <pre class="text-style">
+        {{model.about}}
+      </pre>
+    </section>
+
+    <section class="service">
+
+        <h3 class="h3 service-title">What i'm doing</h3>
+
+        <ul class="service-list">
+
+            <li class="service-item" *ngFor="let hobby of model.hobbies">
+                <div class="service-icon-box">
+                    <i class="fa-regular fa-2x " [ngClass]="hobby.icon"></i>
+                </div>
+                <div class="service-content-box">
+                    <h4 class="h4 service-item-title">{{hobby.name}}</h4>
+
+                    <p class="service-item-text">
+                        {{hobby.description}}
+                    </p>
+                </div>
+            </li>
+        </ul>
+
+    </section>
+
+</article>