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

Merge pull request 'Use profile photo in header and about' (#1) from feature/profile-avatar into master

Browse Source 
Reviewed-on: #1
This commit is contained in:
bstein 2025-12-19 19:55:13 +00:00
commit dc85fa83c4
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> <template>
<header class="topbar"> <header class="topbar">
<div class="profile" @click="goAbout"> <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>
<div class="name">Brad Stein</div> <div class="name">Brad Stein</div>
<div class="role">Software Development Engineer</div> <div class="role">Software Development Engineer</div>
@ -50,12 +52,17 @@ const goAbout = () => router.push("/about");
width: 44px; width: 44px;
height: 44px; height: 44px;
border-radius: 50%; 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; display: grid;
place-items: center; place-items: center;
color: #010e17; background: linear-gradient(135deg, rgba(0, 229, 197, 0.5), rgba(127, 124, 255, 0.45));
font-weight: 700; }
border: 1px solid rgba(255, 255, 255, 0.14);
.avatar img {
width: 100%;
height: 100%;
object-fit: cover;
} }
.name { .name {

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

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