feat(authors): add authors at the bottom of the page

package.json

@@ -48,5 +48,6 @@
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "~1.7.0",
     "typescript": "~4.5.2"
-  }
+  },
+  "packageManager": "[email protected]+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
 }

src/app/app.module.ts

@@ -12,6 +12,7 @@ import {
   fileEarmarkPdfFill,
   github,
   link45Deg,
+  globe
 } from 'ngx-bootstrap-icons';
 import { MarkdownModule } from 'ngx-markdown';
 import * as PlotlyJS from 'plotly.js-dist-min';
@@ -27,6 +28,7 @@ import { PlaygroundComponent } from './components/playground/playground.componen
 import { VariationComponent } from './components/variation/variation.component';
 import { FooterComponent } from './footer/footer.component';
 import { HomeComponent } from './home/home.component';
+import { AuthorComponent } from './author/author.component';
 
 PlotlyModule.plotlyjs = PlotlyJS;
 
@@ -43,6 +45,7 @@ PlotlyModule.plotlyjs = PlotlyJS;
     FooterComponent,
     DatasetVariationsComponent,
     VariationComponent,
+    AuthorComponent,
   ],
   imports: [
     BrowserModule,
@@ -51,7 +54,7 @@ PlotlyModule.plotlyjs = PlotlyJS;
     HttpClientModule,
     FormsModule,
     MarkdownModule.forRoot({ loader: HttpClient }),
-    NgxBootstrapIconsModule.pick({ github, calendar4Event, fileEarmarkPdfFill, bracesAsterisk, link45Deg, cardText }),
+    NgxBootstrapIconsModule.pick({ github, calendar4Event, fileEarmarkPdfFill, bracesAsterisk, link45Deg, cardText, globe }),
     PlotlyModule,
   ],
   bootstrap: [AppComponent],

src/app/author/author.component.html

@@ -0,0 +1,4 @@
+<img [src]="pictureUrl" [alt]="fullName" class="author" />
+<h4 class="mt-3">{{ fullName }}</h4>
+<p>{{ profile }}</p>
+<p><i-bs name="globe" width="30" height="30"></i-bs> &nbsp; <a [href]="scholar" target="_blank">Google Scholar</a></p>

src/app/author/author.component.scss

@@ -0,0 +1,5 @@
+img.author {
+  width: 200px;
+  border-radius: 10em;
+  border: 1px solid #eee;
+}

src/app/author/author.component.spec.ts

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

src/app/author/author.component.ts

@@ -0,0 +1,14 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-author',
+  templateUrl: './author.component.html',
+  styleUrls: ['./author.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AuthorComponent {
+  @Input() fullName: string;
+  @Input() profile: string;
+  @Input() pictureUrl: string;
+  @Input() scholar: string;
+}

src/app/home/home.component.html

@@ -131,6 +131,50 @@ <h5 class="mt-0">Uncovering the Secrets of Synthetic Audio Detection</h5>
 
     <hr class="mt-5 mb-5" />
 
+    <div class="col-6 offset-3 mb-4">
+      <h2 class="text-center">People</h2>
+    </div>
+
+    <div class="row justify-content-center">
+      <app-author
+        fullName="Stefano Borzì"
+        profile="PhD Student"
+        pictureUrl="assets/images/authors/Stefano.png"
+        scholar="https://scholar.google.it/citations?user=80n8dycAAAAJ"
+        class="col-4 text-center mt-5"
+      ></app-author>
+      <app-author
+        fullName="Dario Allegra"
+        profile="Assistant Professor"
+        pictureUrl="assets/images/authors/Allegra.jpg"
+        scholar="https://scholar.google.it/citations?user=ua6QhmQAAAAJ&hl=it"
+        class="col-4 text-center mt-5"
+      ></app-author>
+      <app-author
+        fullName="Filippo Stanco"
+        profile="Full Professor"
+        pictureUrl="assets/images/authors/Stanco.jpg"
+        scholar="https://scholar.google.it/citations?user=VgtfwzYAAAAJ&hl=it"
+        class="col-4 text-center mt-5"
+      ></app-author>
+      <app-author
+        fullName="Sebastiano Battiato"
+        profile="Full Professor"
+        pictureUrl="assets/images/authors/Battiato.jpg"
+        scholar="https://scholar.google.com/citations?user=OplbtHgAAAAJ&hl=en"
+        class="col-4 text-center mt-5"
+      ></app-author>
+      <app-author
+        fullName="Oliver Giudice"
+        profile="Consultant/Collaborator"
+        pictureUrl="assets/images/authors/Giudice.png"
+        scholar="https://scholar.google.it/citations?user=YrVdU3IAAAAJ&hl=it"
+        class="col-4 text-center mt-5"
+      ></app-author>
+    </div>
+
+    <hr class="mt-5 mb-5" />
+
     <div class="offset-3 col-6 mt-5">
       <div class="row">
         <div class="col-6"><img src="assets/images/unict-logo.png" class="unict-logo" /></div>