Initial Implementation of Project Cards

src/app/projects/project-card/project-card.component.css

@@ -0,0 +1,74 @@
+.card .inverse-card-image {
+    flex-direction: row-reverse;
+}
+
+.card .card-content {
+    height: 350px;
+    width: 100%;
+    padding: 40px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+}
+.card .card-content > * {
+    margin: 10px;
+}
+
+.card .card-content .card-content-h {
+    width: 80%;
+}
+
+.card .card-content .card-title {
+    font-size: 2rem;
+    font-weight: 500;
+    justify-content: left;
+}
+.card .card-content .card-text {
+    font-size: 1.2rem;
+    font-weight: 300;
+}
+
+
+.card .card-content .card-content-f {
+    display: flex;
+    justify-content: center;
+    flex-direction: row;
+}
+.card .card-content .card-content-f .card-info {
+    display: flex;
+    flex-direction: column;
+}
+.card .card-content .card-content-f .card-stats {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+}
+
+
+.stat-item {
+    margin: 5px 0px 5px 0px;
+    display: flex;
+    flex-direction: row;
+    align-items: start;
+    align-content: start;
+}
+.stat-item .stat-icon {
+    margin: 0px 15px 0px 0px;
+    width: 20px;
+    height: 20px;
+    font-size: 1rem;
+
+    display: flex;
+}
+.stat-item span {
+    font-size: 1rem;
+    font-weight: 300;
+    margin: 0;
+    justify-content: left;
+}
+
+.stats-inline {
+    margin: 0;
+    width: 100%;
+    flex-direction: row !important;
+}

src/app/projects/project-card/project-card.component.html

@@ -0,0 +1,41 @@
+  <div class="card container">
+        <div class="card-content">
+            <div class="card-content-h">
+                <h2 class="card-title">
+                    <a [href]="project.link">{{project.name}}</a>
+                </h2>
+                <p class="card-text">{{project.description}}</p>
+            </div>
+            <div class="card-content-f row">
+                <div class="card-info col-9" *ngIf="hasLanguage">
+                    <p >Language: {{project.languages}}</p>
+                </div>
+                <div class="card-stats" [ngClass]="hasLanguage ? 'col-3' : 'stats-inline'">
+                    <div class="stat-item" *ngIf="hasLicense">
+                        <div class="stat-icon">
+                            <fa-icon [icon]="faLicense"></fa-icon>
+                        </div>
+                        <span>{{project.license}}</span>
+                    </div>
+                    <div class="stat-item">
+                        <div class="stat-icon">
+                            <fa-icon [icon]="faStars"></fa-icon>
+                        </div>
+                        <span>{{project.stars}}</span>
+                    </div>
+                    <div class="stat-item">
+                        <div class="stat-icon">
+                            <fa-icon [icon]="faCodeFork"></fa-icon>
+                        </div>
+                        <span>{{project.forks}}</span>
+                    </div>
+                    <div class="stat-item">
+                        <div class="stat-icon">
+                            <fa-icon [icon]="faEye"></fa-icon>
+                        </div>
+                        <span>{{project.watchers}}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+  </div>

src/app/projects/project-card/project-card.component.spec.ts

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

src/app/projects/project-card/project-card.component.ts

@@ -0,0 +1,33 @@
+import {Component, Input} from '@angular/core';
+import { faCodeFork, faEye, faStar } from '@fortawesome/free-solid-svg-icons';
+import {Project} from "../../shared/model/project/project.model";
+import {faScaleBalanced} from "@fortawesome/free-solid-svg-icons/faScaleBalanced";
+
+@Component({
+    selector: 'app-project-card',
+    templateUrl: './project-card.component.html',
+    styleUrls: ['./project-card.component.css']
+})
+export class ProjectCardComponent {
+    @Input() inverted: boolean = false;
+
+    @Input() project!: Project;
+
+    // Stats Icons Definitions
+    faLicense = faScaleBalanced;
+
+    faStars = faStar;
+
+    faCodeFork = faCodeFork;
+
+    faEye = faEye;
+
+    get hasLicense(): boolean {
+        return this.project.license !== undefined;
+    }
+
+    get hasLanguage(): boolean {
+        return this.project.languages !== undefined &&
+            this.project.languages?.length > 0;
+    }
+}