Add profile photo support to header with placeholder

- Added conditional profile photo display in header layout
- Created responsive CSS styling for circular profile image
- Added placeholder SVG with academic styling
- Updated _config.yml with profile_photo setting for easy customization
- Updated USER_CONFIG.md documentation
- Mobile-responsive design with proper ordering and sizing
- Photo appears on left side of header when profile_photo is set in config

Users can easily add their photo by:
1. Adding image to assets/images/
2. Setting profile_photo path in _config.yml

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Author: mechanicpanic

USER_CONFIG.md

@@ -13,6 +13,9 @@ title: "Your Name"                    # ← Your full name
 subtitle: "Your Position"             # ← Your academic title/position  
 email: [email protected]      # ← Your email address
 
+# Profile photo (add your photo to assets/images/ and update this path)
+profile_photo: "/assets/images/your-photo.jpg"  # ← Path to your photo
+
 # Social/Academic Profiles
 github_username: your_username        # ← Your GitHub username
 orcid: 0000-0000-0000-0000           # ← Your ORCID ID

_config.yml

@@ -4,6 +4,9 @@
 title: "Dr. Academic Name"
 subtitle: "Professor of Computer Science"
 email: [email protected]
+
+# Profile photo (add your photo to assets/images/ and update this path)
+profile_photo: "/assets/images/profile-photo.svg"
 description: >-
   Academic website featuring research publications, CV, and professional activities.
   Built with Jekyll and managed through Obsidian for seamless content creation.

_layouts/default.html

@@ -67,6 +67,11 @@
   <header class="header">
     <div class="container">
       <div class="header-content">
+        {% if site.profile_photo %}
+        <div class="header-photo">
+          <img src="{{ site.profile_photo | relative_url }}" alt="{{ site.title | escape }}" class="profile-image">
+        </div>
+        {% endif %}
         <div class="header-text">
           <h1 class="title">
             <a href="{{ "/" | relative_url }}">{{ site.title | escape }}</a>

assets/css/main.scss

@@ -238,6 +238,24 @@ tbody tr:nth-child(even) {
     gap: var(--space-8);
   }
 
+  .header-photo {
+    flex-shrink: 0;
+    
+    .profile-image {
+      width: 120px;
+      height: 120px;
+      border-radius: 50%;
+      object-fit: cover;
+      border: 3px solid var(--border);
+      background-color: var(--surface);
+      transition: border-color 0.2s ease;
+      
+      &:hover {
+        border-color: var(--accent-color);
+      }
+    }
+  }
+  
   .header-text {
     flex: 1;
   }
@@ -475,13 +493,29 @@ tbody tr:nth-child(even) {
     .header-content {
       flex-direction: column;
       gap: var(--space-4);
+      align-items: center;
+      text-align: center;
+    }
+    
+    .header-photo {
+      order: -1;
+      
+      .profile-image {
+        width: 100px;
+        height: 100px;
+      }
+    }
+    
+    .header-text {
+      order: 0;
     }
 
     .header-contact {
-      text-align: left;
+      order: 1;
+      text-align: center;
 
       .contact-links {
-        justify-content: flex-start;
+        justify-content: center;
       }
     }
   }