- Refactor Hooks and Types for safer, more-flexible ingestion - Update Component imports - Create /Work page - Integrate ProtoPro - Improve Card* Component consistency - Bug fixes in fluid typography

plugins/fluidType.ts

···
         360,
         1200,
       ],
+      // base: default text (body copy, paragraphs)
+      base: [
+        16,
+        32,
+        360,
+        1200,
+      ],
       // md: Medium text (body copy, paragraphs)
       md: [
-        16,
         24,
+        40,
         360,
         1200,
       ],
       // lg: Large text (subheadings, lead paragraphs)
       lg: [
-        24,
+        32,
         48,
         360,
         1200,
       ],
       // xl: Extra large text (headings)
       xl: [
-        32,
+        40,
         56,
         360,
         1200,
···
         360,
         1200,
       ],
-      // Legacy presets for backward compatibility
-      h1: [
-        28,
-        88,
-        360,
-        1200,
-      ],
-      h2: [
-        22,
-        48,
-        360,
-        1200,
-      ],
-      h3: [
-        18,
-        32,
-        360,
-        1200,
-      ],
-      body: [
-        16,
-        24,
-        360,
-        1200,
-      ],
+
     };
 
     matchUtilities(

src/App.tsx

···
 import AboutPage from '@/pages/AboutPage';
 import HomePage from '@/pages/HomePage';
-import WorksPage from '@/pages/WorksPage';
+import WorksPage from '@/pages/PortfolioPage';
+import WorkPage from '@/pages/WorkPage';
 import WritingPage from '@/pages/WritingPage';
 import React, { useEffect } from 'react';
 import { Route, Routes } from 'react-router-dom';
···
       <Routes>
         <Route path="/" element={<HomePage />} />
         <Route path="/about" element={<AboutPage />} />
+        <Route path="/work" element={<WorkPage />} />
         <Route path="/works" element={<WorksPage />} />
         <Route path="/writing" element={<WritingPage />} />
         {/* <Route path="/studies" element={<Studies />} /> */}

src/components/CardArticle/CardArticle.tsx

···
 
       {/* Content */}
       <div className={styles.contentContainer}>
+        <div className={styles.detailContainer}>
+          {/* Title */}
+          <Heading level={3} size="md">
+            {article.title}
+          </Heading>
+
+          {/* Description */}
+          {article.subtitle && <Paragraph size="base">{article.subtitle}</Paragraph>}
+        </div>
         {/* Publication Name (left) and Date (right) */}
         <div className={styles.metaContainer}>
           <div className={styles.publicationContainer}>
···
             <span className={styles.publicationName}>{article.publication}</span>
           </div>
           <span className={styles.date}>{formattedDate}</span>
-        </div>
-        <div className={styles.detailContainer}>
-          {/* Title */}
-          <Heading level={3} size="lg">
-            {article.title}
-          </Heading>
-
-          {/* Description */}
-          {article.subtitle && <Paragraph>{article.subtitle}</Paragraph>}
         </div>
       </div>
     </a>

src/components/CardEvent/CardEvent.styles.ts

···
+export const cardEventStyles = {
+  wrapper: 'px-8 py-12 bg-bones-white dark:bg-bones-black flex flex-col gap-8',
+  title: 'text-2xl font-bold font-dm-sans text-neutral-900',
+  subtitle: 'text-lg font-normal font-dm-sans text-neutral-700 italic mt-2',
+  meta: 'text-sm font-medium font-dm-sans text-neutral-500 uppercase mt-4',
+} as const;

src/components/CardEvent/CardEvent.tsx

···
+import { Heading } from '@/components/Heading/Heading';
+import { Paragraph } from '@/components/Paragraph/Paragraph';
+import { cn } from '@/lib/utils';
+import React from 'react';
+import { cardEventStyles } from './CardEvent.styles';
+import { CardEventProps } from './CardEvent.types';
+
+export const CardEvent: React.FC<CardEventProps> = ({
+  eventType,
+  eventTitle,
+  eventDescription,
+  eventStartYear,
+  eventEndYear,
+  eventAffiliation,
+  className = '',
+}) => (
+  <div className={cn(cardEventStyles.wrapper, className)}>
+    <div className="flex items-center justify-between">
+      <Paragraph size="sm">{eventAffiliation}</Paragraph>
+      <Paragraph size="sm">
+        {eventStartYear} &ndash; {eventEndYear}
+      </Paragraph>
+    </div>
+    <div className="flex flex-col gap-2">
+      <Heading level={3} size="lg">
+        {eventTitle}
+      </Heading>
+      <Paragraph size="md">{eventDescription}</Paragraph>
+    </div>
+    <Paragraph size="sm">{eventType}</Paragraph>
+  </div>
+);

src/components/CardEvent/CardEvent.types.ts

···
+export interface CardEventProps {
+  eventType: string;
+  eventTitle: string;
+  eventDescription: string;
+  eventStartYear: string;
+  eventEndYear: string;
+  eventAffiliation: string;
+  className?: string;
+}

src/components/CardFact/CardFact.styles.ts

···
+export const cardFactStyles = {
+  wrapper: 'px-8 py-6 bg-neutral-50 dark:bg-neutral-800 rounded-lg shadow-sm',
+};

src/components/CardFact/CardFact.tsx

···
+import { Heading } from '@/components/Heading/Heading';
+import { Paragraph } from '@/components/Paragraph/Paragraph';
+import { cn } from '@/lib/utils';
+import React from 'react';
+import { cardFactStyles } from './CardFact.styles';
+import { CardFactProps } from './CardFact.types';
+
+export const CardFact: React.FC<CardFactProps> = ({ title, subtitle, className = '' }) => (
+  <div className={cn(cardFactStyles.wrapper, className)}>
+    <Heading level={3} size="lg">
+      {title}
+    </Heading>
+    <Paragraph size="md">{subtitle}</Paragraph>
+  </div>
+);

src/components/CardFact/CardFact.types.ts

···
+export interface CardFactProps {
+  title: string;
+  subtitle: string;
+  className?: string;
+}

src/components/CardNote/CardNote.tsx

···
         </div>
 
         {/* Title */}
-        <Heading level={3}>{title}</Heading>
+        <Heading level={3} size="lg">{title}</Heading>
         {/* Description */}
         {description && <Paragraph>{description}</Paragraph>}
       </div>

src/components/CardRole/CardRole.styles.ts

···
 export const cardWrapper =
-  'group relative flex flex-col h-full bg-bones-white dark:bg-bones-black text-left w-full cursor-pointer hover:bg-bones-white-10 dark:hover:bg-bones-black-10 transition-colors';
+  'group relative flex flex-col h-full bg-bones-white dark:bg-bones-black text-left w-full hover:bg-bones-white-10 dark:hover:bg-bones-black-10 transition-colors';
 export const contentContainer = 'flex flex-col flex-grow gap-4 p-8 justify-between';
 export const coverImage = 'object-cover w-full h-full transition-transform group-hover:scale-105';
 export const coverImageContainer = 'relative aspect-[16/9] w-full overflow-hidden bg-neutral-100 dark:bg-neutral-700';

src/components/CardRole/CardRole.tsx

···
 import { Heading } from '@/components/Heading/Heading';
 import { Paragraph } from '@/components/Paragraph/Paragraph';
 import React from 'react';
-import { useNavigate } from 'react-router-dom';
-import { ROLES_BASE_PATH } from './CardRole.constants';
 import * as styles from './CardRole.styles';
 import { CardRoleProps } from './CardRole.types';
 
+/**
+ * Format date string to readable format
+ */
+function formatDate(dateString: string): string {
+  const date = new Date(dateString);
+  if (isNaN(date.getTime())) return dateString;
+
+  return date.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'short',
+  });
+}
+
 export const CardRole: React.FC<CardRoleProps> = ({ role }) => {
-  const navigate = useNavigate();
+  const startDate = formatDate(role.startDate);
+  const endDate = role.endDate ? formatDate(role.endDate) : 'Present';
+  const dateRange = `${startDate} — ${endDate}`;
 
   return (
-    <button onClick={() => navigate(`${ROLES_BASE_PATH}/${role.slug}`)} className={styles.cardWrapper}>
-      {/* Cover Image (if available) */}
-      {role.coverImage && (
-        <div className={styles.coverImageContainer}>
-          <img src={role.coverImage} alt="" className={styles.coverImage} />
-        </div>
-      )}
-
+    <div className={styles.cardWrapper}>
       {/* Content */}
       <div className={styles.contentContainer}>
         {/* Company Name (left) and Date (right) */}
         <div className={styles.metaContainer}>
           <span className={styles.companyName}>{role.company}</span>
-          <span className={styles.date}>{role.date}</span>
+          <span className={styles.date}>{dateRange}</span>
         </div>
         <div className={styles.detailContainer}>
-          {/* Title */}
-          <Heading level={3} size="lg">
-            {role.title}
+          {/* Position Title */}
+          <Heading level={3} size="md">
+            {role.position}
           </Heading>
 
-          {/* Subtitle/Description */}
-          {role.subtitle && <Paragraph>{role.subtitle}</Paragraph>}
+          {/* Description */}
+          {role.description && <Paragraph size="base">{role.description}</Paragraph>}
         </div>
       </div>
-    </button>
+    </div>
   );
 };

src/components/CardRole/CardRole.types.ts

···
+import type { JobHistoryEntry } from '@/types/atproto';
+
 export interface CardRoleProps {
-  role: {
-    title: string;
-    company: string;
-    subtitle: string;
-    date: string;
-    coverImage?: string;
-    slug: string;
-  };
+  role: JobHistoryEntry;
 }

src/components/Divider/Divider.styles.ts

···
 // Divider inherits color from page theme context
-export const dividerHorizontal = 'border-t-[1px] border-l-0 border-r-0 border-b-0';
-export const dividerVertical = 'border-l-[1px] border-t-0 border-r-0 border-b-0 inline-block h-full align-middle';
+export const dividerHorizontal = 'border-t-[2px] border-l-0 border-r-0 border-b-0';
+export const dividerVertical = 'border-l-[2px] border-t-0 border-r-0 border-b-0 inline-block h-full align-middle';

src/components/Divider/Divider.tsx

···
   // Accent: white border
   // Default: black border in light mode, white in dark
   const themeClasses =
-    pageTheme === 'accent' ? 'border-bones-white' : 'border-bones-black-30 dark:border-bones-white-30';
+    pageTheme === 'accent' ? 'border-bones-white' : 'border-bones-black-20 dark:border-bones-white-20';
 
   const orientationStyles = orientation === 'vertical' ? dividerVertical : dividerHorizontal;
 

src/components/Events/Events.tsx

···
 import { cn } from '@/lib/utils';
 import React from 'react';
-import { Event } from '@/components/Event/Event';
+import { CardEvent } from '@/components/CardEvent/CardEvent';
 import { eventsStyles } from './Events.styles';
 import { EventsProps } from './Events.types';
 
 export const Events: React.FC<EventsProps> = ({ items, className = '' }) => (
   <div className={cn(eventsStyles.wrapper, className)}>
     {items.map((item) => (
-      <Event
+      <CardEvent
         key={item.eventTitle}
         eventType={item.eventType}
         eventTitle={item.eventTitle}

src/components/Events/Events.types.ts

···
-import { EventProps } from './Event.types';
+import { CardEventProps } from '@/components/CardEvent/CardEvent.types';
 
 export interface EventsProps {
-  items: EventProps[];
+  items: CardEventProps[];
   className?: string;
 }

src/components/Facts/Facts.tsx

···
 import { cn } from '@/lib/utils';
 import React from 'react';
-import { Fact } from '@/components/Fact/Fact';
+import { CardFact } from '@/components/CardFact/CardFact';
 import { factsStyles } from './Facts.styles';
 import { FactsProps } from './Facts.types';
 
···
   return (
     <div className={cn(factsStyles.wrapper, className)}>
       {items.map((item) => (
-        <Fact key={item.title} title={item.title} subtitle={item.subtitle} />
+        <CardFact key={item.title} title={item.title} subtitle={item.subtitle} />
       ))}
     </div>
   );

src/components/Facts/Facts.types.ts

···
-import { FactProps } from './Fact.types';
+import { CardFactProps } from '@/components/CardFact/CardFact.types';
 
 export interface FactsProps {
-  items: FactProps[];
+  items: CardFactProps[];
   className?: string;
 }

src/components/Heading/Heading.styles.ts

···
   base: 'font-dm-sans',
   sizes: {
     sm: 'heading-sm',
+    base: 'heading-base',
     md: 'heading-md',
     lg: 'heading-lg',
     xl: 'heading-xl',

src/components/Heading/Heading.types.ts

···
 import { ReactNode } from 'react';
 
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
-export type HeadingSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export type HeadingSize = 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl';
 
 export interface HeadingProps {
   children: ReactNode;

src/components/Layout/Layout.styles.ts

···
 
 export const getLayoutStyles = (theme: PageTheme = 'default') =>
   cn(
-    'grid grid-cols-1 md:grid-cols-3 min-h-screen gap-0',
+    'grid grid-cols-1 md:grid-cols-[2fr_auto_1fr] min-h-screen gap-0',
     // Accent theme: blue (light) / mediumblue (dark), white text
     theme === 'accent' && 'bg-bones-blue dark:bg-bones-mediumblue text-bones-white',
     // Default theme: white (light) / black (dark), black/white text
     theme === 'default' && 'bg-bones-white dark:bg-bones-black text-bones-black dark:text-bones-white',
   );
 
-export const main = 'md:col-span-2 p-12 md:order-1';
+export const main = 'p-12';
 
 export const getAsideStyles = (theme: PageTheme = 'default') =>
   cn(
-    'md:col-span-1 p-12 md:order-2',
-    // Accent theme: white border with transparency
-    theme === 'accent' && 'border-l border-bones-white-20',
-    // Default theme: black/white borders based on mode
-    theme === 'default' && 'border-l border-bones-black-20 dark:border-bones-white-20',
+    'p-12',
+    // Theme-specific styles (border removed - now using Divider component)
   );

src/components/Layout/Layout.tsx

···
 import * as styles from './Layout.styles';
 import { DEFAULT_THEME } from './Layout.constants';
 import { AsideProps, LayoutProps, PageTheme, MainProps } from './Layout.types';
+import { Divider } from '@/components/Divider/Divider';
 
 // Context to share page theme with child components
 const PageThemeContext = createContext<PageTheme>(DEFAULT_THEME);
···
 export const usePageTheme = () => useContext(PageThemeContext);
 
 export const Layout: React.FC<LayoutProps> = ({ children, theme = DEFAULT_THEME }) => {
+  // Split children into Main and Aside
+  const childArray = React.Children.toArray(children);
+  const mainComponent = childArray.find(
+    (child) => React.isValidElement(child) && child.type === Main
+  );
+  const asideComponent = childArray.find(
+    (child) => React.isValidElement(child) && child.type === Aside
+  );
+
   return (
     <PageThemeContext.Provider value={theme}>
-      <div className={styles.getLayoutStyles(theme)}>{children}</div>
+      <div className={styles.getLayoutStyles(theme)}>
+        {mainComponent}
+        {asideComponent && <Divider orientation="vertical" className="hidden md:block" />}
+        {asideComponent}
+      </div>
     </PageThemeContext.Provider>
   );
 };

src/components/ListItem/ListItem.styles.ts

···
 
 export const listItemSizes = {
   sm: 'paragraph-sm',
+  base: 'paragraph-base',
   md: 'paragraph-md',
   lg: 'paragraph-lg',
 } as const;

src/components/Paragraph/Paragraph.styles.ts

···
   base: 'font-dm-sans',
   sizes: {
     sm: 'paragraph-sm',
+    base: 'paragraph-base',
     md: 'paragraph-md',
     lg: 'paragraph-lg',
     xl: 'paragraph-xl',

src/components/Paragraph/Paragraph.types.ts

···
 import { ReactNode } from 'react';
 
-export type ParagraphSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export type ParagraphSize = 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl';
 
 export interface ParagraphProps {
   children: ReactNode;

src/components/Skills/Skills.types.ts

···
-import { SkillProps } from './Skill.types';
+import { SkillProps } from '@/components/Skill/Skill.types';
 
 export interface SkillsProps {
   items: SkillProps[];

src/components/TLDRProfile/TLDRProfile.constants.ts

···
 } as const;
 
 export const SECTIONS = {
-  specializations: 'Specializations',
+  skills: 'Skills',
+  languages: 'Languages',
   connect: 'Connect',
 } as const;
 

src/components/TLDRProfile/TLDRProfile.tsx

···
 import { Link } from '@/components/Link/Link';
 import { Tags } from '@/components/Tags/Tags';
-import { specializations } from '@/data/specializations';
+import { useProtopro } from '@/hooks/atproto';
 import type { JSX } from 'react';
 import { Heading } from '../Heading/Heading';
 import { Paragraph } from '../Paragraph/Paragraph';
···
  * @returns JSX element with profile photo and summary information
  */
 export default function TLDRProfile(): JSX.Element {
+  const { data: profile } = useProtopro();
+
   return (
     <div className={styles.container}>
       <div className={styles.innerContainer}>
···
           <Heading level={3} size="md">
             {PROFILE.name}
           </Heading>
-          <Paragraph size="sm">{PROFILE.title}</Paragraph>
-          <Paragraph size="sm">{PROFILE.location}</Paragraph>
-          <Paragraph size="sm">{PROFILE.experience}</Paragraph>
+          <Paragraph size="base">{PROFILE.location}</Paragraph>
+          <Paragraph size="base">{profile?.overview || PROFILE.title}</Paragraph>
+          {/* <Paragraph size="base">{PROFILE.experience}</Paragraph> */}
         </div>
 
-        <div className={styles.section}>
-          <Paragraph size="md">{SECTIONS.specializations}</Paragraph>
-          <Tags tags={specializations} className="flex-wrap" />
-        </div>
+        {profile?.skills && profile.skills.length > 0 && (
+          <div className={styles.section}>
+            <Heading level={4} size="base">
+              {SECTIONS.skills}
+            </Heading>
+            <Tags tags={[...profile.skills].sort().join(', ')} className="flex-wrap" />
+          </div>
+        )}
+
+        {profile?.languages && profile.languages.length > 0 && (
+          <div className={styles.section}>
+            <Heading level={4} size="base">
+              {SECTIONS.languages}
+            </Heading>
+            <Tags
+              tags={[...profile.languages]
+                .map((lang) => lang.code)
+                .sort()
+                .join(', ')}
+              className="flex-wrap"
+            />
+          </div>
+        )}
 
         <div className={styles.section}>
-          <Paragraph size="md">{SECTIONS.connect}</Paragraph>
+          <Heading level={4} size="base">
+            {SECTIONS.connect}
+          </Heading>
 
-          <Paragraph className={styles.sectionTitle}>{SECTIONS.connect}</Paragraph>
           <div className={styles.connectLinks}>
             {CONNECT_LINKS.map((link) => (
               <Link key={link.href} href={link.href} target="_blank" rel="noopener noreferrer">

src/components/Tag/Tag.styles.ts

···
 export const tagStyles = {
-  base: 'px-2 py-1 bg-bones-black-5 text-bones-black font-medium dark:bg-bones-white-10 dark:text-bones-white',
+  base: 'px-2 py-1 font-medium',
 } as const;

src/components/Tag/Tag.tsx

···
+import { usePageTheme } from '@/components/Layout/Layout';
 import { cn } from '@/lib/utils';
 import React from 'react';
 import { Paragraph } from '../Paragraph/Paragraph';
···
 import { TagProps } from './Tag.types';
 
 export const Tag: React.FC<TagProps> = ({ label, className = '' }) => {
+  const pageTheme = usePageTheme();
+
+  // Theme-based tag styling:
+  // Accent: white border with semi-transparent white background
+  // Default: light backgrounds with dark/light text based on mode
+  const themeClasses = pageTheme === 'accent'
+    ? 'border border-bones-white bg-bones-white-20 text-bones-white'
+    : 'bg-bones-black-5 text-bones-black dark:bg-bones-white-10 dark:text-bones-white';
+
   return (
-    <div className={cn(tagStyles.base, className)}>
+    <div className={cn(tagStyles.base, themeClasses, className)}>
       <Paragraph size="sm">{label}</Paragraph>
     </div>
   );

src/hooks/atproto/fetchPublications.ts src/hooks/atproto/useLeaflet.ts

···
 import { useEffect, useState } from 'react';
 import { ATPROTO_COLLECTIONS, buildBlobUrl } from '@/config/atproto';
 import type { ATProtocolDocument, ATProtocolPublication, FetchResult } from '@/types/atproto';
-import { fetchRecords } from './fetchRecords';
+import { useRecords } from './useRecords';
 
 /**
  * Publication data with resolved metadata
···
 }
 
 /**
- * Hook for fetching publications and their associated documents
+ * Hook for fetching Leaflet publications and their associated documents
+ * Fetches from pub.leaflet.publication and pub.leaflet.document collections
  * Automatically resolves publication references in documents
  *
  * @returns FetchResult with combined documents and publications data
  *
  * @example
  * ```tsx
- * const { data: posts, loading, error } = fetchPublications();
+ * const { data: posts, loading, error } = useLeaflet();
  *
  * if (loading) return <div>Loading...</div>;
  * if (error) return <div>Error: {error}</div>;
···
  * ));
  * ```
  */
-export function fetchPublications(): FetchResult<Document[]> {
+export function useLeaflet(): FetchResult<Document[]> {
   const {
     data: publicationsData,
     loading: publicationsLoading,
     error: publicationsError,
-  } = fetchRecords<ATProtocolPublication['value']>(ATPROTO_COLLECTIONS.PUBLICATION);
+  } = useRecords<ATProtocolPublication['value']>(ATPROTO_COLLECTIONS.PUBLICATION);
 
   const {
     data: documentsData,
     loading: documentsLoading,
     error: documentsError,
-  } = fetchRecords<ATProtocolDocument['value']>(ATPROTO_COLLECTIONS.DOCUMENT);
+  } = useRecords<ATProtocolDocument['value']>(ATPROTO_COLLECTIONS.DOCUMENT);
 
   const [data, setData] = useState<Document[] | null>(null);
   const [loading, setLoading] = useState(true);
···
             publishedAt: record.value.publishedAt,
             articleUrl: `https://${publication.basePath}/${slug}`,
             publication,
-          };
+          } as Document;
         })
         .filter((doc): doc is Document => doc !== null)
         // Sort by published date, newest first

src/hooks/atproto/fetchRecords.ts src/hooks/atproto/useRecords.ts

···
  *
  * @example
  * ```tsx
- * const { data: publications, loading, error } = fetchRecords<PublicationValue>(
+ * const { data: publications, loading, error } = useRecords<PublicationValue>(
  *   'pub.leaflet.publication'
  * );
  * ```
  */
-export function fetchRecords<T = unknown>(collection: string, repo?: string): FetchResult<ATProtocolRecord<T>[]> {
+export function useRecords<T = unknown>(collection: string, repo?: string): FetchResult<ATProtocolRecord<T>[]> {
   const [data, setData] = useState<ATProtocolRecord<T>[] | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
-    const fetchRecords = async () => {
+    const loadRecords = async () => {
       try {
         setLoading(true);
         setError(null);
···
       }
     };
 
-    fetchRecords();
+    loadRecords();
   }, [collection, repo]);
 
   return { data, loading, error };

src/hooks/atproto/index.ts

···
  * AT Protocol hooks exports
  */
 
-export { fetchPublications } from './fetchPublications';
-export type { Document, Publication } from './fetchPublications';
-export { fetchRecords } from './fetchRecords';
+export { useLeaflet } from './useLeaflet';
+export type { Document, Publication } from './useLeaflet';
+export { useProtopro } from './useProtopro';
+export type { Profile } from './useProtopro';
+export { useRecords } from './useRecords';

src/hooks/atproto/useProtopro.ts

···
+import { useEffect, useState } from 'react';
+import type { FetchResult, JobHistoryEntry, LanguageProficiency, ProfileValue } from '@/types/atproto';
+import { useRecords } from './useRecords';
+
+/**
+ * Profile data from Protopro collection
+ */
+export interface Profile {
+  overview?: string;
+  jobHistory: JobHistoryEntry[];
+  languages: LanguageProficiency[];
+  skills: string[];
+  educationHistory: unknown[];
+}
+
+/**
+ * Hook for fetching Protopro actor profile from AT Protocol
+ * Fetches from blue.protopro.actor.profile collection
+ * Returns: overview, jobHistory, languages, skills, educationHistory
+ *
+ * @returns FetchResult with profile data
+ *
+ * @example
+ * ```tsx
+ * const { data: profile, loading, error } = useProtopro();
+ *
+ * if (loading) return <div>Loading...</div>;
+ * if (error) return <div>Error: {error}</div>;
+ *
+ * return (
+ *   <div>
+ *     {profile?.jobHistory.map(job => <JobCard key={job.company} job={job} />)}
+ *   </div>
+ * );
+ * ```
+ */
+export function useProtopro(): FetchResult<Profile | null> {
+  const {
+    data: profileData,
+    loading: profileLoading,
+    error: profileError,
+  } = useRecords<ProfileValue>('blue.protopro.actor.profile');
+
+  const [data, setData] = useState<Profile | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (profileLoading) {
+      setLoading(true);
+      return;
+    }
+
+    if (profileError) {
+      setError(profileError);
+      setLoading(false);
+      return;
+    }
+
+    if (!profileData || profileData.length === 0) {
+      setLoading(false);
+      return;
+    }
+
+    try {
+      // Get the first (and likely only) profile record
+      const profileRecord = profileData[0];
+      const profileValue = profileRecord.value;
+
+      const profile: Profile = {
+        overview: profileValue.overview,
+        jobHistory: profileValue.jobHistory || [],
+        languages: profileValue.languages || [],
+        skills: profileValue.skills || [],
+        educationHistory: profileValue.educationHistory || [],
+      };
+
+      setData(profile);
+      setError(null);
+    } catch (err) {
+      console.error('Error processing profile data:', err);
+      setError(err instanceof Error ? err.message : 'An error occurred');
+    } finally {
+      setLoading(false);
+    }
+  }, [profileData, profileLoading, profileError]);
+
+  return { data, loading, error };
+}

src/index.css

···
     line-height: 1.62;
   }
 
-  /* md: Body copy, paragraphs (16px → 18px) */
+  /* base: Default text (16px → 32px) */
+  .type-base {
+    @apply fluid-preset-base;
+    line-height: 1.5;
+  }
+
+  /* md: Body copy, paragraphs (24px → 40px) */
   .type-md {
     @apply fluid-preset-md;
     line-height: 1.38;
···
    */
 
   .heading-display {
-    @apply type-2xl font-semibold font-sans;
+    @apply type-2xl font-bold font-sans;
   }
 
   .heading-2xl {
···
     @apply type-md font-extrabold font-sans;
   }
 
+    .heading-base {
+    @apply type-base font-black font-sans;
+  }
+
   .heading-sm {
-    @apply type-sm font-semibold font-sans;
+    @apply type-sm font-black font-sans;
   }
 
   /**
···
     @apply type-md font-normal font-sans;
   }
 
+    .paragraph-base {
+    @apply type-base font-normal font-sans;
+  }
+
   .paragraph-sm {
     @apply type-sm font-normal font-sans;
   }
···
    * Uses Tailwind's native font-serif, italic
    */
 
-  .quote-xl {
+     .quote-2xl {
     @apply type-2xl font-normal font-sans italic;
+  }
+
+  .quote-xl {
+    @apply type-xl font-normal font-sans italic;
   }
 
   .quote-lg {
-    @apply type-xl font-normal font-serif italic;
+    @apply type-lg font-normal font-serif italic;
   }
 
   .quote-md {
-    @apply type-lg font-normal font-serif italic;
+    @apply type-md font-normal font-serif italic;
   }
 
   /**
···
    */
 
   .code-inline {
-    @apply type-sm font-normal font-mono;
+    @apply type-base font-normal font-mono;
   }
 
   .code-block {
-    @apply type-sm font-normal font-mono;
+    @apply type-base font-normal font-mono;
     line-height: 1.75;
   }
 

src/pages/AboutPage.tsx

···
                 Recent Work
               </Heading>
 
-              <div className="grid grid-cols-1 border-2 border-bones-white-30">
+              <div className="grid grid-cols-1 border-2 border-bones-black-20 dark:border-bones-white-20">
                 {latestJobs.map((job, index) => {
                   const startYear = new Date(job.startDate).getFullYear();
                   const endYear = job.endDate ? new Date(job.endDate).getFullYear() : 'Present';
···
               <Paragraph size="lg">My approach is straightforward and outcome-focused.</Paragraph>
 
               <UnorderedList bullet="disc">
-                <ListItem size="lg">I start by understanding users and the problems they face</ListItem>
+                <ListItem>I start by understanding users and the problems they face</ListItem>
                 <ListItem>I design and prototype quickly to validate ideas early</ListItem>
                 <ListItem>I measure results and refine based on evidence</ListItem>
                 <ListItem>I document decisions to help teams move with clarity</ListItem>

src/pages/HomePage.tsx

···
             </Paragraph>
 
             <Paragraph size="2xl">
-              I{' '}
-              <Link href="https://www.linkedin.com/in/barrymprendergast/details/experience/" target="_blank">
-                work
-              </Link>{' '}
-              with nonprofits and startups to ease their growing pains, and to market faster.
+              I <Link href="/work">work</Link> with nonprofits and startups to ease their growing pains, and to market
+              faster.
             </Paragraph>
 
             <Paragraph size="2xl">

src/pages/WorkPage.tsx

···
+import { CardRole } from '@/components/CardRole/CardRole';
+import { Divider } from '@/components/Divider/Divider';
+import { Heading } from '@/components/Heading/Heading';
+import { Aside, Layout, Main } from '@/components/Layout/Layout';
+import { Link } from '@/components/Link/Link';
+import { Paragraph } from '@/components/Paragraph/Paragraph';
+import Section from '@/components/Section/Section';
+import TLDRProfile from '@/components/TLDRProfile/TLDRProfile';
+import { useProtopro } from '@/hooks/atproto';
+import type { JSX } from 'react';
+import { Helmet } from 'react-helmet-async';
+
+/**
+ * Work page component - displays CV/work history from AT Protocol PDS
+ *
+ * @returns JSX element with work page content
+ */
+export default function WorkPage(): JSX.Element {
+  const { data: profile, loading, error } = useProtopro();
+
+  // Split jobs into current and past
+  const currentJobs = profile?.jobHistory.filter((job) => !job.endDate) || [];
+  const pastJobs =
+    profile?.jobHistory
+      .filter((job) => job.endDate)
+      .sort((a, b) => {
+        // Sort by end date, newest first
+        const dateA = a.endDate ? new Date(a.endDate).getTime() : 0;
+        const dateB = b.endDate ? new Date(b.endDate).getTime() : 0;
+        return dateB - dateA;
+      }) || [];
+
+  const jsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'ProfilePage',
+    mainEntity: {
+      '@type': 'Person',
+      name: 'Barry Prendergast',
+      jobTitle: currentJobs[0]?.position || 'Product Designer',
+      description: 'Independent product designer and strategist',
+      url: 'https://renderg.host/work',
+    },
+  };
+
+  return (
+    <>
+      <Helmet>
+        <title>Work | Barry Prendergast</title>
+        <meta
+          name="description"
+          content="Independent product designer helping organisations deliver better products through clear thinking, practical design, and meaningful collaboration."
+        />
+        <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
+      </Helmet>
+
+      <Layout theme="default">
+        <Main>
+          <div className="flex flex-col gap-16">
+            {/* Heading */}
+            <Section>
+              <Heading level={2} size="base">
+                work / <Link href="/">renderg.host</Link>
+              </Heading>
+            </Section>
+
+            {/* Loading/Error States */}
+            {loading && (
+              <Section>
+                <Paragraph size="2xl">Loading profile...</Paragraph>
+              </Section>
+            )}
+
+            {error && (
+              <Section>
+                <Paragraph size="2xl">Error loading profile: {error}</Paragraph>
+              </Section>
+            )}
+
+            {/* Current Work Section */}
+            {!loading && !error && currentJobs.length > 0 && (
+              <Section>
+                <Heading level={2} size="lg">
+                  Current roles
+                </Heading>
+
+                <div className="grid grid-cols-1 border-2 border-bones-black-20 dark:border-bones-white-20">
+                  {currentJobs.map((job, index) => (
+                    <>
+                      <CardRole key={`current-${job.company}-${index}`} role={job} />
+                      {index < currentJobs.length - 1 && <Divider />}
+                    </>
+                  ))}
+                </div>
+              </Section>
+            )}
+
+            {/* Past Work Section */}
+            {!loading && !error && pastJobs.length > 0 && (
+              <Section>
+                <Heading level={2} size="lg">
+                  Previous roles
+                </Heading>
+
+                <div className="grid grid-cols-1 border-2 border-bones-black-20 dark:border-bones-white-20">
+                  {pastJobs.map((job, index) => (
+                    <>
+                      <CardRole key={`past-${job.company}-${index}`} role={job} />
+                      {index < pastJobs.length - 1 && <Divider />}
+                    </>
+                  ))}
+                </div>
+              </Section>
+            )}
+
+            {/* Exit */}
+            <Section>
+              <Paragraph size="md">
+                Return to <Link href="/">renderg.host</Link>
+              </Paragraph>
+            </Section>
+          </div>
+        </Main>
+
+        <Aside>
+          <TLDRProfile />
+        </Aside>
+      </Layout>
+    </>
+  );
+}

src/pages/WritingPage.tsx

···
 import { Link } from '@/components/Link/Link';
 import { Paragraph } from '@/components/Paragraph/Paragraph';
 import TLDRProfile from '@/components/TLDRProfile/TLDRProfile';
-import { fetchPublications } from '@/hooks/atproto';
+import { useLeaflet } from '@/hooks/atproto';
 import type { JSX } from 'react';
 import { Helmet } from 'react-helmet-async';
 
···
  */
 
 export default function WritingPage(): JSX.Element {
-  const { data: documents, loading, error } = fetchPublications();
+  const { data: documents, loading, error } = useLeaflet();
 
   const jsonLd = {
     '@context': 'https://schema.org',
···
       <Layout theme="default">
         <Main>
           <div className="flex flex-col gap-12">
-            <Paragraph size="md">
-              <Link href="/">←Home </Link>
-            </Paragraph>
-            <Heading level={1} size="md">
-              My Writing
+            <Heading level={2} size="md">
+              writing / <Link href="/">renderg.host</Link>
             </Heading>
 
             <Paragraph size="lg">Thoughts on design strategy, product design, and building better products.</Paragraph>
···
             )}
 
             {!loading && !error && documents && documents.length > 0 && (
-              <div className="grid grid-cols-1 border-2 border-bones-white-30">
+              <div className="grid grid-cols-1 border-2 border-bones-black-20 dark:border-bones-white-20">
                 {documents.map((doc, index) => (
                   <>
                     <CardArticle

src/types/atproto/defineBase.ts

···
+/**
+ * Base AT Protocol type definitions
+ * Generic types used across all AT Protocol collections
+ */
+
+/**
+ * AT Protocol Blob reference
+ * Used for binary data like images
+ */
+export interface ATProtocolBlob {
+  $type: 'blob';
+  ref: {
+    $link: string;
+  };
+  mimeType: string;
+  size: number;
+}
+
+/**
+ * Base AT Protocol record structure
+ */
+export interface ATProtocolRecord<T = unknown> {
+  uri: string;
+  cid: string;
+  value: T;
+}
+
+/**
+ * Response from listRecords XRPC endpoint
+ */
+export interface ListRecordsResponse<T = unknown> {
+  records: ATProtocolRecord<T>[];
+  cursor?: string;
+}
+
+/**
+ * Generic fetch result with loading and error states
+ */
+export interface FetchResult<T> {
+  data: T | null;
+  loading: boolean;
+  error: string | null;
+}

src/types/atproto/defineLeaflet.ts

···
+/**
+ * Leaflet collection type definitions
+ * Types for pub.leaflet.publication and pub.leaflet.document
+ */
+
+import type { ATProtocolBlob, ATProtocolRecord } from './defineBase';
+
+/**
+ * Publication record value structure
+ */
+export interface PublicationValue {
+  name: string;
+  base_path: string;
+  icon?: ATProtocolBlob;
+  description?: string;
+  $type: string;
+}
+
+/**
+ * Document record value structure
+ */
+export interface DocumentValue {
+  title: string;
+  description?: string;
+  publishedAt: string;
+  publication: string; // URI reference to the publication
+  $type: string;
+}
+
+/**
+ * Full Publication record
+ */
+export type ATProtocolPublication = ATProtocolRecord<PublicationValue>;
+
+/**
+ * Full Document record
+ */
+export type ATProtocolDocument = ATProtocolRecord<DocumentValue>;

src/types/atproto/defineProtopro.ts

···
+/**
+ * Protopro collection type definitions
+ * Types for blue.protopro.actor.profile
+ */
+
+import type { ATProtocolRecord } from './defineBase';
+
+/**
+ * Language proficiency structure
+ */
+export interface LanguageProficiency {
+  code: string;
+  level: number;
+}
+
+/**
+ * Job history entry structure
+ */
+export interface JobHistoryEntry {
+  company: string;
+  position: string;
+  startDate: string;
+  endDate?: string;
+  description?: string;
+}
+
+/**
+ * Actor Profile record value structure
+ */
+export interface ProfileValue {
+  name: string;
+  skills: string[];
+  overview?: string;
+  languages?: LanguageProficiency[];
+  jobHistory?: JobHistoryEntry[];
+  socialLinks?: string[];
+  educationHistory?: unknown[];
+  updatedAt?: string;
+  $type: string;
+}
+
+/**
+ * Full Profile record
+ */
+export type ATProtocolProfile = ATProtocolRecord<ProfileValue>;

src/types/atproto/defineRecords.ts

···
-/**
- * AT Protocol record type definitions
- * Type-safe interfaces for AT Protocol data structures
- */
-
-/**
- * AT Protocol Blob reference
- * Used for binary data like images
- */
-export interface ATProtocolBlob {
-  $type: 'blob';
-  ref: {
-    $link: string;
-  };
-  mimeType: string;
-  size: number;
-}
-
-/**
- * Base AT Protocol record structure
- */
-export interface ATProtocolRecord<T = unknown> {
-  uri: string;
-  cid: string;
-  value: T;
-}
-
-/**
- * Publication record value structure
- */
-export interface PublicationValue {
-  name: string;
-  base_path: string;
-  icon?: ATProtocolBlob;
-  description?: string;
-  $type: string;
-}
-
-/**
- * Document record value structure
- */
-export interface DocumentValue {
-  title: string;
-  description?: string;
-  publishedAt: string;
-  publication: string; // URI reference to the publication
-  $type: string;
-}
-
-/**
- * Full Publication record
- */
-export type ATProtocolPublication = ATProtocolRecord<PublicationValue>;
-
-/**
- * Full Document record
- */
-export type ATProtocolDocument = ATProtocolRecord<DocumentValue>;
-
-/**
- * Response from listRecords XRPC endpoint
- */
-export interface ListRecordsResponse<T = unknown> {
-  records: ATProtocolRecord<T>[];
-  cursor?: string;
-}

src/types/atproto/defineResults.ts

···
-/**
- * AT Protocol fetch result types
- */
-
-/**
- * Generic fetch result with loading and error states
- */
-export interface FetchResult<T> {
-  data: T | null;
-  loading: boolean;
-  error: string | null;
-}

src/types/atproto/index.ts

···
  * AT Protocol type exports
  */
 
-export type {
-  ATProtocolBlob,
-  ATProtocolDocument,
-  ATProtocolPublication,
-  ATProtocolRecord,
-  DocumentValue,
-  ListRecordsResponse,
-  PublicationValue,
-} from './defineRecords';
+// Base types
+export type { ATProtocolBlob, ATProtocolRecord, FetchResult, ListRecordsResponse } from './defineBase';
 
-export type { FetchResult } from './defineResults';
+// Leaflet types
+export type { ATProtocolDocument, ATProtocolPublication, DocumentValue, PublicationValue } from './defineLeaflet';
+
+// Protopro types
+export type {
+  ATProtocolProfile,
+  JobHistoryEntry,
+  LanguageProficiency,
+  ProfileValue,
+} from './defineProtopro';

tsconfig.json

···
     "types": ["react"],
     "useDefineForClassFields": true
   },
-  "include": ["src", "src/components/Sidebar/.Sidebar.tsx.off"],
+  "include": [
+    "src",
+    "src/components/Sidebar/.Sidebar.tsx.off",
+    "src/components/CardArticle/CardArticle.tsx"
+  ],
   "references": [{ "path": "./tsconfig.node.json" }]
 }