home with authors and details

Angular/angular.json

@@ -26,6 +26,7 @@
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": [
+              "src/assets",
               {
                 "glob": "**/*",
                 "input": "public"
@@ -86,6 +87,7 @@
             "tsConfig": "tsconfig.spec.json",
             "inlineStyleLanguage": "scss",
             "assets": [
+              "src/assets",
               {
                 "glob": "**/*",
                 "input": "public"

Angular/src/app/app.routes.ts

@@ -3,9 +3,16 @@ import { Routes } from '@angular/router';
 export const routes: Routes = [
   {
     path: '',
-    redirectTo: 'starter',
+    redirectTo: 'home',
     pathMatch: 'full',
   },
+  {
+    path: 'home',
+    loadComponent: () =>
+      import('./pages/home/home.component').then(
+        (c) => c.HomeComponent,
+      ),
+  },
   {
     path: 'starter',
     loadComponent: () =>

Angular/src/app/pages/home/home.component.html

@@ -0,0 +1,30 @@
+<div class="container mt-5">
+    <div class="text-center p-5">
+        <h1>Leveraging Angular, Python, and AI (GenAI)</h1>
+        <h2>Practical Solutions & Recipes</h2>
+
+        <img class="mt-5" src="assets/img/tech-stack.png" alt="Technology Stack">
+    </div>
+
+    <hr class="my-4">
+
+    <div class="author-bio">
+        <h4 class="text-uppercase text-black-50 text-center mb-4">About the Authors</h4>
+        <div class="row">
+            @for (author of authors; track $index) {
+                <div class="col-md-4 text-center">
+                    <img [src]="author.image" loading="lazy" alt="{{ author.name }} Image" class="img-rounded">
+                    <h2 class="my-3">{{ author.name }}</h2>
+                    <p>{{ author.description }}</p>
+                    <ul class="author-contact list-unstyled d-flex justify-content-center">
+                        @for (link of author.contactLinks; track $index) {
+                            <li class="px-2">
+                                <a [href]="link.url" target="_blank">{{ link.label }}</a>
+                            </li>
+                        }
+                    </ul>
+                </div>
+            }
+        </div>
+    </div>
+</div>

Angular/src/app/pages/home/home.component.scss

@@ -0,0 +1,8 @@
+.img-rounded {
+    width: 200px;
+    height: 200px;
+    object-fit: cover;
+    border-radius: 50%;
+    object-position: top;
+    border: 2px solid #f5f5f5;
+}

Angular/src/app/pages/home/home.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HomeComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Angular/src/app/pages/home/home.component.ts

@@ -0,0 +1,59 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  standalone: true,
+  imports: [],
+  templateUrl: './home.component.html',
+  styleUrl: './home.component.scss'
+})
+export class HomeComponent {
+  authors = [
+    {
+      name: 'Muhammad Awais',
+      image: 'assets/img/author.jpg',
+      description: `Hi there! I'm Muhammad Awais, an internationally recognised passionate Lead Software Engineer with 9+ years of experience who finds joy in crafting exceptional web
+                    experiences, fixing breaking logic and bug fixes using top-notch technology stack. My days are filled with lines
+                    of code, bringing creativity to life through a top-notch technology stack. Additionally, I have authored a book "Boost Your Angular Applications to Production-Grade with SOLID Design Principles"
+                    and contributed as a tech author to Genenerative Ai and JavaScript in Plain English. Die hard supporter of #opensource`,
+      contactLinks: [
+        { label: 'LinkTree', url: 'https://linktr.ee/mawaisshaikh' },
+        { label: 'LinkedIn', url: 'https://www.linkedin.com/in/muhammadawaisshaikh' },
+        { label: 'Website', url: 'https://bit.ly/muhammadawaisshaikh' },
+        { label: 'Twitter', url: 'https://www.twitter.com/developerorium' }
+      ]
+    },
+    {
+      name: 'Lars Gyrup Brink Nielsen',
+      image: 'assets/img/lars-co-author.jpg',
+      description: `🏆 4x Microsoft MVP in Developer Technologies
+                    🌟 4x GitHub Star
+                    🌊 Nx Champion
+                    🦸 Angular Hero of Education at ngAwards
+                    📗 Author of "Accelerating Angular Development with Ivy" & free book 📘 "The Angular Developer's Nx Handbook"
+                    👨‍🏫 Co-founder of the non-profit Open Learning initiative "This is Learning"
+                    📣 Organizer of in-person meetup "AarhusJS"
+                    👨‍💻 Open-source maintainer in the Ngworkers and RxAngular FOSS teams
+                    ❤️ Private and corporate sponsorships welcome at GitHub Sponsors @LayZeeDK`,
+      contactLinks: [
+        { label: 'LinkedIn', url: 'https://www.linkedin.com/in/larsgbn/' },
+        { label: 'Github', url: 'https://github.com/LayZeeDK' },
+        { label: 'Twitter', url: 'https://twitter.com/layzeedk' }
+      ]
+    },
+    {
+      name: 'Sonu Kapoor',
+      image: 'assets/img/sonu-co-author.jpg',
+      description: `I am a seasoned Senior Developer/Architect boasting an extensive career spanning over two decades. 
+                    With more than 15 years of expertise in web applications and a decade dedicated to .NET, my commitment to excellence 
+                    has been recognized through the prestigious Microsoft Most Valuable Professional award for my invaluable contributions 
+                    to the ASP.NET community. I hold the esteemed title of a recognized rMVP and have left my mark on the Angular repository, 
+                    having been personally invited by Google to serve as an Angular Trusted Contributor.`,
+      contactLinks: [
+        { label: 'LinkedIn', url: 'https://www.linkedin.com/in/sonu-kapoor/' },
+        { label: 'Github', url: 'https://github.com/sonukapoor' },
+        { label: 'Twitter', url: 'https://twitter.com/SonuKapoor1978' }
+      ]
+    }
+  ];
+}