✨ Add custom profile image & styling for About Page

- Added a profile image to the About page using the Congo theme's `figure` shortcode.
- Introduced a custom CSS class `.about-me-image` to enable specialized styling for the image.
- Created `assets/css/custom.css` to house the new styling for the `figure` shortcode integration.
- Enhanced responsiveness and hover interactions for better mobile and desktop compatibility.

assets/css/custom.css

@@ -0,0 +1,45 @@
+/* ==========================
+   Global Styles for About Me Image
+========================== */
+
+/* Container for the profile image */
+.about-me-image {
+  display: block;
+  margin: 0 auto; /* Center the image container */
+  text-align: center;
+}
+
+/* Styling for the profile image */
+.about-me-image img {
+  width: 60%; /* Responsive width */
+  max-width: 200px; /* Prevent excessive scaling on large screens */
+  height: 300px; /* Fixed height for an oval appearance */
+  object-fit: cover; /* Maintain aspect ratio while filling the container */
+  border-radius: 50%; /* Creates an oval shape */
+  border: 3px solid #06b6d4; /* Accent border for visual emphasis */
+  box-shadow: 0 10px 20px rgba(5, 88, 238, 0.15); /* Subtle shadow for depth */
+  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Smooth hover transition */
+  padding: 5px; /* Padding around the image */
+}
+
+/* Hover effect for non-touch devices */
+.about-me-image img:hover {
+  transform: scale(1.05); /* Slight zoom effect on hover */
+  box-shadow: 0 15px 30px rgba(5, 88, 238, 0.25); /* Enhanced shadow on hover */
+}
+
+/* Mobile responsiveness for smaller screens */
+@media (max-width: 768px) {
+  .about-me-image img {
+    max-width: 150px; /* Reduce max width for smaller devices */
+    height: auto; /* Maintain proportion based on width */
+  }
+}
+
+/* Disable hover effects for touch devices */
+@media (hover: none) {
+  .about-me-image img:hover {
+    transform: none; /* Disable hover animations */
+    box-shadow: 0 10px 20px rgba(5, 88, 238, 0.15); /* Default shadow */
+  }
+}

config/_default/config.toml

@@ -12,3 +12,6 @@ summaryLength = 0
 
 [outputs]
   home = ["HTML", "RSS", "JSON"]
+
+[params]
+  custom_css = "custom.css" 

content/about/index.md

@@ -4,13 +4,22 @@ date: 2024-08-06
 showDate: false
 showReadingTime: false
 showTableofContents: false
-layout: "simple"
+# layout: "simple"
 showComments: false
 draft: false
 ---
+
+
+
 ## 🌍 My Journey 
  My career has been a journey of solving complex problems and optimizing systems. I began in high-pressure environments, where managing operations and projects required me to streamline processes to meet ever-increasing demands for efficiency. 🚀 Driven by the need for greater efficiency, I began exploring automation tools, starting with Excel macros to manage the increasing demands of reporting. 
 
+{{< figure
+    src="profile-about-44111-600x400.webp"
+    alt="Professional headshot of Socrates Lopez in a modern library setting"
+    class="about-me-image"
+>}}
+
 As I delved deeper into automation, I began to experiment with Python 🐍, which further fueled my interest in the technical aspects of problem-solving. When I transitioned into a role that required acting as a bridge 🔗 between clients and technical teams, I found myself at the intersection of business needs and technical execution. This position allowed me to leverage my operational experience while diving deeper into the world of infrastructure and 🏗️ systems management. Over time, this role naturally evolved into more technical responsibilities, aligning perfectly with the principles of DevOps, where I could apply my analytical skills to optimize and automate workflows.
 
 ## 🌩️ Driving Efficiency in the Cloud