A fictional photographer portfolio with Spider-Man theming. The site is both the portfolio and the portfolio piece — a meta-design that proves capability through the experience itself.
A concept portfolio that would serve as both a showcase and a demonstration of advanced web animation capability. The Peter Parker character — photographer by day, web developer by night — was the perfect vehicle.
The brief we set for ourselves: build a portfolio site where the site itself is the strongest portfolio piece. Not a container for screenshots, but a living demonstration. Every scroll interaction, every animation, every design decision would prove the developer's skill more than any thumbnail ever could.
Target audience: agencies and clients evaluating web developers. The kind of people who've seen a thousand portfolio sites and need something that stops them scrolling.
Dark cinematic NYC night aesthetic. We wanted the site to feel like swinging through Manhattan at midnight — moody, kinetic, alive. Spider-Man's red (#e74c3c) as the only accent color. Everything else is monochrome. This creates instant visual identity with maximum restraint.
The frame scrub hero makes visitors physically interact with the work. Instead of watching a reel, they control it. The scroll becomes the interface, and the animation becomes the proof of capability.
Daily Bugle article cards as an editorial portfolio grid — each project presented as a newspaper front page. This ties the Spider-Man universe into the UX while giving the portfolio a distinctive format no other developer site uses.
1. The site IS the work. Meta-design that demonstrates capability through the experience, not just screenshots.
2. One accent, total restraint. Spider-Man red (#e74c3c) is the only color. Everything else is black, white, and grey. The red hits harder because of the restraint.
3. Scroll as interaction. The frame scrub hero turns passive browsing into active engagement. Visitors remember what they physically controlled.
4. Editorial over grid. Daily Bugle cards give each project a narrative frame, not just a thumbnail in a masonry layout.
Bright superhero colors, comic-book pop art, playful cartoon aesthetics. The temptation with a Spider-Man theme is to go full Marvel. We went the opposite — dark, cinematic, grounded. More Christopher Nolan than Saturday morning cartoons.
We also rejected the standard portfolio pattern of thumbnail grid → project page → back to grid. The frame scrub hero replaces the entire "look at my work" section with "experience my work." The Daily Bugle cards replace generic project cards with something that has character and narrative weight.
Dark urban palette with a single high-energy accent. The gold (#d4af37) appears only in Daily Bugle editorial elements — a secondary accent that stays in-universe.
The page flows through a cinematic narrative sequence:
Frame scrub hero (194 frames synced to scroll — the portfolio piece itself) → Split layout (text + visual side by side) → Daily Bugle editorial cards (portfolio grid as newspaper front pages) → Comic-universe testimonials (character quotes as social proof) → Contact
Single-file HTML architecture. No framework, no build step. GSAP handles all scroll-driven animations, and the canvas frame scrub is the centerpiece engineering challenge — 194 pre-rendered frames that play back at 60fps as the user scrolls.
Canvas frame scrub (194 frames). The hero uses a canvas element that scrubs through 194 pre-rendered video frames as the user scrolls. Each frame is a JPEG loaded in sequence. Scroll position maps directly to frame index, giving the visitor precise control over a cinematic flythrough. This is the site's signature interaction and its proof of technical capability.
Split text animations. Headings split into individual characters and animate in with staggered timing on scroll. Built with GSAP SplitText for character-level control without DOM overhead.
Magnetic buttons. Interactive elements track the cursor and pull toward it within a defined radius. A small detail, but it signals craft — the kind of micro-interaction that separates a developer portfolio from a template.
Desktop + mobile locked. The frame scrub adapts between desktop scroll and mobile touch, with fallback static frames for low-bandwidth connections. Both experiences feel intentional, not compromised.
The finished site delivers on the original brief: a portfolio where the site itself is the strongest piece. The 194-frame scroll animation, Daily Bugle editorial cards, and cinematic dark UI create an experience that demonstrates capability through interaction, not just screenshots.
Visit the live site →Tell us about your project. We'll come back with a first idea within hours.