Codex/apply styles to about page h8e48d

_config.yml

@@ -22,7 +22,7 @@ plugins:
 
 author:
   name: "Jiajun Liang"
-  picture: "/assets/images/avatar.jpg"
+  picture: "/assets/images/avatar.jpeg"
   bio: "Former QA engineer writing about code, markets, travel, and systems."
   location: "Vancouver, BC"
   email: "[email protected]"

_includes/about-content.md

@@ -0,0 +1,24 @@
+<p class="lead">QA engineer who thinks in systems, using AI copilots to explore markets, energy, and infrastructure—not to chase buzzwords.</p>
+
+## Background
+
+- 3+ years testing authentication and networking at Fortinet across LDAP, Kerberos, and HTTP/2/3 stacks.
+- Built automation with Python, Ansible, and CI pipelines to keep complex systems observable.
+- Apply reliability instincts to infrastructure, markets, and the way I move through cities.
+
+## Now (Vancouver, BC)
+
+- Using AI tools to research whatever I'm curious about—markets, energy, and system design.
+- Testing ideas through code, small bets, and daily routines instead of overexplaining case studies.
+- Writing notes to separate what actually works from what just sounds good.
+
+## Why I write
+
+To learn in public, connect with fellow systems thinkers, and compare maps of how software, capital, and travel reinforce each other.
+
+<div class="notice notice--primary" markdown="1">
+#### Let's connect
+- Email: [[email protected]](mailto:[email protected])
+- GitHub: [jackmeson1](https://github.com/jackmeson1)
+- LinkedIn: [jiajun-liang-qa](https://www.linkedin.com/in/jiajun-liang-qa/)
+</div>

about.md

@@ -1,17 +1,13 @@
 ---
-layout: single
+layout: page
 title: "About Jiajun"
 permalink: /about/
+excerpt: "QA engineer and systems thinker using AI copilots to explore markets, energy, and infrastructure."
 ---
 
-### 30-second snapshot
+{% include page-author.html %}
 
-- Former QA engineer building systems across **code, markets, travel, and learning**.
-- Designing a research cadence that blends risk modeling, automation, and long-form writing.
-- Currently slow-traveling out of Vancouver and turning observations into repeatable playbooks.
-
-### Elsewhere
-
-- [GitHub](https://github.com/jackmeson1)
-- [LinkedIn](https://www.linkedin.com/in/jiajun-liang-qa/)
-- [Email](mailto:[email protected])
+{% capture about_content %}
+{% include about-content.md %}
+{% endcapture %}
+{{ about_content | markdownify }}

assets/css/visual-enhancements.css

@@ -183,6 +183,36 @@
   border-color: rgba(99, 102, 241, 0.2);
 }
 
+/* ========================================
+   ABOUT PAGE AUTHOR PROFILE
+   ======================================== */
+
+.page-author {
+  align-items: center;
+  gap: var(--space-6, 1.5rem);
+}
+
+.page-author .author-avatar {
+  width: clamp(9rem, 22vw, 12rem);
+  height: clamp(9rem, 22vw, 12rem);
+  border-radius: 50%;
+  object-fit: cover;
+  flex-shrink: 0;
+  box-shadow: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, 0.1));
+}
+
+@media (max-width: 640px) {
+  .page-author {
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .page-author .author-avatar {
+    width: clamp(8rem, 45vw, 11rem);
+    height: clamp(8rem, 45vw, 11rem);
+  }
+}
+
 /* ========================================
    ANIMATED GRADIENT BORDERS
    ======================================== */

pages/about.md

@@ -2,32 +2,12 @@
 layout: page
 permalink: /about/
 title: "About Jiajun"
-subtitle: "Engineer, market researcher, traveler, meditator"
-lede: "I’m building a digital garden to document how code, capital, travel, and inner work feed each other."
+excerpt: "QA engineer and systems thinker using AI copilots to explore markets, energy, and infrastructure."
 ---
 
-## 👤 Who I Am
+{% include page-author.html %}
 
-- 🔧 Former QA Engineer @ Fortinet (**Mar 2022 – Sep 2025**)
-- 📊 Quant-curious on AI, energy, market structure
-- ✈️ Slow traveler optimizing cross-city routines
-
-## 🎓 Background
-
-- M.Eng., Peking University · M.Sc., University of Victoria
-
-## 💡 Why This Site
-
-To create space for cross-disciplinary learning—technical craft, finance frameworks, travel systems, and mind practices—captured in public.
-
-## 📍 Now
-
-- **Location**: Vancouver · **Learning**: Docker, Kubernetes, Playwright
-
-*Last updated: {{ site.time | date: "%b %d, %Y" }}*
-
-## 📬 Connect
-
-Email: [[email protected]](mailto:[email protected]) · GitHub: [jackmeson1](https://github.com/jackmeson1) · LinkedIn: [jiajun-liang](https://www.linkedin.com/in/jiajun-liang-qa/)
-
-**Want my full resume?** View on LinkedIn or download the CV.
+{% capture about_content %}
+{% include about-content.md %}
+{% endcapture %}
+{{ about_content | markdownify }}