Initial structure for cv

Author: linkdotnet

LinkDotNet.Blog.UnitTests/Web/AppConfigurationFactoryTests.cs

@@ -22,6 +22,7 @@ public void ShouldMapFromAppConfiguration()
                 { "Introduction:ProfilePictureUrl", "anotherurl" },
                 { "Introduction:Description", "desc" },
                 { "BlogPostsPerPage", "5" },
+                { "IsAboutMeEnabled", "true" },
             };
             var configuration = new ConfigurationBuilder()
                 .AddInMemoryCollection(inMemorySettings)
@@ -40,6 +41,7 @@ public void ShouldMapFromAppConfiguration()
             appConfiguration.Introduction.ProfilePictureUrl.Should().Be("anotherurl");
             appConfiguration.Introduction.Description.Should().Be("desc");
             appConfiguration.BlogPostsPerPage.Should().Be(5);
+            appConfiguration.IsAboutMeEnabled.Should().BeTrue();
         }
 
         [Fact]

LinkDotNet.Blog.Web/AppConfiguration.cs

@@ -21,5 +21,7 @@ public record AppConfiguration
         public string DatabaseName { get; init; }
 
         public int BlogPostsPerPage { get; init; }
+
+        public bool IsAboutMeEnabled { get; set; }
     }
 }

LinkDotNet.Blog.Web/AppConfigurationFactory.cs

@@ -16,6 +16,7 @@ public static AppConfiguration Create(IConfiguration config)
                 ConnectionString = config["ConnectionString"],
                 DatabaseName = config["DatabaseName"],
                 BlogPostsPerPage = int.Parse(config["BlogPostsPerPage"]),
+                IsAboutMeEnabled = bool.Parse(config["IsAboutMeEnabled"]),
             };
             return configuration;
         }

LinkDotNet.Blog.Web/Pages/AboutMe.razor

@@ -0,0 +1,18 @@
+@page "/AboutMe"
+@inject AppConfiguration appConfiguration
+/* TODO: Meta Tags About Me - [Name here] */
+
+<div class="page">
+    <div class="container">
+        <div class="row">
+            <div class="col-lg-3 col-md-4">
+                <Profile ProfileImageUrl="@appConfiguration.Introduction.ProfilePictureUrl"/>
+            </div>
+            <div class="col-lg-9 col-md-8 tab-container">
+                <div class="row">
+                    <em>Stuff</em>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

LinkDotNet.Blog.Web/Shared/NavMenu.razor

@@ -22,6 +22,13 @@
                     fa-github"></i> 
                         Github</a></li>
                 }
+                @if (configuration.IsAboutMeEnabled)
+                {
+                    <li class="nav-item">
+                        <a class="nav-link" href="AboutMe"><i class="far fa-address-card"></i> About
+                            me</a></li>
+                }
+                
                 <AccessControl></AccessControl>
                 <li class="nav-item d-flex">
                     <SearchInput SearchEntered="NavigateToSearchPage"></SearchInput>

LinkDotNet.Blog.Web/Shared/Profile.razor

@@ -0,0 +1,30 @@
+@inherits MarkdownComponentBase
+<div class="profile">
+    <div class="profile-name">
+        <span>Steven Giesel</span>
+        <br/>
+        <span>Software Engineer</span>
+    </div>
+    <div class="profile-image">
+        <img src="@ProfileImageUrl" alt="Profile Picture" /> 
+    </div>
+    <ul class="profile-keypoints">
+        @foreach (var (key, value) in cv)
+        {
+            <li><bold> @RenderMarkupString(key)</bold>: @RenderMarkupString(value)</li>
+        }
+    </ul>
+</div>
+@code {
+    [Parameter]
+    public string ProfileImageUrl { get; set; }
+
+    private readonly Dictionary<string, string> cv = new()
+    {
+        {"<i class=\"fas fa-birthday-cake\"></i> Birthday", "17.05.1991"},
+        {"E-Mail", "[[email protected]](mailto:[email protected])"},
+        {"Telephone", "+1234567890"},
+        {"LinkedIn", "[Steven Giesel](https://www.linkedin.com/in/steven.giesel)"},
+        {"Github", "<i class=\"fab fa-github \"></i>[linkdotnet](https://github.com/linkdotnet)"},
+    };
+}

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

@@ -0,0 +1,75 @@
+.profile {
+    display: inline-block;
+    box-shadow: 0 3px 7px -1px rgba(0, 0, 0, 0.1);
+    width: 100%;
+    /* TODO: BETTER COLOR */
+    background: var(--background-gradient-start);
+}
+
+.profile-name {
+    padding: 20px;
+    font-size: 1.25em;
+}
+
+.profile-name:first-child {
+    color: var(--header1);
+}
+
+.profile-name:last-child {
+    color: var(--header2);
+}
+
+.profile-image {
+    clip-path: polygon(0 9%, 100% 0, 100% 94%, 0% 100%);
+}
+
+.profile-image img {
+    width: 100%;
+}
+
+.profile-keypoints {
+    padding-top: 10px;
+    list-style: none;
+}
+
+.profile-keypoints li {
+    position: relative;
+    padding-bottom: 0.6em;
+    
+}
+
+.profile-keypoints li:before {
+    border-color: var(--header1);
+    content: "";
+    border-left: solid 2px;
+    height: 100%;
+    width: 1px;
+    left: -16px;
+    position: absolute;
+    display: block;
+}
+
+.profile-keypoints li:after {
+    content: "";
+    position: absolute;
+    left: -19.5px;
+    top: 8px;
+    height: 8px;
+    width: 8px;
+    border-radius: 50%;
+    display: inline-block;
+    background-color: var(--header2);
+}
+
+.profile-keypoints li:first-child:before {
+    top: 8px;
+}
+
+.profile-keypoints li:last-child:before {
+    height: 8px;
+}
+
+/* As the Markupcomponent is a base class we have to use deep */
+::deep .profile-keypoints li p {
+    display: inline;
+}

LinkDotNet.Blog.Web/wwwroot/css/basic.css

@@ -50,7 +50,7 @@ html {
 
 body {
     margin: 0;
-    background-image: linear-gradient(to bottom, var(--background-gradient-start) 60%, var(--background-gradient-end));
+    background-image: linear-gradient(to bottom, var(--background-gradient-start) 40%, var(--background-gradient-end));
     background-repeat: no-repeat;
     background-attachment: fixed;
     font-family: 'Quicksand', sans-serif;