call to action contact

static/index.html

@@ -31,8 +31,25 @@
 
   <div class="shell">
     <aside>
-      <div hx-get="/static/components/themetoggle.html" hx-trigger="load" hx-swap="outerHTML">
-        <span class="spinner">Loading toggle...</span>
+      <div class="row">
+        <div class="toggle-wrap" role="switch" aria-checked="true" tabindex="0" id="toggle"
+          aria-label="Toggle day/night mode">
+          <div class="track day" id="track">
+            <div class="stars">
+              <div class="star"></div>
+              <div class="star"></div>
+              <div class="star"></div>
+              <div class="star"></div>
+              <div class="star"></div>
+            </div>
+          </div>
+          <div class="knob day" id="knob">
+            <div class="sun-rays" id="rays"></div>
+            <div class="moon-crater" style="width:4px;height:4px;top:3px;left:5px;"></div>
+            <div class="moon-crater" style="width:3px;height:3px;top:9px;left:9px;"></div>
+            <div class="moon-crater" style="width:2px;height:2px;top:4px;left:11px;"></div>
+          </div>
+        </div>
       </div>
       <div>
         <p class="sidebar-label">navigate</p>
@@ -225,7 +242,7 @@
             A pattern I keep seeing is CEOs speaking just close enough to reality to generate a short-term price boost, then moving the goalposts when reality catches up. What companies state in filings and what they communicate to retail or even professional investors can be two very different stories. Guidance only needs to reach far enough into the future to say almost anything.
           </p>
           </div>
-
+          <br>
           <div class="section-head">
             <h2>Current stock analysis</h2>
           </div>
@@ -257,7 +274,7 @@
         <section id="interests">
           <div class="page-header">
             <h2 class="page-title" id="interest">
-              interests
+              Interests
             </h2>
             <button id="interest-button" onclick="toggleInterests()" class="">open ↓</button> 
           </div>
@@ -373,6 +390,18 @@
             </div>
           </div>
         </section>
+        <section id="contact">
+          <div class="page-header"><h2 class="page-title" id="interest">Contact</h2></div>
+           <div class="exp-card" >
+              <div class="exp-header">
+                <span class="exp-title">Open to opportunities</span>
+              </div>
+              <p class="cta-body">
+                Looking for an entry-level analyst or finance-adjacent role alongside my studies. If you're working on something interesting.
+              </p>
+              <a class="cta-btn" href="mailto:me@samantha42.xyz">write to me →</a>
+            </div>  
+        </section>
     </main>
   </div>
 

static/input.css

@@ -12,6 +12,9 @@
   --accent2:#1447b8;
   --green:#0eaf74;
   --amber:#ffd78e;
+  --accent-dim: rgba(93, 167, 202, 0.12);
+  --accent-border: rgba(93, 102, 202, 0.25);
+
 }
 
 .theme-root {
@@ -30,6 +33,9 @@
     --navback: rgba(247,246,243,0.8)
     --ff-mono:'IBM Plex Mono',monospace;
     --ff-sans:'IBM Plex Sans',sans-serif;
+   --accent-dim: rgba(93, 167, 202, 0.12);
+    --accent-border: rgba(93, 102, 202, 0.25);
+
   }
 
 *{box-sizing:border-box;margin:0;padding:0;}
@@ -621,4 +627,43 @@ button:hover {
 
 .hidden {
   display: none;
-}
+}
+
+
+    section .cta {
+      margin-top: 3rem;
+      padding: 2rem;
+      border: 0.5px solid var(--accent-border);
+      border-radius: 8px;
+      background: var(--accent-dim);
+    }
+ 
+    .cta-hed {
+      font-family: var(--mono);
+      font-size: 13px;
+      color: var(--accent);
+      margin-bottom: 0.4rem;
+    }
+ 
+    .cta-body {
+      font-size: 13px;
+      color: var(--muted);
+      margin-bottom: 1.25rem;
+      line-height: 1.65;
+    }
+ 
+    .cta-btn {
+      display: inline-block;
+      font-family: var(--mono);
+      font-size: 12px;
+      color: var(--bg);
+      background: var(--accent);
+      border: none;
+      padding: 9px 20px;
+      border-radius: 4px;
+      text-decoration: none;
+      cursor: pointer;
+      transition: opacity 0.15s;
+    }
+ 
+    .cta-btn:hover { opacity: 0.85; }