build9-htmlcssonly

2025-04-03 14:28:47 -04:00 · 2025-04-03 14:28:47 -04:00 · a878b8d0dc
commit a878b8d0dc
parent 6d04e1f0ca
16 changed files with 752 additions and 111 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1 +0,0 @@
-node_modules
--- a/asset-manifest.json
+++ b/asset-manifest.json
@ -1,15 +0,0 @@
-{
-  "files": {
-    "main.css": "/charlotte_sh/static/css/main.9c66e5c4.css",
-    "main.js": "/charlotte_sh/static/js/main.e1f52c41.js",
-    "static/js/453.38414f0f.chunk.js": "/charlotte_sh/static/js/453.38414f0f.chunk.js",
-    "index.html": "/charlotte_sh/index.html",
-    "main.9c66e5c4.css.map": "/charlotte_sh/static/css/main.9c66e5c4.css.map",
-    "main.e1f52c41.js.map": "/charlotte_sh/static/js/main.e1f52c41.js.map",
-    "453.38414f0f.chunk.js.map": "/charlotte_sh/static/js/453.38414f0f.chunk.js.map"
-  },
-  "entrypoints": [
-    "static/css/main.9c66e5c4.css",
-    "static/js/main.e1f52c41.js"
-  ]
-}
--- a/favicon.ico
+++ b/favicon.ico
--- a/index.html
+++ b/index.html
@ -1 +1,195 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/charlotte_sh/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Charlotte Croce's personal website"/><link rel="apple-touch-icon" href="/charlotte_sh/logo192.png"/><link rel="manifest" href="/charlotte_sh/manifest.json"/><title>charlotte.sh</title><script defer="defer" src="/charlotte_sh/static/js/main.e1f52c41.js"></script><link href="/charlotte_sh/static/css/main.9c66e5c4.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>./charlotte.sh</title>
+  <link rel="stylesheet" href="style.css">
+  <!-- Lucide icons via CDN -->
+  <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+</head>
+<body>
+  <div class="app-container">
+    <!-- Navbar -->
+    <header class="navbar">
+      <div class="navbar-container">
+        <div class="navbar-logo">
+          ./charlotte.sh
+        </div>
+        
+        <!-- Desktop Navigation Links -->
+        <div class="navbar-links">
+          <button class="navbar-button" onclick="openSocialLink('https://github.com/charlottecroce')">
+            GitHub <i data-lucide="external-link" class="ml-1"></i>
+          </button>
+          <button class="navbar-button" onclick="openSocialLink('https://codeberg.org/charlottecroce')">
+            Codeberg <i data-lucide="external-link" class="ml-1"></i>
+          </button>
+          <button class="navbar-button" onclick="openSocialLink('https://linkedin.com/in/charlottecroce')">
+            LinkedIn <i data-lucide="external-link" class="ml-1"></i>
+          </button>
+          <button class="navbar-button" onclick="openSocialLink('https://hachyderm.io/@charlotte200')">
+            Mastodon <i data-lucide="external-link" class="ml-1"></i>
+          </button>
+          <button onclick="toggleDarkMode()" aria-label="Toggle dark mode" class="icon-button">
+            <i data-lucide="moon" id="moon-icon"></i>
+            <i data-lucide="sun" id="sun-icon" style="display: none;"></i>
+          </button>
+        </div>
+        
+        <!-- Mobile Menu Button -->
+        <button class="icon-button mobile-menu-toggle" onclick="toggleMobileMenu()" aria-label="Toggle menu">
+          <i data-lucide="menu" id="menu-icon"></i>
+          <i data-lucide="x" id="close-icon" style="display: none;"></i>
+        </button>
+      </div>
+    </header>
+    
+    <!-- Mobile Menu -->
+    <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>
+    </div>
+    
+    <!-- Main Content -->
+    <main class="main-content">
+      <div>
+        <!-- Intro Section -->
+        <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>
+        
+        <!-- Projects Section -->
+        <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. Probably a useful resource if you also go here.</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"></i>
+                </a>
+              </div>
+            </div>
+            <div class="project-card">
+              <div class="card-content">
+                <h3>Nøkken Health</h3>
+                <p>A mobile app to track and analyze health data. Track medications, bloodwork, symptoms, and more. Made with Flutter</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"></i>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+    
+    <!-- Footer -->
+    <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>©<span id="current-year"></span> Charlotte Croce</p>
+    </footer>
+  </div>
+
+  <script>
+    // Initialize Lucide icons
+    lucide.createIcons();
+    
+    // Set current year in footer
+    document.getElementById('current-year').textContent = new Date().getFullYear();
+    
+    // Dark mode toggle
+    function toggleDarkMode() {
+      const body = document.body;
+      const isDarkMode = body.classList.toggle('dark-mode');
+      
+      // Update icon visibility
+      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';
+      
+      // Update text
+      document.getElementById('dark-mode-text').textContent = isDarkMode ? 'Light Mode' : 'Dark Mode';
+    }
+    
+    // Mobile menu toggle
+    function toggleMobileMenu() {
+      const mobileMenu = document.getElementById('mobile-menu');
+      const isOpen = mobileMenu.classList.toggle('open');
+      
+      // Update icon visibility
+      document.getElementById('menu-icon').style.display = isOpen ? 'none' : 'block';
+      document.getElementById('close-icon').style.display = isOpen ? 'block' : 'none';
+    }
+    
+    // Open social links
+    function openSocialLink(url) {
+      window.open(url, '_blank', 'noopener,noreferrer');
+      
+      // Close mobile menu if open
+      const mobileMenu = document.getElementById('mobile-menu');
+      if (mobileMenu.classList.contains('open')) {
+        toggleMobileMenu();
+      }
+    }
+    
+    // Handle mobile menu on window resize
+    window.addEventListener('resize', function() {
+      const isMobile = window.innerWidth < 768;
+      const mobileMenu = document.getElementById('mobile-menu');
+      
+      // Close mobile menu on desktop
+      if (!isMobile && mobileMenu.classList.contains('open')) {
+        mobileMenu.classList.remove('open');
+        document.getElementById('menu-icon').style.display = 'block';
+        document.getElementById('close-icon').style.display = 'none';
+      }
+      
+      // Show/hide mobile menu toggle button
+      document.querySelector('.mobile-menu-toggle').style.display = isMobile ? 'flex' : 'none';
+    });
+    
+    // Initial setup
+    document.querySelector('.mobile-menu-toggle').style.display = window.innerWidth < 768 ? 'flex' : 'none';
+  </script>
+</body>
+</html>
--- a/logo192.png
+++ b/logo192.png
--- a/logo512.png
+++ b/logo512.png
--- a/manifest.json
+++ b/manifest.json
@ -1,25 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}
--- a/robots.txt
+++ b/robots.txt
@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:
--- a/static/css/main.9c66e5c4.css
+++ b/static/css/main.9c66e5c4.css
@ -1,2 +0,0 @@
-: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}*{transition:all .3s ease}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#fff0f5;background-color:var(--color-pink-50);color:#4a4a4a;font-family:Segoe UI,Roboto,Oxygen,sans-serif;line-height:1.6;margin:0}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.3}h1{color:#f45d9e;color:var(--color-pink-400);font-size:2.5rem}h2{color:#8ab68c;color:var(--color-sage-400);font-size:2rem}h3{font-size:1.5rem}a,h3{color:#f45d9e;color:var(--color-pink-400)}a{text-decoration:none}a:hover{color:#8ab68c;color:var(--color-sage-400);text-decoration:underline}.app-container{background-color:#fff0f5;background-color:var(--color-pink-50);color:#4a4a4a;min-height:100vh;padding-top:80px}.main-content{margin:0 auto;max-width:1200px;padding:0 1rem}.site-footer{background-color:#ffe0eb;background-color:var(--color-pink-100);margin-top:80px;padding:24px;text-align:center}.navbar{background-color:#fff0f5;background-color:var(--color-pink-50);box-shadow:0 2px 10px #0000001a;height:64px;left:0;position:fixed;right:0;top:0;z-index:1000}.navbar,.navbar-container{align-items:center;display:flex;width:100%}.navbar-container{justify-content:space-between;margin:0 auto;max-width:1200px;padding:0 1rem}.navbar-logo{color:#f45d9e;color:var(--color-pink-400);font-size:1.25rem;font-weight:700}.navbar-links{align-items:center;display:flex;gap:8px;justify-content:flex-end;margin-left:auto}.mobile-menu{background-color:#fff0f5;background-color:var(--color-pink-50);border-top:1px solid #ffb8d9;border-top:1px solid var(--color-pink-200);box-shadow:0 4px 6px #0000001a;display:none;left:0;position:fixed;top:64px;width:100%;z-index:999}.mobile-menu.open{display:block}.mobile-menu-container{display:flex;flex-direction:column;gap:8px;padding:12px 16px}.mobile-menu-toggle{display:none}button:not([class*=bg-]):not([class*=rounded-]){background-color:#8ab68c;background-color:var(--color-sage-400);border:none;border-radius:.75rem;box-shadow:0 2px 5px #0000001a;color:#fff;font-weight:500;padding:.5rem 1rem}button:not([class*=bg-]):not([class*=rounded-]):hover{background-color:#8ab68c;background-color:var(--color-sage-400);box-shadow:0 4px 8px #0000001a;transform:translateY(-2px)}.navbar-button{background-color:var(--color-sage-100);border:none;border-radius:9999px;padding:8px 16px;transition:all .2s ease}.navbar-button:hover{background-color:#ffb8d9;background-color:var(--color-pink-200)}.social-link{margin:1em}.icon-button{align-items:center;display:flex;justify-content:center;padding:8px}.icon-button,.mobile-button{background-color:#ffe0eb;background-color:var(--color-pink-100);border:none;border-radius:9999px;transition:all .2s ease}.mobile-button{padding:8px 16px;text-align:left;width:100%}.mobile-button.active{background-color:#ff8ac8;background-color:var(--color-pink-300);box-shadow:0 2px 6px #00000026;color:#fff;font-weight:600}.mobile-button-with-icon{align-items:center;display:flex}.icon-left{margin-right:8px}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.animate-float{animation:float 8s ease-in-out infinite}.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 h1,.dark-mode h3{color:#f45d9e;color:var(--color-pink-400)}.dark-mode h2{color:#b5d4b7;color:var(--color-sage-300)}.dark-mode .card{background-color:#2d2d33;border-color:#8ab68c;border-color:var(--color-sage-400)}.dark-mode button{background-color:#8ab68c;background-color:var(--color-sage-400)}.dark-mode button:hover{background-color:#ff8ac8;background-color:var(--color-pink-300)}.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}.text-sage{color:#8ab68c!important;color:var(--color-sage-400)!important}.text-pink{color:#f45d9e!important;color:var(--color-pink-400)!important}.border-sage{border-color:#8ab68c!important;border-color:var(--color-sage-400)!important}.border-pink{border-color:#f45d9e!important;border-color:var(--color-pink-400)!important}.shadow-soft{box-shadow:0 4px 6px #0000000d}.shadow-medium{box-shadow:0 6px 12px #00000014}@media (max-width:767px){.navbar-links{display:none}.mobile-menu-toggle{display:flex}}@media (min-width:768px){.mobile-menu{display:none!important}}
-/*# sourceMappingURL=main.9c66e5c4.css.map*/
--- a/static/css/main.9c66e5c4.css.map
+++ b/static/css/main.9c66e5c4.css.map
--- a/static/js/453.38414f0f.chunk.js
+++ b/static/js/453.38414f0f.chunk.js
@ -1,2 +0,0 @@
-"use strict";(self.webpackChunkcharlotte_sh=self.webpackChunkcharlotte_sh||[]).push([[453],{453:(e,t,n)=>{n.r(t),n.d(t,{getCLS:()=>y,getFCP:()=>h,getFID:()=>C,getLCP:()=>P,getTTFB:()=>D});var i,r,a,o,u=function(e,t){return{name:e,value:void 0===t?-1:t,delta:0,entries:[],id:"v2-".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12)}},c=function(e,t){try{if(PerformanceObserver.supportedEntryTypes.includes(e)){if("first-input"===e&&!("PerformanceEventTiming"in self))return;var n=new PerformanceObserver((function(e){return e.getEntries().map(t)}));return n.observe({type:e,buffered:!0}),n}}catch(e){}},s=function(e,t){var n=function n(i){"pagehide"!==i.type&&"hidden"!==document.visibilityState||(e(i),t&&(removeEventListener("visibilitychange",n,!0),removeEventListener("pagehide",n,!0)))};addEventListener("visibilitychange",n,!0),addEventListener("pagehide",n,!0)},f=function(e){addEventListener("pageshow",(function(t){t.persisted&&e(t)}),!0)},m=function(e,t,n){var i;return function(r){t.value>=0&&(r||n)&&(t.delta=t.value-(i||0),(t.delta||void 0===i)&&(i=t.value,e(t)))}},v=-1,p=function(){return"hidden"===document.visibilityState?0:1/0},d=function(){s((function(e){var t=e.timeStamp;v=t}),!0)},l=function(){return v<0&&(v=p(),d(),f((function(){setTimeout((function(){v=p(),d()}),0)}))),{get firstHiddenTime(){return v}}},h=function(e,t){var n,i=l(),r=u("FCP"),a=function(e){"first-contentful-paint"===e.name&&(s&&s.disconnect(),e.startTime<i.firstHiddenTime&&(r.value=e.startTime,r.entries.push(e),n(!0)))},o=window.performance&&performance.getEntriesByName&&performance.getEntriesByName("first-contentful-paint")[0],s=o?null:c("paint",a);(o||s)&&(n=m(e,r,t),o&&a(o),f((function(i){r=u("FCP"),n=m(e,r,t),requestAnimationFrame((function(){requestAnimationFrame((function(){r.value=performance.now()-i.timeStamp,n(!0)}))}))})))},g=!1,T=-1,y=function(e,t){g||(h((function(e){T=e.value})),g=!0);var n,i=function(t){T>-1&&e(t)},r=u("CLS",0),a=0,o=[],v=function(e){if(!e.hadRecentInput){var t=o[0],i=o[o.length-1];a&&e.startTime-i.startTime<1e3&&e.startTime-t.startTime<5e3?(a+=e.value,o.push(e)):(a=e.value,o=[e]),a>r.value&&(r.value=a,r.entries=o,n())}},p=c("layout-shift",v);p&&(n=m(i,r,t),s((function(){p.takeRecords().map(v),n(!0)})),f((function(){a=0,T=-1,r=u("CLS",0),n=m(i,r,t)})))},E={passive:!0,capture:!0},w=new Date,L=function(e,t){i||(i=t,r=e,a=new Date,F(removeEventListener),S())},S=function(){if(r>=0&&r<a-w){var e={entryType:"first-input",name:i.type,target:i.target,cancelable:i.cancelable,startTime:i.timeStamp,processingStart:i.timeStamp+r};o.forEach((function(t){t(e)})),o=[]}},b=function(e){if(e.cancelable){var t=(e.timeStamp>1e12?new Date:performance.now())-e.timeStamp;"pointerdown"==e.type?function(e,t){var n=function(){L(e,t),r()},i=function(){r()},r=function(){removeEventListener("pointerup",n,E),removeEventListener("pointercancel",i,E)};addEventListener("pointerup",n,E),addEventListener("pointercancel",i,E)}(t,e):L(t,e)}},F=function(e){["mousedown","keydown","touchstart","pointerdown"].forEach((function(t){return e(t,b,E)}))},C=function(e,t){var n,a=l(),v=u("FID"),p=function(e){e.startTime<a.firstHiddenTime&&(v.value=e.processingStart-e.startTime,v.entries.push(e),n(!0))},d=c("first-input",p);n=m(e,v,t),d&&s((function(){d.takeRecords().map(p),d.disconnect()}),!0),d&&f((function(){var a;v=u("FID"),n=m(e,v,t),o=[],r=-1,i=null,F(addEventListener),a=p,o.push(a),S()}))},k={},P=function(e,t){var n,i=l(),r=u("LCP"),a=function(e){var t=e.startTime;t<i.firstHiddenTime&&(r.value=t,r.entries.push(e),n())},o=c("largest-contentful-paint",a);if(o){n=m(e,r,t);var v=function(){k[r.id]||(o.takeRecords().map(a),o.disconnect(),k[r.id]=!0,n(!0))};["keydown","click"].forEach((function(e){addEventListener(e,v,{once:!0,capture:!0})})),s(v,!0),f((function(i){r=u("LCP"),n=m(e,r,t),requestAnimationFrame((function(){requestAnimationFrame((function(){r.value=performance.now()-i.timeStamp,k[r.id]=!0,n(!0)}))}))}))}},D=function(e){var t,n=u("TTFB");t=function(){try{var t=performance.getEntriesByType("navigation")[0]||function(){var e=performance.timing,t={entryType:"navigation",startTime:0};for(var n in e)"navigationStart"!==n&&"toJSON"!==n&&(t[n]=Math.max(e[n]-e.navigationStart,0));return t}();if(n.value=n.delta=t.responseStart,n.value<0||n.value>performance.now())return;n.entries=[t],e(n)}catch(e){}},"complete"===document.readyState?setTimeout(t,0):addEventListener("load",(function(){return setTimeout(t,0)}))}}}]);
-//# sourceMappingURL=453.38414f0f.chunk.js.map
--- a/static/js/453.38414f0f.chunk.js.map
+++ b/static/js/453.38414f0f.chunk.js.map
--- a/static/js/main.e1f52c41.js
+++ b/static/js/main.e1f52c41.js
--- a/static/js/main.e1f52c41.js.LICENSE.txt
+++ b/static/js/main.e1f52c41.js.LICENSE.txt
@ -1,56 +0,0 @@
-/**
- * @license React
- * react-dom-client.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * @license React
- * react-dom.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * @license React
- * react-jsx-runtime.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * @license React
- * react.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * @license React
- * scheduler.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * @license lucide-react v0.487.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
--- a/static/js/main.e1f52c41.js.map
+++ b/static/js/main.e1f52c41.js.map
--- a/style.css
+++ b/style.css
@ -0,0 +1,557 @@
+/* 
+==============================================
+TABLE OF CONTENTS
+==============================================
+1. CSS Variables
+2. Base Styles
+3. Typography
+4. Layout & Container
+5. Navigation & Header
+6. Mobile Menu
+7. Button & Controls
+8. Form Elements
+9. Cards & Panels
+10. Animations
+11. Dark Mode
+12. Utility Classes
+13. Media Queries
+==============================================
+*/
+
+/* 
+==============================================
+1. 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;
+  }
+  
+  /* 
+  ==============================================
+  2. Base Styles
+  ==============================================
+  */
+  * {
+    transition: all 0.3s ease;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+  
+  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;
+    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;
+  }
+  
+  /* 
+  ==============================================
+  4. Layout & Container
+  ==============================================
+  */
+  .app-container {
+    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;
+  }
+  
+  .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;
+  }
+  
+  .ml-1 {
+    margin-left: 0.25rem;
+  }
+  
+  /* 
+  ==============================================
+  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;
+  }
+  
+  .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-100);
+    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;
+    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. Form Elements
+  ==============================================
+  */
+  /* No styles defined yet */
+  
+  /* 
+  ==============================================
+  9. 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;
+    margin: 0 auto;
+  }
+  
+  .projects-section {
+    margin-bottom: 4rem;
+  }
+  
+  .section-title {
+    font-size: 1.5rem;
+    font-weight: bold;
+    margin-bottom: 2rem;
+    display: flex;
+    align-items: center;
+  }
+  
+  .title-line {
+    flex-grow: 1;
+    height: 1px;
+    margin-left: 1rem;
+    background: linear-gradient(to right, var(--color-pink-200), transparent);
+  }
+  
+  .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);
+    border: 1px solid 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);
+  }
+  
+  .text-sage {
+    color: var(--color-sage-400);
+  }
+  
+  /* 
+  ==============================================
+  10. Animations
+  ==============================================
+  */
+  @keyframes float {
+    0%, 100% { transform: translateY(0px); }
+    50% { transform: translateY(-10px); }
+  }
+  
+  .animate-float {
+    animation: float 8s ease-in-out infinite;
+  }
+  
+  /* 
+  ==============================================
+  11. 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;
+    border-color: var(--color-sage-400);
+  }
+  
+  .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-300);
+  }
+  
+  .dark-mode .icon-button {
+    background-color: #2d3748;
+  }
+  
+  .dark-mode .icon-button:hover {
+    background-color: var(--color-pink-300);
+  }
+  
+  /* 
+  ==============================================
+  12. Utility Classes
+  ==============================================
+  */
+  /* Additional utility classes included above with relevant components */
+  
+  /* 
+  ==============================================
+  13. 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);
+    }
+  }