diff --git a/Angular/angular.json b/Angular/angular.json index b455322..350ea7c 100644 --- a/Angular/angular.json +++ b/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" diff --git a/Angular/src/app/app.routes.ts b/Angular/src/app/app.routes.ts index bf9bbaf..e901880 100644 --- a/Angular/src/app/app.routes.ts +++ b/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: () => diff --git a/Angular/src/app/pages/home/home.component.html b/Angular/src/app/pages/home/home.component.html new file mode 100644 index 0000000..bd5cc70 --- /dev/null +++ b/Angular/src/app/pages/home/home.component.html @@ -0,0 +1,30 @@ +
+
+

Leveraging Angular, Python, and AI (GenAI)

+

Practical Solutions & Recipes

+ + Technology Stack +
+ +
+ +
+

About the Authors

+
+ @for (author of authors; track $index) { +
+ {{ author.name }} Image +

{{ author.name }}

+

{{ author.description }}

+
    + @for (link of author.contactLinks; track $index) { +
  • + {{ link.label }} +
  • + } +
+
+ } +
+
+
\ No newline at end of file diff --git a/Angular/src/app/pages/home/home.component.scss b/Angular/src/app/pages/home/home.component.scss new file mode 100644 index 0000000..5c956f6 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/Angular/src/app/pages/home/home.component.spec.ts b/Angular/src/app/pages/home/home.component.spec.ts new file mode 100644 index 0000000..1191557 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [HomeComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(HomeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/Angular/src/app/pages/home/home.component.ts b/Angular/src/app/pages/home/home.component.ts new file mode 100644 index 0000000..7c02c35 --- /dev/null +++ b/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' } + ] + } + ]; +} diff --git a/Angular/src/assets/img/author.jpg b/Angular/src/assets/img/author.jpg new file mode 100644 index 0000000..a1df60d Binary files /dev/null and b/Angular/src/assets/img/author.jpg differ diff --git a/Angular/src/assets/img/lars-co-author.jpg b/Angular/src/assets/img/lars-co-author.jpg new file mode 100644 index 0000000..d380a43 Binary files /dev/null and b/Angular/src/assets/img/lars-co-author.jpg differ diff --git a/Angular/src/assets/img/sonu-co-author.jpg b/Angular/src/assets/img/sonu-co-author.jpg new file mode 100644 index 0000000..58b457f Binary files /dev/null and b/Angular/src/assets/img/sonu-co-author.jpg differ diff --git a/Angular/src/assets/img/tech-stack.png b/Angular/src/assets/img/tech-stack.png new file mode 100644 index 0000000..041ece7 Binary files /dev/null and b/Angular/src/assets/img/tech-stack.png differ