Multi-Discipline Portfolio Portfolio Website Template

Quick summary

Synth is a single-page bento grid template for creative technologists who operate at the intersection of code, machine learning, and spatial design. It opens with a particle-assembly animation, unfolds project work through a cinematic scroll, and closes with two clear conversion paths. The design vocabulary is dark, iridescent, and unmistakably alive.

Who this template is for

This template is built for practitioners whose work resists a standard portfolio format. It suits people whose output spans disciplines and whose clients expect a visual statement before reading a single word.

• Solo creative technologists working across installations, brand experiences, and digital products
• Multidisciplinary makers who blend generative code, machine learning pipelines, and spatial computing
• Independent practitioners pitching innovation leads, creative directors, and museum curators

What problem this template solves

Most portfolio layouts were designed for a single medium. A creative technologist who moves between PyTorch pipelines and physical installations has no natural home in a photography grid or a case-study blog. Synth solves that directly.

• Generic templates flatten complex, multidisciplinary work into uniform tiles that lose technical depth
• Standard layouts cannot communicate the sensory quality of immersive installation or real-time generative work
• Light, minimal designs signal the wrong kind of studio to clients who fund bold, experimental commissions

What you get with this template

You get a fully structured landing page designed to carry immersive, technically complex creative work. Every component in the layout was specified for the creative technologist brief, not adapted from a general-purpose theme.

• An animated header illustration where a half-human, half-data figure assembles itself from floating code particles
• A scroll-driven bento grid with hover-activated muted video loops per project card
• Two "Start a Conversation" call-to-action placements and a secondary "Download Case Deck" email capture path

Feature list

This section covers the core components that define what Synth delivers as a ready-to-use landing page.

Particle Assembly Header Animation

The header opens on a dark canvas. A luminous figure builds itself from floating vertices and gradient meshes in a slow, biological sequence. The figure turns toward the viewer just as the tagline settles into wide-tracked type, creating a thirty-second proof of craft before a word is read.

Cinematic Bento Grid Layout

Project cards reveal themselves one cell at a time as the visitor scrolls. Hero cases span two columns; quick experiments occupy tighter squares. Each card auto-plays a muted video loop on hover, letting the work speak without interruption.

Living Hue-Shift Scroll Background

As the visitor scrolls deeper into the grid, the background shifts gradually from violet through cyan into pink. The transition is subtle and tied to scroll depth, creating the impression that the page is responding to attention.

Interconnected Capabilities Diagram

Disciplines such as creative code, machine learning pipelines, spatial computing, and rapid prototyping are laid out as interconnected nodes in a living diagram. This replaces a static skills list with something that communicates how the practices relate to each other.

Dual Conversion Architecture

The primary call to action, "Start a Conversation," appears twice: once floating after the third grid row and once in a full-width closing section. Clicking either opens an inline form asking for company name, project description, estimated timeline, and an optional brief upload.

Email Capture for Research-Phase Leads

A secondary path labeled "Download Case Deck" captures email addresses from visitors who are not ready to start a conversation. This gives the template two distinct conversion lanes for two distinct buyer states.

Page sections overview

Design & branding system

The design language is built around a single premise: darkness that becomes prismatic when it moves. Every color and typographic choice reinforces the feeling of bioluminescence surfacing from deep water.

• Backgrounds use void black (#09090B) and deep graphite (#16161A); shifting violet (#7B61FF) and liquid cyan (#00F0FF) carry accent weight across card borders, cursor trails, and loading states
• Hot iridescent pink (#FF2D9B) is reserved for hover states and micro-interactions, keeping it rare enough to feel like a reward
• Body text renders in cool off-white (#E4E4E7); headings use clean, wide-tracked type that lands with cinematic timing

Mobile & speed optimization

The bento grid and animation sequence are designed with responsive behavior in mind. The layout adapts so the immersive quality holds across screen sizes without requiring the full desktop canvas.

• Card grid columns reflow for smaller screens, keeping hero cases visually dominant on mobile viewports
• Muted video loops on project cards are triggered by hover on desktop and by scroll-entry on touch devices
• The particle animation in the header is designed to be deliberate and paced, avoiding unnecessary rendering complexity on lower-powered devices

How this template helps you convert

Synth earns the click by building trust through evidence before presenting any ask. The layout is sequenced like a film, not a brochure, so the visitor arrives at the call to action already convinced.

1. The header animation establishes technical range in the first thirty seconds, before any claim is made in text
2. The bento grid with live project loops lets the work itself create urgency, so the "Start a Conversation" form feels like a natural next step rather than a sales prompt
3. The dual-path conversion structure handles two buyer states at once: ready-to-brief clients go to the inline form, while research-phase prospects are captured through the case deck email gate

Other information about this template

Synth sits within the Portfolio and Agency category, specifically the Multi-Discipline Portfolio subcategory, with a niche focus on the creative technologist use case. It is designed for Partnership and Business-to-Business conversion contexts where the client relationship begins with a brief, not a transaction.

• The template style is a bento grid, which supports varied card sizing and mixed media presentation within a single coherent layout
• The creative direction is a cinematic sequence, meaning scroll pacing and reveal timing are core to how the content lands
• The header concept is an animated illustration, not a photograph or static graphic, making it appropriate for practitioners who want to signal generative and motion craft from the first frame
• The AI iridescent color system and Dark Immersive theme work together to position the practitioner in the premium, experimental end of the creative technology market

Show more