diff --git a/.gitignore b/.gitignore
index 332318a..f421f86 100644
--- a/.gitignore
+++ b/.gitignore
@@ -33,3 +33,4 @@ pnpm-debug.log*
 elm-stuff/*
 elm-pages/*
 .aider*
+pnpm_output.log
diff --git a/blog_desktop.png b/blog_desktop.png
new file mode 100644
index 0000000..5d205aa
Binary files /dev/null and b/blog_desktop.png differ
diff --git a/dev.log b/dev.log
new file mode 100644
index 0000000..2703db1
--- /dev/null
+++ b/dev.log
@@ -0,0 +1,44 @@
+ WARN  Cannot switch to pnpm@latest: "latest" is not a valid version
+
+> julwrites.github.io@2.0.0 dev /app
+> astro dev
+
+16:48:57 [types] Generated 1ms
+
+Auto-generating collections for folders in "src/content/" that are not defined as collections.
+This is deprecated, so you should define these collections yourself in "src/content.config.ts".
+The following collections have been auto-generated: drafts
+
+16:48:58 [content] Syncing content
+16:48:58 [content] Astro config changed
+16:48:58 [content] Clearing content store
+16:48:59 [content] Synced content
+
+ astro  v5.7.4 ready in 2847 ms
+
+┃ Local    http://localhost:4321/
+┃ Network  use --host to expose
+
+16:48:59 watching for file changes...
+Browserslist: browsers data (caniuse-lite) is 11 months old. Please run:
+  npx update-browserslist-db@latest
+  Why you should do it regularly: https://github.com/browserslist/update-db#readme
+16:49:11 [200] / 582ms
+16:49:13 [200] /projects/ 162ms
+Blog posts found: 20
+16:49:14 [200] /blog/ 16ms
+16:49:15 [200] /labs/ 6ms
+16:53:51 [watch] /src/styles/global.css
+16:53:51 [watch] src/styles/shared.css
+16:54:14 [200] / 48ms
+16:54:15 [200] /projects/ 17ms
+Blog posts found: 20
+16:54:17 [200] /blog/ 13ms
+16:54:18 [200] /labs/ 6ms
+17:01:20 [watch] /src/styles/global.css
+17:01:20 [watch] src/styles/shared.css
+17:01:45 [200] / 20ms
+17:01:46 [200] /projects/ 14ms
+Blog posts found: 20
+17:01:47 [200] /blog/ 12ms
+17:01:47 [200] /labs/ 5ms
diff --git a/home_desktop.png b/home_desktop.png
new file mode 100644
index 0000000..365fb88
Binary files /dev/null and b/home_desktop.png differ
diff --git a/labs_desktop.png b/labs_desktop.png
new file mode 100644
index 0000000..5e39d39
Binary files /dev/null and b/labs_desktop.png differ
diff --git a/projects_desktop.png b/projects_desktop.png
new file mode 100644
index 0000000..b48390d
Binary files /dev/null and b/projects_desktop.png differ
diff --git a/public/assets/images/projects/discipleship-journal.png b/public/assets/images/projects/discipleship-journal.png
new file mode 100644
index 0000000..0228ebb
Binary files /dev/null and b/public/assets/images/projects/discipleship-journal.png differ
diff --git a/public/labs/mortgage-calculator/app.js b/public/labs/mortgage-calculator/app.js
index 7a7e9be..62ff3ae 100644
--- a/public/labs/mortgage-calculator/app.js
+++ b/public/labs/mortgage-calculator/app.js
@@ -24,6 +24,7 @@ document.addEventListener('DOMContentLoaded', () => {
   let recurringExtraPayments = [];
   let monthlyPayments = [];
   let recalcMode = 'reduceTerm';
+  let calcAppMode = 'standard'; // 'standard' or 'hdb'
 
   // Initialize when DOM is ready
   initializeCalculator();
@@ -56,28 +57,49 @@ document.addEventListener('DOMContentLoaded', () => {
   function setupFormListeners() {
     console.log('Setting up form listeners...');
 
+    // Mode toggle listeners
+    const modeOptions = document.querySelectorAll('input[name="calcMode"]');
+    modeOptions.forEach(option => {
+      option.addEventListener('change', function (e) {
+        if (e.target.checked) {
+          calcAppMode = e.target.value;
+          document.getElementById('mortgageForm').style.display = calcAppMode === 'standard' ? 'block' : 'none';
+          document.getElementById('hdbForm').style.display = calcAppMode === 'hdb' ? 'block' : 'none';
+
+          const recalcSection = document.querySelector('.recalc-options-compact');
+          if (recalcSection) {
+            recalcSection.style.display = calcAppMode === 'standard' ? 'flex' : 'none';
+          }
+
+          updateLoanDataFromForm();
+          calculateMortgage();
+        }
+      });
+    });
+
     // Loan parameter inputs
-    const inputs = ['housingPrice', 'loanAmount', 'loanYears', 'interestRate', 'startMonth', 'startYear'];
+    const inputs = ['housingPrice', 'loanAmount', 'loanYears', 'interestRate', 'startMonth', 'startYear',
+      'hdbLoanBalance', 'hdbMonthlyInstalment', 'hdbInterestRate', 'hdbStartMonth', 'hdbStartYear'];
     inputs.forEach(inputId => {
       const element = document.getElementById(inputId);
       if (element) {
-        element.addEventListener('input', function() {
+        element.addEventListener('input', function () {
           updateLoanDataFromForm();
           calculateMortgage();
         });
-        element.addEventListener('change', function() {
+        element.addEventListener('change', function () {
           updateLoanDataFromForm();
           calculateMortgage();
         });
       }
     });
 
-    
+
 
     // Recalculation radio buttons - FIX: Add proper event listeners
     const recalcOptions = document.querySelectorAll('input[name="recalcOption"]');
     recalcOptions.forEach(option => {
-      option.addEventListener('change', function(e) {
+      option.addEventListener('change', function (e) {
         if (e.target.checked) {
           const oldMode = recalcMode;
           recalcMode = e.target.value;
@@ -95,7 +117,7 @@ document.addEventListener('DOMContentLoaded', () => {
     const addBtn = document.getElementById('addExtraPayment');
     if (addBtn) {
       console.log('Add button found, attaching event listener');
-      addBtn.addEventListener('click', function(e) {
+      addBtn.addEventListener('click', function (e) {
         e.preventDefault();
         console.log('Add button clicked');
         addExtraPayment();
@@ -107,7 +129,7 @@ document.addEventListener('DOMContentLoaded', () => {
     // Enter key in amount field
     const amountInput = document.getElementById('extraPaymentAmount');
     if (amountInput) {
-      amountInput.addEventListener('keypress', function(e) {
+      amountInput.addEventListener('keypress', function (e) {
         if (e.key === 'Enter') {
           e.preventDefault();
           addExtraPayment();
@@ -118,7 +140,7 @@ document.addEventListener('DOMContentLoaded', () => {
     // Form submission
     const form = document.getElementById('extraPaymentForm');
     if (form) {
-      form.addEventListener('submit', function(e) {
+      form.addEventListener('submit', function (e) {
         e.preventDefault();
         addExtraPayment();
       });
@@ -128,7 +150,7 @@ document.addEventListener('DOMContentLoaded', () => {
   function setupRecurringExtraPaymentListeners() {
     const addBtn = document.getElementById('addRecurringExtraPayment');
     if (addBtn) {
-      addBtn.addEventListener('click', function(e) {
+      addBtn.addEventListener('click', function (e) {
         e.preventDefault();
         addRecurringExtraPayment();
       });
@@ -138,7 +160,7 @@ document.addEventListener('DOMContentLoaded', () => {
   function setupExportListeners() {
     const monthlyBtn = document.getElementById('exportMonthlyBtn');
     if (monthlyBtn) {
-      monthlyBtn.addEventListener('click', function(e) {
+      monthlyBtn.addEventListener('click', function (e) {
         e.preventDefault();
         exportMonthlyPaymentsToCSV();
       });
@@ -146,7 +168,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
     const extraBtn = document.getElementById('exportExtraBtn');
     if (extraBtn) {
-      extraBtn.addEventListener('click', function(e) {
+      extraBtn.addEventListener('click', function (e) {
         e.preventDefault();
         exportExtraPaymentsToCSV();
       });
@@ -156,17 +178,26 @@ document.addEventListener('DOMContentLoaded', () => {
   function updateLoanDataFromForm() {
     console.log('Updating loan data from form...');
 
-    loanData.housingPrice = parseFloat(document.getElementById('housingPrice').value) || 0;
-    loanData.loanAmount = parseFloat(document.getElementById('loanAmount').value) || 0;
-    loanData.loanYears = parseInt(document.getElementById('loanYears').value) || 0;
-    loanData.interestRate = parseFloat(document.getElementById('interestRate').value) || 0;
-    loanData.startMonth = parseInt(document.getElementById('startMonth').value) || 0;
-    loanData.startYear = parseInt(document.getElementById('startYear').value) || 2024;
-
-    // Validate loan amount doesn't exceed housing price
-    if (loanData.loanAmount > loanData.housingPrice && loanData.housingPrice > 0) {
-      document.getElementById('loanAmount').value = loanData.housingPrice;
-      loanData.loanAmount = loanData.housingPrice;
+    if (calcAppMode === 'standard') {
+      loanData.housingPrice = parseFloat(document.getElementById('housingPrice').value) || 0;
+      loanData.loanAmount = parseFloat(document.getElementById('loanAmount').value) || 0;
+      loanData.loanYears = parseInt(document.getElementById('loanYears').value) || 0;
+      loanData.interestRate = parseFloat(document.getElementById('interestRate').value) || 0;
+      loanData.startMonth = parseInt(document.getElementById('startMonth').value) || 0;
+      loanData.startYear = parseInt(document.getElementById('startYear').value) || 2024;
+
+      // Validate loan amount doesn't exceed housing price
+      if (loanData.loanAmount > loanData.housingPrice && loanData.housingPrice > 0) {
+        document.getElementById('loanAmount').value = loanData.housingPrice;
+        loanData.loanAmount = loanData.housingPrice;
+      }
+    } else {
+      loanData.loanAmount = parseFloat(document.getElementById('hdbLoanBalance').value) || 0;
+      loanData.monthlyPayment = parseFloat(document.getElementById('hdbMonthlyInstalment').value) || 0;
+      loanData.interestRate = parseFloat(document.getElementById('hdbInterestRate').value) || 0;
+      loanData.startMonth = parseInt(document.getElementById('hdbStartMonth').value) || 0;
+      loanData.startYear = parseInt(document.getElementById('hdbStartYear').value) || 2024;
+      loanData.loanYears = 50; // High ceiling max limit
     }
 
     console.log('Loan data updated:', loanData);
@@ -194,23 +225,37 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     // Calculate basic monthly payment (original)
-    loanData.monthlyPayment = calculateMonthlyPayment(
-      loanData.loanAmount,
-      loanData.interestRate,
-      loanData.loanYears
-    );
+    if (calcAppMode === 'standard') {
+      loanData.monthlyPayment = calculateMonthlyPayment(
+        loanData.loanAmount,
+        loanData.interestRate,
+        loanData.loanYears
+      );
+    }
+    loanData.recastMonthlyPayment = 0;
 
     console.log('Base monthly payment:', loanData.monthlyPayment);
 
     // FIX: Generate different amortization schedules based on recalc mode
-    if (extraPayments.length > 0 || recurringExtraPayments.length > 0) {
-      if (recalcMode === 'reduceTerm') {
-        generateAmortizationScheduleReduceTerm();
-      } else {
-        generateAmortizationScheduleReducePayment();
+    if (calcAppMode === 'hdb') {
+      recalcMode = 'reduceTerm'; // HDB reduces term
+      generateAmortizationScheduleHDB(false);
+      loanData.originalTotalInterest = loanData.currentTotalInterest;
+      loanData.originalPayoffDate = loanData.currentPayoffDate;
+
+      if (extraPayments.length > 0 || recurringExtraPayments.length > 0) {
+        generateAmortizationScheduleHDB(true);
       }
     } else {
-      generateAmortizationScheduleOriginal();
+      if (extraPayments.length > 0 || recurringExtraPayments.length > 0) {
+        if (recalcMode === 'reduceTerm') {
+          generateAmortizationScheduleReduceTerm();
+        } else {
+          generateAmortizationScheduleReducePayment();
+        }
+      } else {
+        generateAmortizationScheduleOriginal();
+      }
     }
 
     // Update UI
@@ -222,6 +267,94 @@ document.addEventListener('DOMContentLoaded', () => {
     console.log('Mortgage calculation complete');
   }
 
+  function generateAmortizationScheduleHDB(applyExtra) {
+    const principal = loanData.loanAmount;
+    const monthlyRate = loanData.interestRate / 100 / 12; // Standard monthly
+    const monthlyPayment = loanData.monthlyPayment;
+
+    let remainingBalance = principal;
+    let totalInterest = 0;
+
+    monthlyPayments = [];
+
+    const startDate = new Date(loanData.startYear, loanData.startMonth, 1);
+    let paymentNumber = 1;
+    let currentDate = new Date(startDate);
+
+    const sortedExtraPayments = [...extraPayments].sort((a, b) => a.paymentDate - b.paymentDate);
+
+    while (remainingBalance > 0.01 && paymentNumber < 1000) {
+      let totalExtraThisMonth = 0;
+
+      if (applyExtra) {
+        const extraPaymentsThisMonth = sortedExtraPayments.filter(ep =>
+          ep.paymentDate.getFullYear() === currentDate.getFullYear() &&
+          ep.paymentDate.getMonth() === currentDate.getMonth()
+        );
+
+        if (extraPaymentsThisMonth.length > 0) {
+          totalExtraThisMonth = extraPaymentsThisMonth.reduce((sum, ep) => sum + ep.amount, 0);
+        }
+
+        recurringExtraPayments.forEach(rep => {
+          const start = new Date(rep.startDate);
+          const end = new Date(rep.endDate);
+          if (currentDate >= start && currentDate <= end) {
+            if (rep.frequency === 'monthly') {
+              totalExtraThisMonth += rep.amount;
+            } else if (rep.frequency === 'quarterly' && (currentDate.getMonth() - start.getMonth()) % 3 === 0) {
+              totalExtraThisMonth += rep.amount;
+            } else if (rep.frequency === 'annually' && currentDate.getMonth() === start.getMonth()) {
+              totalExtraThisMonth += rep.amount;
+            }
+          }
+        });
+      }
+
+      // HDB specific exact logic
+      // HDB uses standard Monthly Rest calculation (rate / 12)
+      const interestPayment = Math.round(remainingBalance * monthlyRate * 100) / 100;
+      let principalPayment = monthlyPayment - interestPayment;
+
+      principalPayment += totalExtraThisMonth;
+
+      if (principalPayment > remainingBalance) {
+        principalPayment = remainingBalance;
+      }
+
+      if ((monthlyPayment + totalExtraThisMonth) > remainingBalance + interestPayment) {
+        principalPayment = remainingBalance;
+      }
+
+      remainingBalance -= principalPayment;
+      totalInterest += interestPayment;
+
+      const payment = {
+        paymentNumber,
+        paymentDate: new Date(currentDate),
+        monthlyPayment: monthlyPayment,
+        principalPayment: principalPayment,
+        interestPayment: interestPayment,
+        remainingBalance: Math.max(0, remainingBalance),
+        extraPayment: totalExtraThisMonth,
+        hasExtraPayment: totalExtraThisMonth > 0
+      };
+
+      monthlyPayments.push(payment);
+
+      if (remainingBalance <= 0.01) {
+        break;
+      }
+
+      paymentNumber++;
+      currentDate.setMonth(currentDate.getMonth() + 1);
+    }
+
+    loanData.currentTotalInterest = totalInterest;
+    loanData.currentPayoffDate = monthlyPayments.length > 0 ?
+      monthlyPayments[monthlyPayments.length - 1].paymentDate : null;
+  }
+
   function generateAmortizationScheduleOriginal() {
     const principal = loanData.loanAmount;
     const monthlyRate = loanData.interestRate / 100 / 12;
@@ -609,7 +742,7 @@ document.addEventListener('DOMContentLoaded', () => {
       removeBtn.title = 'Remove this extra payment';
 
       // FIX: Use the original index to ensure proper removal
-      removeBtn.addEventListener('click', function(e) {
+      removeBtn.addEventListener('click', function (e) {
         e.preventDefault();
         e.stopPropagation();
         console.log('Remove button clicked for index:', payment.originalIndex);
@@ -650,7 +783,7 @@ document.addEventListener('DOMContentLoaded', () => {
       removeBtn.type = 'button';
       removeBtn.title = 'Remove this recurring extra payment';
 
-      removeBtn.addEventListener('click', function(e) {
+      removeBtn.addEventListener('click', function (e) {
         e.preventDefault();
         e.stopPropagation();
         removeRecurringExtraPayment(index);
@@ -772,11 +905,9 @@ document.addEventListener('DOMContentLoaded', () => {
     console.log('Removing extra payment at index:', index);
 
     if (index >= 0 && index < extraPayments.length) {
-      if (confirm('Remove this extra payment?')) {
-        extraPayments.splice(index, 1);
-        console.log('Extra payment removed. Remaining count:', extraPayments.length);
-        calculateMortgage(); // This will trigger recalculation and display update
-      }
+      extraPayments.splice(index, 1);
+      console.log('Extra payment removed. Remaining count:', extraPayments.length);
+      calculateMortgage(); // This will trigger recalculation and display update
     } else {
       console.error('Invalid index for removing extra payment:', index);
     }
@@ -784,10 +915,8 @@ document.addEventListener('DOMContentLoaded', () => {
 
   function removeRecurringExtraPayment(index) {
     if (index >= 0 && index < recurringExtraPayments.length) {
-      if (confirm('Remove this recurring extra payment?')) {
-        recurringExtraPayments.splice(index, 1);
-        calculateMortgage();
-      }
+      recurringExtraPayments.splice(index, 1);
+      calculateMortgage();
     }
   }
 
@@ -904,7 +1033,7 @@ document.addEventListener('DOMContentLoaded', () => {
   }
 
   // Keyboard shortcuts
-  document.addEventListener('keydown', function(e) {
+  document.addEventListener('keydown', function (e) {
     if ((e.ctrlKey || e.metaKey) && e.key === 'm') {
       e.preventDefault();
       exportMonthlyPaymentsToCSV();
diff --git a/public/labs/mortgage-calculator/index.html b/public/labs/mortgage-calculator/index.html
index 4d8bd99..24614a8 100644
--- a/public/labs/mortgage-calculator/index.html
+++ b/public/labs/mortgage-calculator/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -7,6 +8,7 @@
     <link rel="stylesheet" href="../shared.css">
     <link rel="stylesheet" href="style.css">
 </head>
+
 <body data-theme="dark">
     <div class="container">
         <header class="app-header">
@@ -14,6 +16,17 @@ <h1 class="page-header">Compact Mortgage Calculator</h1>
         </header>
         <button class="theme-toggle" id="theme-toggle">Toggle Dark Mode</button>
 
+        <!-- Mode Toggle -->
+        <div class="mode-toggle-compact"
+            style="display: flex; gap: 1rem; margin-bottom: 1rem; justify-content: center;">
+            <label style="cursor: pointer; display: flex; align-items: center; gap: 0.5rem; color: var(--text-color);">
+                <input type="radio" name="calcMode" value="standard" checked> Standard Mortgage
+            </label>
+            <label style="cursor: pointer; display: flex; align-items: center; gap: 0.5rem; color: var(--text-color);">
+                <input type="radio" name="calcMode" value="hdb"> HDB Savings Simulator
+            </label>
+        </div>
+
         <!-- Compact Input Form - Single Row -->
         <div class="input-section">
             <div class="form-card">
@@ -22,22 +35,26 @@ <h1 class="page-header">Compact Mortgage Calculator</h1>
                         <div class="form-row-compact">
                             <div class="form-group">
                                 <label for="housingPrice" class="form-label">Housing Price ($)</label>
-                                <input type="number" id="housingPrice" class="form-control" value="500000" min="0" step="1000">
+                                <input type="number" id="housingPrice" class="form-control" value="500000" min="0"
+                                    step="1000">
                             </div>
-                            
+
                             <div class="form-group">
                                 <label for="loanAmount" class="form-label">Loan Amount ($)</label>
-                                <input type="number" id="loanAmount" class="form-control" value="400000" min="0" step="1000">
+                                <input type="number" id="loanAmount" class="form-control" value="400000" min="0"
+                                    step="1000">
                             </div>
-                            
+
                             <div class="form-group">
                                 <label for="loanYears" class="form-label">Years</label>
-                                <input type="number" id="loanYears" class="form-control" value="30" min="1" max="50" step="1">
+                                <input type="number" id="loanYears" class="form-control" value="30" min="1" max="50"
+                                    step="1">
                             </div>
-                            
+
                             <div class="form-group">
                                 <label for="interestRate" class="form-label">Rate (%)</label>
-                                <input type="number" id="interestRate" class="form-control" value="6.5" min="0" max="50" step="0.01">
+                                <input type="number" id="interestRate" class="form-control" value="6.5" min="0" max="50"
+                                    step="0.01">
                             </div>
 
                             <div class="form-group">
@@ -57,28 +74,84 @@ <h1 class="page-header">Compact Mortgage Calculator</h1>
                                     <option value="11">Dec</option>
                                 </select>
                             </div>
-                            
+
                             <div class="form-group">
                                 <label for="startYear" class="form-label">Year</label>
-                                <input type="number" id="startYear" class="form-control" value="2024" min="2020" max="2100" step="1">
+                                <input type="number" id="startYear" class="form-control" value="2024" min="2020"
+                                    max="2100" step="1">
                             </div>
 
                             <div class="recalc-options-compact">
                                 <div class="option-item-compact">
-                                    <input type="radio" id="optionReduceTerm" name="recalcOption" value="reduceTerm" checked>
+                                    <input type="radio" id="optionReduceTerm" name="recalcOption" value="reduceTerm"
+                                        checked>
                                     <label for="optionReduceTerm" class="option-label-compact">
-                                        <strong>Reduce Loan Term (Accelerated Payoff)</strong> - Keep payment same, shorten loan
+                                        <strong>Reduce Loan Term (Accelerated Payoff)</strong> - Keep payment same,
+                                        shorten loan
                                     </label>
                                 </div>
-                                
+
                                 <div class="option-item-compact">
-                                    <input type="radio" id="optionReducePayment" name="recalcOption" value="reducePayment">
+                                    <input type="radio" id="optionReducePayment" name="recalcOption"
+                                        value="reducePayment">
                                     <label for="optionReducePayment" class="option-label-compact">
-                                        <strong>Reduce Monthly Payment (Recast)</strong> - Keep term same, lower payments
+                                        <strong>Reduce Monthly Payment (Recast)</strong> - Keep term same, lower
+                                        payments
                                     </label>
                                 </div>
                             </div>
-                            
+
+                        </div>
+                    </form>
+
+                    <form id="hdbForm" class="compact-form" style="display: none;">
+                        <div class="form-row-compact">
+                            <div class="form-group">
+                                <label for="hdbLoanBalance" class="form-label">Current Loan Balance ($)</label>
+                                <input type="number" id="hdbLoanBalance" class="form-control" value="547004.31" min="0"
+                                    step="1000">
+                            </div>
+
+                            <div class="form-group">
+                                <label for="hdbMonthlyInstalment" class="form-label">Monthly Instalment ($)</label>
+                                <input type="number" id="hdbMonthlyInstalment" class="form-control" value="2740.00"
+                                    min="0" step="100">
+                            </div>
+
+                            <div class="form-group">
+                                <label for="hdbInterestRate" class="form-label">Interest Rate (% p.a.)</label>
+                                <input type="number" id="hdbInterestRate" class="form-control" value="2.60" min="0"
+                                    max="50" step="0.01">
+                            </div>
+
+                            <div class="form-group">
+                                <label for="hdbStartMonth" class="form-label">Current Month</label>
+                                <select id="hdbStartMonth" class="form-control">
+                                    <option value="0">Jan</option>
+                                    <option value="1">Feb</option>
+                                    <option value="2">Mar</option>
+                                    <option value="3">Apr</option>
+                                    <option value="4">May</option>
+                                    <option value="5">Jun</option>
+                                    <option value="6">Jul</option>
+                                    <option value="7">Aug</option>
+                                    <option value="8">Sep</option>
+                                    <option value="9">Oct</option>
+                                    <option value="10">Nov</option>
+                                    <option value="11">Dec</option>
+                                </select>
+                            </div>
+
+                            <div class="form-group">
+                                <label for="hdbStartYear" class="form-label">Current Year</label>
+                                <input type="number" id="hdbStartYear" class="form-control" value="2026" min="2020"
+                                    max="2100" step="1">
+                            </div>
+                        </div>
+                        <div class="hdb-info-note"
+                            style="margin-top: 1rem; font-size: 0.85rem; color: var(--text-muted); text-align: center;">
+                            * HDB automatically applies partial capital repayments toward reducing the loan term,
+                            keeping the monthly instalment the same.
                         </div>
                     </form>
                 </div>
@@ -95,30 +168,30 @@ <h1 class="page-header">Compact Mortgage Calculator</h1>
                             <div id="monthlyPayment" class="metric-value-compact">$0.00</div>
                             <div id="monthlyPaymentNote" class="metric-note-compact" style="display: none;"></div>
                         </div>
-                        
+
                         <div class="metric-item-compact">
                             <div class="metric-label-compact">Total Interest</div>
                             <div id="totalInterest" class="metric-value-compact">$0.00</div>
                         </div>
-                        
+
                         <div class="metric-item-compact">
                             <div class="metric-label-compact">Total Payments</div>
                             <div id="totalPayments" class="metric-value-compact">$0.00</div>
                         </div>
-                        
+
                         <div class="metric-item-compact">
                             <div class="metric-label-compact">Payoff Date</div>
                             <div id="payoffDate" class="metric-value-compact">-</div>
                         </div>
                     </div>
-                    
+
                     <div class="extra-payment-summary-compact" id="extraPaymentSummary" style="display: none;">
                         <div class="summary-metrics-compact">
                             <div class="metric-item-compact savings">
                                 <div class="metric-label-compact">Interest Savings</div>
                                 <div id="interestSavings" class="metric-value-compact">$0.00</div>
                             </div>
-                            
+
                             <div class="metric-item-compact savings">
                                 <div class="metric-label-compact">Time Saved</div>
                                 <div id="timeSaved" class="metric-value-compact">0 months</div>
@@ -153,7 +226,8 @@ <h3>Monthly Repayments Schedule</h3>
                             </thead>
                             <tbody id="monthlyScheduleBody">
                                 <tr>
-                                    <td colspan="6" class="no-data">Enter loan parameters and click "Calculate" to view schedule</td>
+                                    <td colspan="6" class="no-data">Enter loan parameters and click "Calculate" to view
+                                        schedule</td>
                                 </tr>
                             </tbody>
                         </table>
@@ -190,16 +264,18 @@ <h3>Extra Payments</h3>
                                     <option value="10">Nov</option>
                                     <option value="11">Dec</option>
                                 </select>
-                                
-                                <input type="number" id="extraPaymentYear" class="form-control-xs" value="2024" min="2020" max="2100">
-                                
-                                <input type="number" id="extraPaymentAmount" class="form-control-xs" min="0" step="100" placeholder="Amount">
-                                
+
+                                <input type="number" id="extraPaymentYear" class="form-control-xs" value="2024"
+                                    min="2020" max="2100">
+
+                                <input type="number" id="extraPaymentAmount" class="form-control-xs" min="0" step="100"
+                                    placeholder="Amount">
+
                                 <button type="button" id="addExtraPayment" class="btn btn--primary btn--xs">Add</button>
                             </div>
                         </form>
                     </div>
-                    
+
                     <!-- Extra Payments Table -->
                     <div class="table-container-compact">
                         <table id="extraPaymentsTable" class="payments-table-compact">
@@ -228,15 +304,19 @@ <h3>Recurring Extra Payments</h3>
                     <div class="extra-payment-form-compact">
                         <form id="recurringExtraPaymentForm" class="extra-form-compact">
                             <div class="extra-form-row">
-                                <input type="number" id="recurringExtraPaymentAmount" class="form-control-xs" min="0" step="100" placeholder="Amount">
+                                <input type="number" id="recurringExtraPaymentAmount" class="form-control-xs" min="0"
+                                    step="100" placeholder="Amount">
                                 <select id="recurringExtraPaymentFrequency" class="form-control-xs">
                                     <option value="monthly">Monthly</option>
                                     <option value="quarterly">Quarterly</option>
                                     <option value="annually">Annually</option>
                                 </select>
-                                <input type="month" id="recurringExtraPaymentStartDate" class="form-control-xs" value="2024-01">
-                                <input type="month" id="recurringExtraPaymentEndDate" class="form-control-xs" value="2025-01">
-                                <button type="button" id="addRecurringExtraPayment" class="btn btn--primary btn--xs">Add</button>
+                                <input type="month" id="recurringExtraPaymentStartDate" class="form-control-xs"
+                                    value="2024-01">
+                                <input type="month" id="recurringExtraPaymentEndDate" class="form-control-xs"
+                                    value="2025-01">
+                                <button type="button" id="addRecurringExtraPayment"
+                                    class="btn btn--primary btn--xs">Add</button>
                             </div>
                         </form>
                     </div>
@@ -268,4 +348,5 @@ <h3>Recurring Extra Payments</h3>
     <script src="../shared.js"></script>
     <script src="app.js"></script>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 732f24b..8aa6bfa 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -2,10 +2,10 @@
 ---
 
 <footer>
-  <div class="links-container">
-    <div class="links-section">
+  <div class="links-container flex justify-center w-full mb-6">
+    <div class="links-section flex flex-col items-center p-4 w-full max-w-[500px] bg-[var(--card-background)] rounded-[var(--border-radius)] shadow-md gap-[var(--footer-spacing)]">
       <p>Connect With Me</p>
-      <div class="icons">
+      <div class="icons flex flex-wrap justify-center gap-[var(--footer-spacing)] w-full">
         <a href="https://github.com/julwrites/julwrites.github.io/raw/main/public/assets/resume/Resume_Julian_Teh.pdf" target="_blank" title="Resume">
           <img src="/assets/images/dark/resume.png" alt="Resume" />
           <span>Resume</span>
@@ -38,34 +38,6 @@
     margin-top: 1em;
   }
   
-  .links-container {
-    display: flex;
-    justify-content: center;
-    width: 100%;
-    margin-bottom: 1.5em;
-  }
-
-  .links-section {
-    display: flex;
-    flex-direction: column;
-    gap: var(--footer-spacing);
-    align-items: center;
-    padding: 15px;
-    width: 100%;
-    max-width: 500px;
-    background-color: var(--card-background);
-    border-radius: var(--border-radius);
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  }
-
-  .icons {
-    display: flex;
-    gap: var(--footer-spacing);
-    justify-content: center;
-    flex-wrap: wrap;
-    width: 100%;
-  }
-
   .icons a {
     display: flex;
     flex-direction: column;
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 4eeeaec..ebecf1b 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -2,9 +2,9 @@
 ---
 
 <header>
-  <div class="header-content">
+  <div class="header-content flex flex-col md:flex-row gap-2 md:gap-0 justify-between items-center">
     <h2>Julian Teh</h2>
-    <nav>
+    <nav class="flex justify-center md:justify-end m-0">
       <a href="/" class={Astro.url.pathname === '/' ? 'active' : ''}>Home</a>
       <a href="/projects" class={Astro.url.pathname.startsWith('/projects') ? 'active' : ''}>Projects</a>
       <a href="/blog" class={Astro.url.pathname.startsWith('/blog') ? 'active' : ''}>Blog</a>
@@ -18,25 +18,7 @@
     margin-bottom: 2em;
   }
   
-  .header-content {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5em;
-  }
-  
   h2 {
     margin: 0;
   }
-  
-  @media (min-width: 768px) {
-    .header-content {
-      flex-direction: row;
-      justify-content: space-between;
-      align-items: center;
-    }
-    
-    nav {
-      margin: 0;
-    }
-  }
 </style>
diff --git a/src/components/Intro.astro b/src/components/Intro.astro
index 34d2fbe..b1c44f3 100644
--- a/src/components/Intro.astro
+++ b/src/components/Intro.astro
@@ -6,10 +6,10 @@ const photosDir = path.join(process.cwd(), 'public/assets/images/photos');
 const images = fs.readdirSync(photosDir).filter(file => /\.(jpg|jpeg|png|webp)$/i.test(file));
 ---
 
-<section class="intro card">
-  <h1>Hi, I'm Julian</h1>
-  <img id="intro-image" src="/assets/images/photos/2.jpg" alt="Photo of me" />
-  <p>Welcome to my domain</p>
+<section class="intro card flex flex-col items-center text-center gap-6 mx-auto">
+  <h1 class="text-3xl md:text-5xl font-bold m-0">Hi, I'm Julian</h1>
+  <img id="intro-image" src="/assets/images/photos/2.jpg" alt="Photo of me" class="w-48 md:w-64 max-w-full rounded-full shadow-md" />
+  <p class="text-xl md:text-2xl m-0 text-[var(--accent-color)]">Welcome to my domain</p>
 </section>
 
 <script define:vars={{ images }}>
@@ -20,46 +20,3 @@ const images = fs.readdirSync(photosDir).filter(file => /\.(jpg|jpeg|png|webp)$/
   }
 </script>
 
-<style>
-  .intro {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: var(--content-spacing);
-    margin: 0 auto;
-    text-align: center;
-  }
-
-  h1 {
-    font-size: 2.5rem;
-    font-weight: 700;
-    margin: 0;
-  }
-
-  img {
-    max-width: 256px;
-    width: 100%;
-    border-radius: 50%;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-  }
-  
-  @media (max-width: 768px) {
-    img {
-      max-width: 200px;
-    }
-    
-    h1 {
-      font-size: 2rem;
-    }
-    
-    p {
-      font-size: 1.2rem;
-    }
-  }
-
-  p {
-    font-size: 1.5rem;
-    margin: 0;
-    color: var(--accent-color);
-  }
-</style>
diff --git a/src/components/ProjectListing.astro b/src/components/ProjectListing.astro
index bfd5e44..c1e609b 100644
--- a/src/components/ProjectListing.astro
+++ b/src/components/ProjectListing.astro
@@ -1,37 +1,41 @@
 ---
 ---
 
-<section class="projects card">
-  <div class="project-section">
-    <h2>Hobby Projects</h2>
-    <div class="project-grid">
-      <a href="https://github.com/julwrites/llm-nvim" target="_blank" class="project-card">
+<section class="projects card flex flex-col gap-[var(--content-spacing)] mx-auto">
+  <div class="project-section flex flex-col gap-5">
+    <h2 class="text-2xl font-medium m-0 text-center text-[var(--accent-color)]">Hobby Projects</h2>
+    <div class="project-grid grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
+      <a href="https://github.com/julwrites/llm-nvim" target="_blank" rel="noopener noreferrer" class="project-card">
         <img src="/assets/images/projects/llm-nvim.png" alt="llm-nvim" />
         <span class="project-title">llm-nvim</span>
       </a>
-      <a href="https://github.com/julwrites/cash-register" target="_blank" class="project-card">
+      <a href="https://github.com/julwrites/cash-register" target="_blank" rel="noopener noreferrer" class="project-card">
         <img src="/assets/images/projects/cashregister.png" alt="Cash-Register" />
         <span class="project-title">Cash Register</span>
       </a>
-      <a href="https://github.com/julwrites/ScriptureBot" target="_blank" class="project-card">
+      <a href="https://github.com/julwrites/discipleship-journal" target="_blank" rel="noopener noreferrer" class="project-card">
+        <img src="/assets/images/projects/discipleship-journal.png" alt="Discipleship Journal" />
+        <span class="project-title">Discipleship Journal</span>
+      </a>
+      <a href="https://github.com/julwrites/ScriptureBot" target="_blank" rel="noopener noreferrer" class="project-card">
         <img src="/assets/images/projects/scripturebot.png" alt="ScriptureBot" />
         <span class="project-title">ScriptureBot</span>
       </a>
     </div>
   </div>
 
-  <div class="project-section">
-    <h2>School Projects</h2>
-    <div class="project-grid">
-      <a href="http://games.digipen.edu/games/bibbb" target="_blank" class="project-card">
+  <div class="project-section flex flex-col gap-5">
+    <h2 class="text-2xl font-medium m-0 text-center text-[var(--accent-color)]">School Projects</h2>
+    <div class="project-grid grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
+      <a href="http://games.digipen.edu/games/bibbb" target="_blank" rel="noopener noreferrer" class="project-card">
         <img src="/assets/images/projects/BIBBB_1.jpg" alt="BIBBB" />
         <span class="project-title">BIBBB</span>
       </a>
-      <a href="http://games.digipen.edu/games/flowline" target="_blank" class="project-card">
+      <a href="http://games.digipen.edu/games/flowline" target="_blank" rel="noopener noreferrer" class="project-card">
         <img src="/assets/images/projects/Flowline_1.jpg" alt="Flowline" />
         <span class="project-title">Flowline</span>
       </a>
-      <a href="http://games.digipen.edu/games/shortcircuit" target="_blank" class="project-card">
+      <a href="http://games.digipen.edu/games/shortcircuit" target="_blank" rel="noopener noreferrer" class="project-card">
         <img src="/assets/images/projects/ShortCircuit_1.jpg" alt="Short Circuit" />
         <span class="project-title">Short Circuit</span>
       </a>
@@ -40,45 +44,6 @@
 </section>
 
 <style>
-  .projects {
-    display: flex;
-    flex-direction: column;
-    gap: var(--content-spacing);
-    margin: 0 auto;
-  }
-
-  .project-section {
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-  }
-
-  .project-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-    gap: 20px;
-  }
-  
-  @media (max-width: 600px) {
-    .project-grid {
-      grid-template-columns: 1fr 1fr;
-    }
-  }
-  
-  @media (max-width: 400px) {
-    .project-grid {
-      grid-template-columns: 1fr;
-    }
-  }
-
-  h2 {
-    font-size: 1.8rem;
-    font-weight: 500;
-    margin: 0;
-    text-align: center;
-    color: var(--accent-color);
-  }
-
   .project-card {
     display: flex;
     flex-direction: column;
diff --git a/src/content/drafts/blog/2026_03_20_Leaderships_renewal_problem.md b/src/content/drafts/blog/2026_03_20_Leaderships_renewal_problem.md
index d66318c..c4a6ba0 100644
--- a/src/content/drafts/blog/2026_03_20_Leaderships_renewal_problem.md
+++ b/src/content/drafts/blog/2026_03_20_Leaderships_renewal_problem.md
@@ -41,12 +41,27 @@ Strong opinions drive a leader toward **Ownership** rather than **Stewardship**.
 
 This is the ultimate test for the incumbent: Can you provide a mission so large and an alignment so deep that the successor believes starting their own organization would actually be a *step down* in impact? 
 
+## The Servant vs. The King
+
+There is a deeper distinction that determines whether a successor stays or leaves: the posture of the incumbent leader.
+
+The Disciple-making Leader, like Christ, is a **servant to all, and not a king**.
+
+This is the ultimate anchor for the succession question. An opinionated successor will only remain in an organization where the top leader is a **Servant** who provides **Mission Gravity**, rather than a **King** who demands **Compliance**.
+
+- **The King** builds a court of loyal subjects who execute his will. He selects for compliance. The successor who is capable comes, sees the castle the King has built, and realizes they do not want to inherit the throne—they want to build their own kingdom.
+- **The Servant** builds a field where workers are welcome. He provides vision and resources, not decrees. The successor who is capable comes, sees the harvest the Servant has cultivated, and realizes that the *field* is bigger than any one worker. They stay because the mission transcends the man.
+
 ## The Solution: Stewardship over Legacy
 
 Ultimately, the only variable an incumbent leader truly controls is their own willingness to let go. This requires a fundamental mindset shift—one that aligns with the highest levels of leadership: moving from a focus on **Legacy** to a focus on **Stewardship**.
 
 When we focus on legacy, we are often trying to preserve ourselves through the organization. We seek a successor who is a clone, someone who will protect what we built exactly as we built it. This creates the "loyalty paradox," where we accidentally select for compliance over capability.
 
-Stewardship, however, recognizes that the organization does not belong to the leader. A steward’s job is to prepare the "house" for the next occupant and then hand over the keys. This means accepting the risk that the next leader will do things differently. It means trusting the mission enough to let it evolve beyond our own shadow.
+Stewardship, however, recognizes that the organization does not belong to the leader. A steward's job is to prepare the "house" for the next occupant and then hand over the keys. This means accepting the risk that the next leader will do things differently. It means trusting the mission enough to let it evolve beyond our own shadow.
 
 The ultimate measure of leadership isn't what we built while we were there—it's whether what we built is healthy enough to survive our departure. Renewal isn't about finding a perfect replacement; it's about the courage to exit and the humility to trust the next steward.
+
+---
+
+*The Disciple-making Leader, like Christ, is a servant to all, and not a king.*
diff --git a/src/content/drafts/blog/2026_06_05_Wolves_in_the_Open_Field.md b/src/content/drafts/blog/2026_06_05_Wolves_in_the_Open_Field.md
new file mode 100644
index 0000000..6541fde
--- /dev/null
+++ b/src/content/drafts/blog/2026_06_05_Wolves_in_the_Open_Field.md
@@ -0,0 +1,42 @@
+---
+title: "Wolves in the Open Field: The Asymmetry of Structural Mismatch"
+description: "Why flat organizations are uniquely vulnerable to hierarchical leaders, and how the 'Wolf' thrives among 'Sheep'."
+pubDate: "Jun 05 2026"
+tags: ["Leadership", "Culture", "Management", "Organizational Design"]
+heroImage: "/assets/blog/2026_06_05_Wolves_in_the_Open_Field/structural_mismatch.png"
+---
+
+There is no such thing as a perfect organizational structure, but there is definitely such a thing as a catastrophic leadership mismatch. 
+
+In my observations, organizations generally fall into two categories: the **Deep Hierarchy** (driven by layers, politics, and rules) and the **Flat Field** (driven by autonomy, trust, and accountability). Both can work, but they require entirely different types of "Internal Code" in their leaders.
+
+The problem arises when a leader from one world lands in the other. But the fallout of this mismatch is not symmetrical.
+
+## The Frustrated Steward
+
+When a "Flat Leader"—someone who thrives on stewardship, direct accountability, and removing roadblocks—lands in a deeply layered hierarchy, the outcome is predictable: **They leave.**
+
+The friction of the hierarchy acts as an external immune response. The slow pace, the endless "alignment" meetings, and the rigid rules act as a swamp that drowns the steward's energy. Because the steward values impact over optics, they quickly realize they cannot deliver the "Why" in such a system. They exit early, and the hierarchy remains unchanged.
+
+## The Wolf among Sheep
+
+However, when a "Hierarchical Leader"—someone whose primary skill is political maneuvering, optics management, and "managing up"—lands in a flat organization, the outcome is far more dangerous. **They thrive.**
+
+In a flat organization, people are generally "Sheep" in the best sense: they assume good intent, they value autonomy, and they expect others to be as intellectually honest as they are. This environment is a vacuum of formal power, and to a hierarchical leader, a vacuum is an invitation.
+
+The Wolf doesn't leave. Instead, they begin to build a **Shadow Hierarchy**.
+
+## The Colonization of Trust
+
+Because there are no formal "checkpoints" or rigid layers to stop them, the hierarchical leader uses their political savvy to:
+1.  **Manufacture Optics:** They ensure that upper management only sees a "Theory of Success" that looks perfect on paper.
+2.  **Drain the Life Force:** They begin to demand compliance over capability, slowly draining the team’s motivation and "Energy lever."
+3.  **Entrench:** They are experts at survival. By the time the organization feels the "slap in the face" of a failing culture, the Wolf has already built a web of relationships and "managed" perceptions that make them incredibly difficult to oust.
+
+## Guarding the Field
+
+The tragedy of the Wolf is that they are often only identified after the best "Sheep" (the autonomous high-performers) have already left. 
+
+If you are leading a flat organization, your primary job isn't just to set the vision—it is to be the **Guardian of the Field**. You must look past the polished reports and the "political wins" and look for the subtle "smell" of a shadow hierarchy forming. 
+
+True wisdom in a flat organization is knowing that your structure isn't just a design choice; it’s a fragile ecosystem that requires you to spot the Wolf before they've finished building their den.
diff --git a/src/content/drafts/projects/2026_03_13_Repository_Setup_For_Agents.md b/src/content/drafts/projects/2026_03_13_Repository_Setup_For_Agents.md
index 32c6ea2..93f022d 100644
--- a/src/content/drafts/projects/2026_03_13_Repository_Setup_For_Agents.md
+++ b/src/content/drafts/projects/2026_03_13_Repository_Setup_For_Agents.md
@@ -38,12 +38,77 @@ In fact, the agent could also use this to update itself in a repository.
 
 It's not perfect, but this gave me quite a lot of leverage, especially when working with autonomous agents. I could spend synchronous time working on a plan together with the agent, and reviewing it, and then this would be saved in the repository itself. Then I could just dispatch tasks repeatedly. 
 
-This became the absolute lifeline for building the **[Discipleship Journal](https://github.com/julwrites/discipleship-journal)**. I used Jules to develop 90% of that project from scratch. 80% of that was probably just me re-sending the same prompt over and over again, but with the harness, Jules was able to keep track of what had been done, and what needed to be done. 
+This became the core concept that enabled the building of **[Discipleship Journal](https://github.com/julwrites/discipleship-journal)**. I used Jules to develop 90% of that project from scratch. 80% of that was probably just me re-sending the same prompt over and over again, but with the harness, Jules was able to keep track of what had been done, and what needed to be done. 
 
 Since then I've used it for so many things. In fact, all my active repositories at work and at home are now bootstrapped with this harness. 
 
 ## The Harness
 
-So, what does this harness have and do? 
+So, what does this harness have and do?
 
-<Fill up description of agent-harness>
\ No newline at end of file
+At its core, **agent-harness** is a lightweight, self-contained system that lives *inside* your repository. It provides three essential capabilities that transform how agents interact with your codebase:
+
+### 1. **Task Documentation System**
+
+The harness introduces a structured task tracking system using Markdown files with YAML frontmatter. Tasks are organized into categories like `foundation/`, `infrastructure/`, `domain/`, `features/`, and `testing/`.
+
+```
+docs/tasks/
+├── foundation/     # Core architecture and setup
+├── infrastructure/ # Services, adapters, platform code  
+├── domain/         # Use cases, repositories, business logic
+├── presentation/   # UI, state management
+├── features/       # End-to-end feature implementation
+└── testing/        # Test infrastructure
+```
+
+Each task file captures not just *what* needs to be done, but *why* it was done, *how* it was approached, and what problems were encountered. This creates a permanent, searchable record of the project's evolution, inside the project itself.
+
+Agents use `./scripts/tasks.py` to:
+- **Create tasks**: `scripts/tasks.py create features "Implement user authentication"`
+- **List pending work**: `scripts/tasks.py list`
+- **Find next task**: `scripts/tasks.py next`
+- **Update status**: `scripts/tasks.py update [TASK_ID] in_progress`
+- **Track context**: `scripts/tasks.py context` shows active tasks
+
+### 2. **Memory System**
+
+Long-term knowledge is stored in `docs/memories/` as structured entities. Unlike tasks (which are transient), memories persist across sessions and sprints. They capture:
+
+- Architectural decisions and their rationale
+- Domain knowledge and business rules
+- Security considerations and risk assessments
+- Entity definitions and relationships
+
+Agents use `./scripts/memory.py` to recall relevant context before starting work, ensuring they don't reinvent the wheel or forget critical constraints.
+
+### 3. **Agent Instructions (AGENTS.md)**
+
+Every repository bootstrapped with the harness includes an `AGENTS.md` file. This serves as the "system prompt" extension for AI agents, encoding:
+
+- **Workflow rules**: "If it's not documented in `docs/tasks/`, it didn't happen"
+- **Quality gates**: Run tests before requesting review
+- **Security protocols**: Check risk levels before using dangerous tools
+- **Multi-agent coordination**: How to communicate via the file-based message bus
+
+The philosophy is simple: agents should be able to pick up any task and understand *exactly* how to work within this repository's conventions without guessing.
+
+### Why This Matters
+
+The harness doesn't just help agents work, it helps them work *autonomously*. When I dispatch a task to Jules (or Claude, or any other agent), I don't need to re-explain the project structure, the testing requirements, or the security boundaries. All of that is encoded in the repository itself.
+
+This means I can:
+- **Work asynchronously**: Plan with me, then execute while I sleep
+- **Scale to multiple agents**: Different agents can pick up different tasks without stepping on each other
+- **Maintain continuity**: A task started by Jules can be continued by Claude, or by me, without loss of context
+- **Preserve institutional knowledge**: The repository becomes self-documenting
+
+The harness turns a codebase from a pile of files into a **living system** that understands its own history, constraints, and goals. And because it's just Markdown, YAML, and Python scripts, it works with any model provider—no vendor lock-in, no external dependencies.
+
+## What's Next?
+
+I honestly think this is still very simplistic, especially after playing with OpenClaw and understanding that even the concept of an 'Agent Harness' can enable autonomy at a much higher level. 
+
+Maybe that will be my next goal, but for now the idea is for me to strap on the harness, and give me superpowers, not to give the agent superpowers (it already does!). 
+
+I'm also curious to see how this will evolve as we move into a world of more capable agents. Will the harness become obsolete, or will it become even more important? Let's see; things are moving really quickly now, and I hope to be able to keep up through all the chaos.
\ No newline at end of file
diff --git a/src/content/drafts/projects/2026_04_03_Developing_Discipleship_Journal.md b/src/content/drafts/projects/2026_04_03_Developing_Discipleship_Journal.md
index ae58b2c..5d2096f 100644
--- a/src/content/drafts/projects/2026_04_03_Developing_Discipleship_Journal.md
+++ b/src/content/drafts/projects/2026_04_03_Developing_Discipleship_Journal.md
@@ -5,29 +5,51 @@ pubDate: "Apr 03 2026"
 tags: ["React", "PWA", "Firebase", "PostgreSQL"]
 ---
 
-I’ve been involved in discipleship and ministry for years. And in that time, I’ve seen a lot of tools come and go. Apps, platforms, social networks for Christians.
+I’ve been involved in discipleship and ministry for years. And in that time, I’ve seen a lot of tools, and even built some myself. I confess, most of these tools are not useful in my experience. 
 
-But when I really thought about what tools disciples and disciple-makers *actually* need, it wasn't a complex LMS or a "Facebook for Church." It was something much simpler: **A journal.**
+But I'm a maker at heart, so this is just a challenge rather than a hopeless endeavor. 
 
-A place to write down what you're learning, what you're struggling with, and what you're praying for. And crucially, a way to share that with a mentor or a small group.
+When I really thought about what tools disciples and disciple-makers *really* need, and thought through my own experience, I felt convinced that complex tools just would not work. We needed something simple, yet infinitely extensible. 
+
+There are probably many possible things we can do, but the one that I thought would be most applicable was simply a journal. 
+
+A place to write down what you're learning, what you're struggling with, and what you're praying for. A way to engage the Scripture right in that place. And even better, a way to share that with a mentor or a small group.
 
 ## Why a New App?
 
-I know, "another journaling app." But the key here is integration.
+I know, "another journaling app.". I wonder why, but I have not actually seen such an app, so maybe I'm just not checking the market. Or maybe I just want to make something and don't really care if it's useful to anyone else. Who knows. 
+
+But I felt there was an opportunity here to build something interesting, and learn how to better use AI-assisted coding - now called AI Engineering, I hear - to do so. 
+
+In fact, since I already had portions of this built in the backend, I had the extra opportunity to work on more infrastructure stuff, like migrating user data, re-launching my telegram bot on a different dev account, creating a small microservice architecture, and so on. 
+
+## What's the pitch?
+
+A core skill in discipleship is journaling. Some will have heard that writing helps you improve your thinking; the same is true of growing about growing in faith. Whether it is part of your daily devotions/meditations, or a journal of what you are learning, or taking notes for Bible study, we all start with some kind of journal.
 
-Since I was already rebuilding my Bible infrastructure (see [Developing Bible AI API](/blog/projects/2026_02_20_Developing_Bible_AI_API)), I realized I could build a journal that was *Bible-aware*.
+Now, imagine writing a journal entry, highlighting a verse, doing a Bible study... and being able to pull a passage that you need into your journal. And then imagine being able to ask about it, get context, cross-references, or historical background—without you ever leaving your journal. And all this will forever be available to you. Like a regular journal, just... with more things available. 
 
-Imagine writing a journal entry, highlighting a verse, and having an AI assistant (powered by my own API) instantly provide context, cross-references, or historical background—without you ever leaving the app.
+This is not necesarily what I think everyone wants, but I think it is something that would enhance the thing that everyone needs to do. 
+
+I know this is usually approached as a matter of adding journaling to a Bible app, but I think that's the wrong way to approach it; a good christian may start from the Bible, but most christians - and most christians are the ones who struggle with discipleship - start without the Bible. We need a way to bring the Bible in.
 
 ## The Tech Stack
 
 I decided to build this as a **Progressive Web App (PWA)** because I want it to be accessible everywhere, even offline.
-*   **Frontend:** React + Vite (speed is life).
-*   **Backend:** Go + PostgreSQL.
-*   **Auth:** Firebase (because writing auth from scratch is a mistake I've made too many times).
+*   **Frontend:** React + Vite
+*   **Backend:** Go + PostgreSQL
+*   **Auth:** Firebase
+
+Since this also involves retrieving bible passages, and I've had a long-standing telegram bot for that, I decided to reuse some of that logic by refactoring it into a separate service, so that both my bot and this new PWA could use the same backend. This also allows them to share base features, while specializing for their own interfaces. 
+
+I later moved the database to TiDB after Cloud SQL burned through an entire $300 of free credits, and then some. I'm willing to pay for usage if there is usage, but I'd like to be able to avoid unnecessary costs before anyone has even started using it. 
+
+## Fun fact
+
+I actually did very little for this project; in fact a large amount of the work was done by [Google Jules](https://jules.google/), and in fact this is one of the things that convinced me to buy a Google AI Pro subscription. What it couldn't solve, I brought to my bastardized version of Claude Code (which runs DeepSeek), or later to Antigravity (which also has Claude models), to resolve with a tighter hand. 
 
-## A Work in Progress
+## Next steps
 
-I'm still figuring this out. Is an "AI-assisted discipleship journal" actually useful, or just a gimmick? I'm not sure yet. But I'm building it to find out.
+I'm trying to follow my own advice to others, and focus on a MVP first. After the MVP is done, then we add more features based on feedback and discussion with others who are doing disciple-making. 
 
-At the very least, I'll have a better place to keep my own notes.
+So the next steps would be to add some features; bible reading plans, memory verses, social features, and then look at improving the core features in another round; e.g. adding the ability to comment inline, or to run AI on only a section and add a comment, etc... 
\ No newline at end of file
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
index c238980..6a9d35d 100644
--- a/src/pages/blog/[...slug].astro
+++ b/src/pages/blog/[...slug].astro
@@ -15,8 +15,8 @@ const { Content } = await post.render();
 ---
 
 <Layout title={`${post.data.title} | tehj.io`}>
-  <main>
-    <article>
+  <main class="max-w-[800px] mx-auto px-4 sm:px-0">
+    <article class="mb-16">
       <h1>{post.data.title}</h1>
       <div class="date">
         <time datetime={post.data.pubDate.toISOString()}>
@@ -53,16 +53,6 @@ const { Content } = await post.render();
 </Layout>
 
 <style>
-  main {
-    max-width: 800px;
-    margin: 0 auto;
-    padding: 0 1rem;
-  }
-
-  article {
-    margin-bottom: 4rem;
-  }
-
   h1 {
     font-size: 2.5rem;
     margin-bottom: 0.5rem;
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index c5f9fa7..a4c42e2 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -10,8 +10,8 @@ const sortedPosts = sortPostsByDate(posts);
 ---
 
 <Layout title="Blog | tehj.io">
-  <main>
-    <h1>Blog</h1>
+  <main class="flex flex-col gap-[var(--content-spacing)] max-w-[800px] w-full mx-auto px-4 sm:px-0">
+    <h1 class="text-[40px] font-medium text-center m-0 mb-8">Blog</h1>
     <ul class="post-list">
       {sortedPosts.map((post) => (
         <li class="post-item">
@@ -31,24 +31,6 @@ const sortedPosts = sortPostsByDate(posts);
 </Layout>
 
 <style>
-  main {
-    display: flex;
-    flex-direction: column;
-    gap: var(--content-spacing);
-    max-width: 800px;
-    margin: 0 auto;
-    width: 100%;
-    padding: 0 1rem;
-  }
-
-  h1 {
-    font-size: 40px;
-    font-weight: 500;
-    margin: 0;
-    text-align: center;
-    margin-bottom: 2rem;
-  }
-
   .post-list {
     list-style: none;
     padding: 0;
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 3164d4b..7713d70 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -5,28 +5,13 @@ import ProjectListing from '../components/ProjectListing.astro';
 ---
 
 <Layout title="tehj.io">
-  <main>
+  <main class="flex flex-col gap-[var(--content-spacing)] max-w-[1200px] w-full mx-auto px-4 sm:px-0">
     <Intro />
     
-    <h2 class="section-title">Projects</h2>
+    <h2 class="section-title text-[30px] font-medium text-center m-0">Projects</h2>
     <ProjectListing />
   </main>
 </Layout>
 
 <style>
-  main {
-    display: flex;
-    flex-direction: column;
-    gap: var(--content-spacing);
-    max-width: 1200px;
-    margin: 0 auto;
-    width: 100%;
-  }
-
-  .section-title {
-    font-size: 30px;
-    font-weight: 500;
-    text-align: center;
-    margin: 0;
-  }
 </style>
diff --git a/src/pages/projects/[...slug].astro b/src/pages/projects/[...slug].astro
index 21f3c98..e6ec6d8 100644
--- a/src/pages/projects/[...slug].astro
+++ b/src/pages/projects/[...slug].astro
@@ -15,8 +15,8 @@ const { Content } = await project.render();
 ---
 
 <Layout title={`${project.data.title} | tehj.io`}>
-  <main>
-    <article>
+  <main class="max-w-[800px] mx-auto px-4 sm:px-0">
+    <article class="mb-16">
       <h1>{project.data.title}</h1>
       <div class="date">
         <time datetime={project.data.pubDate.toISOString()}>
@@ -53,16 +53,6 @@ const { Content } = await project.render();
 </Layout>
 
 <style>
-  main {
-    max-width: 800px;
-    margin: 0 auto;
-    padding: 0 1rem;
-  }
-
-  article {
-    margin-bottom: 4rem;
-  }
-
   h1 {
     font-size: 2.5rem;
     margin-bottom: 0.5rem;
diff --git a/src/pages/projects/index.astro b/src/pages/projects/index.astro
index 1c9d3e4..99fd77d 100644
--- a/src/pages/projects/index.astro
+++ b/src/pages/projects/index.astro
@@ -9,8 +9,8 @@ const sortedProjects = sortPostsByDate(projects);
 ---
 
 <Layout title="Projects | tehj.io">
-  <main>
-    <h1>Projects</h1>
+  <main class="flex flex-col gap-[var(--content-spacing)] max-w-[800px] w-full mx-auto px-4 sm:px-0">
+    <h1 class="text-[40px] font-medium text-center m-0 mb-8">Projects</h1>
     <ul class="project-list">
       {sortedProjects.map((project) => (
         <li class="project-item">
@@ -30,24 +30,6 @@ const sortedProjects = sortPostsByDate(projects);
 </Layout>
 
 <style>
-  main {
-    display: flex;
-    flex-direction: column;
-    gap: var(--content-spacing);
-    max-width: 800px;
-    margin: 0 auto;
-    width: 100%;
-    padding: 0 1rem;
-  }
-
-  h1 {
-    font-size: 40px;
-    font-weight: 500;
-    margin: 0;
-    text-align: center;
-    margin-bottom: 2rem;
-  }
-
   .project-list {
     list-style: none;
     padding: 0;
diff --git a/src/styles/shared.css b/src/styles/shared.css
index d6a2397..3dc578c 100644
--- a/src/styles/shared.css
+++ b/src/styles/shared.css
@@ -10,13 +10,13 @@
   --footer-spacing: 30px;
   --content-spacing: 30px;
   --border-radius: 10px;
-  --max-width: 800px;
+  --max-width: 1200px;
   
   /* Add a flag to check if styles are loaded */
   --styles-loaded: true;
 }
 
-/* Media query variables */
+/* Media query variables - simplified to use responsive classes instead where possible, but kept CSS vars for easy globals */
 @media (max-width: 768px) {
   :root {
     --padding: 15px;
@@ -32,9 +32,11 @@ body {
   font-family: 'Fira Sans', sans-serif;
   padding: var(--padding);
   margin: 0 auto;
-  max-width: var(--max-width);
   line-height: 1.5;
-  width: calc(100% - 2 * var(--padding));
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
 }
 
 a {
@@ -91,11 +93,6 @@ nav a.active {
   background-color: rgba(255, 255, 255, 0.15);
 }
 
-@media (max-width: 768px) {
-  nav {
-    justify-content: center;
-  }
-}
 
 code {
   padding: 2px 5px;
@@ -122,4 +119,7 @@ blockquote {
   display: flex;
   flex-direction: column;
   gap: var(--content-spacing);
+  max-width: var(--max-width);
+  margin: 0 auto;
+  width: 100%;
 }
diff --git a/verify_desktop.py b/verify_desktop.py
new file mode 100644
index 0000000..191c1a4
--- /dev/null
+++ b/verify_desktop.py
@@ -0,0 +1,18 @@
+import asyncio
+from playwright.async_api import async_playwright
+
+async def main():
+    async with async_playwright() as p:
+        browser = await p.chromium.launch()
+        page = await browser.new_page(viewport={"width": 1920, "height": 1080})
+        await page.goto('http://localhost:4321/')
+        await page.screenshot(path='home_desktop.png', full_page=True)
+        await page.goto('http://localhost:4321/projects/')
+        await page.screenshot(path='projects_desktop.png', full_page=True)
+        await page.goto('http://localhost:4321/blog/')
+        await page.screenshot(path='blog_desktop.png', full_page=True)
+        await page.goto('http://localhost:4321/labs/')
+        await page.screenshot(path='labs_desktop.png', full_page=True)
+        await browser.close()
+
+asyncio.run(main())