79 lines
1.8 KiB
Plaintext
79 lines
1.8 KiB
Plaintext
@page "/tech-stack"
|
|
@using MudBlazor
|
|
@using WebAssembly.Services
|
|
@inject IMyDialogService DialogService
|
|
|
|
<div class="techStackPage">
|
|
<h1>Tech Stack</h1>
|
|
|
|
<div class="techStackGrid">
|
|
@foreach (var tech in Data.TechStackData.RawData)
|
|
{
|
|
<div class="techStackItem @(tech.InUse ? "" : "notInUse")" @onclick="() => OpenDialog(tech)">
|
|
<div class="techStackName">@tech.Name</div>
|
|
<div class="techStackDescription">@tech.Description</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.techStackPage {
|
|
padding: 20px;
|
|
color: white;
|
|
}
|
|
|
|
h1 {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.techStackGrid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
|
|
.techStackItem {
|
|
background-color: var(--paper);
|
|
border: 1px solid var(--paper-border);
|
|
border-radius: var(--dialog-radius);
|
|
padding: 20px;
|
|
cursor: pointer;
|
|
transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
|
|
}
|
|
|
|
.techStackItem:hover {
|
|
background-color: var(--paper-hover);
|
|
border-color: var(--paper-border-hover);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.techStackItem.notInUse {
|
|
opacity: 0.5;
|
|
filter: grayscale(1);
|
|
}
|
|
|
|
.techStackName {
|
|
font-size: 1.5em;
|
|
font-weight: bold;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.techStackDescription {
|
|
font-size: 1em;
|
|
color: #ccc;
|
|
}
|
|
</style>
|
|
|
|
@code {
|
|
private void OpenDialog(Data.TechStack tech)
|
|
{
|
|
DialogService.Show(new DialogContents
|
|
{
|
|
Title = tech.Name,
|
|
TechStack = tech
|
|
});
|
|
}
|
|
}
|