refine homepage editorial voice

Author: mohsinht

app/layout.jsx

@@ -4,7 +4,6 @@ import { Footer, Layout, Navbar } from 'nextra-theme-blog'
 import 'nextra-theme-blog/style.css'
 import '../styles/main.css'
 import { profile, siteUrl } from '../data/profile'
-import { SocialLinks } from '../components/portfolio'
 
 export const metadata = {
   metadataBase: new URL(siteUrl),
@@ -45,8 +44,7 @@ export default async function RootLayout({ children }) {
           <Navbar pageMap={await getPageMap()} />
           {children}
           <Footer>
-            <time>{new Date().getFullYear()}</time> © {profile.name}.{' '}
-            <SocialLinks />
+            <time>{new Date().getFullYear()}</time> © {profile.name}.
           </Footer>
         </Layout>
       </body>

app/page.jsx

@@ -3,9 +3,9 @@ import { PortfolioHome } from '../components/portfolio'
 import { pageMetadata } from '../data/profile'
 
 export const metadata = pageMetadata({
-  title: 'Mohsin Hayat | Senior Software Engineer, Applied AI',
+  title: 'Mohsin Hayat | Senior Software Engineer in Applied AI',
   description:
-    'Mohsin Hayat is a Senior Software Engineer specializing in applied AI and backend systems. He builds reliable AI and backend systems for international teams from Lahore, Pakistan.',
+    'Mohsin Hayat is a senior software engineer in Lahore building applied AI, Python services, and reliable backend systems for international teams.',
   path: '/'
 })
 

components/portfolio.jsx

@@ -57,23 +57,31 @@ export function PortfolioHome() {
           <h1 id="portfolio-title">Mohsin Hayat</h1>
           <p className="hero-title">{profile.title}</p>
           <p className="hero-summary">
-            {profile.summary} I’m currently at OnService.AI, building Python
-            services and conversational AI experiences for airline workflows.
+            I’m a software engineer based in Lahore, Pakistan. For more than six
+            years, I’ve worked remotely with international teams building
+            software for airlines, ecommerce companies, and healthcare
+            platforms.
+          </p>
+          <p className="hero-summary">
+            I’m currently at OnService.AI, where I work on Python services and
+            conversational AI for airline workflows, including integrations with
+            KIU PSS. Before that, I built AI tools at Trafilea and backend and
+            event-driven systems at Awell Health.
           </p>
           <div className="hero-actions">
             <a href="#selected-work" className="button button-primary">
-              View selected work <Icon name="arrow" size={16} />
+              Explore selected work <Icon name="arrow" size={16} />
             </a>
             <Link href="/resume" className="button button-secondary">
-              View résumé
+              Read my résumé
             </Link>
           </div>
           <SocialLinks />
         </div>
         <div className="hero-portrait">
           <Image
             src={profile.portrait}
-            alt="Portrait of Mohsin Hayat"
+            alt="Mohsin Hayat, Senior Software Engineer"
             width={1000}
             height={1000}
             sizes="(max-width: 760px) 180px, 280px"
@@ -82,28 +90,25 @@ export function PortfolioHome() {
         </div>
       </section>
 
-      <section className="proof-grid" aria-label="Selected engineering context">
-        {profile.metrics.map((metric) => (
-          <article className="proof-item" key={metric.value}>
-            <strong>{metric.value}</strong>
-            <span>{metric.label}</span>
-          </article>
-        ))}
-      </section>
-
       <section
         className="section recommendations"
         aria-labelledby="recommendations-title"
       >
         <div className="section-heading">
-          <p className="eyebrow">Professional references</p>
-          <h2 id="recommendations-title">Trusted by engineering leaders</h2>
+          <div>
+            <p className="eyebrow">Professional references</p>
+            <h2 id="recommendations-title">What colleagues say</h2>
+          </div>
           <Link href="/recommendations">
-            Read all recommendations <Icon name="arrow" size={16} />
+            Read all verified recommendations <Icon name="arrow" size={16} />
           </Link>
         </div>
+        <p className="section-intro">
+          The best description of how I work comes from the people who have
+          worked alongside me.
+        </p>
         <div className="recommendation-grid">
-          {profile.recommendations.map((item) => (
+          {profile.recommendations.slice(0, 2).map((item) => (
             <article className="recommendation-card" key={item.name}>
               <p>“{item.excerpt}”</p>
               <footer>
@@ -124,27 +129,22 @@ export function PortfolioHome() {
         aria-labelledby="work-title"
       >
         <div className="section-heading">
-          <p className="eyebrow">Selected work</p>
-          <h2 id="work-title">Systems built for real operating contexts</h2>
+          <div>
+            <p className="eyebrow">Selected work</p>
+            <h2 id="work-title">Selected work</h2>
+          </div>
         </div>
-        <div className="project-grid">
-          {profile.projects.map((project) => (
-            <article className="project-card" key={project.name}>
+        <p className="section-intro">
+          These products best represent the kind of engineering I enjoy:
+          practical AI, dependable backend services, and tools that solve real
+          problems.
+        </p>
+        <div className="featured-work">
+          {profile.projects.slice(0, 2).map((project) => (
+            <article className="work-feature" key={project.name}>
               <h3>{project.name}</h3>
-              <dl>
-                <div>
-                  <dt>Problem</dt>
-                  <dd>{project.problem}</dd>
-                </div>
-                <div>
-                  <dt>Built</dt>
-                  <dd>{project.built}</dd>
-                </div>
-                <div>
-                  <dt>Context</dt>
-                  <dd>{project.outcome}</dd>
-                </div>
-              </dl>
+              <p>{project.homepageSummary}</p>
+              <p>{project.homepageDetail}</p>
               <ul
                 className="technology-list"
                 aria-label={`${project.name} technologies`}
@@ -163,17 +163,72 @@ export function PortfolioHome() {
         </div>
       </section>
 
+      <section
+        className="section experience-section"
+        aria-labelledby="experience-title"
+      >
+        <p className="eyebrow">Professional experience</p>
+        <h2 id="experience-title">
+          Experience across applied AI and backend engineering
+        </h2>
+        <p className="section-intro">
+          Much of my professional work lives inside private company systems, so
+          I cannot publish the code. I can, however, explain the problems I
+          worked on and the engineering behind them.
+        </p>
+        <div className="experience-grid">
+          <article>
+            <h3>Airline conversational systems</h3>
+            <p>
+              At OnService.AI, I build Python services and conversational
+              experiences for airline workflows. My work includes integrating AI
+              agents with KIU PSS and supporting journeys around booking
+              information, payments, check-in, flight changes, ancillary
+              services, and passenger support.
+            </p>
+          </article>
+          <article>
+            <h3>AI for ecommerce analytics</h3>
+            <p>
+              At Trafilea, I worked on production AI tools for marketing and
+              analytics teams. This included a conversational NL-to-SQL system,
+              LangGraph workflows for budget planning, and data pipelines
+              supporting long-running analytical agents.
+            </p>
+          </article>
+          <article>
+            <h3>Event-driven healthcare platforms</h3>
+            <p>
+              At Awell Health, I worked on the backend systems behind clinical
+              workflow automation. I contributed across orchestration, task
+              management, workflow design, event-driven architecture, testing,
+              deployment, and open-source tools.
+            </p>
+          </article>
+        </div>
+        <Link href="/resume" className="text-link experience-link">
+          See my complete work history <Icon name="arrow" size={16} />
+        </Link>
+      </section>
+
       <section
         className="section capability-section"
         aria-labelledby="capabilities-title"
       >
-        <p className="eyebrow">Capabilities</p>
-        <h2 id="capabilities-title">Focused engineering capabilities</h2>
-        <ul>
-          {profile.capabilities.map((capability) => (
-            <li key={capability}>{capability}</li>
-          ))}
-        </ul>
+        <p className="eyebrow">Engineering focus</p>
+        <h2 id="capabilities-title">Applied AI, backed by solid systems</h2>
+        <p>
+          I work primarily on applied AI systems and the backend infrastructure
+          needed to make them dependable. My recent work includes LLM agents,
+          multi-agent orchestration, NL-to-SQL, RAG, Python services, analytical
+          data pipelines, event-driven systems, and developer tooling.
+        </p>
+        <p>
+          I regularly work with Python, TypeScript, LangGraph, LangChain,
+          FastAPI, Node.js, AWS, ClickHouse, PostgreSQL, Docker, and Kubernetes.
+          I care more about choosing the right tool for the system than
+          collecting technologies for a list.
+        </p>
       </section>
 
       <section
@@ -186,27 +241,32 @@ export function PortfolioHome() {
             Engineering notes and career retrospectives
           </h2>
           <p>
-            The published posts are personal writing from 2022 on remote work
-            and engineering. They are retained as dated perspectives, not
-            presented as current AI case studies.
+            I occasionally write about engineering, remote work, and lessons
+            from building an international software career from Pakistan. The
+            existing notes were written in 2022 and reflect what I was learning
+            at that point in my career.
           </p>
         </div>
         <Link href="/posts" className="button button-secondary">
-          Browse writing
+          Browse my engineering notes
         </Link>
       </section>
 
       <section className="contact-section" aria-labelledby="contact-title">
-        <p className="eyebrow">Let’s connect</p>
-        <h2 id="contact-title">Build reliable systems together</h2>
+        <p className="eyebrow">Get in touch</p>
+        <h2 id="contact-title">Let’s connect</h2>
         <p>
-          Based in Lahore, Pakistan, with 6+ years of international remote
-          collaboration experience.
+          I’m based in Lahore and have worked remotely with teams across the
+          United States, Europe, and Latin America.
         </p>
         <div className="contact-links">
           <a href={profile.links.email}>Email Mohsin</a>
-          <ExternalLink href={profile.links.linkedin}>LinkedIn</ExternalLink>
-          <ExternalLink href={profile.links.github}>GitHub</ExternalLink>
+          <ExternalLink href={profile.links.linkedin}>
+            Connect on LinkedIn
+          </ExternalLink>
+          <ExternalLink href={profile.links.github}>
+            Follow my work on GitHub
+          </ExternalLink>
         </div>
       </section>
     </main>

data/profile.js

@@ -108,6 +108,10 @@ export const profile = {
   projects: [
     {
       name: 'SnippetGraph',
+      homepageSummary:
+        'I built SnippetGraph to give AI teams a more dependable way to manage the context their agents use.',
+      homepageDetail:
+        'Instead of leaving knowledge scattered across documents and tools, SnippetGraph lets teams compose reusable snippets into pages and publish versioned, hash-verified releases through GitHub. This makes changes reviewable, traceable, and easier to use in production AI workflows.',
       problem:
         'AI teams need governed, dependable context instead of unversioned knowledge scattered across tools.',
       built:
@@ -123,6 +127,10 @@ export const profile = {
     },
     {
       name: 'FirstCustomer',
+      homepageSummary:
+        'FirstCustomer is a CI-native browser agent built around a problem I have seen repeatedly in software teams: a pull request can pass its automated tests and still break an important customer journey.',
+      homepageDetail:
+        'It connects code changes with the product flows they may affect, exercises those flows using browser agents and realistic personas, and produces a release-risk assessment before the change reaches customers.',
       problem:
         'Product teams need a practical way to connect pull-request changes with the user flows they could affect.',
       built:

e2e/portfolio.spec.js

@@ -53,7 +53,7 @@ test('navigation, feed discovery, and internal routes work', async ({
   page
 }) => {
   await page.goto('/')
-  await page.getByRole('link', { name: /View résumé/i }).click()
+  await page.getByRole('link', { name: /Read my résumé/i }).click()
   await expect(page).toHaveURL(/\/resume$/)
   await page.goto('/posts')
   await expect(