diff --git a/index.css b/index.css
index e69de29..872189a 100644
--- a/index.css
+++ b/index.css
@@ -0,0 +1,106 @@
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ transition: all 0.3s ease;
+}
+
+body {
+ font-family: 'Courier New', Courier, monospace;
+ background-color: rgb(36, 41, 46);
+}
+body.light-mode {
+ background-color: #eeeeee;
+}
+
+/*
+ HEADER
+*/
+header {
+ background-color: rgb(31, 36, 40);
+ padding: 0px 32px;
+ position: relative;
+}
+body.light-mode header {
+ background-color: #ffffff;
+}
+
+.logo a {
+ color: white;
+ text-decoration: none;
+ font-size: 32px;
+ font-weight: bold;
+}
+
+nav {
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ position: relative;
+ padding: 20px 0px;
+
+ max-width: 1200px;
+ margin: 0 auto;
+}
+nav ul {
+ list-style: none;
+ display: flex;
+ gap: 20px;
+
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+}
+nav ul li a {
+ color: white;
+ text-decoration: none;
+ font-size: 18px;
+ padding: 0px 12px;
+}
+nav ul li a:hover {
+ color: #6d6d6d;
+}
+
+body.light-mode .logo a,
+body.light-mode nav ul li a {
+ color: #222222;
+}
+
+body.light-mode nav ul li a:hover {
+ color: #a0a0a0;
+}
+
+.dark-mode-toggle {
+ margin-left: auto;
+ display: flex;
+ 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:hover {
+ background-color: rgb(28, 33, 37);
+}
+
+body.light-mode .dark-mode-toggle {
+ background-color: #f1f1f1;
+}
+body.light-mode .dark-mode-toggle:hover {
+ background-color: #e0e0e0;
+}
+
+
+/*
+ MAIN
+*/
+main {
+ max-width: 1200px;
+ margin: 0 auto;
+}
diff --git a/index.html b/index.html
index e406ae5..881e0c4 100644
--- a/index.html
+++ b/index.html
@@ -3,9 +3,38 @@
- Tarions Portfolio
+ Tarions Portfolio
+
-
- testing123 once again surely now
+
+
+
+
+
+
+
+
diff --git a/script.js b/script.js
index e69de29..2212afd 100644
--- a/script.js
+++ b/script.js
@@ -0,0 +1,25 @@
+
+document.addEventListener("DOMContentLoaded", () => {
+ const darkModeButton = document.getElementById("dark-mode-toggle");
+ const body = document.body;
+
+ function toggleDarkMode(save){
+ const isLightMode = body.classList.toggle("light-mode");
+ darkModeButton.textContent = isLightMode ? "☀️" : "🌙";
+
+ if (save){
+ localStorage.setItem("theme", isLightMode ? "light" : "dark");
+ }
+ }
+
+ // Load Dark Mode preference from cache
+ const theme = localStorage.getItem("theme");
+ if (theme === "dark"){
+ body.classList.remove("light-mode");
+ darkModeButton.textContent = "🌙";
+ }
+
+ darkModeButton.addEventListener("click", () => {
+ toggleDarkMode(true);
+ })
+})