diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
deleted file mode 100644
index 1c98084..0000000
--- a/.github/workflows/deploy.yml
+++ /dev/null
@@ -1,51 +0,0 @@
-name: Deploy to GitHub Pages
-
-on:
-  # Trigger deployment on push to main branch
-  push:
-    branches: [ main ]
-  # Allow manual trigger from Actions tab
-  workflow_dispatch:
-
-# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
-permissions:
-  contents: read
-  pages: write
-  id-token: write
-
-# Only allow one concurrent deployment
-concurrency:
-  group: "pages"
-  cancel-in-progress: true
-
-jobs:
-  # Build job
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-      
-      - name: Create .nojekyll file
-        run: touch .nojekyll
-      
-      - name: Setup Pages
-        uses: actions/configure-pages@v4
-        
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v3
-        with:
-          # Upload entire repository
-          path: '.'
-          
-  # Deployment job
-  deploy:
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-    runs-on: ubuntu-latest
-    needs: build
-    steps:
-      - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v4
\ No newline at end of file
diff --git a/CNAME b/CNAME
deleted file mode 100644
index f438fcd..0000000
--- a/CNAME
+++ /dev/null
@@ -1 +0,0 @@
-charlotte.sh
\ No newline at end of file
diff --git a/index.html b/index.html
index 3b17153..4486afe 100644
--- a/index.html
+++ b/index.html
@@ -4,177 +4,111 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Charlotte Croce - Cybersecurity student and developer">
   <title>Charlotte Croce - ./charlotte.sh</title>
   <link rel="stylesheet" href="style.css">
   <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
 </head>
 
 <body>
-  <a href="#main-content" class="skip-to-content">Skip to main content</a>
-  <div class="app-container">
-    <header class="navbar">
-      <div class="navbar-container">
-        <div class="navbar-logo">
-          ./charlotte.sh
-        </div>
-        <div class="navbar-links">
-          <button class="navbar-button" onclick="openSocialLink('https://github.com/charlottecroce')">
-            GitHub <i data-lucide="external-link" class="ml-1" aria-hidden="true"></i>
-            <span class="sr-only">(opens in new tab)</span>
-          </button>
-          <button class="navbar-button" onclick="openSocialLink('https://codeberg.org/charlottecroce')">
-            Codeberg <i data-lucide="external-link" class="ml-1" aria-hidden="true"></i>
-            <span class="sr-only">(opens in new tab)</span>
-          </button>
-          <button class="navbar-button" onclick="openSocialLink('https://linkedin.com/in/charlottecroce')">
-            LinkedIn <i data-lucide="external-link" class="ml-1" aria-hidden="true"></i>
-            <span class="sr-only">(opens in new tab)</span>
-          </button>
-          <button class="navbar-button" onclick="openSocialLink('https://hachyderm.io/@charlotte200')">
-            Mastodon <i data-lucide="external-link" class="ml-1" aria-hidden="true"></i>
-            <span class="sr-only">(opens in new tab)</span>
-          </button>
-          <button onclick="toggleDarkMode()" aria-label="Toggle dark mode" class="icon-button">
-            <i data-lucide="moon" id="moon-icon" aria-hidden="true"></i>
-            <i data-lucide="sun" id="sun-icon" style="display: none;" aria-hidden="true"></i>
-          </button>
-        </div>
-        <button class="icon-button mobile-menu-toggle" onclick="toggleMobileMenu()" aria-label="Toggle menu">
+  <a href="#main-content" class="skip-link">Skip to main content</a>
+
+  <header>
+    <nav aria-label="Main navigation">
+      <div class="container">
+        <a href="/" class="logo">./charlotte.sh</a>
+
+        <button class="menu-toggle" aria-expanded="false" aria-controls="primary-menu" aria-label="Toggle menu">
           <i data-lucide="menu" id="menu-icon" aria-hidden="true"></i>
           <i data-lucide="x" id="close-icon" style="display: none;" aria-hidden="true"></i>
         </button>
+
+        <ul class="nav-links" id="primary-menu">
+          <li><a href="/">Home</a></li>
+          <li><a href="/resume.html" aria-current="page">Resume</a></li>
+          <li><a href="https://github.com/charlottecroce" target="_blank" rel="noopener noreferrer">GitHub <i
+                data-lucide="external-link" class="icon-small" aria-hidden="true"></i><span
+                class="visually-hidden">(opens in new tab)</span></a></li>
+          <li><a href="https://git.charlotte.sh/lotte" target="_blank" rel="noopener noreferrer">Forgejo <i
+                data-lucide="external-link" class="icon-small" aria-hidden="true"></i><span
+                class="visually-hidden">(opens in new tab)</span></a></li>
+          <li><a href="https://linkedin.com/in/charlottecroce" target="_blank" rel="noopener noreferrer">LinkedIn <i
+                data-lucide="external-link" class="icon-small" aria-hidden="true"></i><span
+                class="visually-hidden">(opens in new tab)</span></a></li>
+          <li>
+            <button class="theme-toggle" aria-label="Toggle dark mode">
+              <i data-lucide="moon" id="moon-icon" aria-hidden="true"></i>
+              <i data-lucide="sun" id="sun-icon" style="display: none;" aria-hidden="true"></i>
+            </button>
+          </li>
+        </ul>
       </div>
-    </header>
-    <div class="mobile-menu" id="mobile-menu">
-      <div class="mobile-menu-container">
-        <button class="mobile-button" onclick="openSocialLink('https://github.com/charlottecroce')">
-          GitHub
-        </button>
-        <button class="mobile-button" onclick="openSocialLink('https://codeberg.org/charlottecroce')">
-          Codeberg
-        </button>
-        <button class="mobile-button" onclick="openSocialLink('https://linkedin.com/in/charlottecroce')">
-          LinkedIn
-        </button>
-        <button class="mobile-button" onclick="openSocialLink('https://hachyderm.io/@charlotte200')">
-          Mastodon
-        </button>
-        <button onclick="toggleDarkMode()" class="mobile-button mobile-button-with-icon">
-          <i data-lucide="moon" class="icon-left" id="mobile-moon-icon"></i>
-          <i data-lucide="sun" class="icon-left" id="mobile-sun-icon" style="display: none;"></i>
-          <span id="dark-mode-text">Dark Mode</span>
-        </button>
-      </div>
+    </nav>
+  </header>
+
+  <main id="main-content">
+    <div class="container">
+      <section class="intro">
+        <h1>Hi! I'm Charlotte</h1>
+        <h2>About Me</h2>
+        <p>I'm a cybersecurity student from the Northeast USA. I do security engineering at the Leahy Center in
+          Burlington, VT.</p>
+        <p>You can find most of my coding projects at <a href="https://git.charlotte.sh/lotte" target="_blank"
+            rel="noopener noreferrer">git.charlotte.sh<i data-lucide="external-link" class="icon-small"
+              aria-hidden="true"></i><span class="visually-hidden">(opens in new tab)</span></a></p>
+      </section>
+
+      <section class="projects">
+        <h2>My Projects</h2>
+        <div class="project-grid">
+
+          <article class="project">
+            <h3>Fylgja SOC</h3>
+            <p>A domain-specific language (DSL) for managing an ELK SIEM. Includes a CLI and SlackBot interface</p>
+            <a href="https://git.charlotte.sh/lotte/fylgja" target="_blank"
+              rel="noopener noreferrer">Source Code<i data-lucide="external-link" class="icon-small"
+                aria-hidden="true"></i><span class="visually-hidden">(opens in new tab)</span></a>
+          </article>
+
+          <article class="project">
+            <h3>Champlain Tech Journals</h3>
+            <p>Notes, code, and lab write-ups from my Champlain College courses</p>
+            <a href="https://codeberg.org/charlottecroce/ChamplainTechJournals" target="_blank"
+              rel="noopener noreferrer">Source Code<i data-lucide="external-link" class="icon-small"
+                aria-hidden="true"></i><span class="visually-hidden">(opens in new tab)</span></a>
+          </article>
+
+          <article class="project">
+            <h3>Nøkken Health</h3>
+            <p>A Flutter app to track and analyze health data</p>
+            <a href="https://git.charlotte.sh/lotte/nokken" target="_blank" rel="noopener noreferrer">Source Code<i
+                data-lucide="external-link" class="icon-small" aria-hidden="true"></i><span
+                class="visually-hidden">(opens in new tab)</span></a>
+          </article>
+        </div>
+      </section>
     </div>
-    <main class="main-content">
-      <div>
-        <div class="intro-section">
-          <div class="intro-content">
-            <div class="intro-text">
-              <h1>Hi! I'm Charlotte</h1>
-              <p class="text-xl">I put stuff here</p>
-              <p class="text-lg">something else</p>
-            </div>
-          </div>
-        </div>
-        <div class="projects-section">
-          <h2 class="section-title">
-            <span class="text-sage">Projects</span>
-            <span class="title-line"></span>
-          </h2>
-          <div class="projects-grid">
-            <div class="project-card">
-              <div class="card-content">
-                <h3>Champlain Tech Journals</h3>
-                <p>Notes, code, and lab write-ups from my Champlain College courses</p>
-                <a href="https://codeberg.org/charlottecroce/ChamplainTechJournals" target="_blank"
-                  rel="noopener noreferrer" class="source-link">
-                  <span>Source Code</span>
-                  <i data-lucide="external-link" class="icon-small" aria-hidden="true"></i>
-                  <span class="sr-only">(opens in new tab)</span>
-                </a>
-              </div>
-            </div>
-            <div class="project-card">
-              <div class="card-content">
-                <h3>Nøkken Health</h3>
-                <p>A Flutter app to track and analyze health data</p>
-                <a href="https://codeberg.org/charlottecroce/nokken" target="_blank" rel="noopener noreferrer"
-                  class="source-link">
-                  class="source-link">
-                  <span>Source Code</span>
-                  <i data-lucide="external-link" class="icon-small" aria-hidden="true"></i>
-                  <span class="sr-only">(opens in new tab)</span>
-                </a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </main>
-    <footer class="site-footer">
-      <div class="social-footer-links">
-        <a href="https://github.com/charlottecroce" target="_blank" rel="noopener noreferrer"
-          class="footer-link">GitHub</a>
-        <span class="footer-separator">•</span>
-        <a href="https://codeberg.org/charlottecroce" target="_blank" rel="noopener noreferrer"
-          class="footer-link">Codeberg</a>
-        <span class="footer-separator">•</span>
-        <a href="https://linkedin.com/in/charlottecroce" target="_blank" rel="noopener noreferrer"
-          class="footer-link">LinkedIn</a>
-        <span class="footer-separator">•</span>
-        <a href="https://hachyderm.io/@charlotte200" target="_blank" rel="noopener noreferrer"
-          class="footer-link">Mastodon</a>
-      </div>
-      <p class="sr-only">Trans pride flag colors</p>
-      <p>#55CDFC#F7A8B8#FFFFFF#F7A8B8#55CDFC</p>
-      <p>©<span id="current-year"></span> Charlotte Croce</p>
-    </footer>
-  </div>
+  </main>
 
-  <script>
-    lucide.createIcons();
+  <footer>
+    <div class="container">
+      <ul class="social-links">
+        <li><a href="https://github.com/charlottecroce" target="_blank" rel="noopener noreferrer">GitHub</a></li>
+        <li><a href="https://codeberg.org/charlottecroce" target="_blank" rel="noopener noreferrer">Codeberg</a></li>
+        <li><a href="https://git.charlotte.sh/lotte" target="_blank" rel="noopener noreferrer">Forgejo</a></li>
+        <li><a href="https://linkedin.com/in/charlottecroce" target="_blank" rel="noopener noreferrer">LinkedIn</a></li>
+        <li><a href="https://hachyderm.io/@charlotte200" target="_blank" rel="noopener noreferrer me">Mastodon</a></li>
+        <li><a href="https://bookwyrm.social/user/lottie" target="_blank" rel="noopener noreferrer">BookWyrm</a></li>
+      </ul>
+      <p>&copy;<span id="current-year"></span> Charlotte Croce</p>
+      <p class="theme-note">If you like the colors of this website, check out my <a
+          href="https://marketplace.visualstudio.com/items?itemName=charlotte-dev.fruitbasket-theme" target="_blank"
+          rel="noopener noreferrer">VS Code Theme<i data-lucide="external-link" class="icon-small"
+            aria-hidden="true"></i><span class="visually-hidden">(opens in new tab)</span></a></p>
+    </div>
+  </footer>
 
-    document.getElementById('current-year').textContent = new Date().getFullYear();
-
-    function toggleDarkMode() {
-      const body = document.body;
-      const isDarkMode = body.classList.toggle('dark-mode');
-      document.getElementById('moon-icon').style.display = isDarkMode ? 'none' : 'block';
-      document.getElementById('sun-icon').style.display = isDarkMode ? 'block' : 'none';
-      document.getElementById('mobile-moon-icon').style.display = isDarkMode ? 'none' : 'block';
-      document.getElementById('mobile-sun-icon').style.display = isDarkMode ? 'block' : 'none';
-      document.getElementById('dark-mode-text').textContent = isDarkMode ? 'Light Mode' : 'Dark Mode';
-    }
-
-    function toggleMobileMenu() {
-      const mobileMenu = document.getElementById('mobile-menu');
-      const isOpen = mobileMenu.classList.toggle('open');
-      document.getElementById('menu-icon').style.display = isOpen ? 'none' : 'block';
-      document.getElementById('close-icon').style.display = isOpen ? 'block' : 'none';
-    }
-
-    function openSocialLink(url) {
-      window.open(url, '_blank', 'noopener,noreferrer');
-      const mobileMenu = document.getElementById('mobile-menu');
-      if (mobileMenu.classList.contains('open')) {
-        toggleMobileMenu();
-      }
-    }
-
-    window.addEventListener('resize', function () {
-      const isMobile = window.innerWidth < 768;
-      const mobileMenu = document.getElementById('mobile-menu');
-      if (!isMobile && mobileMenu.classList.contains('open')) {
-        mobileMenu.classList.remove('open');
-        document.getElementById('menu-icon').style.display = 'block';
-        document.getElementById('close-icon').style.display = 'none';
-      }
-      document.querySelector('.mobile-menu-toggle').style.display = isMobile ? 'flex' : 'none';
-    });
-
-    document.querySelector('.mobile-menu-toggle').style.display = window.innerWidth < 768 ? 'flex' : 'none';
-  </script>
+  <script src="script.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/resume.html b/resume.html
new file mode 100644
index 0000000..852e818
--- /dev/null
+++ b/resume.html
@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Charlotte Croce - Resume">
+  <title>Resume - Charlotte Croce</title>
+  <link rel="stylesheet" href="style.css">
+  <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+</head>
+
+<body>
+  <a href="#main-content" class="skip-link">Skip to main content</a>
+
+  <header>
+    <nav aria-label="Main navigation">
+      <div class="container">
+        <a href="/" class="logo">./charlotte.sh</a>
+
+        <button class="menu-toggle" aria-expanded="false" aria-controls="primary-menu" aria-label="Toggle menu">
+          <i data-lucide="menu" id="menu-icon" aria-hidden="true"></i>
+          <i data-lucide="x" id="close-icon" style="display: none;" aria-hidden="true"></i>
+        </button>
+
+        <ul class="nav-links" id="primary-menu">
+          <li><a href="/">Home</a></li>
+          <li><a href="/resume.html" aria-current="page">Resume</a></li>
+          <li><a href="https://github.com/charlottecroce" target="_blank" rel="noopener noreferrer">GitHub <i
+                data-lucide="external-link" class="icon-small" aria-hidden="true"></i><span
+                class="visually-hidden">(opens in new tab)</span></a></li>
+          <li><a href="https://codeberg.org/charlottecroce" target="_blank" rel="noopener noreferrer">Codeberg <i
+                data-lucide="external-link" class="icon-small" aria-hidden="true"></i><span
+                class="visually-hidden">(opens in new tab)</span></a></li>
+          <li><a href="https://linkedin.com/in/charlottecroce" target="_blank" rel="noopener noreferrer">LinkedIn <i
+                data-lucide="external-link" class="icon-small" aria-hidden="true"></i><span
+                class="visually-hidden">(opens in new tab)</span></a></li>
+          <li>
+            <button class="theme-toggle" aria-label="Toggle dark mode">
+              <i data-lucide="moon" id="moon-icon" aria-hidden="true"></i>
+              <i data-lucide="sun" id="sun-icon" style="display: none;" aria-hidden="true"></i>
+            </button>
+          </li>
+        </ul>
+      </div>
+    </nav>
+  </header>
+
+  <main id="main-content">
+    <div class="container">
+      <section class="intro">
+        <div class="resume-header">
+          <h1>Charlotte Croce</h1>
+          <div class="contact-info">
+            <span>Burlington, VT (Open to Relocation)</span>
+          </div>
+        </div>
+      </section>
+
+      <section class="resume-section">
+        <h2>Education</h2>
+        <div class="education-item">
+          <div class="education-header">
+            <h3>Champlain College</h3>
+            <span class="location">Burlington, VT</span>
+          </div>
+          <div class="education-header">
+            <div class="degree">Bachelor of Science in Computer Networking and Cybersecurity</div>
+            <span class="date">Class of 2027</span>
+          </div>
+          <div class="gpa">GPA: 3.97/4.0</div>
+          <div class="coursework">
+            <strong>Relevant Coursework:</strong> Network Security Controls, Web & Application Security, Database
+            Security, System Administration for Enterprise and Distributed Systems, Automation & Scripting
+          </div>
+        </div>
+      </section>
+
+      <section class="resume-section">
+        <h2>Experience</h2>
+        <div class="experience-item">
+          <div class="experience-header">
+            <h3>The Leahy Center</h3>
+            <span class="location">Burlington, VT</span>
+          </div>
+          <div class="experience-header">
+            <div class="job-title">Security Engineer</div>
+            <span class="date">Jan 2024 — Present</span>
+          </div>
+          <ul class="bullet-list">
+            <li>Maintained SIEM infrastructure, ensured uptime, and automated security operations</li>
+            <li>Optimized a threat detection engine to expand security coverage while reducing false positives
+            </li>
+            <li>Developed an Elastic Stack dev environment for feature testing</li>
+            <li>Collaborated with analysts on alert response</li>
+          </ul>
+          <div class="experience-header">
+            <div class="job-title">SOC Intern</div>
+            <span class="date">Oct 2023 — Dec 2023</span>
+          </div>
+        </div>
+      </section>
+
+      <section class="resume-section">
+        <h2>Certifications</h2>
+        <div class="skills-grid">
+          <div class="skill-category">CompTIA CySA+</div>
+          <div class="skill-category">CompTIA Security+</div>
+          <div class="skill-category">CompTIA A+</div>
+        </div>
+      </section>
+
+      <section class="resume-section">
+        <h2>Skills</h2>
+
+        <h3 class="skill-heading">Systems & Infrastructure</h3>
+        <div class="skills-grid">
+          <div class="skill-category">Active Directory</div>
+          <div class="skill-category">Debian Linux</div>
+          <div class="skill-category">Docker</div>
+          <div class="skill-category">RHEL Linux</div>
+          <div class="skill-category">VMWare</div>
+          <div class="skill-category">Windows Server</div>
+        </div>
+
+        <h3 class="skill-heading">Security Tools & Frameworks</h3>
+        <div class="skills-grid">
+          <div class="skill-category">Elastic Stack</div>
+          <div class="skill-category">Firewalls</div>
+          <div class="skill-category">PKI</div>
+          <div class="skill-category">SIEM</div>
+          <div class="skill-category">Wireshark</div>
+        </div>
+
+        <h3 class="skill-heading">Networking</h3>
+        <div class="skills-grid">
+          <div class="skill-category">VyOS</div>
+        </div>
+
+        <h3 class="skill-heading">Programming & Scripting</h3>
+        <div class="skills-grid">
+          <div class="skill-category">Ansible</div>
+          <div class="skill-category">Bash</div>
+          <div class="skill-category">Java</div>
+          <div class="skill-category">JavaScript</div>
+          <div class="skill-category">PowerShell</div>
+          <div class="skill-category">Python</div>
+          <div class="skill-category">SQL</div>
+        </div>
+
+        <h3 class="skill-heading">Project Management</h3>
+        <div class="skills-grid">
+          <div class="skill-category">Git / GitHub</div>
+        </div>
+      </section>
+    </div>
+  </main>
+
+  <footer>
+    <div class="container">
+      <ul class="social-links">
+        <li><a href="https://github.com/charlottecroce" target="_blank" rel="noopener noreferrer">GitHub</a></li>
+        <li><a href="https://codeberg.org/charlottecroce" target="_blank" rel="noopener noreferrer">Codeberg</a></li>
+        <li><a href="https://linkedin.com/in/charlottecroce" target="_blank" rel="noopener noreferrer">LinkedIn</a></li>
+        <li><a href="https://hachyderm.io/@charlotte200" target="_blank" rel="noopener noreferrer me">Mastodon</a></li>
+        <li><a href="https://bookwyrm.social/user/lottie" target="_blank" rel="noopener noreferrer">BookWyrm</a></li>
+      </ul>
+      <p>&copy;<span id="current-year"></span> Charlotte Croce</p>
+      <p class="theme-note">If you like the colors of this website, check out my <a
+          href="https://marketplace.visualstudio.com/items?itemName=charlotte-dev.fruitbasket-theme" target="_blank"
+          rel="noopener noreferrer">VS Code Theme<i data-lucide="external-link" class="icon-small"
+            aria-hidden="true"></i><span class="visually-hidden">(opens in new tab)</span></a></p>
+    </div>
+  </footer>
+
+  <script src="script.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..e472fb0
--- /dev/null
+++ b/script.js
@@ -0,0 +1,49 @@
+// Initialize Lucide icons
+lucide.createIcons();
+
+// Update copyright year
+document.getElementById('current-year').textContent = new Date().getFullYear();
+
+// Theme toggle
+const themeToggle = document.querySelector('.theme-toggle');
+const moonIcon = document.getElementById('moon-icon');
+const sunIcon = document.getElementById('sun-icon');
+
+// Check for saved preference
+if (localStorage.getItem('darkMode') === 'true') {
+  document.body.classList.add('dark-mode');
+  moonIcon.style.display = 'none';
+  sunIcon.style.display = 'block';
+}
+
+themeToggle.addEventListener('click', () => {
+  document.body.classList.toggle('dark-mode');
+  const isDark = document.body.classList.contains('dark-mode');
+  moonIcon.style.display = isDark ? 'none' : 'block';
+  sunIcon.style.display = isDark ? 'block' : 'none';
+  localStorage.setItem('darkMode', isDark ? 'true' : 'false');
+});
+
+// Mobile menu
+const menuToggle = document.querySelector('.menu-toggle');
+const navLinks = document.querySelector('.nav-links');
+const menuIcon = document.getElementById('menu-icon');
+const closeIcon = document.getElementById('close-icon');
+
+menuToggle.addEventListener('click', () => {
+  const isExpanded = menuToggle.getAttribute('aria-expanded') === 'true';
+  menuToggle.setAttribute('aria-expanded', !isExpanded);
+  navLinks.classList.toggle('menu-open');
+  menuIcon.style.display = isExpanded ? 'block' : 'none';
+  closeIcon.style.display = isExpanded ? 'none' : 'block';
+});
+
+// Close menu when clicking outside
+document.addEventListener('click', (event) => {
+  if (!event.target.closest('.menu-toggle') && !event.target.closest('.nav-links') && navLinks.classList.contains('menu-open')) {
+    navLinks.classList.remove('menu-open');
+    menuToggle.setAttribute('aria-expanded', 'false');
+    menuIcon.style.display = 'block';
+    closeIcon.style.display = 'none';
+  }
+});
\ No newline at end of file
diff --git a/style.css b/style.css
index 10c06d8..cd8ac0f 100644
--- a/style.css
+++ b/style.css
@@ -1,559 +1,90 @@
-/* 
-==============================================
-TABLE OF CONTENTS
-==============================================
-1. CSS Variables
-2. Base Styles
-3. Typography
-4. Layout & Container
-5. Navigation & Header
-6. Mobile Menu
-7. Button & Controls
-8. Cards & Panels
-9. Animations
-10. Dark Mode
-11. Media Queries
-==============================================
-*/
-
-/* 
-==============================================
-1. CSS Variables
-==============================================
-*/
+/* CSS Variables */
 :root {
-  --color-pink-50: #FFF0F5;
-  --color-pink-100: #FFE0EB;
-  --color-pink-200: #FFB8D9;
-  --color-pink-300: #FF8AC8;
-  --color-pink-400: #F45D9E;
-  --color-pink-500: #D23B80;
-  --color-sage-200: #D4E6D5;
-  --color-sage-300: #B5D4B7;
-  --color-sage-400: #8AB68C;
-  --color-sage-500: #6A9A6C;
-  --color-cream-50: #FFFEF5;
-  --color-cream-100: #FFF9F0;
+  /* Pink palette */
+  --pink-50: #FFF0F5;
+  --pink-100: #FFE0EB;
+  --pink-200: #FFB8D9;
+  --pink-300: #FF8AC8;
+  --pink-400: #F45D9E;
+  --pink-500: #D23B80;
+
+  /* Sage palette */
+  --sage-200: #D4E6D5;
+  --sage-300: #B5D4B7;
+  --sage-400: #8AB68C;
+  --sage-500: #6A9A6C;
+
+  /* Neutral palette */
+  --cream-50: #FFFEF5;
+  --cream-100: #FFF9F0;
+
+  /* Semantic colors */
+  --text: #4a4a4a;
+  --bg-primary: var(--pink-50);
+  --bg-secondary: white;
+  --accent-primary: var(--pink-400);
+  --accent-secondary: var(--sage-400);
+
+  /* Spacing */
+  --space-xs: 0.25rem;
+  --space-sm: 0.5rem;
+  --space-md: 1rem;
+  --space-lg: 1.5rem;
+  --space-xl: 2rem;
+  --space-xxl: 3rem;
+
+  /* Container */
+  --container-max: 1200px;
+
+  /* Animation */
+  --transition: 0.2s ease;
 }
 
-/* 
-==============================================
-2. Base Styles
-==============================================
-*/
-* {
-  transition: all 0.3s ease;
+/* Reset */
+*,
+*::before,
+*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }
 
+/* Base styles */
 body {
-  margin: 0;
-  font-family: 'Segoe UI', 'Roboto', 'Oxygen', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  background-color: var(--color-pink-50);
-  color: #4a4a4a;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', sans-serif;
   line-height: 1.6;
-}
-
-/* 
-==============================================
-3. Typography
-==============================================
-*/
-h1, h2, h3, h4, h5, h6 {
-  font-weight: 600;
-  line-height: 1.3;
-  margin-bottom: 1rem;
-}
-
-h1 {
-  font-size: 2.5rem;
-  color: var(--color-pink-400);
-  margin-bottom: 1.5rem;
-}
-
-h2 {
-  font-size: 2rem;
-  color: var(--color-sage-400);
-}
-
-h3 {
-  font-size: 1.5rem;
-  color: var(--color-pink-400);
-  margin-bottom: 0.5rem;
-}
-
-a {
-  color: var(--color-pink-400);
-  text-decoration: none;
-}
-
-a:hover {
-  color: var(--color-sage-400);
-  text-decoration: underline;
-}
-
-.text-xl {
-  font-size: 1.25rem;
-  margin-bottom: 1.5rem;
-}
-
-.text-lg {
-  font-size: 1.125rem;
-  margin-bottom: 2rem;
-}
-
-.text-sage {
-  color: var(--color-sage-400);
-}
-
-.ml-1 {
-  margin-left: 0.25rem;
-}
-
-/* 
-==============================================
-4. Layout & Container
-==============================================
-*/
-.app-container {
+  color: var(--text);
+  background-color: var(--bg-primary);
   min-height: 100vh;
-  padding-top: 80px;
-  background-color: var(--color-pink-50);
-  color: #4a4a4a;
-}
-
-.main-content {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 1rem;
-}
-
-.site-footer {
-  padding: 24px;
-  margin-top: 80px;
-  background-color: var(--color-pink-100);
-  text-align: center;
-}
-
-.site-footer p {
-  word-wrap: break-word;
-}
-
-.social-footer-links {
-  margin-bottom: 16px;
-}
-
-.footer-separator {
-  margin: 0 8px;
-}
-
-/* 
-==============================================
-5. Navigation & Header
-==============================================
-*/
-.navbar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  width: 100%;
-  height: 64px;
-  display: flex;
-  align-items: center;
-  background-color: var(--color-pink-50);
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-  z-index: 1000;
-}
-
-.navbar-container {
-  width: 100%;
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 1rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.navbar-logo {
-  font-weight: bold;
-  font-size: 1.25rem;
-  color: var(--color-pink-400);
-}
-
-.navbar-links {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  justify-content: flex-end;
-  margin-left: auto;
-}
-
-/* 
-==============================================
-6. Mobile Menu
-==============================================
-*/
-.mobile-menu {
-  position: fixed;
-  top: 64px;
-  left: 0;
-  width: 100%;
-  background-color: var(--color-pink-50);
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  z-index: 999;
-  display: none;
-  border-top: 1px solid var(--color-pink-200);
-}
-
-.mobile-menu.open {
-  display: block;
-}
-
-.mobile-menu-container {
-  padding: 12px 16px;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  -webkit-font-smoothing: antialiased;
 }
 
-.mobile-menu-toggle {
-  display: none;
-}
-
-/* 
-==============================================
-7. Button & Controls
-==============================================
-*/
-button {
-  padding: 0.5rem 1rem;
-  border-radius: 0.75rem;
-  border: none;
-  background-color: var(--color-sage-400);
-  color: white;
-  font-weight: 500;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-  cursor: pointer;
-}
-
-button:hover {
-  background-color: var(--color-sage-500);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-}
-
-.navbar-button {
-  border-radius: 9999px;
-  background-color: var(--color-sage-200);
-  padding: 8px 16px;
-  border: none;
-  transition: all 0.2s ease;
-  display: flex;
-  align-items: center;
-  color: #4a4a4a;
-}
-
-.navbar-button:hover {
-  background-color: var(--color-pink-200);
-}
-
-.icon-button {
-  border-radius: 9999px;
-  background-color: var(--color-pink-300);
-  padding: 8px;
-  border: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s ease;
-}
-
-.icon-button:hover {
-  background-color: var(--color-pink-200);
-}
-
-.mobile-button {
-  border-radius: 9999px;
-  background-color: var(--color-pink-100);
-  padding: 8px 16px;
-  border: none;
+.container {
   width: 100%;
-  text-align: left;
-  transition: all 0.2s ease;
-  color: #4a4a4a;
-}
-
-.mobile-button:hover {
-  background-color: var(--color-pink-200);
-}
-
-.mobile-button.active {
-  background-color: var(--color-pink-300);
-  color: white;
-  font-weight: 600;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
-}
-
-.mobile-button-with-icon {
-  display: flex;
-  align-items: center;
-}
-
-.icon-left {
-  margin-right: 8px;
-}
-
-.icon-small {
-  width: 14px;
-  height: 14px;
-}
-
-/* 
-==============================================
-8. Cards & Panels
-==============================================
-*/
-.intro-section {
-  position: relative;
-  border-radius: 0.75rem;
-  margin-bottom: 3rem;
-  background-color: white;
-  overflow: hidden;
-}
-
-.intro-content {
-  padding: 2rem;
-}
-
-.intro-text {
-  max-width: 48rem;
+  max-width: var(--container-max);
   margin: 0 auto;
+  padding: 0 var(--space-md);
 }
 
-.projects-section {
-  margin-bottom: 4rem;
+/* Accessibility */
+.skip-link {
+  position: absolute;
+  top: -40px;
+  left: 0;
+  padding: var(--space-sm) var(--space-md);
+  background-color: var(--accent-primary);
+  color: white;
+  z-index: 100;
+  transition: top var(--transition);
 }
 
-.section-title {
-  font-size: 1.5rem;
-  font-weight: bold;
-  margin-bottom: 2rem;
-  display: flex;
-  align-items: center;
+.skip-link:focus {
+  top: 0;
 }
 
-.title-line {
-  flex-grow: 1;
-  height: 1px;
-  margin-left: 1rem;
-  background: var(--color-sage-200);
-}
-
-.projects-grid {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 1.5rem;
-}
-
-.project-card {
-  border-radius: 0.5rem;
-  background-color: white;
-  transition: all 0.2s ease;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
-  margin-bottom: 1.5rem;
-}
-
-.project-card:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
-}
-
-.card-content {
-  padding: 0.75rem;
-}
-
-.card-content p {
-  margin-bottom: 0.5rem;
-}
-
-.source-link {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 0.875rem;
-}
-
-.source-link:hover {
-  color: var(--color-pink-400);
-  transform: scale(1.05);
-}
-
-/* 
-==============================================
-9. Animations
-==============================================
-*/
-@keyframes float {
-  0%, 100% { 
-    transform: translateY(0px); 
-  }
-  50% { 
-    transform: translateY(-10px); 
-  }
-}
-
-.animate-float {
-  animation: float 8s ease-in-out infinite;
-}
-
-/* 
-==============================================
-10. Dark Mode
-==============================================
-*/
-.dark-mode {
-  --color-pink-50: #3A2A35;
-  --color-pink-100: #59354B;
-  --color-pink-200: #8E5773;
-  --color-pink-300: #B47A93;
-  --color-pink-400: #D7A1B8;
-  --color-pink-500: #E9C3D3;
-  --color-sage-300: #7BA97D;
-  --color-sage-400: #5D8F5F;
-  --color-sage-500: #456E47;
-  --color-cream-50: #2C2C27;
-  --color-cream-100: #3A3A33;
-}
-
-.dark-mode body {
-  background-color: #1a202c;
-  color: #f7fafc;
-}
-
-.dark-mode h1,
-.dark-mode h3 {
-  color: var(--color-pink-400);
-}
-
-.dark-mode h2 {
-  color: var(--color-sage-300);
-}
-
-.dark-mode .text-sage {
-  color: var(--color-sage-300);
-}
-
-.dark-mode .title-line {
-  background: linear-gradient(to right, var(--color-pink-400), transparent);
-}
-
-.dark-mode .app-container {
-  background-color: #1a202c;
-  color: #f7fafc;
-}
-
-.dark-mode .navbar {
-  background-color: #1a202c;
-}
-
-.dark-mode .site-footer {
-  background-color: #2d3748;
-}
-
-.dark-mode .mobile-menu {
-  background-color: #1a202c;
-  border-top: 1px solid var(--color-pink-300);
-}
-
-.dark-mode .intro-section,
-.dark-mode .project-card {
-  background-color: #2d3748;
-}
-
-.dark-mode button {
-  background-color: var(--color-sage-400);
-}
-
-.dark-mode button:hover {
-  background-color: var(--color-pink-300);
-}
-
-.dark-mode .navbar-button,
-.dark-mode .mobile-button {
-  background-color: #2d3748;
-  color: #f7fafc;
-}
-
-.dark-mode .navbar-button:hover,
-.dark-mode .mobile-button:hover {
-  background-color: var(--color-pink-200);
-}
-
-.dark-mode .icon-button {
-  background-color: var(--color-sage-300);
-}
-
-.dark-mode .icon-button:hover {
-  background-color: var(--color-pink-200);
-}
-
-/* 
-==============================================
-11. Media Queries
-==============================================
-*/
-@media (max-width: 767px) {
-  .navbar-links {
-    display: none;
-  }
-  
-  .mobile-menu-toggle {
-    display: flex;
-  }
-  
-  h1 {
-    font-size: 2.25rem;
-  }
-}
-
-@media (min-width: 768px) {
-  .mobile-menu {
-    display: none !important;
-  }
-  
-  .projects-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-  
-  .intro-content {
-    padding: 3rem;
-  }
-  
-  h1 {
-    font-size: 3rem;
-  }
-}
-
-@media (min-width: 1024px) {
-  .projects-grid {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-
-
-/* 
-==============================================
-12. Accessibility
-==============================================
-*/
-
-.sr-only {
+.visually-hidden {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -562,32 +93,523 @@ button:hover {
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
-  border-width: 0;
+  border: 0;
 }
 
-.skip-to-content {
-  position: absolute;
-  top: -40px;
-  left: 0;
-  background: var(--color-pink-400);
-  color: white;
-  padding: 8px;
-  z-index: 2000;
-  transition: top 0.2s;
+/* Typography */
+h1,
+h2,
+h3 {
+  line-height: 1.3;
+  margin-bottom: var(--space-md);
 }
 
-.skip-to-content:focus {
+h1 {
+  font-size: clamp(2.25rem, 5vw, 3rem);
+  color: var(--accent-primary);
+}
+
+h2 {
+  font-size: clamp(1.75rem, 4vw, 2rem);
+  color: var(--accent-secondary);
+}
+
+h3 {
+  font-size: clamp(1.25rem, 3vw, 1.5rem);
+  color: var(--accent-primary);
+}
+
+p {
+  margin-bottom: var(--space-md);
+}
+
+a {
+  color: var(--accent-primary);
+  text-decoration: none;
+  transition: color var(--transition);
+}
+
+a:hover,
+a:focus {
+  color: var(--accent-secondary);
+  text-decoration: underline;
+}
+
+/* Focus styles */
+:focus {
+  outline: 3px solid var(--pink-300);
+  outline-offset: 3px;
+}
+
+/* Header & Navigation */
+header {
+  background-color: var(--bg-primary);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  position: sticky;
   top: 0;
+  z-index: 10;
 }
 
-/* Focus states */
-a:focus, button:focus {
-  outline: 3px solid var(--color-pink-300);
-  outline-offset: 2px;
+nav {
+  padding: var(--space-md) 0;
 }
 
-/* Better keyboard navigation */
-a:focus-visible, button:focus-visible {
-  outline: 3px solid var(--color-pink-300);
-  outline-offset: 2px;
+nav .container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.logo {
+  font-weight: bold;
+  font-size: 1.25rem;
+  color: var(--accent-primary);
+}
+
+.logo:hover,
+.logo:focus {
+  text-decoration: none;
+}
+
+.nav-links {
+  display: flex;
+  list-style: none;
+  gap: var(--space-sm);
+  align-items: center;
+}
+
+.nav-links a {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--space-sm) var(--space-md);
+  border-radius: 9999px;
+  background-color: var(--sage-200);
+  color: var(--text);
+  transition: all var(--transition);
+}
+
+.nav-links a:hover,
+.nav-links a:focus {
+  background-color: var(--pink-200);
+  text-decoration: none;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.theme-toggle {
+  background-color: var(--pink-300);
+  border: none;
+  color: white;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all var(--transition);
+}
+
+.theme-toggle:hover,
+.theme-toggle:focus {
+  background-color: var(--pink-200);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.menu-toggle {
+  display: none;
+  background-color: var(--pink-300);
+  border: none;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  position: relative;
+  cursor: pointer;
+  color: white;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--transition);
+}
+
+.menu-toggle:hover,
+.menu-toggle:focus {
+  background-color: var(--pink-200);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* Main content */
+main {
+  flex: 1;
+  padding: var(--space-xxl) 0;
+}
+
+.intro {
+  background-color: var(--bg-secondary);
+  border-radius: 0.75rem;
+  padding: var(--space-xl);
+  margin-bottom: var(--space-xxl);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+}
+
+.projects {
+  margin-bottom: var(--space-xxl);
+}
+
+.projects h2 {
+  position: relative;
+  margin-bottom: var(--space-xl);
+  display: flex;
+  align-items: center;
+}
+
+.projects h2::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  margin-left: var(--space-md);
+  background-color: var(--sage-200);
+}
+
+.project-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: var(--space-lg);
+}
+
+.project {
+  background-color: var(--bg-secondary);
+  border-radius: 0.5rem;
+  padding: var(--space-md);
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+  transition: transform var(--transition), box-shadow var(--transition);
+}
+
+.project:hover,
+.project:focus-within {
+  transform: translateY(-4px);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
+}
+
+.project h3 {
+  margin-bottom: var(--space-sm);
+}
+
+.project p {
+  margin-bottom: var(--space-sm);
+}
+
+.project a {
+  display: inline-flex;
+  align-items: center;
+  font-size: 0.875rem;
+  transition: all var(--transition);
+}
+
+.project a:hover,
+.project a:focus {
+  transform: translateY(-2px);
+}
+
+.icon-small {
+  width: 14px;
+  height: 14px;
+  margin-left: var(--space-xs);
+}
+
+/* Footer */
+footer {
+  background-color: var(--pink-100);
+  padding: var(--space-xl);
+  text-align: center;
+}
+
+.social-links {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: var(--space-xs);
+  list-style: none;
+  margin-bottom: var(--space-md);
+}
+
+.social-links li:not(:last-child)::after {
+  content: "•";
+  margin: 0 var(--space-xs);
+}
+
+.theme-note {
+  margin-top: var(--space-md);
+  padding: var(--space-sm) var(--space-md);
+  display: inline-block;
+}
+
+/* Dark mode */
+.dark-mode {
+  --pink-50: #3A2A35;
+  --pink-100: #59354B;
+  --pink-200: #8E5773;
+  --pink-300: #B47A93;
+  --pink-400: #D7A1B8;
+  --pink-500: #E9C3D3;
+  --sage-200: #3D5D3E;
+  --sage-300: #7BA97D;
+  --sage-400: #5D8F5F;
+  --text: #f7fafc;
+  --bg-primary: #1a202c;
+  --bg-secondary: #2d3748;
+}
+
+.dark-mode .projects h2::after {
+  background: linear-gradient(to right, var(--pink-400), transparent);
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .menu-toggle {
+    display: flex;
+  }
+
+  .nav-links {
+    position: fixed;
+    top: 60px;
+    left: 0;
+    right: 0;
+    background-color: var(--bg-primary);
+    flex-direction: column;
+    padding: var(--space-md);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    border-top: 1px solid var(--pink-200);
+    transform: translateY(-100%);
+    opacity: 0;
+    pointer-events: none;
+    transition: transform var(--transition), opacity var(--transition);
+    z-index: 100;
+  }
+
+  .nav-links.menu-open {
+    transform: translateY(0);
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .nav-links li {
+    width: 100%;
+  }
+
+  .nav-links a {
+    display: flex;
+    width: 100%;
+    padding: var(--space-md);
+    margin-bottom: var(--space-xs);
+    transform: none;
+  }
+
+  .nav-links a:hover,
+  .nav-links a:focus {
+    transform: none;
+    box-shadow: none;
+    background-color: var(--pink-200);
+  }
+
+  .intro {
+    padding: var(--space-lg);
+  }
+}
+
+@media (min-width: 769px) {
+  .project-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 1024px) {
+  .project-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+
+
+
+/* Resume header and contact info */
+.resume-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+  margin-bottom: var(--space-xl);
+}
+
+.contact-info {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-md);
+  font-size: 0.95rem;
+}
+
+/* Resume sections */
+.resume-section {
+  background-color: var(--bg-secondary);
+  border-radius: 0.75rem;
+  padding: var(--space-xl);
+  margin-bottom: var(--space-xl);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+  transition: transform var(--transition), box-shadow var(--transition);
+}
+
+.resume-section:hover {
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
+}
+
+.resume-section h2 {
+  position: relative;
+  margin-bottom: var(--space-lg);
+  display: flex;
+  align-items: center;
+}
+
+.resume-section h2::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  margin-left: var(--space-md);
+  background-color: var(--sage-200);
+}
+
+.dark-mode .resume-section h2::after {
+  background: linear-gradient(to right, var(--pink-400), transparent);
+}
+
+/* Education and experience items */
+.education-item,
+.experience-item {
+  margin-bottom: var(--space-lg);
+}
+
+.education-header,
+.experience-header {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin-bottom: var(--space-xs);
+}
+
+.location {
+  color: var(--accent-primary);
+  font-weight: 500;
+}
+
+.date {
+  color: var(--text);
+  font-style: italic;
+}
+
+.degree,
+.job-title {
+  font-weight: 600;
+  color: var(--accent-secondary);
+}
+
+.gpa {
+  margin-bottom: var(--space-md);
+}
+
+.coursework {
+  margin-top: var(--space-sm);
+}
+
+.bullet-list {
+  padding-left: var(--space-xl);
+  margin-bottom: var(--space-md);
+}
+
+.bullet-list li {
+  margin-bottom: var(--space-xs);
+}
+
+/* Skills grid */
+.skills-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: var(--space-md);
+}
+
+.skill-category {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+}
+
+.skill-category::before {
+  content: '•';
+  color: var(--accent-primary);
+  font-size: 1.5rem;
+}
+
+/* Print styles */
+@media print {
+  body {
+    background-color: white;
+  }
+
+  header,
+  footer,
+  .theme-toggle,
+  .menu-toggle {
+    display: none;
+  }
+
+  .container {
+    max-width: 100%;
+    padding: 0;
+  }
+
+  .resume-section {
+    box-shadow: none;
+    page-break-inside: avoid;
+    margin-bottom: var(--space-lg);
+  }
+
+  .resume-section:hover {
+    transform: none;
+    box-shadow: none;
+  }
+}
+
+/* Skill category headings */
+.skill-heading {
+  font-size: 1.1rem;
+  color: var(--accent-primary);
+  margin-top: var(--space-lg);
+  margin-bottom: var(--space-sm);
+  border-bottom: 1px solid var(--sage-200);
+  padding-bottom: var(--space-xs);
+}
+
+/* Make the first skill heading not have extra top margin */
+.skill-heading:first-of-type {
+  margin-top: 0;
+}
+
+/* Dark mode styling for skill headings */
+.dark-mode .skill-heading {
+  border-bottom-color: var(--pink-300);
+}
+
+/* Responsive adjustments for resume */
+@media (max-width: 768px) {
+
+  .education-header,
+  .experience-header {
+    flex-direction: column;
+  }
+
+  .resume-section {
+    padding: var(--space-lg);
+  }
+
+  .skills-grid {
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  }
 }
\ No newline at end of file
