meleksomai · meleksomai · Aug 5, 2023 · Aug 3, 2023 · Aug 5, 2023 · Aug 5, 2023
diff --git a/apps/somai.me/app/about/page.tsx b/apps/somai.me/app/about/page.tsx
@@ -1,15 +1,14 @@
+import HeroSection from "@/components/Hero";
 import { getAllRoles } from "@/lib/roles";
 
 import RoleSection from "./section.roles";
 
-import HeroSection from "../hero";
-
 export default async function EssayPage() {
   const roles = await getAllRoles();
   return (
     <>
       <HeroSection>
-        Born in Tunis. Studied in Boston. Worked in London and Wisconsin.
+        Born in Tunis. Studied in Boston. Worked in London. Living in Wisconsin.
       </HeroSection>
       <RoleSection roles={roles} />
     </>

diff --git a/apps/somai.me/app/about/section.roles.tsx b/apps/somai.me/app/about/section.roles.tsx
@@ -18,9 +18,9 @@ export default function RoleSection(props: RoleSectionProps) {
           {props.roles?.map((role) => (
             <Stack key={role.meta.slug} justify="flex-start" align="flex-start">
               <Heading size="h4">
-                {role.meta.role}.{" "}
+                {role.meta.organization}.{" "}
                 <Heading size="h4" as="span" color="slate11">
-                  {role.meta.organization}
+                  {role.meta.role}.
                 </Heading>
               </Heading>
               <Text>{role.content}</Text>

diff --git a/apps/somai.me/app/essays/page.tsx b/apps/somai.me/app/essays/page.tsx
@@ -1,8 +1,8 @@
 import React from "react";
 
-import EssaysSection from "./section.essays";
+import HeroSection from "@/components/Hero";
 
-import HeroSection from "../hero";
+import EssaysSection from "./section.essays";
 
 export default async function EssayPage() {
   return (

diff --git a/apps/somai.me/app/essays/section.essays.tsx b/apps/somai.me/app/essays/section.essays.tsx
@@ -2,6 +2,8 @@ import React from "react";
 
 import { Box, Heading, Link, Stack, Text } from "@thugga/ui";
 
+import { Title } from "@/components/Title";
+
 import { getAllPosts } from "../../lib/essays";
 
 export default async function EssaysSection() {
@@ -11,18 +13,14 @@ export default async function EssaysSection() {
       <Box>
         <Stack space="1200">
           {posts.map((post) => (
-            <Stack key={post.meta.slug} align="flex-start" space="200">
-              <Box>
-                <Link size="large" bold href={`/essay/${post.meta.slug}`}>
-                  {post.meta.title}
-                </Link>
-                <Text color="slate11">{post.meta.subtitle}</Text>
-                <Text color="slate11" variant="small">
-                  Published {post.meta.publishedAt.text}
-                </Text>
-              </Box>
-              <Text>{post.meta.excerpt}</Text>
-            </Stack>
+            <Title
+              key={post.meta.slug}
+              href={`/essay/${post.meta.slug}`}
+              title={post.meta.title}
+              subtitle={post.meta.subtitle}
+              info={`Published on ${post.meta.publishedAt.text}`}
+              description={post.meta.excerpt}
+            />
           ))}
         </Stack>
       </Box>

diff --git a/apps/somai.me/app/footer.tsx b/apps/somai.me/app/footer.tsx
@@ -1,15 +1,24 @@
 "use client";
 
 import React from "react";
+import { RxArrowTopRight } from "react-icons/rx";
 
 import { Text, Box, Grid, Stack, Link } from "@thugga/ui";
 
 import { Spotify } from "./spotify";
 
 // eslint-disable-next-line react/display-name
-const FooterMenuLink = (props: React.PropsWithChildren<{ href: string }>) => {
+const FooterMenuLink = ({
+  external = false,
+  ...props
+}: React.PropsWithChildren<{ external?: boolean; href: string }>) => {
   return (
-    <Link size="small" {...props}>
+    <Link
+      size="small"
+      {...props}
+      suffix={external && <RxArrowTopRight />}
+      external={external}
+    >
       {props.children}
     </Link>
   );
@@ -40,16 +49,19 @@ const Footer = () => {
           align="flex-start"
         >
           <Text bold>Profile</Text>
-          <FooterMenuLink href="https://scholar.google.com/citations?hl=en&user=5MdxFjAAAAAJ">
+          <FooterMenuLink
+            href="https://scholar.google.com/citations?hl=en&user=5MdxFjAAAAAJ"
+            external
+          >
             Google Scholar
           </FooterMenuLink>
           {/* <FooterMenuLink href="https://twitter.com/meleksomai">
               Twitter
             </FooterMenuLink> */}
-          <FooterMenuLink href="https://www.linkedin.com/in/msomai/">
+          <FooterMenuLink href="https://www.linkedin.com/in/msomai/" external>
             LinkedIn
           </FooterMenuLink>
-          <FooterMenuLink href="https://github.com/meleksomai">
+          <FooterMenuLink href="https://github.com/meleksomai" external>
             GitHub
           </FooterMenuLink>
         </Stack>
@@ -60,18 +72,23 @@ const Footer = () => {
           align="flex-start"
         >
           <Text bold>Affiliations</Text>
-          <FooterMenuLink href="https://www.inceptionhealth.com/">
+          <FooterMenuLink href="https://www.inceptionhealth.com/" external>
             Inception Health
           </FooterMenuLink>
-          <FooterMenuLink href="https://www.mcw.edu/departments/medicine/divisions/general-internal-medicine/people/melek-somai-md">
+          <FooterMenuLink
+            external
+            href="https://www.mcw.edu/departments/medicine/divisions/general-internal-medicine/people/melek-somai-md"
+          >
             Medical College of Wisconsin
           </FooterMenuLink>
-          <FooterMenuLink href="https://tuncph.org">TunCPH</FooterMenuLink>
+          <FooterMenuLink href="https://rethinkhealth.io" external>
+            Rethink Health
+          </FooterMenuLink>
         </Stack>
       </Grid>
       <Box>
         <Text variant="extraSmall">
-          Made with love from Chicago, Milwaukee, and Tunis.
+          Made with love from Milwaukee, and Tunis.
         </Text>
       </Box>
     </Stack>

diff --git a/apps/somai.me/app/navbar.tsx b/apps/somai.me/app/navbar.tsx
@@ -1,16 +1,37 @@
 "use client";
 
+import { useTheme } from "next-themes";
 import React from "react";
+import { RxMoon, RxSun } from "react-icons/rx";
 
-import { Stack, Link } from "@thugga/ui";
+import { Stack, Link, Button, Box } from "@thugga/ui";
 
 const NavBar = () => {
+  const { theme, setTheme } = useTheme();
+
+  const onToggle = () => {
+    // Implement dark mode
+    if (theme === "dark") {
+      setTheme("light");
+    } else {
+      setTheme("dark");
+    }
+  };
+
   return (
-    <Stack align="center" justify="flex-start" direction="row">
-      <Link href="/">Home</Link>
-      <Link href="/essays">Essays</Link>
-      <Link href="/papers">Papers</Link>
-      <Link href="/about">About</Link>
+    <Stack direction="row" justify="space-between">
+      <Stack align="center" justify="flex-start" direction="row">
+        <Link href="/">Home</Link>
+        <Link href="/essays">Essays</Link>
+        <Link href="/papers">Papers</Link>
+        <Link href="/about">About</Link>
+      </Stack>
+      <Button
+        onClick={onToggle}
+        variant="simple"
+        size="small"
+        prefix={theme === "dark" ? <RxSun /> : <RxMoon />}
+      />
     </Stack>
   );
 };

diff --git a/apps/somai.me/app/page.tsx b/apps/somai.me/app/page.tsx
@@ -1,16 +1,17 @@
 import { Stack } from "@thugga/ui";
 
-import HeroSection from "./hero";
+import HeroSection from "@/components/Hero";
+
 import EssaysSection from "./section.essays";
 import PapersSection from "./section.papers";
 
 export default function MainPage() {
   return (
     <Stack space="1200">
       <HeroSection>
-        Physician. Clinical Informatician. Data Scientist. Innovator. Works at
-        the intersection of Healthcare Informatics, Clinical Computing, and Data
-        Science.
+        Physician. Clinical Informatician. Statistician. Works at the
+        intersection of Healthcare Informatics, Data Science, and Product
+        Engineering.
       </HeroSection>
       {/* @ts-expect-error Server Component */}
       <EssaysSection />

diff --git a/apps/somai.me/app/papers/page.tsx b/apps/somai.me/app/papers/page.tsx
@@ -1,10 +1,10 @@
 import React from "react";
 
+import HeroSection from "@/components/Hero";
+
 import MostPopularSection from "./section.popular";
 import PublicationsSection from "./section.publications";
 
-import HeroSection from "../hero";
-
 export default async function PapersPage() {
   return (
     <>

diff --git a/apps/somai.me/app/papers/section.popular.tsx b/apps/somai.me/app/papers/section.popular.tsx
@@ -2,6 +2,8 @@ import React from "react";
 
 import { Box, Grid, Heading, Link, Stack, Text } from "@thugga/ui";
 
+import { Title } from "@/components/Title";
+
 import { getAllPapers } from "../../lib/papers";
 
 export default async function MostPopularStack() {
@@ -12,17 +14,13 @@ export default async function MostPopularStack() {
     <Stack space="800">
       <Heading size="h3">Most Popular</Heading>
       {publications.map((paper) => (
-        <Stack space="200" key={paper.slug} align="flex-start">
-          <Box>
-            <Link size="large" bold href={`/paper/${paper.slug}`}>
-              {paper.citation.title}
-            </Link>
-            <Text color="slate11" variant="small">
-              Published in {paper.publisher} on {paper.publishedAt.text}
-            </Text>
-          </Box>
-          <Text>{paper.meta.excerpt}</Text>
-        </Stack>
+        <Title
+          key={paper.slug}
+          href={`/paper/${paper.slug}`}
+          title={paper.citation.title}
+          info={`Published in ${paper.publisher} on ${paper.publishedAt.text}`}
+          description={paper.meta.excerpt}
+        />
       ))}
     </Stack>
   );

diff --git a/apps/somai.me/app/papers/section.publications.tsx b/apps/somai.me/app/papers/section.publications.tsx
@@ -1,7 +1,8 @@
 import React from "react";
 
-import { Box, Grid, Heading, Stack, Text, Link } from "@thugga/ui";
+import { Heading, Stack } from "@thugga/ui";
 
+import { Title } from "@/components/Title";
 import { getAllPapers } from "@/lib/papers";
 
 export default async function PublicationsSection() {
@@ -21,15 +22,18 @@ export default async function PublicationsSection() {
             {publications
               .filter((a) => new Date(a.publishedAt.iso).getFullYear() === year)
               .map((paper) => (
-                <Box>
-                  {/* <Separator size="2" /> */}
-                  <Link size="large" bold href={`/paper/${paper.slug}`}>
-                    {paper.citation.title}
-                  </Link>
-                  <Text variant="small" color="slate11">
-                    Published by {paper.publisher} on {paper.publishedAt.text}
-                  </Text>
-                </Box>
+                <Title
+                  key={paper.slug}
+                  href={`/paper/${paper.slug}`}
+                  title={paper.citation.title}
+                  // subtitle={paper.citation.author
+                  //   ?.map((author: any) => {
+                  //     return `${author.given} ${author.family}`;
+                  //   })
+                  //   .join(" / ")}
+                  info={`Published in ${paper.publisher} on ${paper.publishedAt.text}`}
+                  description={paper.meta.excerpt}
+                />
               ))}
           </Stack>
         </Stack>

diff --git a/apps/somai.me/app/hero.tsx → apps/somai.me/components/Hero.tsx b/apps/somai.me/app/hero.tsx → apps/somai.me/components/Hero.tsx
@@ -4,13 +4,15 @@ import { Heading, Box } from "@thugga/ui";
 
 export default function HeroSection({
   children,
+  title = "Melek Somai",
 }: {
   children: React.ReactNode;
+  title?: string;
 }) {
   return (
     <Box>
       <Heading as="h1" size="h2" balance>
-        Melek Somai.{" "}
+        {`${title}. `}
         <Heading size="h2" as="span" color="slate11">
           {children}
         </Heading>

diff --git a/apps/somai.me/components/Title.tsx b/apps/somai.me/components/Title.tsx
@@ -0,0 +1,32 @@
+import React, { forwardRef } from "react";
+
+import { Stack, Link, Text, Box } from "@thugga/ui";
+
+export interface TitleProps {
+  description?: string;
+  href: string;
+  info?: string;
+  subtitle?: string;
+  title: string;
+}
+
+export const Title = forwardRef<any, TitleProps>(
+  ({ href, title, subtitle, info, description }, ref) => {
+    return (
+      <Stack ref={ref} align="flex-start" space="200">
+        <Box>
+          <Link size="large" href={href}>
+            {title}
+          </Link>
+          <Text color="slate11">{subtitle}</Text>
+          <Text color="slate11" variant="small">
+            {info}
+          </Text>
+        </Box>
+        <Text>{description}</Text>
+      </Stack>
+    );
+  }
+);
+
+Title.displayName = "Title";
diff --git a/apps/somai.me/content/roles/inception.md b/apps/somai.me/content/roles/inception.md
@@ -1,10 +1,10 @@
 ---
-role: Chief Technology Officer
+role: Vice President, Chief Technology & Product Officer
 organization: Inception Health
 url: https://inceptionhealth.com
 startAt: 04-01-2019
 isCurrent: true
 active: true
 ---
 
-Melek Somai is the Chief Technology Officer at Inception Health. He holds also the position of Assistant Professor of Medicine at Medical College of Wisconsin. Dr Somai's expertise is in health informatics and data engineering. Melek is trained in medicine, data scientist, and public health. Dr Somai has a special interest in the impact of information technology and data in shaping the provision of care. He is also interested in the development of new approaches to public and global health using data science.
+I joined Inception Health back in 2019 to combine my interest in Medicine, Clinical Computing, and Engineering, to develop new patient-centric platform. Since then, we grew our product & engineering team, and have developed the digital infrastructure that is delivering today the digital care experience for Froedtert & the Medical College of Wisconsin.
diff --git a/apps/somai.me/content/roles/rethinkhealth.md b/apps/somai.me/content/roles/rethinkhealth.md
@@ -1,10 +1,10 @@
 ---
-role: Founder - Chief Executive Officer
+role: Founder
 organization: Rethink Health
 url: https://rethinkhealth.io
 startAt: 01-01-2023
 isCurrent: true
-active: false
+active: true
 ---
 
-Rethink Health is an engineering and research studio that focuses on digital transformation in healthcare. Its mission is to help healthcare organization build their technology stack beyond the Electronic Health Records. 
+Rethink Health is an engineering and research studio that focuses on digital transformation in healthcare. Its mission is to build the next generation of technology platforms in Healthcare.
diff --git a/apps/somai.me/content/roles/tuncph.md b/apps/somai.me/content/roles/tuncph.md
@@ -0,0 +1,10 @@
+---
+role: Founder
+organization: Tunisian Center for Public Health
+url: https://tuncph.org
+startAt: 01-01-2012
+isCurrent: true
+active: true
+---
+
+TunCPH is a non-for-profit organization that focuses on improving public health in Tunisia. It was founded with the principles of increasing research, and develop the next generation of public health practionners in the region.