Credentials Canvas

Interactive 3D Portfolio Experience
Experience Credentials Canvas »

What is Credentials Canvas?

Credentials Canvas is an immersive 3D portfolio experience that showcases personal projects in an interactive virtual environment. Instead of a traditional portfolio website, visitors explore a fully realized 3D scene where each element tells a story and provides access to different projects and achievements.

🎮 Interactive Experience

• Navigate through a detailed 3D environment with smooth camera controls
• Click on various objects to discover projects, skills, and accomplishments
• Explore different themed "vibes" that transform the lighting and atmosphere
• Engage with interactive elements like control panels, phones, and signposts

🏗️ 3D Environment Features

• Dynamic Lighting System - Interactive lights that respond to user clicks
• Video Displays - Phone screens showing project demos and presentations
• Atmospheric Controls - Multiple environment themes (Urban, Rural, Classy, Chill)
• Particle Effects - Visual enhancements that bring the scene to life
• Sound Design - Audio feedback for interactions and ambiance

📱 Project Showcase

The 3D environment serves as a unique portfolio platform featuring:

• Web Applications - Interactive demos accessible through in-scene displays
• Technical Projects - Links to GitHub repositories and live deployments
• Professional Links - Direct access to LinkedIn, articles, and contact information
• Skills Demonstration - 3D modeling, web development, and interactive design capabilities

🎨 Creative Approach

Rather than listing projects in a traditional format, Credentials Canvas presents them as part of a cohesive 3D narrative where:

• Each interactive element has purpose and meaning
• Projects are contextualized within a virtual space
• The portfolio itself demonstrates technical and artistic skills
• Visitors have a memorable, engaging experience

Tech Stack

• Three.js for 3D rendering
• React Three Fiber for React integration
• Node.js backend

Setup

1. Installation:

git clone https://github.com/hatmanstack/credentials-camvas.git
cd credentials-camvas
npm install --global yarn
yarn
npm start

2. Download the custom model:

• Get .glb file from here
• Place in public folder

Model Optimization (if altering in Blender):

gltf-pipeline -i updated.glb -o compressed_model.glb --draco.compressionLevel=7 --keepUnusedElements --keepDefaultScene

Special Thanks

A big thank you to freepacman.org for their site contribution, which is featured as an interactive iframe within this portfolio.

License

This project is licensed under Apache 2.0.