diff --git a/index.html b/index.html
index bd01de2..a3de997 100644
--- a/index.html
+++ b/index.html
@@ -1,185 +1,133 @@
 <!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 - 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="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>
-    </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 personal stuff on my <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> account.</p>
+      </section>
+
+      <section class="projects">
+        <h2>Projects</h2>
+        <div class="project-grid">
+          <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://codeberg.org/charlottecroce/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>
-              <h2>About Me</h2>
-              <p class="text-md">I'm a cybersecurity student from the Northeast USA. I do security engineering at the Leahy Center in Burlington, VT.</p>
-              <br>
-              <p>
-              You can find most of my personal stuff on my
-              <a href="https://codeberg.org/charlottecroce" target="_blank" rel="noopener noreferrer">Codeberg</a>
-              account.
-              </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">
-                  <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 me"
-          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>
+
+  <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>
+    </div>
+  </footer>
 
   <script>
+    // Initialize Lucide icons
     lucide.createIcons();
 
+    // Update copyright year
     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';
+    // 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';
     }
-
-    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';
+    
+    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');
     });
 
-    document.querySelector('.mobile-menu-toggle').style.display = window.innerWidth < 768 ? 'flex' : 'none';
+    // 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';
+      }
+    });
   </script>
 </body>
-
 </html>
\ No newline at end of file
diff --git a/style.css b/style.css
index 10c06d8..e974468 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,331 @@ 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);
+}
+
+/* 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);
+  }
 }
\ No newline at end of file
