SeanSan06 · SeanSan06 · Feb 19, 2026 · Feb 19, 2026 · Feb 19, 2026 · Feb 19, 2026
@@ -1,4 +1,7 @@
 import { Routes, Route } from 'react-router-dom'
+import { useState, useEffect } from 'react'; 
+
+import NavBar from './components/NavBar';
 
 import HomePage from './pages/HomePage';
 import FormPage from  './pages/FormPage';
@@ -17,8 +20,24 @@ import './styles/specific-component/resume-template.css'
 // Defines what Page Component appears for each of the 5 webpages 
 // based on the current path
 function App() {
+    const [theme, setTheme] = useState(() => {
+        return localStorage.getItem("theme") || "light";
+    });
+
+    // Apply theme to <html>
+    useEffect(() => {
+        document.documentElement.setAttribute("data-theme", theme);
+        localStorage.setItem("theme", theme);
+    }, [theme]);
+
+    const toggleTheme = () => {
+        setTheme(prev => prev === "light" ? "dark" : "light");
+    };
+
     return (
     <div>
+        <NavBar toggleTheme={toggleTheme} theme={theme} />
+
         <Routes>
             <Route path="/" element={<HomePage />} />
             <Route path="/form" element={<FormPage />} />

@@ -3,7 +3,7 @@ function Footer() {
         <div>
             <div id="footer-information-area">
                 <div>
-                    <h2>The <span class="method-word">Method's</span> Moto</h2>
+                    <h2>The <span className="method-word">Method's</span> Moto</h2>
                     <p>Make Every Task Happen, Own Destiny</p>
                 </div>
                 <div>
@@ -32,7 +32,7 @@ function Footer() {
             </div>
             <p id="copyright">
             @2026 The&nbsp;
-            <span class="method-word">Method</span>. All rights reserved.
+            <span className="method-word">Method</span>. All rights reserved.
             </p>
         </div>
     )

@@ -347,7 +347,7 @@ function Form() {
 
                     {resume.experience.map((exp, index) => (
                         <div key={index} className="experience-block">
-                        <h3 class="resume-sub-headers">Experience #{index + 1}</h3>
+                        <h3 className="resume-sub-headers">Experience #{index + 1}</h3>
                         <label>
                             Company
                             <input
@@ -426,7 +426,7 @@ function Form() {
                             />
                         </label>
 
-                        <hr class="resume-hr-between-sections" />
+                        <hr className="resume-hr-between-sections" />
                         </div>
                     ))}
 

@@ -1,6 +1,6 @@
 function HowItWorks() {
     return (
-        <div>
+        <div id="how-it-works">
                 <h1 id="how-it-works-title"> 
                     How The <span id = "how-it-works-method-section">Method</span> Works 
                 </h1>

@@ -1,10 +1,10 @@
 import { NavLink } from 'react-router-dom'
 
 
-function NavBar() {
+function NavBar({ toggleTheme, theme }) {
     return  (
         <nav href="/" id="nav-bar">
-            <h2 id="the-method">The <span class="method-word">Method</span></h2>
+            <h2 id="the-method">The <span className="method-word">Method</span></h2>
             <ul id="nav-bar-links">
                 <li>
                     <NavLink
@@ -51,10 +51,18 @@ function NavBar() {
                     </NavLink>
                 </li>
             </ul>
-            <div id="log-in-sign-up">
-                <button>Log in</button>
-                <button>Sign up</button>
+            <div id="log-in-sign-up-lightdark-toggle">
+                <div id="log-in-sign-up">
+                    <button>Log in</button>
+                    <button>Sign up</button>
+                </div>  
+                <div id="light-dark-toggle">
+                    <button onClick={toggleTheme}>
+                        {theme === "light" ? "Dark Mode" : "Light Mode"}
+                    </button>
+                </div>
             </div>
+
         </nav>
     );
 }

@@ -23,7 +23,7 @@ function Star({ fillPercent = 100, size = 40 }) {
             {/* Filled star */}
             <path
                 d="M12 2l2.9 6.3 6.9.6-5.2 4.5 1.6 6.6L12 16.9 5.8 20l1.6-6.6L2.2 8.9l6.9-.6L12 2z"
-                fill="skyblue"
+                fill="var(--main-accent-color)"
                 clipPath={`url(#clip-${fillPercent})`}
             />
             </svg>
@@ -56,38 +56,38 @@ function Reviews() {
                 <div id="review-cards-area">
                     <div id="review-card-1">
                         <Rating value={5} />
-                        <p class="reivew-quote"><i>
+                        <p className="reivew-quote"><i>
                             "I love this website so much! The Method helped me land
                                 a SWE intern position at my dream company!"
                         </i></p>
                         <div>
-                            <p class="reivew-name"><b>-Sean S.</b></p>
-                            <p class="reivew-job">SWE Intern at XYZ</p>
+                            <p className="reivew-name"><b>-Sean S.</b></p>
+                            <p className="reivew-job">SWE Intern at XYZ</p>
                         </div>
                     </div>
 
                     <div id="review-card-2">
                         <Rating value={4.5} />
-                        <p class="reivew-quote"><i>
+                        <p className="reivew-quote"><i>
                             "I just got into FANNG, I am so glad that
                                 The Method exists. It has truly been an amazing tool for my
                                 job search."
                         </i></p>
                         <div>
-                            <p class="reivew-name"><b>-Lien J.</b></p>
-                            <p class="reivew-job">20x Engineer at Google</p>
+                            <p className="reivew-name"><b>-Lien J.</b></p>
+                            <p className="reivew-job">20x Engineer at Google</p>
                         </div>
                     </div>
 
                     <div id="review-card-3">
                         <Rating value={4.75} />
-                        <p class="reivew-quote"><i>
+                        <p className="reivew-quote"><i>
                             "One of the best job prep websites out there.
                                 I cant believe this is free."
                         </i></p>
                         <div>
-                            <p class="reivew-name"><b>-Ved P.</b></p>
-                            <p class="reivew-job">Founder of tech startup</p>
+                            <p className="reivew-name"><b>-Ved P.</b></p>
+                            <p className="reivew-job">Founder of tech startup</p>
                         </div>
                     </div>
                 </div>

@@ -3,7 +3,6 @@ import NavBar from "../components/NavBar";
 function AboutPage() {
     return  (
         <div>
-            <NavBar />
         </div>
     );
 }

@@ -3,7 +3,6 @@ import NavBar from "../components/NavBar";
 function ContactPage() {
     return  (
         <div>
-            <NavBar />
         </div>
     );
 }

@@ -4,7 +4,6 @@ import FileUpload from "../components/FileUpload";
 function DashboardPage() {
     return  (
         <div id="dashboard">
-            <NavBar />
             <FileUpload />
         </div>
     );

@@ -4,7 +4,6 @@ import Form from "../components/Form";
 function FormPage() {
     return  (
         <div>
-            <NavBar />
             <Form />
         </div>
     );

@@ -7,7 +7,6 @@ import HowItWorks from "../components/HowItWorks";
 function HomePage() {
     return  (
         <div>
-            <NavBar />
             <HeroArea />
             <HowItWorks />
             <Reviews />

@@ -32,6 +32,13 @@
     color: var(--text-color);
 }
 
+/* Line to break up sub-sections */
+.resume-hr-between-sections {
+    border: none;
+    border-top: 2px solid skyblue;
+    margin: 1.5rem 0;
+}
+
 /* Reusable card */
 .card {
     display: flex;
@@ -88,6 +95,28 @@ textarea:focus {
     box-shadow: 0 0 0 10px var(--input-box-shadow-color);
 }
 
+/* Buttons that add a new section */
+.add-section-form-button {
+    display: flex;
+    justify-content: center;
+    align-self: center;
+    text-align: center;
+    margin-top: 1.5rem;
+    padding: 1rem;
+    width: 35%;
+    font-size: 1.5rem;
+    border: none;
+    border-radius: 10px;
+    cursor: pointer;
+    background-color: var(--main-accent-color);
+    color: var(--text-color);
+}
+
+  .add-section-form-button:active {
+    transform: scale(0.95);
+    background-color: var(--main-accent-color-activte);
+  }
+
 /* Submit button */
 button[type="submit"] {
     margin-top: 2.5rem;
@@ -104,4 +133,7 @@ button[type="submit"] {
 button[type="submit"]:active {
     transform: scale(0.97);
     background-color: var(--main-accent-color-activte);
-}
+}
+
+
+
@@ -37,9 +37,13 @@
         background-color: var(--main-accent-color-activte);
     }
 
+#how-it-works {
+    background-color: var(--tinted-bg-color);
+}
+
 #how-it-works-method-section {
     display: inline;
-    color: skyblue;
+    color: var(--main-accent-color);
 }
 
 #how-it-works-title{
@@ -52,7 +56,7 @@
     flex-direction:column;
     justify-content: center;
     align-items: center;
-    color: skyblue;
+    color: var(--text-color);
 }
 
 #whole-box {
@@ -64,7 +68,7 @@
     width: 100%;
     max-width: 1200px;
     margin: 0 auto;
-    background-color: whitesmoke;
+    background-color: var(--tinted-bg-color);
 }
 
 .steps-box {
@@ -77,19 +81,19 @@
     padding: 30px;
     border-radius: 15px;
     border: 3px;
-    border-style:dashed;
-    border-color: skyblue;
+    border-style: solid;
+    border-color: var(--main-accent-color);
     text-align: left;
-    background-color: #dbdbdb;
+    background-color: var(--tinted-card-bg);
     transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
     will-change: transform;
 }
 
     .steps-box:hover {
-        transform: translateY(-10px); /* Lifts the box up */
-        background-color: #eef8ff;    /* Shifts to a very light blue on hover */
-        box-shadow: 0 10px 20px rgb(0 0 0 / 15%); /* Adds a soft shadow */
-        cursor: pointer;              /* Shows the user it's interactive */
+        transform: translateY(-10px); 
+        background-color: var(--tinted-card-bg-hover);
+        box-shadow: 0 10px 20px var(--tinted-card-shadowcolor-hover);
+        cursor: pointer;
     }
 
 /* Reviews Area */
@@ -99,7 +103,7 @@
     justify-content: center;
     align-items: center;
     height: 48rem;
-    background-color: var(--review-area-main-color);
+    background-color: var(--super-tinted-area-main-color);
 }
 
 #review-header {

@@ -11,12 +11,12 @@
     width: 8.5in;
     min-height: 11in;
     padding: 0.7in 0.75in;
-    background: var(--true-bg-color);
+    background: white;
     box-shadow: 0 0 10px rgb(0 0 0 / 15%);
     font-family: "Times New Roman", Times, serif;
     font-size: 11pt;
     line-height: 1.25;
-    color: var(--text-color);
+    color: black;
 }
 
 
@@ -75,35 +75,6 @@ section {
     margin-top: 1px;
 }
 
-/* Line to break up sub-sections */
-.resume-hr-between-sections {
-    border: none;
-    border-top: 2px solid skyblue;
-    margin: 1.5rem 0;
-}
-
-/* Buttons that add a new section */
-.add-section-form-button {
-    display: flex;
-    justify-content: center;
-    align-self: center;
-    text-align: center;
-    margin-top: 1.5rem;
-    padding: 1rem;
-    width: 35%;
-    font-size: 1.5rem;
-    border: none;
-    border-radius: 10px;
-    cursor: pointer;
-    background-color: skyblue;
-    color: black;
-}
-
-  .add-section-form-button:active {
-    transform: scale(0.95);
-    background-color: var(--main-accent-color-activte);
-  }
-
 /* Italics for positions / majors */
 .row.sub em {
     font-style: italic;
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,7 +3,6 @@ import NavBar from "../components/NavBar"; @@
     function AboutPage() {
         return  (
             <div>
-                <NavBar />
             </div>
         );
     }
@@ Expand Down @@