<mat-card class="content-container bg-primary text-white" style="border-radius:20px;">
    <mat-card-title>
        <h1 class="my-3 display-1 text-center">
            <span style="color:#ffffff">P</span><span style="color:#bebdff">rojects</span>
            <span class="text-muted">&nbsp;&&nbsp;</span>
            <span style="color:#ffffff">W</span><span style="color:#bebdff">orks</span>
        </h1>
    </mat-card-title>

    <mat-card-subtitle>
        <p class="mb-5 lead text-center">"Do what you love and work is a hobby"</p>
    </mat-card-subtitle>

    <mat-card-content class="list-group">
        <div class="list-group-item list-group-item-action my-3" *ngFor="let project of projects">
            <div class="d-flex w-100 justify-content-between">
                <h3 class="mb-1">{{project.title}}</h3>
                <small>
                    <a href={{project.link}} *ngIf="project.link">
                        <button mat-mini-fab color="primary">
                            <mat-icon>link</mat-icon>
                        </button>
                    </a>
                </small>
            </div>
            <p class="mx-5">{{project.description}}</p>
        </div>
    </mat-card-content>

</mat-card>