activ projects, and move logos to home

Author: tingeber

.pages.yml

@@ -201,6 +201,10 @@ components:
               name: gray
             - label: Gradient
               name: gradient
+            - label: Phase Gradient
+              name: phase-gradient
+            - label: Phase Gradient (light)
+              name: phase-gradient-light
         default: white
       - name: bgType
         label: Type
@@ -323,6 +327,20 @@ components:
         type: string
         description: Optional intro text shown above the interactive filter.
 
+  active_projects_section:
+    type: object
+    fields:
+      - name: background
+        label: Section Background
+        component: background_select
+      - name: title
+        label: Title
+        type: string
+      - name: description
+        label: Description
+        type: string
+        description: Optional intro text shown above the list of active project titles.
+
   projects_roll_section:
     type: object
     fields:
@@ -574,6 +592,10 @@ content:
             label: Projects Filter Grid
             component: projects_filter_grid_section
 
+          - name: activeProjects
+            label: Active Projects (titles only)
+            component: active_projects_section
+
           - name: phasesOverview
             label: Phases Overview
             component: phases_overview_section

src/components/sections/ActiveProjectsSection.astro

@@ -0,0 +1,46 @@
+---
+import Heading from '@components/atoms/Heading.astro';
+import Text from '@components/atoms/Text.astro';
+import { getProjects } from '@utils/projects';
+
+export interface Props {
+  title?: string;
+  description?: string;
+}
+
+const { title, description } = Astro.props;
+
+const allProjects = await getProjects();
+const activeProjects = allProjects.filter(
+  (p) => p.data.projectStatus === 'active'
+);
+---
+
+{
+	activeProjects.length > 0 && (
+		<div class="relative left-1/2 -ml-[50vw] w-screen px-4 py-12 text-cream sm:px-6 md:py-16 lg:px-10">
+			{title && (
+				<Heading level={4} class="mb-3 text-cream">
+					{title}
+				</Heading>
+			)}
+			{description && (
+				<Text size="lg" class="mb-6 max-w-2xl text-cream/90">
+					{description}
+				</Text>
+			)}
+			<ul class="flex flex-col gap-y-2 text-2xl font-semibold md:text-3xl lg:text-4xl">
+				{activeProjects.map((project) => (
+					<li>
+						<a
+							href={`/work/${project.data.slug}`}
+							class="text-cream hover:text-white"
+						>
+							<h2 class="link-brackets">{project.data.name}</h2>
+						</a>
+					</li>
+				))}
+			</ul>
+		</div>
+	)
+}

src/components/sections/OrganisationsRollSection.astro

@@ -34,7 +34,7 @@ const orgsWithLogos = orgs.filter((o) => o.data.image);
   )}
 
   {orgsWithLogos.length > 0 ? (
-    <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
+    <div class="grid grid-cols-2 gap-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
       {orgsWithLogos.map((org) => {
         const imgSrc = typeof org.data.image === 'string' ? org.data.image : org.data.image!.src;
         const tile = (
@@ -44,7 +44,7 @@ const orgsWithLogos = orgs.filter((o) => o.data.image);
               alt={org.data.name}
               title={org.data.name}
               loading="lazy"
-              class="absolute inset-0 h-full w-full object-contain p-4"
+              class="absolute inset-0 h-full w-full object-contain p-6 md:p-8"
             />
           </div>
         );

src/components/sections/Sections.astro

@@ -1,4 +1,5 @@
 ---
+import ActiveProjectsSection from '@components/sections/ActiveProjectsSection.astro';
 import ButtonSection from '@components/sections/ButtonSection.astro';
 import CalEmbedSection from '@components/sections/CalEmbedSection.astro';
 import CardSection from '@components/sections/CardSection.astro';
@@ -51,7 +52,6 @@ const { sectionItems } = Astro.props;
         case 'richText':
           return (
             <RichTextSection
-              background={section.background}
               content={section.content}
               withTOC={section.withTOC}
             />
@@ -97,6 +97,13 @@ const { sectionItems } = Astro.props;
               description={section.description}
             />
           );
+        case 'activeProjects':
+          return (
+            <ActiveProjectsSection
+              title={section.title}
+              description={section.description}
+            />
+          );
         case 'phasesOverview':
           return (
             <PhasesOverviewSection

src/content/config.ts

@@ -140,6 +140,11 @@ const pagesCollection = defineCollection({
         filterModality: modalitySlugSchema.optional(),
         featuredOnly: z.boolean().optional().default(false),
       }),
+      SectionCommonSchema.extend({
+        type: z.literal('activeProjects'),
+        title: z.string().optional(),
+        description: z.string().optional(),
+      }),
       SectionCommonSchema.extend({
         type: z.literal('phasesOverview'),
         title: z.string().optional(),

src/content/pages/about.yaml

@@ -27,8 +27,6 @@ sections:
   - type: skills
     title: What we do
     description: "The skills we bring to every engagement."
-  - type: organisationsRoll
-    title: Organisations we work with
   - type: richText
     content: >-
       ### Open Technology Fund pro bono support

src/content/pages/home.yaml

@@ -7,6 +7,11 @@ sections:
   #   title: How we work
   #   description: "The framework below maps what we do across two dimensions: the phase of your project, and the way we show up."
   #   showProjects: true
+  - type: activeProjects
+    title: Active projects
+    background:
+      bgColor: phase-gradient
+      bgType: full
   - type: richText
     content: >-
       Projects rarely move in a straight line, and neither do we. You might engage us at any phase, for any modality, or across several at once.
@@ -21,3 +26,5 @@ sections:
         size: lg
         href: /get-in-touch
         text: Get in touch
+  - type: organisationsRoll
+    title: Organisations we work with

src/layouts/SectionLayout.astro

@@ -43,6 +43,8 @@ const backgrounds = {
   white: 'bg-white',
   gray: 'bg-gray-50',
   gradient: 'bg-gradient-to-br from-blue-50 to-indigo-100',
+  'phase-gradient': 'gradient-phase',
+  'phase-gradient-light': 'gradient-phase-light',
 };
 
 const bgClass = backgrounds[bgColor as keyof typeof backgrounds] || "";

src/styles/typography.css

@@ -27,14 +27,14 @@
     linear-gradient(currentColor, currentColor),
     linear-gradient(currentColor, currentColor);
   background-size:
-    0 2px,
-    2px 0,
-    0 2px,
-    2px 0,
-    0 2px,
-    2px 0,
-    0 2px,
-    2px 0;
+    0 0.1em,
+    0.1em 0,
+    0 0.1em,
+    0.1em 0,
+    0 0.1em,
+    0.1em 0,
+    0 0.1em,
+    0.1em 0;
   background-position:
     top left,
     top left,
@@ -53,14 +53,14 @@
   &.is-active,
   &[aria-current='page'] {
     background-size:
-      0.5em 2px,
-      2px 0.5em,
-      0.5em 2px,
-      2px 0.5em,
-      0.5em 2px,
-      2px 0.5em,
-      0.5em 2px,
-      2px 0.5em;
+      0.3em 0.1em,
+      0.1em 0.3em,
+      0.3em 0.1em,
+      0.1em 0.3em,
+      0.3em 0.1em,
+      0.1em 0.3em,
+      0.3em 0.1em,
+      0.1em 0.3em;
   }
 }