bstein/bstein-dev-home
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use profile photo in header and about

Browse Source
This commit is contained in:
Brad Stein 2025-12-19 16:53:29 -03:00
parent e584f272f0
commit fab331eef1
3 changed files with 24 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
frontend/src/assets/profile-avatar.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

17
frontend/src/components/TopBar.vue
View File

@ -1,7 +1,9 @@
<template>
<header class="topbar">
<div class="profile" @click="goAbout">
<div class="avatar">BS</div>
<div class="avatar">
<img src="@/assets/profile-avatar.jpg" alt="Brad Stein" />
</div>
<div>
<div class="name">Brad Stein</div>
<div class="role">Software Development Engineer</div>
@ -50,12 +52,17 @@ const goAbout = () => router.push("/about");
width: 44px;
height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(0, 229, 197, 0.5), rgba(127, 124, 255, 0.45));
border: 1px solid rgba(255, 255, 255, 0.14);
overflow: hidden;
display: grid;
place-items: center;
color: #010e17;
font-weight: 700;
border: 1px solid rgba(255, 255, 255, 0.14);
background: linear-gradient(135deg, rgba(0, 229, 197, 0.5), rgba(127, 124, 255, 0.45));
}
.avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.name {

18
frontend/src/views/AboutView.vue
View File

@ -2,7 +2,9 @@
<div class="page">
<section class="card about">
<div class="left">
<div class="portrait">BS</div>
<div class="portrait">
<img src="@/assets/profile-avatar.jpg" alt="Brad Stein" />
</div>
<div class="contact">
<div class="name">Brad Stein</div>
<div class="role">Senior Software Development Engineer </div>
@ -194,13 +196,17 @@ const timeline = [
width: 120px;
height: 120px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(0, 229, 197, 0.5), rgba(127, 124, 255, 0.45));
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.12);
display: grid;
place-items: center;
font-size: 34px;
font-weight: 800;
color: #010e17;
border: 1px solid rgba(255, 255, 255, 0.12);
background: linear-gradient(135deg, rgba(0, 229, 197, 0.5), rgba(127, 124, 255, 0.45));
}
.portrait img {
width: 100%;
height: 100%;
object-fit: cover;
}
.left {