Made by ON Agency Portfolio

Overview

Made by ON is a sophisticated agency portfolio that leverages a high-contrast dark theme and cinematic video backgrounds to establish professional authority. It serves as a premier reference for builders looking to implement "low-light" luxury aesthetics combined with high-performance video-centric layouts.

Design System

• Color Palette & Visual Hierarchy: The site uses a deep matte black (#000) background with an electric lime-yellow accent (#DCFF4F) for primary actions and the cookie notice. Text hierarchy is established through off-white (#FAF9F4) body copy and oversized headings, creating a clear focus on brand messaging.
• Typography: A bold, wide-set sans-serif is used for display headings (H1/H2), while a standard-weight sans-serif handles utility and body text. The large scale of the header "Shaping the future of digital experiences" dominates the viewport to anchor the page.
• Page Structure: The flow moves from a text-column hero to a large-scale video container, followed by a double-column text summary, a logo marquee, and a vertical grid of high-impact case study cards. It concludes with horizontal-scrolling testimonial carousels.
• Reusable Components:
  • The Logo Marquee: A CSS-driven infinite loop (marqueeTrack) containing SVG partner logos.
  • Case Study Cards: The CaseCard component uses a full-bleed video or image with a title and description overlay, including a specialized animated dot transition (primaryDot).
  • Testimonial Carousel: Multi-row horizontal tracks (TestimonialsCarousel__track) that scroll in opposite directions, perfect for displaying social proof.
• Interaction & Motion: Based on HTML attributes like data-button-anim-init, the site features sophisticated entry animations for lists and buttons. The primary CTA buttons use a character-by-character animation on hover.
• Implementation Clues: The site is built with Astro, indicated by astro-island components and astro-transition-scope attributes, suggesting a focus on static performance despite the heavy video content.

Use Cases

• Digital Agencies & Creative Studios: The project-centric layout with video previews is ideal for showcasing visual work like motion design, UI/UX, or branding.
• SaaS & Product Portfolios: High-growth startups can remix the logo marquee and the dual-scrolling testimonial sections to build rapid credibility.
• Remix Directions: Swap the electric lime accent for a brand-specific primary color (e.g., deep blue or vibrant orange) to immediately pivot the mood. The horizontal testimonial tracks can be extracted as a standalone section for landing pages.
• Suggested Clone Scope: Start by cloning the CaseCard grid for portfolio pages, as it provides a clean, scalable way to feature work without complex layouts. Use the full-page structure if you require a high-end, "pitch-deck" style landing page.