animations, for the 'browseranimationsmodule' error'

github-option-three-app/src/app/app.config.ts

@@ -1,8 +1,9 @@
 import { ApplicationConfig } from '@angular/core';
 import { provideRouter } from '@angular/router';
+import { provideAnimations } from "@angular/platform-browser/animations";
 
 import { routes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes)]
+  providers: [provideRouter(routes),provideAnimations(),]
 };

github-option-three-app/src/app/components/about/about.component.css

@@ -0,0 +1,35 @@
+.legend {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 0;
+  padding: 1rem;
+  border: 1px solid #ffffff1f;
+  border-radius: 4px;
+}
+
+p-avatar {
+  margin-right: 0.7rem;
+}
+
+.name {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-top: 0.5rem;
+}
+
+span {
+  text-align: center;
+}
+
+.social {
+  display: flex;
+  justify-content: center;
+  margin-top: 1rem;
+}
+
+.social-link span {
+  font-size: 1.3rem;
+  margin: 0.3rem;
+}

github-option-three-app/src/app/components/about/about.component.html

@@ -0,0 +1,22 @@
+<p-fieldset>
+  <ng-template pTemplate="header" class="header">
+      <div class="legend">
+          <p-avatar size="xlarge" image="https://avatars.githubusercontent.com/u/64324417?v=4" shape="circle" />
+          <div class="name">
+            <span>Esther White</span>
+            <span>{{ mcl }}</span>
+          </div>
+      </div>
+  </ng-template>
+  <p class="m-0">
+      Full Stack Developer focusing in Angular, Node.js, and MongoDB. I am passionate about learning new technologies and building applications that solve real-world problems. I am a quick learner and a team player. I am always looking for opportunities to learn and grow.
+  </p>
+  <p>Oh abd btw - my picture is not 'grainy', I have just layered a lot of TypeScript code over it.</p>
+  <div class="social">
+    @for (link of links; track link) {
+      <div class="social-link">
+        <a href="{{link.url}}" target="_blank" rel="noopener noreferrer"><span [class]="link.icon"></span></a>
+      </div>
+      }
+  </div>
+</p-fieldset>

github-option-three-app/src/app/components/about/about.component.ts

@@ -1,12 +1,31 @@
 import { Component } from '@angular/core';
 
+import { FieldsetModule } from 'primeng/fieldset';
+import { AvatarModule } from 'primeng/avatar';
+import { AvatarGroupModule } from 'primeng/avatargroup';
+
 @Component({
   selector: 'app-about',
   standalone: true,
-  imports: [],
+  imports: [FieldsetModule, AvatarModule,AvatarGroupModule],
   templateUrl: './about.component.html',
   styleUrl: './about.component.css'
 })
 export class AboutComponent {
+  mcl = "{{ MonaCodeLisa }}"
 
+  links = [
+		{
+			icon: "pi pi-globe",
+			url: "https://monacodelisa.com",
+		},
+		{
+			icon: "pi pi-github",
+			url: "https://github.com/monacodelisa",
+		},
+		{
+			icon: "pi pi-linkedin",
+			url: "https://www.linkedin.com/in/monacodelisa/",
+		},
+	];
 }