Fix(UI): \n 1. Increase margin on cards. \n 2. Move project details above project thumbnail in project section. \n 3. Disable Google Translate on-text-hover behaviour that interferes with page and expected functionality. \n 4. Updated GitHub contributions calendar colour scale to match user-selected page theme.

index.html

@@ -86,9 +86,6 @@
                     <h3>Enterprise ERP & E-commerce System</h3>
                     <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-thumbnail">
-                        <img src="content/images/PARTSEnterprise_store_live-page-home.webp" alt="Live PARTS Enterprise Store">
-                    </div>
                     <div class="project-detail-container">
                         <p style="margin: 0.5rem 0"><strong>Key Features:</strong></p>
                         <ul style="margin: 1rem 0; list-style-position: inside;">
@@ -99,6 +96,9 @@
                         </ul>
                         <p style="margin-bottom: 1rem"><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">
+                    </div>
                     <div class="project-links">
                         <a href="https://auth.sandbox.teddy.org.uk?target=https%3A%2F%2Ferp.sandbox.partsenterprise.partsltd.co.uk" class="button">Demo ERP</a>
                         <!-- <a href="https://store.sandbox.partsenterprise.partsltd.co.uk" class="button">Demo Store</a> -->
@@ -111,9 +111,6 @@
                     <h3>partsERP Core Framework</h3>
                     <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-thumbnail">
-                        <img src="content/images/partsERP-page-product_category.webp" alt="Demo PARTS ERP Site">
-                    </div>
                     <div class="project-detail-container">
                         <p style="margin: 0.5rem 0"><strong>Key Features:</strong></p>
                         <ul style="margin: 1rem 0; list-style-position: inside;">
@@ -124,6 +121,9 @@
                         </ul>
                         <p style="margin-bottom: 1rem"><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">
+                    </div>
                     <div class="project-links">
                         <a href="https://github.com/Teddy-1024/demo_partsERP.git" class="button">View on GitHub</a>
                         <a href="https://auth.sandbox.teddy.org.uk?target=https%3A%2F%2Fsandbox.partsERP.teddy.org.uk/" class="button">Demo Site</a>
@@ -135,11 +135,6 @@
                     <h3>Financial Data Reconciliation Tool</h3>
                     <p>VBA Excel automation that simplifies complex data processing between multiple spreadsheets.</p>
                     <p class="project-detail-button">Show details</p>
-                    <!--
-                    <div class="project-thumbnail">
-                        <img src="content/images/partsERP-page-product_category.webp" alt="Demo PARTS ERP Site">
-                    </div>
-                    -->
                     <div class="project-detail-container">
                         <p style="margin: 0.5rem 0"><strong>Key Features:</strong></p>
                         <ul style="margin: 1rem 0; list-style-position: inside;">
@@ -150,6 +145,11 @@
                         </ul>
                         <p style="margin-bottom: 1rem"><strong>Technologies:</strong> VBA, Excel Object Model</p>
                     </div>
+                    <!--
+                    <div class="project-thumbnail">
+                        <img src="content/images/partsERP-page-product_category.webp" alt="Demo PARTS ERP Site">
+                    </div>
+                    -->
                     <div class="project-links">
                         <a href="https://github.com/Teddy-1024/demo_VBA.git" class="button">View on GitHub</a>
                     </div>
@@ -252,8 +252,13 @@
         function initGoogleTranslateElement() {
             new google.translate.TranslateElement({
                 pageLanguage: 'en',
+                // autoDisplay: false,
                 // layout: google.translate.TranslateElement.InlineLayout.SIMPLE
-                layout: google.translate.TranslateElement.InlineLayout.VERTICAL
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL,
+                // Disable the automatic translation popups
+                gaTrack: false,
+                gaId: '',
+                multilanguagePage: false
             }, 'google_translate_element');
         }
     </script>

styles/experience-section.css

@@ -1,12 +1,6 @@
 
 /* Experience */
 .experience-card {
-    background: var(--text-background-colour);
-    padding: 1.5rem;
-    border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    margin-bottom: 2rem;
-    margin-top: 2rem;
 }
 .experience-card h3 {
     margin-bottom: 0;

styles/expertise-section.css

@@ -6,9 +6,4 @@
 }
 
 .expertise-card {
-    background: var(--text-background-colour);
-    padding: 1.5rem;
-    border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    margin-bottom: 2rem;
 }

styles/github-contributions-calendar.css

@@ -22,3 +22,36 @@
     color: var(--text-colour);
     font-size: 1rem;
 }
+
+/* Colour scale to match theme */
+/*
+.github-calendar table tbody td:not(:first-child),
+div.ContributionCalendar-day {
+    border: solid 1px grey;
+}
+*/
+td.ContributionCalendar-day[data-level="0"], /*[aria-describedby="contribution-graph-legend-level-4"]*/ 
+div.ContributionCalendar-day[data-level="0"]
+{
+    background-color: var(--github-calendar-level-0-colour);
+}
+td.ContributionCalendar-day[data-level="1"],
+div.ContributionCalendar-day[data-level="1"]
+{
+    background-color: var(--github-calendar-level-1-colour);
+}
+td.ContributionCalendar-day[data-level="2"],
+div.ContributionCalendar-day[data-level="2"]
+{
+    background-color: var(--github-calendar-level-2-colour);
+}
+td.ContributionCalendar-day[data-level="3"],
+div.ContributionCalendar-day[data-level="3"]
+{
+    background-color: var(--github-calendar-level-3-colour);
+}
+td.ContributionCalendar-day[data-level="4"],
+div.ContributionCalendar-day[data-level="4"]
+{
+    background-color: var(--github-calendar-level-4-colour);
+}

styles/google-translate.css

@@ -13,3 +13,32 @@ iframe.skiptranslate {
 body {    
     top: 0px !important;
 }
+
+/* Disable Google Translate hover popups and text highlighting */
+.goog-text-highlight:not(#google_translate_element *),
+.goog-tooltip:not(#google_translate_element *),
+.goog-tooltip-bubble:not(#google_translate_element *),
+.goog-te-balloon-frame:not(#google_translate_element *),
+.VIpgJd-suEOdc:not(#google_translate_element *),
+#goog-gt-tt:not(#google_translate_element *),
+.VIpgJd-yAWNEb-L7lbkb:not(#google_translate_element *),
+div.skiptranslate.goog-te-gadget span:not(#google_translate_element *),
+.goog-te-banner-frame:not(#google_translate_element *),
+.goog-te-gadget-simple span.text:not(#google_translate_element *),
+.goog-te-gadget-icon:not(#google_translate_element *),
+.goog-te-gadget-icon:not(#google_translate_element *)::before {
+    display: none !important;
+    visibility: hidden !important;
+    opacity: 0 !important;
+    height: 0 !important;
+    pointer-events: none !important;
+}
+
+/* Keep text selection normal */
+* {
+    -webkit-touch-callout: default !important;
+    -webkit-user-select: text !important;
+    -moz-user-select: text !important;
+    -ms-user-select: text !important;
+    user-select: text !important;
+}

styles/home.css

@@ -20,6 +20,18 @@ ul, li {
 }
 
 /* Common card styles */
+.expertise-card,
+.project-card,
+.experience-card {
+    background: var(--text-background-colour);
+    padding: 1.5rem;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    margin-bottom: 2rem;
+    margin-top: 2rem;
+    padding-left: 1.5vw;
+    padding-right: 1.5vw;
+}
 .expertise-card h3,
 .project-card h3,
 .experience-card h3 {

styles/main.css

@@ -24,3 +24,4 @@ a {
 a:visited {
     color: var(--text-link-visited-colour)
 }
+

styles/navigation.css

@@ -13,7 +13,10 @@ nav ul {
     justify-content: center;
     gap: 2rem;
 }
-
+nav ul li {
+    margin-top: auto;
+    margin-bottom: auto;
+}
 nav a {
     color: var(--text-background-colour);
     text-decoration: none;

styles/projects-section.css

@@ -10,10 +10,6 @@
 .project-card-gridslot {
 }
 .project-card {
-    background: var(--text-background-colour);
-    padding: 1.5rem;
-    border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     height: fit-content;
 }
 

styles/themes.css

@@ -9,6 +9,11 @@
     --text-background-colour: white;
     --text-link-unvisited-colour: #0000EE;
     --text-link-visited-colour: #551A8B;
+    --github-calendar-level-0-colour: var(--color-calendar-graph-day-bg);
+    --github-calendar-level-1-colour: var(--color-calendar-graph-day-L1-bg);
+    --github-calendar-level-2-colour: var(--color-calendar-graph-day-L2-bg);
+    --github-calendar-level-3-colour: var(--color-calendar-graph-day-L3-bg);
+    --github-calendar-level-4-colour: var(--color-calendar-graph-day-L4-bg);
 }
 :root[data-theme="purple"] {
     /* Purple theme 
@@ -23,6 +28,11 @@
     /*
     --text-link-unvisited-colour: #0000EE;
     --text-link-visited-colour: #551A8B;
+    --github-calendar-level-0-colour: var(--color-calendar-graph-day-bg);
+    --github-calendar-level-1-colour: var(--color-calendar-graph-day-L1-bg);
+    --github-calendar-level-2-colour: var(--color-calendar-graph-day-L2-bg);
+    --github-calendar-level-3-colour: var(--color-calendar-graph-day-L3-bg);
+    --github-calendar-level-4-colour: var(--color-calendar-graph-day-L4-bg);
     */
 }
 :root[data-theme="red"],
@@ -40,6 +50,11 @@
     /*
     --text-link-unvisited-colour: #0000EE;
     --text-link-visited-colour: #551A8B;
+    --github-calendar-level-0-colour: var(--color-calendar-graph-day-bg);
+    --github-calendar-level-1-colour: var(--color-calendar-graph-day-L1-bg);
+    --github-calendar-level-2-colour: var(--color-calendar-graph-day-L2-bg);
+    --github-calendar-level-3-colour: var(--color-calendar-graph-day-L3-bg);
+    --github-calendar-level-4-colour: var(--color-calendar-graph-day-L4-bg);
     */
 }
 :root[data-theme="dark"] {
@@ -60,6 +75,11 @@
     --text-background-colour: black; /* Dark Red */
     --text-link-unvisited-colour: #ADD8E6; /* Light Blue */
     --text-link-visited-colour: #D8BFD8; /* Thistle (Light Purple) */
+    --github-calendar-level-0-colour: rgba(30, 30, 30, 255); /* var(--text-background-colour); */
+    --github-calendar-level-1-colour: #ff5252;
+    --github-calendar-level-2-colour: #f30000;
+    --github-calendar-level-3-colour: #c10000;
+    --github-calendar-level-4-colour: #840000;
 }
 
 /* Toggle light mode / dark mode button */