merge dev into main

package.json

@@ -24,12 +24,12 @@
     "uitest:local": "make e2e-local"
   },
   "dependencies": {
-    "@fontsource/poppins": "^5.1.0",
+    "@fontsource/poppins": "^5.1.1",
     "@lukemorales/query-key-factory": "^1.3.4",
     "@mdx-js/mdx": "^3.1.0",
-    "@next/eslint-plugin-next": "15.1.0",
-    "@next/mdx": "15.1.0",
-    "@next/third-parties": "15.1.0",
+    "@next/eslint-plugin-next": "15.1.3",
+    "@next/mdx": "15.1.3",
+    "@next/third-parties": "15.1.3",
     "@opentelemetry/api": "^1.9.0",
     "@opentelemetry/auto-instrumentations-node": "^0.53.0",
     "@opentelemetry/exporter-metrics-otlp-proto": "^0.55.0",
@@ -47,18 +47,18 @@
     "@radix-ui/react-tooltip": "^1.1.6",
     "@radix-ui/react-visually-hidden": "^1.1.1",
     "@rehype-pretty/transformers": "^0.13.2",
-    "@sanity/cli": "^3.66.1",
+    "@sanity/cli": "^3.68.3",
     "@sanity/client": "^6.24.1",
     "@sanity/dashboard": "^4.1.2",
     "@sanity/image-url": "^1.1.0",
-    "@sanity/ui": "^2.10.11",
-    "@sanity/vision": "3.67.1",
+    "@sanity/ui": "^2.10.18",
+    "@sanity/vision": "3.68.3",
     "@sindresorhus/slugify": "^2.2.1",
-    "@tanstack/react-query": "^5.62.7",
-    "@tanstack/react-query-next-experimental": "^5.62.7",
-    "@vanilla-extract/css": "^1.16.1",
+    "@tanstack/react-query": "^5.62.15",
+    "@tanstack/react-query-next-experimental": "^5.62.15",
+    "@vanilla-extract/css": "^1.17.0",
     "@vanilla-extract/css-utils": "^0.1.4",
-    "@vanilla-extract/next-plugin": "^2.4.7",
+    "@vanilla-extract/next-plugin": "^2.4.8",
     "@vanilla-extract/recipes": "^0.5.5",
     "@vanilla-extract/sprinkles": "^1.6.3",
     "@vercel/otel": "^1.10.0",
@@ -74,17 +74,17 @@
     "framer-motion": "^11.11.15",
     "gen-env-types": "^1.3.4",
     "gray-matter": "^4.0.3",
-    "groq": "3.66.1",
+    "groq": "3.68.3",
     "immer": "^10.1.1",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
     "mdx": "^0.3.1",
     "million": "^3.1.11",
     "motion": "^10.18.0",
-    "nanoid": "^5.0.8",
-    "next": "15.1.0",
+    "nanoid": "^5.0.9",
+    "next": "15.1.3",
     "next-mdx-remote": "^5.0.0",
-    "next-sanity": "9.8.27",
+    "next-sanity": "9.8.31",
     "next-seo": "^6.6.0",
     "next-themes": "^0.4.4",
     "nodemon": "^3.1.9",
@@ -119,7 +119,7 @@
     "remark-prism": "^1.3.6",
     "remark-rehype": "^11.1.1",
     "rss": "^1.2.2",
-    "sanity": "3.67.1",
+    "sanity": "3.68.3",
     "sanity-plugin-markdown": "^5.0.0",
     "sass": "^1.82.0",
     "sharp": "^0.33.5",
@@ -137,7 +137,7 @@
   "devDependencies": {
     "@commitlint/cli": "^19.6.1",
     "@commitlint/config-conventional": "^19.6.0",
-    "@next/env": "15.1.0",
+    "@next/env": "15.1.3",
     "@playwright/test": "^1.49.1",
     "@shikijs/rehype": "^1.24.1",
     "@svgr/webpack": "^8.1.0",
@@ -151,8 +151,8 @@
     "@types/body-scroll-lock": "^3.1.2",
     "@types/jest": "^29.5.14",
     "@types/js-cookie": "^3.0.6",
-    "@types/lodash": "^4.17.13",
-    "@types/node": "22.10.2",
+    "@types/lodash": "^4.17.14",
+    "@types/node": "22.10.5",
     "@types/nprogress": "^0.2.3",
     "@types/react": "19.0.1",
     "@types/rss": "^0.0.32",
@@ -183,12 +183,12 @@
     "jest-resolve": "^29.7.0",
     "jest-serializer-html": "^7.1.0",
     "jest-watch-typeahead": "^2.2.2",
-    "lint-staged": "15.2.11",
+    "lint-staged": "15.3.0",
     "next-router-mock": "^0.9.13",
     "node-mocks-http": "^1.16.2",
     "prettier": "^3.4.2",
     "typescript": "^5.7.2",
-    "vercel": "^39.2.2"
+    "vercel": "^39.2.5"
   },
   "nextBundleAnalysis": {
     "budget": 204800,

src/app/about/page.tsx

@@ -80,16 +80,15 @@ export default async function AboutPage() {
           </Link>
         </div>
       </header>
+      <Spacer height="xxl" />
       <Link href="#experience">
-        <Box as="section">
-          <Heading as="h3" fontSize="xl">
-            Experience
-          </Heading>
-          <Spacer height="md" />
-          {sortedCompanies.map(company => (
-            <ExperienceItem company={company} key={company.id} />
-          ))}
-        </Box>
+        <Heading as="h3" fontSize="xl" color="highlight" underlined>
+          Experience
+        </Heading>
+        <Spacer height="xxl" />
+        {sortedCompanies.map(company => (
+          <ExperienceItem company={company} key={company.id} />
+        ))}
       </Link>
       <Spacer height="xxxxl" />
       <Box as="section">

src/components/ExperienceItem/ExperienceItem.test.tsx

@@ -10,6 +10,10 @@ const skyBet = companies.find(
   company => company.title === 'Sky Betting & Gaming',
 ) as Company;
 
+const flutter = companies.find(
+  company => company.title === 'Flutter UKI',
+) as Company;
+
 describe('ExperienceItem', () => {
   test.each(companies)('should render title for %s', company => {
     const { container } = render(<ExperienceItem company={company} />);
@@ -21,7 +25,7 @@ describe('ExperienceItem', () => {
     test('renders all jobs', () => {
       render(<ExperienceItem company={hive} />);
 
-      const list = screen.getByTestId(`ExperienceItem-list-HiveIT`);
+      const list = screen.getByTestId('ExperienceItem-list-HiveIT');
       const items = within(list).getAllByRole('listitem');
 
       expect(items).toHaveLength(3);
@@ -30,7 +34,7 @@ describe('ExperienceItem', () => {
     test('renders in desc order', () => {
       render(<ExperienceItem company={hive} />);
 
-      const list = screen.getByTestId(`ExperienceItem-list-HiveIT`);
+      const list = screen.getByTestId('ExperienceItem-list-HiveIT');
       const items = within(list).getAllByRole('listitem');
 
       expect(items[0]).toHaveTextContent('Software Engineer');
@@ -41,7 +45,7 @@ describe('ExperienceItem', () => {
     test('renders correct dates', () => {
       render(<ExperienceItem company={hive} />);
 
-      const list = screen.getByTestId(`ExperienceItem-list-HiveIT`);
+      const list = screen.getByTestId('ExperienceItem-list-HiveIT');
       const items = within(list).getAllByRole('listitem');
 
       expect(items[0]).toHaveTextContent('May 2022 — Aug 2023');
@@ -70,25 +74,25 @@ describe('ExperienceItem', () => {
 
       expect(
         screen.getByTestId(`HiveIT-${toCamelCase(job.title)}-description`),
-      ).toHaveTextContent(job.description);
+      ).toHaveTextContent(job.description as string);
     });
   });
 
   describe('SkyBet', () => {
     test('renders all jobs', () => {
       render(<ExperienceItem company={skyBet} />);
 
-      const list = screen.getByTestId(`ExperienceItem-list-SkyBetting&Gaming`);
+      const list = screen.getByTestId('ExperienceItem-list-SkyBetting&Gaming');
       const items = within(list).getAllByRole('listitem');
       expect(items).toHaveLength(1);
 
       expect(items[0]).toHaveTextContent('Software Engineer');
     });
 
-    test('renders correct dates', () => {
+    test('renders correct date range', () => {
       render(<ExperienceItem company={skyBet} />);
 
-      const list = screen.getByTestId(`ExperienceItem-list-SkyBetting&Gaming`);
+      const list = screen.getByTestId('ExperienceItem-list-SkyBetting&Gaming');
       const items = within(list).getAllByRole('listitem');
 
       expect(items[0]).toHaveTextContent('Aug 2023 — Nov 2024');
@@ -107,7 +111,35 @@ describe('ExperienceItem', () => {
 
       expect(
         screen.getByTestId('SkyBetting&Gaming-SoftwareEngineer-description'),
-      ).toHaveTextContent(skyBet.jobs[0].description);
+      ).toHaveTextContent(skyBet.jobs[0].description as string);
+    });
+  });
+
+  describe('Flutter', () => {
+    test('renders all jobs', () => {
+      render(<ExperienceItem company={flutter} />);
+      const list = screen.getByTestId('ExperienceItem-list-FlutterUKI');
+      const items = within(list).getAllByRole('listitem');
+      expect(items).toHaveLength(1);
+
+      expect(items[0]).toHaveTextContent('Software Developer');
+    });
+
+    test('renders correct date range', () => {
+      render(<ExperienceItem company={flutter} />);
+
+      const list = screen.getByTestId('ExperienceItem-list-FlutterUKI');
+      const items = within(list).getAllByRole('listitem');
+
+      expect(items[0]).toHaveTextContent('Jan 2025 — Now');
+    });
+
+    test('renders description', () => {
+      render(<ExperienceItem company={flutter} />);
+
+      expect(
+        screen.getByTestId('FlutterUKI-SoftwareDeveloper-description'),
+      ).toHaveTextContent('No description yet');
     });
   });
 });

src/components/ExperienceItem/__snapshots__/ExperienceItem.test.tsx.snap

@@ -231,3 +231,73 @@ exports[`ExperienceItem should render title for { id: 2, title: 'Sky Betting & G
   </div>
 </div>
 `;
+
+exports[`ExperienceItem should render title for { id: 3, title: 'Flutter UKI', jobs: [Array] } 1`] = `
+<div>
+  <script
+    nonce=""
+  >
+    ((e,s,n,m,o,l,u,h)=&gt;{let a=document.documentElement,v=["light","dark"];function p(c){(Array.isArray(e)?e:[e]).forEach(y=&gt;{let k=y==="class",S=k&&l?o.map(f=&gt;l[f]||f):o;k?(a.classList.remove(...S),a.classList.add(c)):a.setAttribute(y,c)}),C(c)}function C(c){h&&v.includes(c)&&(a.style.colorScheme=c)}function d(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}if(m)p(m);else try{let c=localStorage.getItem(s)||n,y=u&&c==="system"?d():c;p(y)}catch(c){}})("class","theme","system",null,["light","dark"],null,true,true)
+  </script>
+  <div
+    class=""
+  >
+    <h2
+      class="Heading_root__xkw1cf0 Heading_tracking_h2__xkw1cf2 sprinkles_fontSize_md_xs__1fx8prsj8 sprinkles_color_foreground__1fx8prsm5"
+    >
+      Flutter UKI
+    </h2>
+    <ul
+      class="List_list__3nqhft0"
+      data-testid="ExperienceItem-list-FlutterUKI"
+    >
+      <li
+        class="List_item__3nqhft1"
+      >
+        <div
+          class="Grid_container__1otflmc0 sprinkles_columnGap_xxxl_xs__1fx8prsfo sprinkles_rowGap_md_xs__1fx8prse4 sprinkles_alignItems_baseline_xs__1fx8prs2s"
+        >
+          <div
+            class="sprinkles_gridColumnStart_1_xs__1fx8prsjw sprinkles_gridColumnEnd_-1_xs__1fx8prskw sprinkles_gridColumnEnd_1_md__1fx8prski"
+          >
+            <h3
+              class="Heading_root__xkw1cf0 Heading_tracking_h3__xkw1cf3 sprinkles_fontSize_md_xs__1fx8prsj8 sprinkles_color_foregroundNeutral__1fx8prsm6"
+            >
+              Software Developer
+            </h3>
+            <p
+              class="sprinkles_maxWidth_prose_xs__1fx8prsfw sprinkles_fontSize_sm_xs__1fx8prsj4 sprinkles_fontWeight_normal__1fx8prsn0 sprinkles_color_foregroundNeutral__1fx8prsm6"
+            >
+              Leeds, UK
+            </p>
+          </div>
+          <div
+            class="sprinkles_gridColumnStart_1_xs__1fx8prsjw sprinkles_gridColumnStart_2_md__1fx8prsk2 sprinkles_gridColumnEnd_-1_xs__1fx8prskw sprinkles_gridColumnEnd_4_md__1fx8prsku"
+          >
+            <p
+              class="sprinkles_maxWidth_prose_xs__1fx8prsfw sprinkles_fontSize_md_xs__1fx8prsj8 sprinkles_fontWeight_normal__1fx8prsn0 sprinkles_color_foreground__1fx8prsm5"
+              data-testid="FlutterUKI-SoftwareDeveloper-description"
+            >
+              No description yet
+            </p>
+          </div>
+          <div
+            class="sprinkles_gridColumnStart_1_xs__1fx8prsjw sprinkles_gridColumnStart_4_md__1fx8prska sprinkles_gridColumnEnd_-1_xs__1fx8prskw sprinkles_gridColumnEnd_4_md__1fx8prsku"
+          >
+            <p
+              class="sprinkles_maxWidth_prose_xs__1fx8prsfw sprinkles_fontSize_sm_xs__1fx8prsj4 sprinkles_fontWeight_normal__1fx8prsn0 sprinkles_color_foregroundNeutral__1fx8prsm6"
+              data-testid="FlutterUKI-SoftwareDeveloper-date-range"
+            >
+              Jan 2025
+               —
+
+              Now
+              <br />
+            </p>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+</div>
+`;

src/components/Heading/Heading.css.ts

@@ -16,3 +16,8 @@ export const tracking = styleVariants({
   h5: {},
   h6: {},
 });
+
+export const underlined = style({
+  textDecoration: 'underline dashed',
+  textUnderlineOffset: '8px',
+});

src/components/Heading/index.tsx

@@ -10,9 +10,13 @@ type HeadingProps<TElement extends React.ElementType> =
     {
       as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
       fontSize?: Sprinkles['fontSize'];
-      color?: Extract<Sprinkles['color'], 'foreground' | 'foregroundNeutral'>;
+      color?: Extract<
+        Sprinkles['color'],
+        'foreground' | 'foregroundNeutral' | 'highlight'
+      >;
       children: React.ReactNode;
       testId?: string;
+      underlined?: boolean;
     }
   >;
 
@@ -21,6 +25,7 @@ export default function Heading<TElement extends ElementType = 'p'>({
   fontSize = 'md',
   color = 'foreground',
   testId,
+  underlined,
   ...rest
 }: HeadingProps<TElement>) {
   const component = as || 'h2';
@@ -33,6 +38,7 @@ export default function Heading<TElement extends ElementType = 'p'>({
         fontSize,
         color,
       }),
+      { [styles.underlined]: underlined },
     ),
     'data-testid': testId,
     ...rest,

src/config/jobs.ts

@@ -4,7 +4,7 @@ interface Job {
   location: string;
   startDate: string;
   endDate?: string;
-  description: string;
+  description?: string;
 }
 
 export interface Company {
@@ -58,5 +58,17 @@ const companies: Company[] = [
       },
     ],
   },
+  {
+    id: 3,
+    title: 'Flutter UKI',
+    jobs: [
+      {
+        id: 5,
+        title: 'Software Developer',
+        location: 'Leeds, UK',
+        startDate: '06/01/2025',
+      },
+    ],
+  },
 ];
 export default companies;