added profile page and about

This commit is contained in:
Jackob_Punch 2023-09-30 19:34:06 +02:00
parent a5c33b47c5
commit f081466274
8 changed files with 57 additions and 2 deletions

View file

@ -0,0 +1,10 @@
@page "/about"
<PageTitle>About</PageTitle>
<h1>Abut this app</h1>
We made this app to provide a reliable platform for social working environments.
To create a renowned network where great minds can communicate their great ideas.
Innovation, teamwork, diversity, sommunity engagement, social connection are
all words that describe perfectly our desire to create that app.

View file

@ -9,10 +9,10 @@
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
private int currentCount = 1;
private void IncrementCount()
{
currentCount++;
currentCount*=2;
}
}

View file

@ -0,0 +1,24 @@
@page "/userprofile"
@code {
private string UserName = "John Doe";
private string Bio = "Software Developer";
private List<string> Skills = new List<string> { "C#", "ASP.NET Core", "Blazor" };
}
<div class="profile">
<img class="background" src="images/background.jpg" alt="Background" />
<img class="userprofileimage" src="images/kuba.jpg" alt="Profile Picture" />
<h1>@UserName</h1>
<p>@Bio</p>
<h2>Skills</h2>
<ul>
@foreach (var skill in Skills)
{
<li>@skill</li>
}
</ul>
</div>

View file

@ -12,6 +12,8 @@ main {
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}
.top-row {
background-color: #f7f7f7;
border-bottom: 1px solid #d6d5d5;

View file

@ -24,6 +24,11 @@
<span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="about">
<span class="oi oi-info" aria-hidden="true"></span> About
</NavLink>
</div>
</nav>
</div>

View file

@ -99,3 +99,17 @@ a, .btn-link {
.loading-progress-text:after {
content: var(--blazor-load-percentage-text, "Loading");
}
.userprofileimage{
position: absolute;
top: 0; /* Adjust as needed */
left: 0; /* Adjust as needed */
z-index: 1; /* Place the profile picture above the background image */
max-width: 200px;
max-height: 200px;
border-radius: 200px;
}
.background{
position: relative;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 966 KiB