Loading...

Skills Applied:
fnad-profile-photo

PSX-Styled 3D Portfolio

A small, atmospheric 3D experience that doubles as my portfolio — built with Three.js and a bunch of late nights.

This website is a LEGACY, it's composed of hundreds of little meaningful references, and easter eggs from my life and my path as a CS Major. I've always had a love of horror, and I explored that in High School with my friend Dylan when we first made FNAD. The PSX Portfolio captures that passion and love for analogue horror and distills it into one experience.

Intro

The PSX project was my crash-course into 3D on the web. I sculpted and arranged the scene in Blender, exported a streamlined glTF, and spent weeks wiring it into a single-page Three.js app. The goal was not photorealism but mood: low-fi PSX vibes, heavy atmosphere, and tactile interactions. It forced me to learn shader tricks, lazy-loading patterns, and how to ship a playable experience that still works on phones.

Skills Applied

To make this work I leaned on a few specific toolsets: Three.js for rendering, GLSL for a lightweight pixelation pass, and GSAP for camera and UI choreography. Assets flowed from Blender → glTF, and I used raycasting to turn meshes into clickable, draggable portfolio cards. Mobile-first controls (MovementPad / RotationPad), video textures with synced audio, and a small achievements system (persisted to localStorage) rounded out the experience. Performance-wise, I relied on lazy imports and toggled postprocessing so the app degrades gracefully on weaker devices.

psx-photo-1
psx-photo-2
psx-photo-3

The Experience

Gameplay is intentionally light: teleport-orb navigation, optional walk-mode, and scene interactables that surface work samples. The Boisvert encounter was designed as a curated, teleport-driven scare — detection uses a camera-to-model raycast and a short countdown overlay before the chase state. This kept the encounter dramatic without needing complex pathfinding. The pixel shader and subtle postprocessing sell the retro look while keeping frame-rates reasonable.

What’s Next

I plan to iterate on the asset pipeline (texture atlasing and KTX2 builds), add a few more curated encounters, and polish mobile controls. The codebase is set up for progressive enhancement: postprocessing and particles are lazy-loaded so I can add features without regressing mobile performance.

Conclusion

This portfolio project was an absolute nightmare to make, and I had a blast doing it. I realize midway through creating it that my deadline of Halloween was unrealistic at best, and yet I still made it. In one month I learned about GPU optimization, 3D rendering, texture pipelines, raycasting, etc.. etc. This project was the intersection of front-end development and game design. I had a blast every step of the way.

View on GitHub View Live Site
← Back to Home Go to Resume →