Skip to content

Commit 6fd24c4

Browse files
linkdotnetlinkdotnet
committed
Add skill table components
1 parent c48eea9 commit 6fd24c4

File tree

9 files changed

+196
-0
lines changed

9 files changed

+196
-0
lines changed

‎LinkDotNet.Blog.Web/Pages/AboutMe.razor

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@
1313
</div>
1414
<div class="col-lg-9 col-md-8 tab-container">
1515
<div class="row">
16+
<div class="col-md12 tab-content">
17+
<SkillTable></SkillTable>
18+
</div>
1619
</div>
1720
</div>
1821
</div>

‎LinkDotNet.Blog.Web/Shared/Profile.razor.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
box-shadow: 0 3px 7px -1px rgba(0, 0, 0, 0.1);
44
width: 100%;
55
background: var(--background-gradient-start);
6+
border-radius: 8px;
67
}
78

89
.profile-name {

‎LinkDotNet.Blog.Web/Shared/SkillTable.razor

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
@using LinkDotNet.Domain
2+
<div class="skill-table-container">
3+
<table class="skill-table">
4+
<tbody>
5+
<tr>
6+
<th>Capability</th>
7+
<th>Familiar with</th>
8+
<th>Proficient</th>
9+
<th>Expert</th>
10+
</tr>
11+
@foreach (var skillCapabilityGroup in skills.GroupBy(s => s.Capability))
12+
{
13+
<tr style="">
14+
<td style="width: 20%">@skillCapabilityGroup.Key</td>
15+
@foreach (var skillLevel in ProficiencyLevel.All)
16+
{
17+
<td>
18+
@foreach (var skill in skillCapabilityGroup.Where(s => s.ProficiencyLevel == skillLevel))
19+
{
20+
<div>
21+
<SkillTag Skill="@skill"/>
22+
</div>
23+
}
24+
</td>
25+
}
26+
</tr>
27+
}
28+
</tbody>
29+
</table>
30+
</div>
31+
@code {
32+
33+
private List<Skill> skills = new()
34+
{
35+
new Skill() {Capability = "Backend", Name = "C#", ProficiencyLevel = ProficiencyLevel.Expert, IconUrl = "https://img.icons8.com/color/48/000000/c-sharp-logo.png"},
36+
new Skill() {Capability = "Backend", Name = ".NET", ProficiencyLevel = ProficiencyLevel.Expert, IconUrl = ""},
37+
new Skill() {Capability = "Backend", Name = "Java", ProficiencyLevel = ProficiencyLevel.Familiar, IconUrl = "https://img.icons8.com/ios/50/000000/java-coffee-cup-logo--v1.png"},
38+
new Skill() {Capability = "Frontend", Name = "Typescript", ProficiencyLevel = ProficiencyLevel.Expert, IconUrl = ""},
39+
};
40+
41+
}

‎LinkDotNet.Blog.Web/Shared/SkillTable.razor.css

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
.skill-table-container {
2+
display: inline-block;
3+
box-shadow: 0 3px 7px -1px rgba(0, 0, 0, 0.1);
4+
width: 100%;
5+
background: var(--background-gradient-start);
6+
border-radius: 8px;
7+
padding: 20px;
8+
}
9+
10+
.skill-table {
11+
width: 100%;
12+
}
13+
14+
.skill-table td:first-of-type {
15+
width:10%
16+
}
17+
18+
.skill-table td {
19+
width: 30%;
20+
border-top: 1px var(--header2) solid;
21+
}
22+
23+
.skill-table td div {
24+
display: inline-block;
25+
margin-right: 8px;
26+
margin-top: 12px;
27+
margin-bottom: 12px;
28+
29+
}

‎LinkDotNet.Blog.Web/Shared/SkillTag.razor

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
@using LinkDotNet.Domain
2+
3+
<span class="skill-tag">
4+
@if (!string.IsNullOrEmpty(Skill.IconUrl))
5+
{
6+
<img src="@Skill.IconUrl" alt="icon"/>
7+
}
8+
@Skill.Name
9+
</span>
10+
11+
@code {
12+
[Parameter]
13+
public Skill Skill { get; set; }
14+
}

‎LinkDotNet.Blog.Web/Shared/SkillTag.razor.css

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.skill-tag {
2+
padding: 10px;
3+
border-radius: 5px;
4+
background-color: var(--header1);
5+
color: var(--white);
6+
7+
}
8+
9+
.skill-tag img {
10+
padding-right: 8px;
11+
width: 24px;
12+
}

‎LinkDotNet.Domain/Enumeration.cs

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Reflection;
5+
6+
namespace LinkDotNet.Domain
7+
{
8+
public abstract class Enumeration<TEnumeration>
9+
where TEnumeration : Enumeration<TEnumeration>
10+
{
11+
private string key;
12+
13+
protected Enumeration(string key)
14+
{
15+
if (string.IsNullOrWhiteSpace(key))
16+
{
17+
throw new ArgumentException("The enum key cannot be null or empty");
18+
}
19+
20+
this.key = key;
21+
}
22+
23+
public static IReadOnlyCollection<TEnumeration> All => GetEnumerations();
24+
25+
public string Key => key;
26+
27+
public static bool operator ==(Enumeration<TEnumeration> a, Enumeration<TEnumeration> b)
28+
{
29+
if (a is null || b is null)
30+
{
31+
return false;
32+
}
33+
34+
return a.key.Equals(b.key);
35+
}
36+
37+
public static bool operator !=(Enumeration<TEnumeration> a, Enumeration<TEnumeration> b)
38+
{
39+
return !(a == b);
40+
}
41+
42+
public static TEnumeration Create(string key)
43+
{
44+
var enumeration = All.SingleOrDefault(p => p.key == key);
45+
46+
if (enumeration == null)
47+
{
48+
throw new InvalidOperationException($"{key} is not a valid value for {typeof(TEnumeration).Name}");
49+
}
50+
51+
return enumeration;
52+
}
53+
54+
public override int GetHashCode() => Key.GetHashCode();
55+
56+
public override string ToString() => Key;
57+
58+
private static TEnumeration[] GetEnumerations()
59+
{
60+
var enumerationType = typeof(TEnumeration);
61+
62+
return enumerationType
63+
.GetFields(BindingFlags.Public | BindingFlags.Static | BindingFlags.DeclaredOnly)
64+
.Where(info => info.FieldType == typeof(TEnumeration))
65+
.Select(info => (TEnumeration)info.GetValue(null))
66+
.ToArray();
67+
}
68+
}
69+
}

‎LinkDotNet.Domain/ProficiencyLevel.cs

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
namespace LinkDotNet.Domain
2+
{
3+
public class ProficiencyLevel : Enumeration<ProficiencyLevel>
4+
{
5+
public static readonly ProficiencyLevel Familiar = new(nameof(Familiar));
6+
public static readonly ProficiencyLevel Proficient = new(nameof(Proficient));
7+
public static readonly ProficiencyLevel Expert = new(nameof(Expert));
8+
9+
public ProficiencyLevel(string key)
10+
: base(key)
11+
{
12+
}
13+
}
14+
}

‎LinkDotNet.Domain/Skill.cs

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
namespace LinkDotNet.Domain
2+
{
3+
public class Skill
4+
{
5+
public string IconUrl { get; set; }
6+
7+
public string Name { get; set; }
8+
9+
public string Capability { get; set; }
10+
11+
public ProficiencyLevel ProficiencyLevel { get; set; }
12+
}
13+
}

0 commit comments

Comments
 (0)