chore: balance align h+v

Author: wechulisimiyu

index.html

@@ -81,15 +81,25 @@ <h1>Are zombies supposed to be full of life?</h1>
               to basic education, and healthcare.</p>
             <!-- CTA -->
             <div class="ui-component-cta ui-layout-flex">
-              <a href="mailto:wechuli07@gmail.com?subject=Website%20Inquiry%20from%20wechulisimiyu.github.io&body=Hi%20Wechuli%2C%0A%0AI%20saw%20your%20site%20and%20would%20like%20to%20talk%20about%20a%20project.%20Please%20get%20back%20to%20me%20when%20you%27re%20available.%0A%0AThanks%2C%0A"
-                role="link" aria-label="Email Wechuli" title="Email Wechuli"
+              <a href="#contact"
+                role="link" aria-label="Contact Wechuli" title="Contact Wechuli"
                 class="ui-component-button ui-component-button-normal ui-component-button-primary">Let's talk more</a>
               <p class="ui-text-note"><small>Send me an email</small></p>
             </div>
+            <!-- Desktop-only: let visitors pick which compose flow to open (prefilled) -->
+            <div class="ui-email-options ui-hide-mobile" aria-hidden="false">
+              <p style="margin:0 .5rem 0 0; align-self:center;"><small>Or open compose in:</small></p>
+              <a href="mailto:wechuli07@gmail.com?subject=Website%20Inquiry%20from%20wechulisimiyu.github.io&body=Hi%20Wechuli%2C%0A%0AI%20saw%20your%20site%20and%20would%20like%20to%20talk%20about%20a%20project.%20Please%20get%20back%20to%20me%20when%20you%27re%20available.%0A%0AThanks%2C%0A"
+                class="ui-component-button ui-component-button-normal ui-component-button-secondary external-link" title="Open in default mail app">Mail client</a>
+              <a href="https://mail.google.com/mail/?view=cm&fs=1&to=wechuli07@gmail.com&su=Website%20Inquiry%20from%20wechulisimiyu.github.io&body=Hi%20Wechuli%2C%0A%0AI%20saw%20your%20site%20and%20would%20like%20to%20talk%20about%20a%20project.%20Please%20get%20back%20to%20me%20when%20you%27re%20available.%0A%0AThanks%2C%0A"
+                class="ui-component-button ui-component-button-normal ui-component-button-secondary external-link" target="_blank" rel="noopener noreferrer" title="Open in Gmail">Gmail</a>
+              <a href="https://outlook.live.com/owa/?path=/mail/action/compose&to=wechuli07@gmail.com&subject=Website%20Inquiry%20from%20wechulisimiyu.github.io&body=Hi%20Wechuli%2C%0A%0AI%20saw%20your%20site%20and%20would%20like%20to%20talk%20about%20a%20project.%20Please%20get%20back%20to%20me%20when%20you%27re%20available.%0A%0AThanks%2C%0A"
+                class="ui-component-button ui-component-button-normal ui-component-button-secondary external-link" target="_blank" rel="noopener noreferrer" title="Open in Outlook">Outlook</a>
+            </div>
           </div>
           <div>
             <h1>My tools of trade</h1>
-            <p class="ui-text-intro">I build software for.</p>
+            <p class="ui-text-intro">I build/customize software for.</p>
             <ul class="ui-component-list ui-component-list-feature ui-layout-grid">
               <li class="ui-component-list--item ui-component-list--item-check">Branding: Websites</li>
               <li class="ui-component-list--item ui-component-list--item-check">Inventory</li>
@@ -98,6 +108,12 @@ <h1>My tools of trade</h1>
               <li class="ui-component-list--item ui-component-list--item-check">People management</li>
               <li class="ui-component-list--item ui-component-list--item-check"><b>We can also explore AI</b></li>
             </ul>
+            <!-- Mobile-only quick CTA: Headstart (free consultation request) -->
+            <div class="ui-component-cta ui-layout-flex ui-headstart-mobile" aria-hidden="false">
+              <a href="mailto:wechuli07@gmail.com?subject=Headstart%20Request&body=Hi%20Wechuli%2C%0A%0AI%20have%20a%20few%20ideas%20and%20would%20like%20a%20free%20consultation%20to%20discuss.%20Please%20let%20me%20know%20your%20availability.%0A%0AThanks%2C%0A%5BYour%20Name%5D"
+                role="link" aria-label="Request a Headstart consultation" title="Headstart — Free consultation"
+                class="ui-component-button ui-component-button-normal ui-component-button-secondary external-link">Headstart — Free consultation</a>
+            </div>
           </div>
         </div>
       </div>
@@ -126,7 +142,7 @@ <h3>Juvenotes</h3>
         <h1>Volunteering</h1>
         <div class="ui-section-project__layout ui-layout-grid ui-layout-grid-2">
           <div>
-            <img src="public/RCNN.webp" alt="Rotary Nairobi North logo" class="ui-img-responsive ui-logo-small">
+            <img src="public/RCNN.webp" alt="Rotary Nairobi North logo" class="ui-img-responsive ui-logo-small ui-logo-rcnn">
             <h4 class="ui-component-list--item ui-section-project--question"><a href="https://www.instagram.com/rotaryclubofnairobinorth/" target="_blank" rel="noopener noreferrer" class="external-link">Rotary Nairobi North</a></h4>
             <p class="ui-section-project--answer">The Rotary Club Nairobi North is a community-focused Rotary chapter working on local service projects, youth programs, and health initiatives. I serve as the PR Director, overseeing public relations and communications to raise awareness and mobilize support.</p>
           </div>

style.css

@@ -270,6 +270,9 @@ a.external-link::after {
   row-gap: var(--ui-gap-cta);
 }
 
+/* Keep CTAs left-aligned so buttons sit flush with the container edge on mobile and desktop */
+.ui-component-cta { align-items: flex-start; }
+
 /*--------------------------------------------------------------
 |
 | 6.2 BUTTON
@@ -472,8 +475,32 @@ div label[for=ui-component-toggle__yearly] {
 
   /* Make feature paragraph text align/indent like project answers on mobile */
   .ui-section-content--feature p { padding-left: 0; }
+
+  /* Show a mobile-only Headstart CTA after the tools list */
+  .ui-headstart-mobile { display: flex; margin-top: .75rem; }
 }
 
+/* Hide the Headstart CTA on wider screens */
+.ui-headstart-mobile { display: none; }
+
+/* Desktop-only helper: hide on small screens */
+.ui-hide-mobile { display: block; }
+
+.ui-email-options {
+  display: flex;
+  gap: .5rem;
+  align-items: center;
+  margin-top: .75rem;
+}
+
+@media (max-width: 600px) {
+  .ui-hide-mobile { display: none !important; }
+}
+
+/* Temporary: hide alternative email chooser and mobile Headstart until ready */
+.ui-email-options { display: none !important; }
+.ui-headstart-mobile { display: none !important; }
+
 @media (min-width: 601px) and (max-width: 1024px) {
   .ui-section-hero__layout { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
   .ui-section-project__layout { grid-template-columns: 1fr 1fr; }
@@ -549,6 +576,17 @@ div label[for=ui-component-toggle__yearly] {
   text-align: left;
 }
 
+/* Ensure hero columns use a predictable vertical rhythm so the intro
+   paragraphs in both columns sit at a similar vertical level. */
+.ui-section-hero__layout > div {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+.ui-section-hero__layout > div h1 { margin-bottom: .5rem; }
+.ui-section-hero__layout > div p.ui-text-intro { margin-top: 0; }
+
 /*--------------------------------------------------------------
 |
 | 7.3 CUSTOMER
@@ -722,16 +760,26 @@ div label[for=ui-component-toggle__yearly] {
     grid-template-columns: auto 1fr; /* logo column + content column */
     gap: 1rem;
     align-items: start; /* align both columns at the top */
+    padding-left: 0; /* align with the site container edge for visual balance */
   }
 
+  /* Use a scalable clamp-based height so logos reach comparable visual heights
+     across a range of desktop widths without hard-coding a single px value. */
   .ui-section-project__layout > div img {
-  width: auto;
-  height: 72px; /* fixed visual logo height on desktop for consistent alignment */
-  object-fit: cover; /* fill the height and avoid top/bottom whitespace */
+    width: auto;
+    height: clamp(72px, 6vw, 96px); /* scales from 72px up to 96px */
+    object-fit: contain; /* avoid cropping logos; keep aspect ratio */
     margin: 0;
     align-self: start;
   }
 
+  /* Target Rotary (RCNN) logo specifically if it needs extra visual height
+     to match other logos that may have less padding in the artwork. */
+  .ui-section-project__layout > div img.ui-logo-rcnn {
+    height: clamp(88px, 7vw, 110px);
+    object-fit: contain;
+  }
+
   .ui-section-project__layout > div h4,
   .ui-section-project__layout > div p { margin: 0; }
 
@@ -743,7 +791,7 @@ div label[for=ui-component-toggle__yearly] {
      titles appear at the same vertical level regardless of image resolution */
   .ui-section-content--feature img {
     width: auto;
-    height: clamp(48px, 6vw, 96px);
+    height: clamp(72px, 6vw, 96px);
     object-fit: contain;
     margin: 0;
     align-self: start;
@@ -820,6 +868,34 @@ div label[for=ui-component-toggle__yearly] {
   margin-top: 1.5rem; /* small breathing room so images don't crowd the intro text */
 }
 
+/* Make project entries match feature card layout: image, title, and description
+   each on their own line (stacked). Keeps visuals consistent across sizes. */
+.ui-section-project__layout > div {
+  display: block !important;
+  text-align: left;
+  padding-left: 0; /* let the container padding control horizontal alignment */
+}
+
+.ui-section-project__layout > div img {
+  display: block;
+  margin: 0 0 0.6rem 0;
+  max-width: 140px;
+  height: auto;
+}
+
+.ui-section-project__layout > div h4,
+.ui-section-project__layout > div h4 a {
+  display: block;
+  margin: 0 0 .35rem;
+}
+
+.ui-section-project__layout > div p {
+  display: block;
+  margin: 0;
+  max-width: 44rem;
+  text-align: left;
+}
+
 /*--------------------------------------------------------------
 8.0 MEDIA
 --------------------------------------------------------------*/
@@ -1073,7 +1149,7 @@ div label[for=ui-component-toggle__yearly] {
   ------------------------------------------------------------*/
 
   .ui-section-hero .ui-component-cta {
-    align-items: center;
+  align-items: flex-start;
     column-gap: var(--ui-gap-cta);
     flex-direction: row;
     justify-content: start;