Update index.html

Updated Resume and Added Dark/Light Mode Toggle and GitHub Link
jasonweinberg · Jun 6, 2024 · de36837 · de36837
1 parent 60ea9c0
commit de36837
Showing 1 changed file with 51 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -13,6 +13,38 @@
     .w3-twothird p {
       font-weight: normal;
     }
+    /* Dark mode styles */
+    body.dark-mode {
+      background-color: #121212;
+      color: white;
+    }
+    body.dark-mode .w3-white {
+      background-color: #1e1e1e !important;
+    }
+    body.dark-mode .w3-text-grey {
+      color: #b0b0b0 !important;
+    }
+    body.dark-mode .w3-text-teal {
+      color: #80cbc4 !important;
+    }
+    .toggle-container {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .toggle-button {
+      background-color: #ffffff;
+      border: none;
+      padding: 10px;
+      cursor: pointer;
+      border-radius: 5px;
+      font-size: 16px;
+      color: #000;
+    }
+    body.dark-mode .toggle-button {
+      background-color: #333333;
+      color: #ffffff;
+    }
   </style>
 </head>
 <body class="w3-light-grey">
@@ -36,8 +68,9 @@ <h2><b>Jason Weinberg<b></h2>
       <p><i class="fa fa-home fa-fw w3-margin-right w3-large w3-text-teal"></i>Toronto, ON</p>
       <p><i class="fa fa-envelope fa-fw w3-margin-right w3-large w3-text-teal"></i><a href="mailto:jason.weinberg@outlook.com">jason.weinberg@outlook.com</a></p>
       <p><i class="fa fa-phone fa-fw w3-margin-right w3-large w3-text-teal"></i>416-275-1378</p>
-      <a href="https://docs.google.com/document/d/17aWVIS11OTswA6Qs25TVpi_Tk5GZKEFG/edit?usp=drive_link&ouid=111378574329916551859&rtpof=true&sd=true" class="w3-button w3-teal" style="display: inline-block;">Resume</a>
+      <a href="https://drive.google.com/file/d/1hBIo1XeXYtCL7R99pISglAYUuX1NM_VR/view?usp=drive_link" class="w3-button w3-teal" style="display: inline-block;">Resume</a>
       <a href="https://www.linkedin.com/in/jasonweinberg92/" class="w3-button w3-teal" style="display: inline-block;">LinkedIn</a>
+      <a href="https://github.com/jasonweinberg" class="w3-button w3-teal" style="display: inline-block;">GitHub</a>
       <hr>
       <p class="w3-large"><b><i class="fa fa-book fa-fw w3-margin-right w3-text-teal"></i>Education & Qualifications</b></p>
       <div class="w3-container">
@@ -77,7 +110,10 @@ <h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>201
     <div class="w3-twothird">
       <!-- Portfolio Projects -->
       <div class="w3-container w3-card w3-white">
-        <h2 class="w3-text-grey w3-padding-16"><i class="fa fa-suitcase fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i><b>Portfolio Projects<b></h2>
+        <div class="toggle-container">
+          <h2 class="w3-text-grey w3-padding-16"><i class="fa fa-suitcase fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i><b>Portfolio Projects<b></h2>
+          <button id="theme-toggle" class="toggle-button">Toggle Dark Mode</button>
+        </div>
         <div class="w3-container">
           <h5 class="w3-opacity"><b>Tableau Data Visualization & Python Data Analysis</b></h5>
           <h6 class="w3-text-teal"><i class="fa fa-certificate fa-fw w3-margin-centre"></i><b> NHL Draft: Scouting & Development<b></h6>
@@ -147,6 +183,18 @@ <h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>Acc
   <!-- End Page Container -->
 </div>
 
+<script>
+  // Toggle dark mode
+  const toggleButton = document.getElementById('theme-toggle');
+  toggleButton.addEventListener('click', () => {
+    document.body.classList.toggle('dark-mode');
+    if (document.body.classList.contains('dark-mode')) {
+      toggleButton.textContent = 'Toggle Light Mode';
+    } else {
+      toggleButton.textContent = 'Toggle Dark Mode';
+    }
+  });
+</script>
+
 </body>
 </html>
-