Add theme persistence and responsive styles

Implemented theme persistence using session storage for theme switching. Updated CSS for better alignment and smoother transitions on different screen sizes. Integrated Bootstrap, jQuery libraries, and cleaned redundant inline styles in index.html.

js/script.js

@@ -1,6 +1,17 @@
-document.getElementById('theme-switcher').addEventListener('click', function () {
+// Function to toggle the theme and save it to session storage
+const toggleTheme = () => {
     const body = document.body;
     const currentTheme = body.getAttribute('data-bs-theme');
     const newTheme = currentTheme === 'light' ? 'dark' : 'light';
     body.setAttribute('data-bs-theme', newTheme);
+    sessionStorage.setItem('theme', newTheme);
+};
+
+// Add event listener to the theme switcher button
+document.getElementById('theme-switcher').addEventListener('click', toggleTheme);
+
+// Check session storage for saved theme on page load
+window.addEventListener('DOMContentLoaded', () => {
+    const savedTheme = sessionStorage.getItem('theme') || 'light';
+    document.body.setAttribute('data-bs-theme', savedTheme);
 });

style/style.css

@@ -40,4 +40,64 @@ body[data-bs-theme="dark"] {
     --bs-body-color: var(--light-300);
     --bs-emphasis-color: var(--light-200);
     --bs-secondary-color: var(--yellow);
+}
+
+.screen{
+    position: relative;
+    height: 100vh;
+    width: 100%;
+}
+.links{
+    margin-top: 1em;
+    margin-right: 0.5em;
+}
+
+.links a{
+    width: 100%;
+    padding: 10px 2em;
+    margin: 0.2em;
+    border-radius: 5px;
+    text-decoration: none;
+    color: var(--light-300);
+    background-color: var(--bs-secondary-color);
+}
+
+/* Index.html */
+.circle-color, .person-color {
+    transition: fill 0.4s ease-out;
+}
+body{
+    transition: background-color 0.4s ease-out;
+}
+svg#theme-switcher {
+    cursor: pointer;
+}
+svg#theme-switcher {
+    width: 612px;
+    height: 600px;
+}
+
+.tilt-text h2 {
+    transition: transform 0.3s ease-out; /* Add animation for smooth transition */
+}
+/* Media query for phone screens */
+@media (max-width: 576px) {
+    .tilt-text {
+        padding-left: 0.8em;
+        padding-top: 6.5em;
+    }
+    .tilt-text h2 {
+        transform: rotate(-45deg);
+        margin-left: -0.5em;
+    }
+    svg#theme-switcher {
+        width: 400px;
+        height: 392px;
+    }
+    .hidden-right {
+        position: absolute;
+        right: -20%; /* Move element far enough to the right to hide it completely */
+        bottom: -5%;
+        width: 100%;
+    }
 }