Skip to content

Foliofarer

websiteLast commit

Foliofarer is an interactive 3D developer portfolio built with Next.js, React Three Fiber, Three.js and TypeScript, featuring an accessible career Atlas, local Passport progress and adaptive WebGL rendering.

Open productSource
Role
Product design and full-stack engineering
Scope
Product workflows, data boundaries, and delivery
Status
Publicly deployed
Foliofarer interface preview

Problem

A memorable 3D portfolio can hide the information recruiters need and exclude visitors whose devices, preferences, or assistive technology do not suit WebGL exploration.

Constraints

  1. C1

    Generated worlds must be deterministic enough for navigation and tests.

  2. C2

    Content must remain fully reachable without relying on 3D interaction.

  3. C3

    Rendering must adapt to reduced motion/data, viewport, connection, and device capability.

Architecture

Next.js route shell and accessible Atlas; React Three Fiber/Three.js scene runtime and Rapier interaction; deterministic journey compiler/generators and validated portfolio data; Playwright/unit/visual contracts plus static assets.

01

Interface

Next.js route shell and accessible Atlas.

02

Domain

React Three Fiber/Three.js scene runtime and Rapier interaction.

03

Data and integrations

Deterministic journey compiler/generators and validated portfolio data.

04

Quality and delivery

Playwright/unit/visual contracts plus static assets.

Decisions

D1

Pair the explorable world with a complete Atlas

Pair the explorable world with a complete Atlas instead of making WebGL the only information path.

D2

Compile deterministic route/world data

Compile deterministic route/world data rather than hand-place every element, trading generator complexity for repeatability.

D3

Use adaptive quality tiers and preference signals

Use adaptive quality tiers and preference signals rather than a single maximum-fidelity renderer.

Contribution

  • Implemented world generation, route validation, scene navigation, minimap, landmarks, and Passport progression.
  • Built the accessible Atlas and keyboard-friendly navigation.
  • Added capability-aware rendering and reduced-motion behavior.
  • Maintained compiler, interaction, accessibility, browser, and visual-baseline tests.

Outcomes

  • Visitors can explore a 3D career world.
  • Read the same professional history through an accessible document surface.
  • Track local visit progress.
  • Use the experience across a broader range of capabilities and preferences.

Product screenshot

Foliofarer interface preview
Foliofarer presents foliofarer is an interactive 3D developer portfolio built with Next.js, React Three Fiber, Three.js and TypeScript, featuring an accessible career Atlas, local Passport progress and adaptive WebGL rendering.

Verified stack

  • Next.js
  • React
  • TypeScript
  • React Three Fiber
  • Three.js
  • Drei
  • React Three Rapier
  • Tailwind CSS
  • Playwright
  • System Design

Working through something similar?

Share your challenge, scope, and timeline to start a focused conversation.