Explore

ITom — Creative 3D Portfolio

PRO

itomdev.com

Visit website
Screenshot of ITom — Creative 3D Portfolio
Developer toolsPublished
  • 3D
  • Animation
  • Light
  • Minimal
  • Monochrome
  • WebGL

Palette

Typography

  • Primary

    Inter
    Weights
    400, 500, 600, 700
    Fallback
    Arial, Helvetica, sans-serif

  • Secondary

    Unknown
    Weights
    600, 700
    Fallback
    Use a condensed, hand-outlined display treatment over a sans-serif base.

About this design

An immersive monochrome developer portfolio that turns navigation into a pencil-sketched 3D journey: a house facade, a long gallery corridor, interactive doors, and a floating project-display room.

Prompts

Six prompts, in build order. Pro unlocks all six, ready to paste into your AI tool.

  • Main build prompt
  • Build frontend
  • Generate assets
  • Add animations
  • Responsive polish
  • Final visual polish

Build Recipe

Framework

  • React
  • Vite
Agent
Claude Code
Model
Claude Fable 5.1This reconstruction depends on a carefully art-directed WebGL walkthrough, bespoke sketched 3D assets, depth fog, camera choreography, and a legible DOM overlay system.

Creative tools

  • Recraft
  • Nano Banana

Libraries

  • Three.js
  • @react-three/fiber
  • GSAP

Special requirements

WebGL scene at a wide 1.98:1 stage; hand-drawn architectural texture set; low-poly interior meshes; camera-led navigation; depth-fog tuning; irregular paper detail panels.

AI Replicability

86 / 100

The visual system and observed camera progression reproduce reliably with mature WebGL tooling; the main remaining challenge is creating a coherent, original hand-drawn texture and mesh set with convincing spatial depth.

Main remaining challenge

Making every wall, floor, prop, doorway, and monitor share one convincing hand-inked perspective language while preserving readable depth and smooth movement.

The design and branding of ITom — Creative 3D Portfolio belong to their authors. InspoToCode documents its visual language as a reference; anything you build from it should carry your own branding, copy and assets.

Design analysis

Pro analysis

Understand why the design works

The written breakdown of this design: composition, hierarchy, spacing, imagery and the decisions behind the details — the part that tells you what to keep and what to change.

Upgrade to Pro