Minor content tweaks, tooltips on social links

Author: webstackdev

_TODO.md

@@ -34,3 +34,5 @@ https://aws.plainenglish.io/how-to-build-a-chatbot-using-aws-lex-and-lambda-in-2
 ## Content Issues
 
 - Need an article on OpenStack
+
+- The one I'd add that's less obvious than newsletters is reading incident retros from companies that publish them well. Railway just published one this week. Cloudflare publishes consistently. Anthropic does a good job. They're more useful than most newsletter issues.

public/assets/images/branding/header-2.jpg

@@ -167,6 +167,7 @@ const footerTextLinkClasses = [
                 <li class="list-none">
                   <a
                     href={social.url}
+                    data-tooltip
                     title={social.displayName}
                     rel="me"
                     class={socialLinkClasses}

public/assets/images/branding/header-old.jpeg

@@ -132,7 +132,7 @@ const expertiseIcons = ['cloud', 'document', 'gear', 'globe', 'wrench', 'chart']
               {item.title}
             </h3>
           </div>
-          <p class="text-content leading-relaxed text-sm">
+          <p class="text-content leading-relaxed text-md">
             {item.description}
           </p>
         </div>
@@ -199,21 +199,23 @@ const expertiseIcons = ['cloud', 'document', 'gear', 'globe', 'wrench', 'chart']
           <h3 class="text-lg font-semibold text-page-inverse">
             {item.name}
           </h3>
-          <p class="text-sm text-content leading-relaxed">
+          <p class="text-md text-content leading-relaxed">
             {item.text}
           </p>
         </div>
       ))}
     </div>
   </section>
 
-  <Contact
-    id="about-cta-title"
-    title={content.proficiencies.cta.title}
-    description={content.proficiencies.cta.description}
-    primaryLink={{
-      href: content.proficiencies.cta.primaryLink.href,
-      text: content.proficiencies.cta.primaryLink.text,
-    }}
-  />
+  <div class="mb-6">
+    <Contact
+      id="about-cta-title"
+      title={content.proficiencies.cta.title}
+      description={content.proficiencies.cta.description}
+      primaryLink={{
+        href: content.proficiencies.cta.primaryLink.href,
+        text: content.proficiencies.cta.primaryLink.text,
+      }}
+    />
+  </div>
 </div>

public/assets/images/branding/header.jpg

@@ -106,7 +106,7 @@ const splitH2Sections = (html: string): string[] => {
                 class="absolute inset-0 z-(--z-raised) no-underline hover:no-underline focus-visible:no-underline focus-visible:outline-none"
                 aria-label={`Contact us about ${service.data.title}`}
               >
-                <span class="sr-only">Contact us about {service.data.title}</span>
+                <span class="sr-only">Contact me about {service.data.title}</span>
               </a>
 
               <div
@@ -123,7 +123,7 @@ const splitH2Sections = (html: string): string[] => {
                 <h2 class="text-xl font-bold">{service.data.title}</h2>
                 <p
                   class:list={[
-                    'service-card-description sm:mt-2 text-sm leading-relaxed text-content-offset',
+                    'service-card-description sm:mt-2 text-me leading-relaxed text-content-offset',
                     i === 0 ? 'service-card-description--default' : '',
                   ]}
                 >
@@ -133,10 +133,10 @@ const splitH2Sections = (html: string): string[] => {
 
               <div class="service-card-body flex flex-1 flex-col bg-content-inverse px-6 py-6">
                 <div class="grid gap-6 md:grid-cols-2">
-                  <div class="space-y-6 [&_h2]:text-sm [&_h2]:font-semibold [&_h2]:uppercase [&_h2]:tracking-wider [&_h2]:text-page-inverse [&_h2]:mb-2 [&_h2]:mt-0 [&_p]:text-content [&_p]:text-sm [&_p]:leading-relaxed [&_ul]:space-y-1.5 [&_ul]:text-sm [&_ul]:text-content [&_ul]:list-none [&_ul]:pl-0 [&_li]:flex [&_li]:items-start [&_li]:gap-2 [&_li]:before:content-['✓'] [&_li]:before:text-success [&_li]:before:mt-0.5 [&_li]:before:shrink-0">
+                  <div class="space-y-6 [&_h2]:text-sm [&_h2]:font-semibold [&_h2]:uppercase [&_h2]:tracking-wider [&_h2]:text-page-inverse [&_h2]:mb-2 [&_h2]:mt-0 [&_p]:text-content [&_p]:text-md [&_p]:leading-relaxed [&_ul]:space-y-1.5 [&_ul]:text-md [&_ul]:text-content [&_ul]:list-none [&_ul]:pl-0 [&_li]:flex [&_li]:items-start [&_li]:gap-2 [&_li]:before:content-['✓'] [&_li]:before:text-success [&_li]:before:mt-0.5 [&_li]:before:shrink-0">
                     <Fragment set:html={leftSections} />
                   </div>
-                  <div class="space-y-6 [&_h2]:text-sm [&_h2]:font-semibold [&_h2]:uppercase [&_h2]:tracking-wider [&_h2]:text-page-inverse [&_h2]:mb-2 [&_h2]:mt-0 [&_p]:text-content [&_p]:text-sm [&_p]:leading-relaxed [&_strong]:text-page-inverse">
+                  <div class="space-y-6 [&_h2]:text-sm [&_h2]:font-semibold [&_h2]:uppercase [&_h2]:tracking-wider [&_h2]:text-page-inverse [&_h2]:mb-2 [&_h2]:mt-0 [&_p]:text-content [&_p]:text-md [&_p]:leading-relaxed [&_strong]:text-page-inverse">
                     <Fragment set:html={rightSections} />
                   </div>
                 </div>

src/components/Footer/index.astro

@@ -29,7 +29,7 @@ const path = '/about'
             title: "A Decade of Full Stack Development",
             icon: "html",
             description:
-              "Over the next ten years I worked across Rails, Laravel, various Node stacks, and native iOS/Android. Building end-to-end applications gave me a thorough understanding of the complete software development lifecycle—from database schema to client-side performance.",
+              "Over the next ten years I worked across Rails, Laravel, various Node stacks, and native iOS/Android. Building end-to-end applications gave me a thorough understanding of the complete software development lifecycle — from database schema to client-side performance.",
           },
           {
             title: "Platform Engineering Focus",

src/components/Pages/About/index.astro

@@ -41,7 +41,7 @@ const prefilledProjectType = Astro.url.searchParams.get('type') ?? ''
         },
       ],
       expertise: {
-        header: "Our Expertise",
+        header: "My Expertise",
         areas: [
           { text: "CI/CD Pipeline Design"},
           { text: "Kubernetes & Container Orchestration"},
@@ -52,7 +52,7 @@ const prefilledProjectType = Astro.url.searchParams.get('type') ?? ''
         ],
       },
       chooseUs: {
-        header: "Why Choose Us?",
+        header: "Why Work With Me?",
         areas: [
           { text: "15+ years of engineering experience"},
           { text: "Embedded with your team, not drive-by consulting"},
@@ -65,7 +65,7 @@ const prefilledProjectType = Astro.url.searchParams.get('type') ?? ''
       },
     },
     form: {
-      header: "Tell us about your infrastructure needs",
+      header: "Tell me about your infrastructure needs",
       description: "I'll get back to you within 24 hours to discuss the right engagement for your situation.",
       formErrorMssg: "Please fix the errors in your message and hit the submit button again.",
       contact: {