oliverbooth.dev/OliverBooth/Pages/Projects/Index.cshtml

@page
@using OliverBooth.Common.Data.Web.Projects
@using OliverBooth.Common.Services
@inject IProjectService ProjectService
@{
    ViewData["Title"] = "Projects";

    IEnumerable<IProject> projects = ProjectService.GetProjects(ProjectStatus.Ongoing).OrderBy(p => p.Rank)
        .Concat(ProjectService.GetProjects(ProjectStatus.Past).OrderBy(p => p.Rank))
        .Concat(ProjectService.GetProjects(ProjectStatus.Retired).OrderBy(p => p.Rank))
        .Concat(ProjectService.GetProjects(ProjectStatus.Hiatus).OrderBy(p => p.Rank));
}

<main class="container">
    <h1 class="display-4">Projects</h1>

    @foreach (IProject[] chunk in projects.Chunk(2))
    {
        <div class="card-group row" style="margin-top: 20px;">
            @foreach (IProject project in chunk)
            {
                <div class="col-xs-1 col-md-6 col-lg-6 d-flex align-items-stretch">
                    @switch (project.Status)
                    {
                        case ProjectStatus.Ongoing:
                            <div class="project-card">
                                <div class="project-image">
                                    <a asp-page="Project" asp-route-slug="@project.Slug">
                                        <img src="https://cdn.olivr.me/projects/hero/@project.HeroUrl" class="card-img-top" alt="@project.Name">
                                    </a>
                                    <a asp-page="Project" asp-route-slug="@project.Slug">
                                        <p class="project-title">@project.Name</p>
                                    </a>
                                </div>
                            </div>
                            break;

                        case ProjectStatus.Past:
                            <div class="border-info project-card">
                                <div class="project-image">
                                    <a asp-page="Project" asp-route-slug="@project.Slug">
                                        <img src="https://cdn.olivr.me/projects/hero/@project.HeroUrl" class="card-img-top" alt="@project.Name">
                                    </a>
                                    <a asp-page="Project" asp-route-slug="@project.Slug">
                                        <p class="project-title">@project.Name</p>
                                    </a>
                                </div>
                            </div>
                            break;

                        case ProjectStatus.Retired:
                            <div class="border-danger project-card">
                                <div class="project-image">
                                    <a asp-page="Project" asp-route-slug="@project.Slug">
                                        <img src="https://cdn.olivr.me/projects/hero/@project.HeroUrl" class="card-img-top" alt="@project.Name">
                                    </a>
                                    <a asp-page="Project" asp-route-slug="@project.Slug">
                                        <p class="project-title">@project.Name</p>
                                    </a>
                                </div>
                            </div>
                            break;

                        case ProjectStatus.Hiatus:
                            <div class="border-warning project-card">
                                <div class="project-image">
                                    <a asp-page="Project" asp-route-slug="@project.Slug">
                                        <img src="https://cdn.olivr.me/projects/hero/@project.HeroUrl" class="card-img-top" alt="@project.Name">
                                    </a>
                                    <a asp-page="Project" asp-route-slug="@project.Slug">
                                        <p class="project-title">@project.Name</p>
                                    </a>
                                </div>
                            </div>
                            break;
                    }
                </div>
            }
        </div>
    }
</main>