From 8ca07bbf36ce34db37b4e2becfbd5e6465bd2848 Mon Sep 17 00:00:00 2001
From: Teddy Middleton-Smith <edward.middletonsmith@gmail.com>
Date: Thu, 10 Apr 2025 09:43:20 +0100
Subject: [PATCH] Fix(UI): Experience section styles.

---
 index.html                               | 56 ++++++++++++------------
 styles/pages/home/experience-section.css |  4 ++
 2 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/index.html b/index.html
index 5251ff6..3560c46 100644
--- a/index.html
+++ b/index.html
@@ -54,7 +54,7 @@
     </nav>
 
     <main>
-        <section id="expertise">
+        <section id="expertise" class="expertise">
             <h2>Areas of Expertise</h2>
             <div class="expertise-grid">
                 <div class="expertise-card">
@@ -72,7 +72,7 @@
             </div> 
         </section>
 
-        <section id="projects">
+        <section id="projects" class="projects">
             <h2>Featured Projects</h2>
             <div class="projects-grid">
                 <div class="project-card-gridslot">
@@ -81,14 +81,14 @@
                     <p>Enhanced ERPNext platform with UK-specific accounting features and e-commerce integration. Supports multi-channel retail operations with automated order processing.</p>
                     <p class="project-detail-button">Show details</p>
                     <div class="project-detail-container">
-                        <p><strong>Key Features:</strong></p> <!-- p style="margin: 0.5rem 0" -->
-                        <ul><!-- style="margin: 1rem 0; list-style-position: inside;" -->
+                        <p><strong>Key Features:</strong></p>
+                        <ul>
                             <li>UK tax compliance and reporting modules</li>
                             <li>Real-time inventory synchronisation</li>
                             <li>Multi-storefront management</li>
                             <li>Automated order fulfillment</li>
                         </ul>
-                        <p><strong>Technologies:</strong> Python, MySQL / MariaDB, Docker</p> <!-- p  style="margin-bottom: 1rem" -->
+                        <p><strong>Technologies:</strong> Python, MySQL / MariaDB, Docker</p>
                     </div>
                     <div class="project-thumbnail">
                         <img src="content/images/PARTSEnterprise_store_live-page-home.webp" alt="Live PARTS Enterprise Store">
@@ -106,14 +106,14 @@
                     <p>A robust, open-source ERP framework showcasing system architecture and development practices. Over 100K lines of production-grade code.</p>
                     <p class="project-detail-button">Show details</p>
                     <div class="project-detail-container">
-                        <p><strong>Key Features:</strong></p> <!-- p  style="margin: 0.5rem 0" -->
-                        <ul> <!-- style="margin: 1rem 0; list-style-position: inside;" -->
+                        <p><strong>Key Features:</strong></p>
+                        <ul>
                             <li>Data integrity verification</li>
                             <li>Authentication and role-based access control</li>
                             <li>Custom reporting API</li>
                             <li>Database abstraction layer and unit test coverage</li>
                         </ul>
-                        <p><strong>Technologies:</strong> Python - Flask, MySQL / MariaDB, JavaScript</p> <!-- p style="margin-bottom: 1rem" -->
+                        <p><strong>Technologies:</strong> Python - Flask, MySQL / MariaDB, JavaScript</p>
                     </div>
                     <div class="project-thumbnail">
                         <img src="content/images/partsERP-page-product_category.webp" alt="Demo PARTS ERP Site">
@@ -130,14 +130,14 @@
                     <p>VBA Excel automation that simplifies complex data processing between multiple spreadsheets.</p>
                     <p class="project-detail-button">Show details</p>
                     <div class="project-detail-container">
-                        <p><strong>Key Features:</strong></p> <!-- p style="margin: 0.5rem 0" -->
-                        <ul> <!--  style="margin: 1rem 0; list-style-position: inside;" -->
+                        <p><strong>Key Features:</strong></p>
+                        <ul>
                             <li>Multi-system transaction matching</li>
                             <li>Configurable validation rules</li>
                             <li>Automated error detection</li>
                             <li>Audit trail generation</li>
                         </ul>
-                        <p><strong>Technologies:</strong> VBA, Excel Object Model</p> <!-- p style="margin-bottom: 1rem" -->
+                        <p><strong>Technologies:</strong> VBA, Excel Object Model</p>
                     </div>
                     <!--
                     <div class="project-thumbnail">
@@ -151,7 +151,7 @@
             </div>
         </section>
 
-        <section id="experience">
+        <section id="experience" class="experience">
             <h2>Professional Experience</h2>
             
             <div class="experience-card">
@@ -199,23 +199,21 @@
 
             <div class="experience-card">
                 <h3>Additional Experience</h3>
-                <ul>
-                    <li class="experience-additional-entry">
-                        <div class="experience-company-and-date">
-                            <p class="experience-job-title">STEM Tutor</p>
-                            <p class="experience-date">03/2016 - 09/2021</p>
-                        </div>
-                        <p class="experience-description">Adopted nuanced techniques for diverse personalities and learning styles, teaching GCSE to MSc level.</p>
-                    </li>
-                    <li class="experience-additional-entry">
-                        <div class="experience-company-and-date">
-                            <p class="experience-job-title">Systems Analysis Intern</p>
-                            <p class="experience-company">Cummins Inc.</p>
-                            <p class="experience-date">07/2016</p>
-                        </div>
-                        <p class="experience-description">Programmed and presented a structural optimisation method for a steel I-beam crane boom.</p>
-                    </li>
-                </ul>
+                <div class="experience-additional-entry">
+                    <div class="experience-company-and-date">
+                        <p class="experience-job-title">STEM Tutor</p>
+                        <p class="experience-date">03/2016 - 09/2021</p>
+                    </div>
+                    <p class="experience-description">Adopted nuanced techniques for diverse personalities and learning styles, teaching GCSE to MSc level.</p>
+                </div>
+                <div class="experience-additional-entry">
+                    <div class="experience-company-and-date">
+                        <p class="experience-job-title">Systems Analysis Intern</p>
+                        <p class="experience-company">Cummins Inc.</p>
+                        <p class="experience-date">07/2016</p>
+                    </div>
+                    <p class="experience-description">Programmed and presented a structural optimisation method for a steel I-beam crane boom.</p>
+                </div>
             </div>
         </section>
 
diff --git a/styles/pages/home/experience-section.css b/styles/pages/home/experience-section.css
index 220819c..89073fe 100644
--- a/styles/pages/home/experience-section.css
+++ b/styles/pages/home/experience-section.css
@@ -29,6 +29,10 @@
 .experience-description {
     margin: 0.5rem 0;
 }
+section.experience li {
+    text-indent: -50px;
+    padding-left: 50px;
+}
 .experience-additional-entry {
     list-style-type: disc;
     width: 100%;