diff --git a/index.html b/index.html index f3d310b..d58c8f4 100644 --- a/index.html +++ b/index.html @@ -2,12 +2,88 @@ + + Your Name - Portfolio + + + +
+ +
- + - Rocket Academy - - -

Hello, world!

+
+

About Me

+

+ Welcome to my portfolio website. I'm a passionate web developer with a + love for creating beautiful and functional websites. 😁 +

+
+ +
+

Portfolio Page

+
+

Project 1: Forkify App

+ Project 1 + +

+ A recipe app called Forkify that has over 100,000 recipes that you can + search! +

+ Visit my Forkify App! +
+ +
+

Project 2: Mapty App

+ Project 2 +

A map website to log your own workouts!

+ Visit my Mapty App! +
+ +
+ +
+

Contact

+

+ If you'd like to get in touch with me, please feel free to reach out at + ianchow9898@gmail.com +

+
+ + + diff --git a/mapty-app.png b/mapty-app.png new file mode 100644 index 0000000..fc11bf8 Binary files /dev/null and b/mapty-app.png differ diff --git a/recipe-page.png b/recipe-page.png new file mode 100644 index 0000000..d7cc557 Binary files /dev/null and b/recipe-page.png differ diff --git a/script.js b/script.js new file mode 100644 index 0000000..3a0399a --- /dev/null +++ b/script.js @@ -0,0 +1,70 @@ +// function toggleMenu() { +// const menuLinks = document.querySelector(".menu-links"); +// menuLinks.classList.toggle("show-menu"); +// } + +// const menuIcon = document.querySelector(".menu-icon"); + +// // Show/hide menu on click +// menuIcon.addEventListener("click", toggleMenu); + +// // Hide menu when a link is clicked (optional) +// const navLinks = document.querySelectorAll(".nav-links a"); +// navLinks.forEach((link) => { +// link.addEventListener("click", () => { +// const navLinks = document.querySelector(".nav-links"); +// navLinks.classList.remove("show-menu"); +// }); +// }); + +// // Show menu icon on smaller screens +// window.addEventListener("resize", () => { +// if (window.innerWidth <= 768) { +// menuIcon.style.display = "block"; +// } else { +// menuIcon.style.display = "none"; +// const navLinks = document.querySelector(".nav-links"); +// navLinks.classList.remove("show-menu"); +// } +// }); + +// Light and Dark Mode +function toggleMode() { + const body = document.body; + const header = document.querySelector("header"); + const navigationLinks = document.querySelectorAll("a:not(.no-dark-mode)"); + + if (body.classList.contains("dark-mode")) { + // Switch to light mode + body.classList.remove("dark-mode"); + body.style.backgroundColor = "var(--background-light)"; + body.style.color = "var(--text-light)"; + } else { + // Switch to dark mode + body.classList.add("dark-mode"); + body.style.backgroundColor = "var(--background-dark)"; + body.style.color = "var(--text-dark)"; + } + if (header.classList.contains("dark-mode")) { + // Switch to light mode + header.classList.remove("dark-mode"); + header.style.backgroundColor = "var(--background-light)"; + header.style.color = "var(--text-light)"; + } else { + // Switch to dark mode + header.classList.add("dark-mode"); + header.style.backgroundColor = "var(--background-dark)"; + header.style.color = "var(--text-dark)"; + } + + // Loop through each navigation link (excluding those with no-dark-mode class) and toggle the class + navigationLinks.forEach((link) => { + if (link.classList.contains("dark-mode")) { + link.classList.remove("dark-mode"); + link.style.color = "var(--text-light)"; + } else { + link.classList.add("dark-mode"); + link.style.color = "var(--text-nav-dark)"; + } + }); +} diff --git a/styles.css b/styles.css index cdf802a..e688bff 100644 --- a/styles.css +++ b/styles.css @@ -1,3 +1,79 @@ +/* Reset some default browser styles */ +/* html, +body, +h1, +h2, +p, +ul, +li { + margin: 0; + padding: 0; +} */ + +:root { + --background-light: #f4f4f4; + --background-dark: #333; + --text-light: #333; + --text-dark: #1a0f0f; + --text-nav-dark: #fff; +} + +/* Apply a background color and font to the entire page */ body { - background-color: white; + font-family: Arial, sans-serif; + background-color: var(--background-light); + color: var(--text-light); + line-height: 1.6; + margin: 0; + padding: 0; + text-align: center; /* center both inline/inline-block and block-level elements */ +} + +/* Style the header and navigation menu */ +header { + background-color: var(--background-light); + color: var(--text-light); + padding: 20px; + text-align: center; +} + +nav ul { + list-style: none; +} + +nav li { + display: inline; + margin-right: 20px; +} + +nav a { + text-decoration: none; + color: var(--text-light); + font-weight: bold; +} + +/* Style the main sections */ +section { + padding: 20px; + margin: 20px; + background-color: #fff; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); +} + +/* Style the individual projects in the portfolio section */ +.project { + margin-bottom: 20px; +} + +.project img { + max-width: 50%; + height: auto; +} + +/* Style the footer */ +footer { + background-color: #333; + color: #fff; + text-align: center; + padding: 10px; }