From e1597f496f67eae977be871507b47bac0d59eb00 Mon Sep 17 00:00:00 2001
From: teddy <edward.middletonsmith@gmail.com>
Date: Thu, 6 Mar 2025 17:09:33 +0000
Subject: [PATCH] Fix: \n 1. Set GitHub contributions calendar scroll position
 to start at right-most (latest date). \n 2. Set GitHub contributions calendar
 first column with day of week axis labels to fixed position above scrollable
 rest of table. \n 3. Removed light-mode-icon.svg

---
 content/images/light-mode-icon.svg            | 28 ------------
 index.html                                    | 45 +++++--------------
 scripts/scripts.js                            | 29 ++++++++++++
 .../github-contributions-calendar.css         |  6 +++
 styles/{ => components}/google-translate.css  |  0
 styles/{ => layouts}/footer.css               |  0
 styles/{ => layouts}/header.css               |  0
 styles/{ => layouts}/navigation.css           |  0
 .../{ => pages/home}/experience-section.css   |  0
 styles/{ => pages/home}/expertise-section.css |  0
 styles/{ => pages/home}/home.css              |  0
 styles/{ => pages/home}/projects-section.css  |  0
 12 files changed, 47 insertions(+), 61 deletions(-)
 delete mode 100644 content/images/light-mode-icon.svg
 rename styles/{ => components}/github-contributions-calendar.css (89%)
 rename styles/{ => components}/google-translate.css (100%)
 rename styles/{ => layouts}/footer.css (100%)
 rename styles/{ => layouts}/header.css (100%)
 rename styles/{ => layouts}/navigation.css (100%)
 rename styles/{ => pages/home}/experience-section.css (100%)
 rename styles/{ => pages/home}/expertise-section.css (100%)
 rename styles/{ => pages/home}/home.css (100%)
 rename styles/{ => pages/home}/projects-section.css (100%)

diff --git a/content/images/light-mode-icon.svg b/content/images/light-mode-icon.svg
deleted file mode 100644
index 9dc7b2d..0000000
--- a/content/images/light-mode-icon.svg
+++ /dev/null
@@ -1,28 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <!-- Defaults to black background but can be styled with CSS -->
-  <rect width="24" height="24" fill="black" style="fill: var(--page-background-colour, black);" />
-  
-  <!-- Sun icon with transparent fill to reveal what's behind the SVG -->
-  <mask id="sun-mask">
-    <!-- The white parts of this mask will be the visible parts -->
-    <rect width="24" height="24" fill="white"/>
-    
-    <!-- Sun circle -->
-    <circle cx="12" cy="12" r="4" fill="black"/>
-    
-    <!-- Sun rays -->
-    <rect x="11" y="4" width="2" height="3" fill="black"/>
-    <rect x="11" y="17" width="2" height="3" fill="black"/>
-    <rect x="4" y="11" width="3" height="2" fill="black"/>
-    <rect x="17" y="11" width="3" height="2" fill="black"/>
-    
-    <!-- Diagonal rays -->
-    <rect x="6.1" y="6.1" width="2" height="3" transform="rotate(-45 7.1 7.6)" fill="black"/>
-    <rect x="15.9" y="15.9" width="2" height="3" transform="rotate(-45 16.9 17.4)" fill="black"/>
-    <rect x="15.9" y="6.1" width="2" height="3" transform="rotate(45 16.9 7.6)" fill="black"/>
-    <rect x="6.1" y="15.9" width="2" height="3" transform="rotate(45 7.1 17.4)" fill="black"/>
-  </mask>
-  
-  <!-- This is the transparent part that reveals what's behind the SVG -->
-  <rect width="24" height="24" fill="transparent" mask="url(#sun-mask)"/>
-</svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index 5232bad..819cec9 100644
--- a/index.html
+++ b/index.html
@@ -14,17 +14,17 @@
         GitHub Contributions Calendar (light mode default)
             - Statistics under calendar do not work.
     -->
-        <link rel="stylesheet" href="https://unpkg.com/github-calendar@latest/dist/github-calendar-responsive.css" />
-    <link rel="stylesheet" href="styles/experience-section.css">
-    <link rel="stylesheet" href="styles/expertise-section.css">
-    <link rel="stylesheet" href="styles/footer.css">
-    <link rel="stylesheet" href="styles/github-contributions-calendar.css">
-    <link rel="stylesheet" href="styles/google-translate.css">
-    <link rel="stylesheet" href="styles/header.css">
-    <link rel="stylesheet" href="styles/home.css">
+    <link rel="stylesheet" href="https://unpkg.com/github-calendar@latest/dist/github-calendar-responsive.css" />
+    <link rel="stylesheet" href="styles/components/github-contributions-calendar.css">
+    <link rel="stylesheet" href="styles/components/google-translate.css">
+    <link rel="stylesheet" href="styles/layouts/footer.css">
+    <link rel="stylesheet" href="styles/layouts/header.css">
+    <link rel="stylesheet" href="styles/layouts/navigation.css">
+    <link rel="stylesheet" href="styles/pages/home/experience-section.css">
+    <link rel="stylesheet" href="styles/pages/home/expertise-section.css">
+    <link rel="stylesheet" href="styles/pages/home/home.css">
+    <link rel="stylesheet" href="styles/pages/home/projects-section.css">
     <link rel="stylesheet" href="styles/main.css">
-    <link rel="stylesheet" href="styles/navigation.css">
-    <link rel="stylesheet" href="styles/projects-section.css">
     <link rel="stylesheet" href="styles/themes.css">
     <!-- Prevent detecting of experience section date ranges as phone numbers on Safari on iOS -->
     <meta name="format-detection" content="telephone=no">
@@ -243,7 +243,7 @@
     <!-- External -->
     <!-- Google Translate -->
     <script>
-        function initGoogleTranslateElement() {
+        function hookupGoogleTranslateElement() {
             new google.translate.TranslateElement({
                 pageLanguage: 'en',
                 // autoDisplay: false,
@@ -256,33 +256,12 @@
             }, 'google_translate_element');
         }
     </script>
-    <script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=initGoogleTranslateElement"></script>
+    <script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=hookupGoogleTranslateElement"></script>
     <!-- 
         GitHub Contributions Calendar (light mode default)
             - Statistics under calendar do not work.
     -->
     <script src="https://unpkg.com/github-calendar@latest/dist/github-calendar.min.js"></script>
-    <script>
-        // Basic implementation
-        // e - statistics are all 0
-        GitHubCalendar(".github-calendar", "Teddy-1024");
-        
-        // Or with responsive option enabled:
-        // e - statistics are all 0
-        // GitHubCalendar(".github-calendar", "Teddy-1024", { responsive: true });
-
-        /*
-        // Or with proxy option enabled:
-        // e - statistics are all 0
-        GitHubCalendar(".github-calendar", "Teddy-1024", {
-            responsive: true,
-            proxy: function(username) {
-            return fetch(`https://cors-anywhere.herokuapp.com/https://github.com/users/${username}/contributions`)
-                .then(response => response.text());
-            }
-        });
-        */
-    </script>
     <!-- 
         GitHub Contributions Calendar (dark mode default)
             - Statistics under calendar do not work.
diff --git a/scripts/scripts.js b/scripts/scripts.js
index 42d2580..6f9168a 100644
--- a/scripts/scripts.js
+++ b/scripts/scripts.js
@@ -17,6 +17,7 @@ function hookupPage() {
     hookupScroll();
     // hookupProjectThumbnails();
     hookupProjectDetailButtons();
+    hookupGitHubContributionsCalendar();
 }
 function hookupPageLocalStorage() {
     let pageLocalStorage = getPageLocalStorage();
@@ -54,6 +55,10 @@ function setPageLocalStorage(pageLocalStorage) {
     localStorage.setItem(pageHash, JSON.stringify(pageLocalStorage));
 }
 function hookupNav() {
+    hookupNavLinks();
+    // Google Translate feature hooked up by plugin call
+}
+function hookupNavLinks() {
     document.querySelectorAll('nav a').forEach(anchor => {
         anchor.addEventListener('click', function(e) {
             e.preventDefault();
@@ -226,3 +231,27 @@ function hookupProjectDetailButtons() {
         });
     });
 }
+function hookupGitHubContributionsCalendar() {
+     // Basic implementation
+    // e - statistics are all 0
+    GitHubCalendar(".github-calendar", "Teddy-1024");
+    
+    // Or with responsive option enabled:
+    // e - statistics are all 0
+    // GitHubCalendar(".github-calendar", "Teddy-1024", { responsive: true });
+
+    /*
+    // Or with proxy option enabled:
+    // e - statistics are all 0
+    GitHubCalendar(".github-calendar", "Teddy-1024", {
+        responsive: true,
+        proxy: function(username) {
+        return fetch(`https://cors-anywhere.herokuapp.com/https://github.com/users/${username}/contributions`)
+            .then(response => response.text());
+        }
+    });
+    */
+
+    const scrollableElement = document.querySelector('.github-calendar table.js-calendar-graph-table');
+    scrollableElement.scrollLeft = scrollableElement.scrollWidth - scrollableElement.clientWidth;
+}
\ No newline at end of file
diff --git a/styles/github-contributions-calendar.css b/styles/components/github-contributions-calendar.css
similarity index 89%
rename from styles/github-contributions-calendar.css
rename to styles/components/github-contributions-calendar.css
index ba256be..0be418b 100644
--- a/styles/github-contributions-calendar.css
+++ b/styles/components/github-contributions-calendar.css
@@ -9,6 +9,12 @@
 .github-calendar table.js-calendar-graph-table tbody td:first-child {
     min-width: 1.5rem;
 }
+.github-calendar table.js-calendar-graph-table thead th:first-child,
+.github-calendar table.js-calendar-graph-table tbody td:first-child {
+    position: sticky !important;
+    z-index: 2;
+    left: 0.25vh;
+}
 /* Hide broken statistics */
 .github-calendar > :not(:first-child) {
     display: none;
diff --git a/styles/google-translate.css b/styles/components/google-translate.css
similarity index 100%
rename from styles/google-translate.css
rename to styles/components/google-translate.css
diff --git a/styles/footer.css b/styles/layouts/footer.css
similarity index 100%
rename from styles/footer.css
rename to styles/layouts/footer.css
diff --git a/styles/header.css b/styles/layouts/header.css
similarity index 100%
rename from styles/header.css
rename to styles/layouts/header.css
diff --git a/styles/navigation.css b/styles/layouts/navigation.css
similarity index 100%
rename from styles/navigation.css
rename to styles/layouts/navigation.css
diff --git a/styles/experience-section.css b/styles/pages/home/experience-section.css
similarity index 100%
rename from styles/experience-section.css
rename to styles/pages/home/experience-section.css
diff --git a/styles/expertise-section.css b/styles/pages/home/expertise-section.css
similarity index 100%
rename from styles/expertise-section.css
rename to styles/pages/home/expertise-section.css
diff --git a/styles/home.css b/styles/pages/home/home.css
similarity index 100%
rename from styles/home.css
rename to styles/pages/home/home.css
diff --git a/styles/projects-section.css b/styles/pages/home/projects-section.css
similarity index 100%
rename from styles/projects-section.css
rename to styles/pages/home/projects-section.css