Add personalized avatar and favicon design

- Create custom SVG avatar with developer theme (glasses, laptop, blue shirt)
- Add avatar to header logo and sidebar about widget
- Include larger avatar in about page hero section
- Create matching SVG favicon with same design elements
- Add web app manifest for PWA support
- Implement hover effects and responsive sizing for avatars
- Use consistent branding colors (#667eea theme)
- Enhance visual identity across the entire site

Author: realcoding2003

_includes/header.html

@@ -3,7 +3,7 @@
         <div class="container">
             <div class="navbar-brand">
                 <a href="{{ '/' | relative_url }}" class="site-logo">
-                    <i class="fas fa-code"></i>
+                    <img src="{{ '/assets/images/avatar.svg' | relative_url }}" alt="Kevin Park" class="logo-avatar">
                     <span>{{ site.title }}</span>
                 </a>
             </div>

_layouts/default.html

@@ -10,7 +10,10 @@
     {% seo %}
 
     <!-- Favicon -->
-    <link rel="icon" type="image/x-icon" href="/assets/favicon.ico">
+    <link rel="icon" type="image/svg+xml" href="/assets/images/favicon.svg">
+    <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico">
+    <link rel="apple-touch-icon" sizes="180x180" href="/assets/images/apple-touch-icon.png">
+    <link rel="manifest" href="/assets/images/site.webmanifest">
 
     <!-- Fonts -->
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

about.md

@@ -5,6 +5,10 @@ subtitle: 개발자 Kevin Park에 대해 알아보세요
 permalink: /about/
 ---
 
+<div class="about-hero">
+  <img src="/assets/images/avatar.svg" alt="Kevin Park" class="about-avatar-large">
+</div>
+
 안녕하세요! 저는 **Kevin Park**입니다. 실무에서 쌓은 개발 경험과 새로 배운 기술들을 이 블로그를 통해 공유하고 있습니다.
 
 ## 🚀 개발 여정

assets/css/main.css

@@ -206,6 +206,21 @@ a:hover {
     text-decoration: none;
 }
 
+.logo-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    border: 2px solid var(--primary-color);
+    transition: var(--transition);
+    background: var(--background);
+    padding: 2px;
+}
+
+.logo-avatar:hover {
+    transform: scale(1.1);
+    box-shadow: 0 4px 15px var(--shadow);
+}
+
 .navbar-menu {
     display: flex;
     align-items: center;
@@ -367,6 +382,28 @@ a:hover {
     margin: 0 auto;
 }
 
+/* About Page Hero */
+.about-hero {
+    text-align: center;
+    margin-bottom: var(--spacing-2xl);
+}
+
+.about-avatar-large {
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    border: 4px solid var(--primary-color);
+    background: var(--background);
+    padding: 4px;
+    transition: var(--transition);
+    box-shadow: 0 8px 25px var(--shadow);
+}
+
+.about-avatar-large:hover {
+    transform: scale(1.05);
+    box-shadow: 0 12px 35px var(--shadow);
+}
+
 /* Post Meta */
 .post-meta {
     display: flex;
@@ -719,6 +756,26 @@ a:hover {
 }
 
 /* About Widget */
+.about-avatar {
+    text-align: center;
+    margin-bottom: var(--spacing-md);
+}
+
+.avatar-image {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    border: 3px solid var(--primary-color);
+    transition: var(--transition);
+    background: var(--background);
+    padding: 3px;
+}
+
+.avatar-image:hover {
+    transform: scale(1.05);
+    box-shadow: 0 8px 25px var(--shadow);
+}
+
 .about-content p {
     color: var(--text-secondary);
     line-height: 1.6;

assets/images/avatar.svg

@@ -0,0 +1,22 @@
+{
+    "name": "Real Coding Blog",
+    "short_name": "RealCoding",
+    "description": "실무에서 배운 개발 노하우와 기술적 인사이트를 공유합니다",
+    "icons": [
+        {
+            "src": "/assets/images/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/assets/images/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#667eea",
+    "background_color": "#0f1419",
+    "display": "standalone",
+    "start_url": "/",
+    "scope": "/"
+}

assets/images/favicon.svg

@@ -68,6 +68,9 @@ <h3 class="post-title">
         <div class="sidebar-widget about-widget">
           <h3>About</h3>
           <div class="about-content">
+            <div class="about-avatar">
+              <img src="{{ '/assets/images/avatar.svg' | relative_url }}" alt="Kevin Park" class="avatar-image">
+            </div>
             <p>실무 중심의 개발 이야기를 기록합니다. 문제 해결 과정과 배운 점들을 공유하며, 다른 개발자들에게 도움이 되고자 합니다.</p>
             <a href="/about" class="about-link">더 알아보기 →</a>
           </div>