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

@@ -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>

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.

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;
+}

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;