diff --git a/src/sections/TechnologyEcosystemSection.tsx b/src/sections/TechnologyEcosystemSection.tsx
new file mode 100644
index 0000000..16dd6bc
--- /dev/null
+++ b/src/sections/TechnologyEcosystemSection.tsx
@@ -0,0 +1,205 @@
+"use client";
+
+import { useState } from "react";
+import { motion } from "framer-motion";
+
+type Technology = {
+ name: string;
+ description: string;
+ logo?: string;
+};
+
+const technologies: Technology[] = [
+ { name: "OpenAI", logo: "https://upload.wikimedia.org/wikipedia/commons/0/04/ChatGPT_logo.svg", description: "Advanced language models" },
+ { name: "Anthropic", logo: "https://cdn.simpleicons.org/anthropic", description: "Constitutional AI assistant" },
+ { name: "AWS", logo: "https://www.vectorlogo.zone/logos/amazon_aws/amazon_aws-icon.svg", description: "Cloud platform" },
+ { name: "Docker", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/docker/docker-original.svg", description: "Containerization" },
+ { name: "Google Cloud", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/googlecloud/googlecloud-original.svg", description: "AI/ML services" },
+ { name: "Kubernetes", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/kubernetes/kubernetes-plain.svg", description: "Orchestration" },
+ { name: "LangChain", logo: "https://cdn.simpleicons.org/langchain", description: "LLM application framework" },
+ { name: "Microsoft Azure", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/azure/azure-original.svg", description: "Enterprise cloud" },
+ { name: "MongoDB", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original.svg", description: "Document database" },
+ { name: "Vercel", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vercel/vercel-original.svg", description: "Frontend cloud platform" },
+ { name: "Node.js", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg", description: "Server runtime" },
+ { name: "PostgreSQL", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg", description: "Relational database" },
+ { name: "Python", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg", description: "AI/ML backend" },
+ { name: "React", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg", description: "UI framework" },
+ { name: "Slack", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/slack/slack-original.svg", description: "Team integration" },
+ { name: "Supabase", logo: "https://supabase.com/dashboard/img/supabase-logo.svg", description: "Postgres & vector storage" },
+ { name: "Tailwind CSS", logo: "https://www.vectorlogo.zone/logos/tailwindcss/tailwindcss-icon.svg", description: "Utility-first CSS" },
+ { name: "TypeScript", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg", description: "Type-safe JavaScript" },
+ { name: "Vite", logo: "https://vitejs.dev/logo.svg", description: "Next-gen frontend tooling" },
+ { name: "Microsoft Teams", logo: "https://upload.wikimedia.org/wikipedia/commons/9/94/Microsoft_Office_Teams_%282019%E2%80%932025%29.svg", description: "Team collaboration" },
+ { name: "Zoho", logo: "https://cdn.simpleicons.org/zoho", description: "Business apps suite" },
+];
+
+const firstRowTechnologies = technologies.slice(0, 11);
+const secondRowTechnologies = technologies.slice(11);
+
+// A single logo card: theme-aware surface (white in light, an elevated muted
+// gray in dark) with a constant white logo chip so near-black brand marks stay
+// legible in both themes, a green-tinted initials fallback when no logo is
+// provided or the remote logo 404s, and a hover tooltip carrying the one-line
+// description. The tech name is always rendered as visible text so information
+// is never carried by the tooltip alone. Tiles are kept small and dense so two
+// rows of marks read as a quiet logo ticker rather than a heavy grid.
+//
+// The fallback is driven by a client `failed` flag rather than DOM mutation so
+// it survives SSR: a logo that 404s during server render (before hydration)
+// would otherwise paint a broken-image glyph because `onError` never fires on
+// the server. The `ref` callback below catches an already-failed image on
+// mount (`complete && naturalWidth === 0`) and `onError` catches future
+// failures — either path degrades cleanly to the initials box.
+const TechCard = ({
+ tech,
+ duplicate = false,
+ className = "",
+}: {
+ tech: Technology;
+ duplicate?: boolean;
+ className?: string;
+}) => {
+ const initials = tech.name.substring(0, 2).toUpperCase();
+ const [failed, setFailed] = useState(false);
+
+ return (
+
+
+ );
+};
+
+export default TechnologyEcosystemSection;
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 01acbcf..6bc1c8c 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -79,6 +79,9 @@ const config: Config = {
"pulse-grow-shrink": "pulse-grow-shrink 2s infinite",
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
+ "tech-ecosystem-scroll": "tech-ecosystem-scroll 54s linear infinite",
+ "tech-ecosystem-scroll-reverse":
+ "tech-ecosystem-scroll-reverse 48s linear infinite",
},
keyframes: {
fadeIn: {
@@ -97,6 +100,14 @@ const config: Config = {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: "0" },
},
+ "tech-ecosystem-scroll": {
+ from: { transform: "translateX(0)" },
+ to: { transform: "translateX(-50%)" },
+ },
+ "tech-ecosystem-scroll-reverse": {
+ from: { transform: "translateX(-50%)" },
+ to: { transform: "translateX(0)" },
+ },
},
transitionDelay: {
"500": "500ms",
+
+ );
+};
+
+// One scrolling carousel row. The rail is the row's techs duplicated so the
+// CSS keyframes can translate exactly one set's width (-50%) for a seamless
+// loop. Inter-card spacing is a per-card right margin (mr-3) rather than a
+// flex gap, so the duplicated set is an exact 50% of the rail and -50% lands
+// precisely on the seam (a flex gap would leave the loop half a gap short and
+// jump every cycle). The duplicated half is aria-hidden and hidden under
+// reduced motion, where the row collapses to a static wrapped layout (gap-y-4
+// restores the vertical rhythm the removed flex gap used to provide). Hovering
+// the rail pauses the animation. The row uses overflow-x-clip (not
+// overflow-hidden) for the horizontal mask; the extra top padding gives the
+// -top-9 tooltip room to render within the box.
+const TechCarouselRow = ({
+ technologies: rowTechnologies,
+ reverse = false,
+}: {
+ technologies: Technology[];
+ reverse?: boolean;
+}) => {
+ const rail = [...rowTechnologies, ...rowTechnologies];
+
+ return (
+
+ {tech.logo && !failed ? (
+ // Constant white chip keeps near-black brand marks legible on the
+ // dark card surface; this tile never flips theme.
+
+ {/* Tooltip (enhancement only — the name above is the source of truth) */}
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+ 
setFailed(true)}
+ ref={(node) => {
+ if (node && node.complete && node.naturalWidth === 0) {
+ setFailed(true);
+ }
+ }}
+ />
+
+ ) : (
+
+ {initials}
+
+ )}
+
+ {tech.name}
+
+
+ {tech.description}
+
+
+
+ );
+};
+
+const TechnologyEcosystemSection = () => {
+ return (
+
+ {rail.map((tech, index) => (
+ = rowTechnologies.length}
+ className="mr-3"
+ />
+ ))}
+
+
+ {/* Header */}
+
+
+
+ {/* Panel */}
+
+
+
+ + Technologies +
++ Our Technology Ecosystem +
++ From agent runtimes to production infrastructure, Mifune builds + across the modern AI engineering ecosystem. +
+
+
+