@@ -297,13 +305,13 @@
Project Two
@@ -312,7 +320,7 @@
Project Two
@@ -321,13 +329,13 @@
Project Three
@@ -375,7 +383,7 @@
Contact Me
-
Copyright © 2023 John Doe. All Rights Reserved.
+
Copyright © 2024 Ishmail Mgwena. All Rights Reserved.
diff --git a/script.js b/script.js
index 9e776eaf..03bfcc34 100644
--- a/script.js
+++ b/script.js
@@ -4,3 +4,18 @@ function toggleMenu() {
menu.classList.toggle("open");
icon.classList.toggle("open");
}
+const themeToggle = document.getElementById('theme-toggle'); // Add a button for toggling
+const currentTheme = localStorage.getItem('theme');
+
+// Apply saved theme on load
+if (currentTheme === 'dark') {
+ document.documentElement.classList.add('dark-mode');
+}
+
+// Toggle theme on click
+themeToggle.addEventListener('click', () => {
+ document.documentElement.classList.toggle('dark-mode');
+ const theme = document.documentElement.classList.contains('dark-mode') ? 'dark' : 'light';
+ localStorage.setItem('theme', theme);
+});
+
diff --git a/style.css b/style.css
index 3c5188ba..16682c12 100644
--- a/style.css
+++ b/style.css
@@ -6,9 +6,28 @@
margin: 0;
padding: 0;
}
+:root {
+ --bg-color: white;
+ --text-color: black;
+ --primary-color: rgb(53, 53, 53);
+ --secondary-color: rgb(163, 163, 163);
+ --link-hover: grey;
+ --button-hover-bg: rgb(0, 0, 0);
+}
+
+.dark-mode {
+ --bg-color: black;
+ --text-color: white;
+ --primary-color: rgb(200, 200, 200);
+ --secondary-color: rgb(85, 85, 85);
+ --link-hover: lightgray;
+ --button-hover-bg: rgb(50, 50, 50);
+}
body {
font-family: "Poppins", sans-serif;
+ background-color: var(--bg-color);
+ color: var(--text-color);
}
html {
@@ -46,13 +65,13 @@ nav {
}
a {
- color: black;
+ color: var(--text-color);
text-decoration: none;
text-decoration-color: white;
}
a:hover {
- color: grey;
+ color: var(--link-hover);
text-decoration: underline;
text-underline-offset: 1rem;
text-decoration-color: rgb(181, 181, 181);
@@ -66,6 +85,7 @@ a:hover {
cursor: default;
}
+
/* HAMBURGER MENU */
#hamburger-nav {
@@ -227,6 +247,14 @@ section {
padding: 1rem;
width: 8rem;
border-radius: 2rem;
+ background-color: var(--bg-color);
+ color: var(--text-color);
+ border: var(--primary-color) 0.1rem solid;
+}
+.btn:hover {
+ background-color: var(--button-hover-bg);
+ color: var(--bg-color);
+ border: var(--secondary-color) 0.1rem solid;
}
.btn-color-1,
@@ -313,6 +341,17 @@ section {
width: 400px;
margin: auto 0;
}
+.skills-list {
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+}
+.skills-list li {
+ flex: 1 1 33%; /* Divide into three columns */
+ margin: 5px 0;
+}
/* EXPERIENCE SECTION */
@@ -368,6 +407,8 @@ article .icon {
border-radius: 2rem;
width: 90%;
height: 90%;
+ flex-grow: 1;
+ flex-basis: 30ch;
}
.project-title {