diff --git a/frontend/src/assets/images/portfolio_avatar.png b/frontend/src/assets/images/portfolio_avatar.png
new file mode 100644
index 0000000..c1b3911
Binary files /dev/null and b/frontend/src/assets/images/portfolio_avatar.png differ
diff --git a/frontend/src/pages/Portfolio.tsx b/frontend/src/pages/Portfolio.tsx
index 270b15c..222ce26 100644
--- a/frontend/src/pages/Portfolio.tsx
+++ b/frontend/src/pages/Portfolio.tsx
@@ -7,6 +7,7 @@ import portfolio from "../content/portfolio.json";
 
 import forgejo from "../assets/images/forgejo.svg";
 import gitea from "../assets/images/gitea.svg";
+import avatar from "../assets/images/portfolio_avatar.png";
 
 const LOGOS: Record<string, string> = { forgejo, gitea };
 
@@ -175,9 +176,11 @@ export default function Portfolio(): ReactElement {
                     </div>
                     <div className="space-y-6">
                         <div className="bg-ctp-mantle border border-ctp-lavender-800 rounded-xl p-6">
-                            <div className="size-20 rounded-full bg-ctp-surface0 border border-ctp-text flex items-center justify-center text-2xl font-bold text-ctp-mauve mb-4">
-                                {profile.name[0]}
-                            </div>
+                            <img
+                                src={avatar}
+                                alt={`${profile.name} avatar`}
+                                className="size-28 border border-ctp-lavender-800 rounded-xl object-cover mb-4"
+                            />
                             <h2 className="text-3xl font-bold text-ctp-mauve">
                                 {profile.name}
                             </h2>