Simplify About page structure and styling

README.md

@@ -112,7 +112,7 @@ jackmeson1.github.io/
 ├── assets/
 │   ├── css/                 # Stylesheets
 │   │   ├── main.scss        # Theme overrides
-│   │   ├── visual-enhancements.css  # Glass morphism, animations
+│   │   ├── custom.css       # Site-wide tokens and utilities
 │   │   └── design-system.css        # Design tokens
 │   │
 │   └── images/posts/        # Article visuals (SVG)
@@ -127,11 +127,14 @@ jackmeson1.github.io/
 │   └── timeline.html        # Timeline visualization
 │
 ├── pages/                   # Static pages
-│   ├── about.md             # About page
 │   ├── blog.md              # Blog index
+│   ├── contact.md           # Contact form
+│   ├── garden.md            # Evergreen notes hub
 │   ├── library.md           # Reading list
+│   ├── privacy.md           # Privacy policy
 │   └── travel.md            # Travel notes
 │
+├── about.md                 # About page (root-level for theme)
 ├── _config.yml              # Jekyll configuration
 ├── Gemfile                  # Ruby dependencies
 ├── CLAUDE.md                # AI assistant instructions

_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/head-custom.html

@@ -1,6 +1,5 @@
-<!-- Custom CSS and Visual Enhancements -->
+<!-- Custom CSS -->
 <link rel="stylesheet" href="{{ '/assets/css/components.css' | relative_url }}">
-<link rel="stylesheet" href="{{ '/assets/css/visual-enhancements.css' | relative_url }}">
 
 <!-- Additional Web Fonts -->
 <link rel="preconnect" href="https://fonts.googleapis.com">

about.md

@@ -1,17 +1,32 @@
 ---
-layout: single
+layout: page
 title: "About Jiajun"
 permalink: /about/
+excerpt: "QA engineer and systems thinker using AI agents 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.
+<p class="lead">I'm Jiajun Liang, a QA engineer who thinks in systems. I use AI agents to connect what I learn about software, markets, and slow travel.</p>
 
-### Elsewhere
+## Background
 
-- [GitHub](https://github.com/jackmeson1)
-- [LinkedIn](https://www.linkedin.com/in/jiajun-liang-qa/)
-- [Email](mailto:[email protected])
+- 3+ years testing authentication and networking at Fortinet across LDAP, Kerberos, and HTTP/2/3.
+- Built automation with Python, Ansible, and CI pipelines to keep complex systems observable.
+- Carry reliability thinking into how I allocate time, capital, and attention.
+
+## Currently
+
+- Researching markets and energy infrastructure with AI copilots to surface signals quickly.
+- Turning experiments into lightweight tools, from monitoring scripts to travel checklists.
+- Writing notes in English and Chinese to compare what works versus what just sounds good.
+
+## Why I write
+
+I share working notes to learn in public, meet fellow systems thinkers, and stay honest about what the data shows.
+
+## 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/)

assets/css/custom.css

@@ -640,3 +640,31 @@ code {
     display: none;
   }
 }
+
+/* About page author block */
+.page-author {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.page-author .author-avatar {
+  width: clamp(9rem, 22vw, 12rem);
+  height: clamp(9rem, 22vw, 12rem);
+  border-radius: 50%;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+@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);
+  }
+}