color change

Paebak · Paebak · commit 10fd0b6d88c6 · 2025-11-03T15:17:10.000-08:00
color change and messed up favicon (need to resize)
diff --git a/index.html b/index.html
@@ -4,6 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>neofound</title>
+    <link rel="icon" href="/memoji-32.png?v=2" type="image/png" sizes="32x32">
+
+
   </head>
   <body>
     <div id="root"></div>
diff --git a/src/App.jsx b/src/App.jsx
@@ -94,15 +94,31 @@ export default function App() {
               </a>
             </div>
 
-            <div className="col-12 col-md-6">
-              <div id="experience" className="tile tile--cta h-100">
-                <h5 className="mb-1">Experience 🧰</h5>
-                <div className="text-secondary small mb-2">
-                  TDLM engineering, XSOAR runbooks, CMDB context.
-                </div>
-                <Button href="#experience-full" size="sm">See roles</Button>
-              </div>
-            </div>
+           <div className="col-12 col-md-6 d-flex flex-column gap-3">
+  {/* Top half: Experience */}
+  <div id="experience" className="tile tile--cta flex-fill d-flex flex-column">
+    <h5 className="mb-1">Experience 🧰</h5>
+    <div className="text-secondary small mb-2">
+      TDLM engineering, XSOAR runbooks, CMDB context.
+    </div>
+    <div className="mt-auto">
+      <Button href="#experience-full" size="sm">See roles</Button>
+    </div>
+  </div>
+
+  {/* Bottom half: Photography Projects */}
+  <div id="photo-projects" className="tile tile--cta flex-fill d-flex flex-column">
+    <h5 className="mb-1">Photography Projects 📷</h5>
+    <div className="text-secondary small mb-2">
+      Darkroom workflows, film tests, and dev charts.
+    </div>
+    <div className="d-flex flex-wrap gap-2 small">
+      <Button href="#photo-app" size="sm" variant="outline-primary">R2 App</Button>
+      <Button href="#dev-notes" size="sm" variant="outline-secondary">Dev Notes</Button>
+      <Button href="#gallery" size="sm">Gallery</Button>
+    </div>
+  </div>
+</div>
 
             {/* SNAKE GAME TILE */}
             <div className="col-12 col-md-6">
diff --git a/src/hooks/public/memoji-favicon.png b/src/hooks/public/memoji-favicon.png
diff --git a/src/theme.css b/src/theme.css
@@ -5,11 +5,11 @@
 /* LIGHT (default) */
 :root {
   /* Neutral greys */
-  --nf-gray-0: #ffffff;
-  --nf-gray-1: #f5f6f8;
-  --nf-gray-2: #e7eaef;
-  --nf-gray-3: #d3d8e1;
-  --nf-gray-7: #1b1f23;
+  --nf-gray-0: #b0adad;
+  --nf-gray-1: #b0adad;
+  --nf-gray-2: #b0adad;
+  --nf-gray-3: #b0adad;
+  --nf-gray-7: #b0adad;
 
   /* Accent greens */
   --nf-green: #22c55e;
@@ -265,3 +265,11 @@ body { margin: 0; }
 .hero-title { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.1; }
 .hero-blurb { font-size: clamp(1rem, 1.4vw, 1.125rem); }
 
+/* Smooth transition between light/dark modes */
+html, body, .tile, .card, .navbar, .btn, .theme-toggle, .hero-title, .hero-blurb {
+  transition:
+    background-color 1s ease,
+    color 1s ease,
+    border-color 1s ease,
+    box-shadow 1s ease;
+}
