Developed for Sullivan

Two Sigma

Two Sigma is a New York-based hedge fund known for applying scientific and engineering principles to finance. I led the front end of their corporate site for three years, through a third-party WCAG 2.1 AA audit and the component work below.

Role
Front-end development (design by Sullivan)
Stack
JavaScript · Three.js · GSAP · SCSS · Twig · WordPress
Built
3D hero with per-letter video textures and a CSS-transform mobile fallback; entity templates for four business lines; team and project grid filtered client-side against the WordPress REST API; article hub; scroll-triggered metrics counter; timeline accordion; event template
Notes
Remediated to pass a third-party WCAG 2.1 AA audit (Allyant). Site-wide animation control — one switch pauses every animation on the site (WCAG 2.2.2)

Third-Party Accessibility Audit

Two Sigma brought in Allyant to audit the site against WCAG 2.1 AA. They filed findings ranked by severity; I worked through the front-end remediation and sent each fix back for re-review until the site passed.

Global Controls

The audit’s motion findings could have been fixed animation by animation. Instead I built one control that every animated component on the site subscribes to — pause it once and everything stops. That’s WCAG 2.2.2 (Pause, Stop, Hide) answered as shared infrastructure rather than a patch per component. The trigger sits in the corner of every page and explains itself on hover.

Everything we built afterward was wired into it from day one — including the 3D hero below, which came after the audit had closed.

The homepage at desktop width:

Closed — the trigger is the + in the corner. Captured 2025.

A crop of that corner with the button's label showing:

Hovering explains it.

The panel open: a

Clicking reveals the panel.

Financial Sciences

I built the homepage hero in Three.js: the word “Sciences” is eight 3D letterforms, each carrying a video texture. A default video plays across all eight. Hovering a letter switches every letter to that letter’s video, and flips the hovered one so the video plays on its reverse face. The headline stays in the DOM as real text behind the canvas.

Financial Sciences – Mobile

For mobile the team proposed simplifying the hero into a cube — lighter to render and easier to read at that size. I built it with CSS transforms instead of Three.js: a video mapped to each of four sides, rotating as you swipe up or down, with a short swing animation on load to signal that it moves.

The same page on a phone with the Global Controls panel open over the hero, showing that pause and transcript are there at narrow widths too.

Entity Template

Two Sigma’s business lines — Sightway Capital, Real Estate, Ventures — each needed a presence of their own without becoming separate sites. We built one entity template system: each entity gets its own article archive, team page, and layout options, pulling its own articles, team members, and search results while inheriting the parent brand.

One of the sub-brand sites, Data Clinic: its own logo and navigation above the shared page grid — a headline, a three-column illustrated row, and a call to action.
Two Sigma Ventures on the same template: a two-tier navigation carrying both the parent and the sub-brand, a dismissible announcement bar, a grid of portfolio logos, and a row of article cards.

Patchwork Grid

A grid of team members and projects, filterable by role, office, or project type. I built it in vanilla JavaScript against the WordPress REST API (/wp-json/wp/v2/), so filtering never reloads the page; clicking a tile opens the full detail in place.

The team grid with filtering open: a Role menu, the chosen filters shown as removable chips with a clear-all link, and one tile expanded in place below its row into a panel with a biography, a photo, and a close button.

Article Hub

The hub surfaces featured and latest articles, filterable by topic and publisher. Its topic navigation is server-rendered — each filter is a taxonomy term page, so every view has a URL of its own that can be linked and shared. The patchwork grid needed the opposite: filtering with no page load at all. Same site, two different problems.

The Insights hub: a row of topic links, a search field, a featured group of one large and three smaller articles, and a carousel of recent pieces above a research listing.
The same hub under a sub-brand, Two Sigma Impact: its own logo, navigation, and search, a diagonal photo collage, and the identical featured-and-listing layout below.

Scrolling Data Component

Key metrics — employees, data sources, servers — count up when they scroll into view. The numbers are CMS fields, so the same component runs anywhere on the site with new values and no code change.

The scrolling data band: large figures at different sizes overlapping across the viewport, each with its own caption, and a round advance button in the bottom-left corner.

Timeline Accordion

Time-stamped entries that expand in place, each holding text, images, and linked articles. Editors add and reorder them in the CMS.

The timeline with one entry open: time-stamped rows alternating text and photography, each with a plus toggle, and the expanded entry showing its paragraph and media above a close button.