diff --git a/index.css b/index.css
index bff1325..6dcc798 100644
--- a/index.css
+++ b/index.css
@@ -425,3 +425,127 @@ body.light-mode .contact-container h1 {
footer a {
transition: background-color 0.3s ease, transform 0.15s ease;
}
+
+
+/* Mobile Compat */
+.mobile-nav, .mobile-nav-toggle {
+ display: none;
+}
+
+@media (max-width: 768px) {
+ nav ul {
+ display: none;
+ }
+ .dark-mode-toggle {
+ display: none;
+ }
+ header {
+ z-index: 100;
+ }
+
+ .mobile-nav-toggle {
+ display: block;
+ margin-left: auto;
+ width: 48px;
+ height: 48px;
+ align-items: center;
+ justify-content: center;
+ font-size: 24px;
+ color: white;
+
+ background: none;
+ border: none;
+ }
+ body.light-mode .mobile-nav-toggle {
+ color: rgb(28, 33, 37);
+ }
+
+
+ .mobile-nav {
+ display: block;
+ position: fixed;
+ right: -18rem;
+ width: 18rem;
+ height: 100vh;
+ background-color: rgb(34, 40, 44);
+ box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
+ z-index: 50;
+ }
+ body.light-mode .mobile-nav {
+ background-color: #ffffff;
+ }
+ .mobile-nav.active {
+ right: 0;
+ }
+
+ .mobile-nav ul {
+ width: 100%;
+ margin-top: 2.5rem;
+ list-style: none;
+ display: flex;
+ flex-direction: column;
+ }
+ .mobile-nav li {
+ margin-left: 2rem;
+ }
+
+ .mobile-nav .links {
+ margin-left: auto;
+ margin-right: auto;
+ margin-top: 1.5rem;
+ }
+ .mobile-nav .links a {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+
+ width: 48px;
+ height: 48px;
+
+ background-color: rgb(44, 49, 54);
+ color: white;
+ font-size: 20px;
+ border: none;
+ border-radius: 50%;
+ text-decoration: none;
+
+ transition: color 0s;
+ transition: transform 0.15s ease;
+ }
+ .mobile-nav .links a:hover {
+ background-color: #5865f2;
+ transform: translateY(-3px);
+ }
+ body.light-mode .mobile-nav .links a {
+ background-color: #f7f7f7;
+ color: rgb(29, 29, 29);
+ }
+ body.light-mode .mobile-nav .links a:hover {
+ color: white;
+ background-color: #5865f2;
+ }
+
+ .dark-mode-toggle-mobile {
+ width: 48px;
+ height: 48px;
+ align-items: center;
+ justify-content: center;
+
+ background-color: rgb(40, 45, 48);
+ color: white;
+ font-size: 24px;
+ border: none;
+ border-radius: 50%;
+ }
+ .dark-mode-toggle-mobile:hover {
+ background-color: rgb(28, 33, 37);
+ }
+
+ body.light-mode .dark-mode-toggle-mobile {
+ color: #242424;
+ background-color: #f7f7f7;
+ }
+ body.light-mode .dark-mode-toggle-mobile:hover {
+ background-color: #e0e0e0;
+ }
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index d9cdd53..aef0713 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,7 @@
+
Tarions Portfolio
@@ -30,8 +31,32 @@
+
+
+
+
diff --git a/script.js b/script.js
index 6db1174..f132291 100644
--- a/script.js
+++ b/script.js
@@ -1,6 +1,7 @@
document.addEventListener("DOMContentLoaded", () => {
const darkModeButton = document.getElementById("dark-mode-toggle");
+ const mobileDarkModeButton = document.getElementById("dark-mode-toggle-mobile");
const body = document.body;
function toggleDarkMode(save){
@@ -21,7 +22,11 @@ document.addEventListener("DOMContentLoaded", () => {
darkModeButton.addEventListener("click", () => {
toggleDarkMode(true);
- })
+ })
+
+ mobileDarkModeButton.addEventListener("click", () => {
+ toggleDarkMode(true);
+ })
// Add/remove scrolled style to header
window.addEventListener("scroll", () => {
@@ -33,4 +38,12 @@ document.addEventListener("DOMContentLoaded", () => {
header.classList.add("scrolled");
}
})
+
+ // Mobile Nav
+ const mobileNavButton = document.getElementById("mobile-nav-toggle");
+ const mobileNav = document.getElementById("mobile-nav");
+
+ mobileNavButton.addEventListener("click", () => {
+ mobileNav.classList.toggle("active");
+ })
})