From dec935edc6ed300f922196d8cbce70a140cab923 Mon Sep 17 00:00:00 2001
From: twotalesanimation <80506065+twotalesanimation@users.noreply.github.com>
Date: Mon, 5 Oct 2026 18:56:50 +0200
Subject: [PATCH] Move filmography above selected work on home and work pages

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 app/page.tsx      | 145 +++++++++++++++++++++++++++++++++-------------
 app/work/page.tsx |  21 ++++---
 content/site.ts   |   2 +-
 3 files changed, 118 insertions(+), 50 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 80aeb89..9b86578 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -3,14 +3,36 @@ import Hero from "@/components/Hero";
 import ProjectCard from "@/components/ProjectCard";
 import Reveal from "@/components/Reveal";
 import SectionLabel from "@/components/SectionLabel";
-import { filmography, projects, services, site, stats, studioStills } from "@/content/site";
+import {
+  filmography,
+  projects,
+  services,
+  site,
+  stats,
+  studioStills,
+} from "@/content/site";
 
 const pipeline = [
-  { step: "Breakdown", body: "Script and plate breakdowns, bids and a shot list everyone agrees on." },
-  { step: "Build", body: "Assets, creatures and environments, approved in context, not in isolation." },
-  { step: "Shot", body: "Artists work in tracked versions, reviewed daily on our own review platform." },
-  { step: "QC", body: "Renders are checked automatically for frame range, bad pixels and colour space before a human signs off." },
-  { step: "Deliver", body: "Spec-correct, frame-accurate deliveries with full shot metadata." },
+  {
+    step: "Breakdown",
+    body: "Script and plate breakdowns, bids and a shot list everyone agrees on.",
+  },
+  {
+    step: "Build",
+    body: "Assets, creatures and environments, approved in context, not in isolation.",
+  },
+  {
+    step: "Shot",
+    body: "Artists work in tracked versions, reviewed daily on our own review platform.",
+  },
+  {
+    step: "QC",
+    body: "Renders are checked automatically for frame range, bad pixels and colour space before a human signs off.",
+  },
+  {
+    step: "Deliver",
+    body: "Spec-correct, frame-accurate deliveries with full shot metadata.",
+  },
 ];
 
 export default function Home() {
@@ -18,52 +40,67 @@ export default function Home() {
     <>
       <Hero />
 
-      {/* Selected work */}
-      <section id="work" className="mx-auto max-w-7xl px-5 py-24 md:px-8 md:py-36">
-        <SectionLabel index="01">Selected work</SectionLabel>
-        <div className="grid gap-x-8 gap-y-16 md:grid-cols-2">
-          {projects.slice(0, 4).map((p, i) => (
-            <Reveal key={p.slug} delay={(i % 2) * 120} className={i % 2 === 1 ? "md:mt-24" : ""}>
-              <ProjectCard project={p} />
-            </Reveal>
-          ))}
-        </div>
-      </section>
-
       {/* Filmography */}
-      <section id="filmography" className="border-t border-line">
+      <section id="filmography">
         <div className="mx-auto max-w-7xl px-5 py-24 md:px-8 md:py-36">
-          <SectionLabel index="02">Filmography</SectionLabel>
+          <SectionLabel index="01">Filmography</SectionLabel>
           <div className="mb-14 flex flex-col gap-6 md:flex-row md:items-end md:justify-between">
             <Reveal>
               <h2 className="max-w-3xl font-display text-4xl leading-tight font-thin uppercase md:text-6xl">
-                {filmography.length} titles. <span className="font-light">Seen</span> across the world.
+                {filmography.length} titles.{" "}
+                <span className="font-light">Seen</span> across the world.
               </h2>
             </Reveal>
             <p className="max-w-sm text-sm leading-relaxed text-muted">
-              Visual effects for features and series from South Africa and Nigeria, released in cinemas and on
-              Netflix, Prime Video, M-Net and kykNET.
+              Visual effects for features and series from South Africa and
+              Nigeria, released in cinemas and on Netflix, Prime Video, M-Net
+              and kykNET.
             </p>
           </div>
           <Filmography />
         </div>
       </section>
 
+      {/* Selected work */}
+      <section id="work" className="border-t border-line">
+        <div className="mx-auto max-w-7xl px-5 py-24 md:px-8 md:py-36">
+          <SectionLabel index="02">Selected work</SectionLabel>
+          <div className="grid gap-x-8 gap-y-16 md:grid-cols-2">
+            {projects.slice(0, 4).map((p, i) => (
+              <Reveal
+                key={p.slug}
+                delay={(i % 2) * 120}
+                className={i % 2 === 1 ? "md:mt-24" : ""}
+              >
+                <ProjectCard project={p} />
+              </Reveal>
+            ))}
+          </div>
+        </div>
+      </section>
+
       {/* Services */}
       <section id="services" className="border-t border-line bg-ink-2">
         <div className="mx-auto max-w-7xl px-5 py-24 md:px-8 md:py-36">
           <SectionLabel index="03">Services</SectionLabel>
           <Reveal>
             <h2 className="max-w-4xl font-display text-4xl leading-tight font-thin uppercase md:text-6xl">
-              From photoreal <span className="text-accent">VFX</span> to stylised animation.
+              From photoreal <span className="text-accent">VFX</span> to
+              stylised animation.
             </h2>
           </Reveal>
           {services.map((g) => (
             <div key={g.group} className="mt-16">
-              <h3 className="mb-6 font-mono text-xs tracking-[0.3em] text-accent uppercase">{g.group}</h3>
+              <h3 className="mb-6 font-mono text-xs tracking-[0.3em] text-accent uppercase">
+                {g.group}
+              </h3>
               <div className="grid grid-cols-2 gap-px bg-line md:grid-cols-3 [&>*:last-child:nth-child(odd)]:col-span-2 md:[&>*:last-child:nth-child(odd)]:col-span-1">
                 {g.items.map((s, i) => (
-                  <Reveal key={s.title} delay={(i % 3) * 80} className="bg-ink-2">
+                  <Reveal
+                    key={s.title}
+                    delay={(i % 3) * 80}
+                    className="bg-ink-2"
+                  >
                     <div className="group relative aspect-[16/9] overflow-hidden md:aspect-[2.2/1]">
                       {/* eslint-disable-next-line @next/next/no-img-element */}
                       <img
@@ -86,7 +123,10 @@ export default function Home() {
       </section>
 
       {/* Studio / pipeline */}
-      <section id="studio" className="mx-auto max-w-7xl px-5 py-24 md:px-8 md:py-36">
+      <section
+        id="studio"
+        className="mx-auto max-w-7xl px-5 py-24 md:px-8 md:py-36"
+      >
         <SectionLabel index="04">Studio</SectionLabel>
         <div className="grid gap-16 lg:grid-cols-2">
           <Reveal>
@@ -96,19 +136,27 @@ export default function Home() {
             </h2>
             <div className="mt-8 space-y-5 text-base leading-relaxed text-muted md:text-lg">
               <p>
-                Founded in {site.founded} in Pretoria as Two Tales Animation, we bring stories to life with
-                creativity, technology and a passion for visual storytelling, from photoreal creatures and
+                Founded in {site.founded} in Pretoria as Two Tales Animation, we
+                bring stories to life with creativity, technology and a passion
+                for visual storytelling, from photoreal creatures and
                 simulations to stylised character animation.
               </p>
               <p>
-                We&apos;re small on purpose: senior artists, direct lines to supervisors, and an in-house pipeline
-                for review, shot tracking and automated QC that lets a tight team deliver like a big one.
+                We&apos;re small on purpose: senior artists, direct lines to
+                supervisors, and an in-house pipeline for review, shot tracking
+                and automated QC that lets a tight team deliver like a big one.
               </p>
             </div>
             <div className="mt-10 grid grid-cols-2 gap-2">
               {studioStills.map((src) => (
                 // eslint-disable-next-line @next/next/no-img-element
-                <img key={src} src={src} alt="" loading="lazy" className="aspect-[2.39/1] w-full object-cover" />
+                <img
+                  key={src}
+                  src={src}
+                  alt=""
+                  loading="lazy"
+                  className="aspect-[2.39/1] w-full object-cover"
+                />
               ))}
             </div>
           </Reveal>
@@ -118,10 +166,16 @@ export default function Home() {
                 <li className="relative pb-10 pl-10 last:pb-0">
                   <span className="absolute top-1.5 -left-[5px] h-[9px] w-[9px] rotate-45 bg-accent" />
                   <div className="flex items-baseline gap-4">
-                    <span className="font-mono text-xs text-muted">{String(i + 1).padStart(2, "0")}</span>
-                    <h3 className="font-display text-xl font-light tracking-[0.15em] uppercase">{p.step}</h3>
+                    <span className="font-mono text-xs text-muted">
+                      {String(i + 1).padStart(2, "0")}
+                    </span>
+                    <h3 className="font-display text-xl font-light tracking-[0.15em] uppercase">
+                      {p.step}
+                    </h3>
                   </div>
-                  <p className="mt-2 text-sm leading-relaxed text-muted">{p.body}</p>
+                  <p className="mt-2 text-sm leading-relaxed text-muted">
+                    {p.body}
+                  </p>
                 </li>
               </Reveal>
             ))}
@@ -130,16 +184,26 @@ export default function Home() {
 
         <div className="mt-24 grid grid-cols-2 border-t border-line md:grid-cols-4">
           {stats.map((s) => (
-            <div key={s.label} className="border-b border-line py-10 pr-6 md:border-b-0">
-              <p className="font-display text-5xl font-thin md:text-6xl">{s.value}</p>
-              <p className="mt-3 font-mono text-[11px] tracking-[0.2em] text-muted uppercase">{s.label}</p>
+            <div
+              key={s.label}
+              className="border-b border-line py-10 pr-6 md:border-b-0"
+            >
+              <p className="font-display text-5xl font-thin md:text-6xl">
+                {s.value}
+              </p>
+              <p className="mt-3 font-mono text-[11px] tracking-[0.2em] text-muted uppercase">
+                {s.label}
+              </p>
             </div>
           ))}
         </div>
       </section>
 
       {/* Contact */}
-      <section id="contact" className="relative overflow-hidden border-t border-line">
+      <section
+        id="contact"
+        className="relative overflow-hidden border-t border-line"
+      >
         <div
           className="pointer-events-none absolute -bottom-1/2 left-1/2 h-[80vmax] w-[80vmax] -translate-x-1/2 rounded-full bg-[radial-gradient(circle,rgb(232_87_42/0.14),transparent_60%)]"
           aria-hidden="true"
@@ -155,7 +219,8 @@ export default function Home() {
               to tell?
             </h2>
             <p className="mx-auto mt-8 max-w-lg text-muted md:text-lg">
-              Send us a script, a breakdown or just an idea. We&apos;ll come back with a plan and a bid.
+              Send us a script, a breakdown or just an idea. We&apos;ll come
+              back with a plan and a bid.
             </p>
             <a
               href={`mailto:${site.email}?subject=New%20project%20enquiry`}
diff --git a/app/work/page.tsx b/app/work/page.tsx
index da040de..f4c895a 100644
--- a/app/work/page.tsx
+++ b/app/work/page.tsx
@@ -17,18 +17,21 @@ export default function WorkPage() {
       <h1 className="font-display text-6xl leading-[0.9] font-thin uppercase md:text-9xl">
         Selected <span className="font-light">work</span>
       </h1>
-      <div className="mt-20 grid gap-x-8 gap-y-16 md:grid-cols-2">
-        {projects.map((p, i) => (
-          <Reveal key={p.slug} delay={(i % 2) * 120}>
-            <ProjectCard project={p} />
-          </Reveal>
-        ))}
-      </div>
-
-      <section id="filmography" className="mt-32 border-t border-line pt-20 md:mt-44">
+      <section id="filmography" className="mt-20">
         <SectionLabel index="—">Filmography</SectionLabel>
         <Filmography />
       </section>
+
+      <section id="projects" className="mt-32 border-t border-line pt-20 md:mt-44">
+        <SectionLabel index="—">Projects</SectionLabel>
+        <div className="grid gap-x-8 gap-y-16 md:grid-cols-2">
+          {projects.map((p, i) => (
+            <Reveal key={p.slug} delay={(i % 2) * 120}>
+              <ProjectCard project={p} />
+            </Reveal>
+          ))}
+        </div>
+      </section>
     </div>
   );
 }
diff --git a/content/site.ts b/content/site.ts
index ddf321a..75c2fa3 100644
--- a/content/site.ts
+++ b/content/site.ts
@@ -23,8 +23,8 @@ export const site = {
 };
 
 export const nav = [
-  { label: "Work", href: "/work/" },
   { label: "Filmography", href: "/#filmography" },
+  { label: "Work", href: "/work/" },
   { label: "Services", href: "/#services" },
   { label: "Contact", href: "/#contact" },
 ];