Profile page CSS fix

This commit is contained in:
femsci 2023-09-30 21:01:32 +02:00
parent 554228e917
commit 563ed5ffe3
Signed by: femsci
GPG key ID: 08F7911F0E650C67
3 changed files with 48 additions and 20 deletions

View file

@ -1,15 +1,20 @@
@page "/userprofile" @page "/user/{username}"
@code { @code {
private string UserName = "John Doe"; [Parameter]
public string Username { get; set; } = "johndoeUwU";
private string FullName = "meow uwu";
private string Bio = "Software Developer"; private string Bio = "Software Developer";
private List<string> Skills = new List<string> { "C#", "ASP.NET Core", "Blazor" }; private List<string> Skills = new List<string> { "C#", "ASP.NET Core", "Blazor" };
} }
<div class="profile"> <div class="user-profile">
<img class="background" src="images/background.jpg" alt="Background" /> <img class="background" src="images/background.jpg" alt="Background" />
<img class="userprofileimage" src="images/kuba.jpg" alt="Profile Picture" /> <img class="profile-img" src="images/kuba.jpg" alt="Profile Picture" />
<h1>@UserName</h1> <div class="profile-names">
<h1 class="profile-username">@($"@{Username}")</h1>
<h3 class="profile-fullname">(@FullName)</h3>
</div>
<p>@Bio</p> <p>@Bio</p>
<h2>Skills</h2> <h2>Skills</h2>
<ul> <ul>
@ -19,6 +24,3 @@
} }
</ul> </ul>
</div> </div>

View file

@ -8,12 +8,22 @@
} }
}, },
"profiles": { "profiles": {
"http": {
"commandName": "Project",
"dotnetRunMessages": true,
"launchBrowser": true,
"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
"applicationUrl": "http://localhost:5162",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
},
"https": { "https": {
"commandName": "Project", "commandName": "Project",
"dotnetRunMessages": true, "dotnetRunMessages": true,
"launchBrowser": true, "launchBrowser": true,
"inspectUri": "{wsProtocol}://catboy.men/_framework/debug/ws-proxy?browser={browserInspectUri}", "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
"applicationUrl": "http://0.0.0.0:2137", "applicationUrl": "https://localhost:7047;http://localhost:5162",
"environmentVariables": { "environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development" "ASPNETCORE_ENVIRONMENT": "Development"
} }

View file

@ -87,16 +87,6 @@ a,
animation-timing-function: linear; animation-timing-function: linear;
} }
.userprofileimage {
position: absolute;
top: 22rem; /* Adjust as needed */
left: 15rem; /* Adjust as needed */
z-index: 1; /* Place the profile picture above the background image */
max-width: 200px;
max-height: 200px;
border-radius: 200px;
}
@keyframes spin { @keyframes spin {
0% { 0% {
transform: rotate(0deg); transform: rotate(0deg);
@ -106,3 +96,29 @@ a,
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
.profile-img {
position: absolute;
top: 22rem; /* Adjust as needed */
left: 15rem; /* Adjust as needed */
z-index: 1; /* Place the profile picture above the background image */
max-width: 200px;
max-height: 200px;
border-radius: 200px;
}
.profile-names {
width: fit-content;
margin-top: 0.5rem;
}
.profile-username {
font-size: 2.5rem;
margin-bottom: 0;
}
.profile-fullname {
font-size: 1.2rem;
margin-top: 0;
color: gray;
}