feat: balance mobile responsiveness, add rotary

Author: wechulisimiyu

index.html

@@ -19,7 +19,7 @@
   <!-- LINK -->
   <link rel="me" href="#">
   <link rel="canonical" href="#">
-  <link rel="icon" type="image/png" href="favicon.ico" sizes="48x48">
+  <link rel="icon" type="image/png" href="public/favicon.ico" sizes="48x48">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
     integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
     crossorigin="anonymous" referrerpolicy="no-referrer" />
@@ -76,12 +76,13 @@
           <!-- COPYWRITING -->
           <div>
             <h1>Are zombies supposed to be full of life?</h1>
-            <p class="ui-text-intro">Wechuli Simiyu, a medical doctor and a
+            <p class="ui-text-intro">Wechuli Simiyu, a Rotarian, a medical doctor and a
               self taught full stack web developer. Currently using these skills to improve access
               to basic education, and healthcare.</p>
             <!-- CTA -->
             <div class="ui-component-cta ui-layout-flex">
-              <a href="mailto:wechuli07@gmail.com" role="link" aria-label="#"
+              <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"
                 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>
@@ -91,13 +92,10 @@ <h1>My tools of trade</h1>
             <p class="ui-text-intro">I (somewhat successfully) diagnose life's mysteries with a toolkit of my own.</p>
             <ul class="ui-component-list ui-component-list-feature ui-layout-grid">
               <li class="ui-component-list--item ui-component-list--item-check">The Power of Friendship</li>
-              <li class="ui-component-list--item ui-component-list--item-check">NodeJs with AdonisJs, Typescript</li>
-              <li class="ui-component-list--item ui-component-list--item-check">MongoDB, and PostgreSQL</li>
-              <li class="ui-component-list--item ui-component-list--item-check">Django, and the Django Rest Framework
-              </li>
-              <li class="ui-component-list--item ui-component-list--item-check">Cloud with Azure</li>
-              <li class="ui-component-list--item ui-component-list--item-check">RAG with LlamaIndex and Langachain</li>
-              <li class="ui-component-list--item ui-component-list--item-check">Lately, PHP too</li>
+              <li class="ui-component-list--item ui-component-list--item-check">Backend: Build reliable APIs and services</li>
+              <li class="ui-component-list--item ui-component-list--item-check">Frontend: Create usable, fast interfaces</li>
+              <li class="ui-component-list--item ui-component-list--item-check">Cloud: Deploy resilient infra (AWS, Azure, self-host)</li>
+              <li class="ui-component-list--item ui-component-list--item-check">Integrations: Automate email, social, and AI workflows</li>
             </ul>
           </div>
         </div>
@@ -108,21 +106,23 @@ <h1>My tools of trade</h1>
         <!-- Building -->
         <div class="ui-layout-column-6 ui-layout-column-center">
           <h1>Bob the Builder</h1>
-          <p class="ui-text-intro">I fancy myself an innovator in the making. With support and help, I am building...</p>
+          <p class="ui-text-intro">I fancy myself an innovator in the making. With support and help, I am building...
+          </p>
         </div>
         <!-- FEATURE -->
         <div class="ui-section-content--feature ui-layout-grid ui-layout-grid-3">
-<!--           <div>
+          <!--           <div>
             <img src="https://res.cloudinary.com/drgmee3w5/image/upload/v1702061280/portfolio/AIL_mwdyqm.webp" alt="#" class="ui-section-content--icon">
             <h3>Afya Innovation Lab</h3>
             <p>Building capacity for collaborative healthcare innovation for Africa and the globe</p>
           </div> -->
           <div>
-            <img src="https://res.cloudinary.com/drgmee3w5/image/upload/v1702061264/portfolio/MBChB_For_Dummies___7_-removebg-preview_2_azb9vg.png" alt="#" class="ui-section-content--icon">
+            <img src="public/juvenotes.webp" alt="Juvenotes logo" class="ui-section-content--icon ui-img-responsive ui-logo-small">
             <h3>Juvenotes</h3>
-            <p>An aggregated platform for healthcare education, built for the African Healthcare System, and the world</p>
+            <p>An aggregated platform for healthcare education, built for the African Healthcare System, and the world
+            </p>
           </div>
-<!--           <div>
+          <!--           <div>
             <img src="https://res.cloudinary.com/drgmee3w5/image/upload/v1702062134/portfolio/Spin-1s-200px_ejdtlg.gif" alt="#" class="ui-section-content--icon">
             <h3>Datafurl</h3>
             <p>Still in ideation</p>
@@ -132,7 +132,7 @@ <h3>Datafurl</h3>
     </section>
     <section class="ui-section-project" id="projects">
       <div class="ui-layout-container">
-        <h1>Freelance Projects</h1>
+        <h1>Volunteering</h1>
         <h4>Link in bold</h4>
         <div class="ui-section-project__layout ui-layout-grid ui-layout-grid-2">
           <div>
@@ -142,6 +142,11 @@ <h4 class="ui-component-list--item ui-section-project--question">Leave No Medic
               Association of Medical Students of the University of Nairobi (AMSUN) to meet the financial needs of
               underprivileged students in the School of Medicine.</p>
           </div>
+          <div>
+            <img src="public/RCNN.webp" alt="Rotary Nairobi North logo" class="ui-img-responsive ui-logo-small" style="margin-bottom:.5rem;">
+            <h4 class="ui-component-list--item ui-section-project--question">Rotary Nairobi North</h4>
+            <p class="ui-section-project--answer">Rotary 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>
           <!-- 
           <div>
             <h4 class="ui-component-list--item ui-section-project--question">Mhealth4Africa</h4>
@@ -151,7 +156,7 @@ <h4 class="ui-component-list--item ui-section-project--question">Mhealth4Africa<
               centric solutions.</p>
           </div>
            -->
-<!--           <div>
+          <!--           <div>
             <h4 class="ui-component-list--item ui-section-project--question">Western Medical Society</h4>
             <p class="ui-section-project--answer"><a href="https://westernmedicalsociety.org/" target="_blank"><b
                   style="color: cadetblue;">Currently in development</b></a>, a community of healthcare professionals from Western and Nyanza Regions</p>
@@ -167,16 +172,18 @@ <h4 class="ui-component-list--item ui-section-project--question">Students' Surgi
                   style="color: cadetblue;">Currently in development</b></a>, a platform for medical students that promotes interest in surgert and equips students with surgical skills.</p>
           </div> -->
         </div>
-        <p class="ui-section-project--note">Want to have a conversation? <a href="mailto:wechuli07@gmail.com"
-            aria-label="Email me" style="color: cadetblue;" target="_blank">Reach out</a>.</p>
+        <p class="ui-section-project--note">Want to have a conversation? <a
+            href="mailto:wechuli07@gmail.com?subject=Project%20Enquiry&body=Hi%20Wechuli%2C%0A%0AI%20would%20like%20to%20discuss%20a%20project%20with%20you.%20Please%20reply%20when%20convenient.%0A%0ARegards%2C%0A"
+            aria-label="Email Wechuli about a project" title="Email Wechuli" style="color: cadetblue;">Reach out</a>.
+        </p>
       </div>
     </section>
   </main>
   <footer role="contentinfo" class="ui-section-footer" id="footer">
     <div class="ui-layout-container">
       <div class="ui-section-footer__layout ui-layout-flex">
         <!-- COPYRIGHT -->
-        <p class="ui-section-footer--copyright ui-text-note"><small>&copy; Wechuli</small></p>
+        <p class="ui-section-footer--copyright ui-text-note"><small>&copy; Wechuli Simiyu</small></p>
         <!-- SOCIALS MENU -->
         <a href="https://www.linkedin.com/in/wechuli-eugene/" role="link" aria-label="linkedin profile" target="_blank">
           <i class="fa-brands fa-linkedin-in"></i>
@@ -187,12 +194,13 @@ <h4 class="ui-component-list--item ui-section-project--question">Students' Surgi
         <a href="https://twitter.com/wechuli_" role="link" aria-label="twitter account">
           <i class="fa-brands fa-x-twitter"></i>
         </a>
-        <a href="mailto:wechuli07@gmail.com" role="link" aria-label="email">
+        <a href="mailto:wechuli07@gmail.com?subject=Website%20Contact&body=Hi%20Wechuli%2C%0A%0AI%20found%20your%20site%20and%20wanted%20to%20reach%20out.%0A"
+          role="link" aria-label="Email Wechuli" title="Email Wechuli">
           <i class="fa-regular fa-envelope"></i>
         </a>
       </div>
     </div>
   </footer>
 </body>
 
-</html>
+</html>

public/RCNN.webp

@@ -255,7 +255,7 @@ svg {
   display: block;
   font-weight: 700;
   line-height: 1;
-  text-align: center;
+  text-align: left;
   text-decoration: none;
 }
 
@@ -399,6 +399,41 @@ div label[for=ui-component-toggle__yearly] {
 
 .ui-section-header--menu-icon::before { top: .3125rem; }
 
+/*--------------------------------------------------------------
+  Responsive image helpers and small-screen tweaks
+  Keep minimal — ensures `public/juvenotes.webp` and `public/RCNN.webp` scale
+--------------------------------------------------------------*/
+
+.ui-img-responsive { display:block; max-width:100%; height:auto; }
+.ui-logo-small { max-width:220px; height:auto; }
+
+/* section layout tweaks for narrow viewports */
+@media (max-width: 600px) {
+  :root {
+    --ui-typography-h1: 1.5rem;
+    --ui-layout-grid: 1.5rem;
+  }
+
+  .ui-section-hero__layout { grid-template-columns: 1fr; gap: 1rem; }
+  .ui-section-content--feature { grid-template-columns: 1fr; gap: 1rem; }
+  .ui-section-project__layout { grid-template-columns: 1fr; gap: 1rem; }
+
+  /* ensure header nav stacks and hamburger is usable */
+  .ui-section-header__layout { align-items: center; }
+  .ui-section-header--nav { flex-direction: column; gap: .5rem; }
+
+  /* Tighten space between sections on mobile: keep only hero bottom padding and a small column bottom margin */
+  .ui-section-hero { padding-bottom: 2rem; }
+  /* Small extra bottom space for centered column to avoid overlap with the feature */
+  .ui-layout-column-6.ui-layout-column-center { margin-bottom: .75rem; }
+}
+
+@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; }
+}
+
+
 .ui-section-header--menu-icon::after { top: .6875rem; }
 
 #ui-section-header--menu-id:checked ~
@@ -448,15 +483,15 @@ div label[for=ui-component-toggle__yearly] {
 --------------------------------------------------------------*/
 
 .ui-section-hero {
-  padding-bottom: 5rem;
+  padding-bottom: 3rem;
   padding-top: 5rem;
-  text-align: center;
+  text-align: left;
 }
 
 .ui-section-hero__layout { row-gap: var(--ui-gap-hero); }
 
 .center-content {
-  text-align: center;
+  text-align: left;
 }
 
 /*--------------------------------------------------------------
@@ -508,7 +543,7 @@ div label[for=ui-component-toggle__yearly] {
   background-color: var(--ui-color-background-secondary);
   padding-bottom: 5rem;
   padding-top: 5rem;
-  text-align: center;
+  text-align: left;
 }
 
 .ui-section-pricing__layout {
@@ -570,7 +605,7 @@ div label[for=ui-component-toggle__yearly] {
 .ui-section-testimonial {
   padding-bottom: 5rem;
   padding-top: 5rem;
-  text-align: center;
+  text-align: left;
 }
 
 .ui-section-testimonial__layout {
@@ -611,7 +646,7 @@ div label[for=ui-component-toggle__yearly] {
 
 .ui-section-project--answer { padding-left: 1.875rem; }
 
-.ui-section-project--note { text-align: center; }
+.ui-section-project--note { text-align: left; }
 
 /*--------------------------------------------------------------
 |
@@ -623,7 +658,7 @@ div label[for=ui-component-toggle__yearly] {
   background-color: var(--ui-color-background-secondary);
   padding-bottom: 5rem;
   padding-top: 5rem;
-  text-align: center;
+  text-align: left;
 }
 
 /*--------------------------------------------------------------
@@ -654,8 +689,8 @@ div label[for=ui-component-toggle__yearly] {
 
 .ui-section-content {
   padding-bottom: 2em;
-  padding-top: 5rem;
-  text-align: center;
+  padding-top: 1.5rem;
+  text-align: left;
 }
 
 .ui-section-content--image {
@@ -1098,4 +1133,15 @@ div label[for=ui-component-toggle__yearly] {
     padding-top: 3rem;
   }
 
+}
+
+/* Ensure the first feature card (Juvenotes) sits visually in the middle column
+   - on medium screens (two-column grid) span full width and center
+   - on large screens (three-column grid) place in the middle column */
+@media screen and (min-width: 48rem) and (max-width: 63.99rem) {
+  .ui-layout-grid-3 > div:first-of-type { grid-column: 1 / -1; justify-self: center; }
+}
+
+@media screen and (min-width: 64rem) {
+  .ui-layout-grid-3 > div:first-of-type { grid-column: 2 / 3; justify-self: center; }
 }