BioCubed

-

GitHub Repository

https://github.com/nealbrandonjr/biocubed

GitHub Pages (Live Demo)

https://nealbrandonjr.github.io/biocubed

Hello Everyone!

I’m excited to share my latest project, BioCubed, an interactive 3D experience designed to present information in a unique and memorable way.

Originally created as part of an AI-focused job application challenge, BioCubed demonstrates how creativity, rapid iteration, and AI-assisted development can be combined to build engaging and practical experiences.

Although inspired by a hiring exercise, BioCubed was intentionally designed to be reusable so that anyone can adapt it for portfolios, presentations, educational projects, or storytelling experiences.

About the Project

BioCubed places the user inside a 3D cube environment containing four interactive category panels.

Users can:

  • Rotate the cube using mouse or touch controls.
  • Click or tap a category card to open additional information.
  • Navigate between multiple pages within each category.
  • Return to the welcome screen at any time.
  • Experience the application on both desktop and mobile devices.

The overall goal was to create something more engaging than a traditional portfolio page while keeping the experience intuitive and easy to use.

Key Features and Links

Explore the Project

GitHub Repository

Dive into the complete source code, documentation, and project history.

https://github.com/nealbrandonjr/biocubed

Live Demo

Experience BioCubed directly in your web browser.

https://nealbrandonjr.github.io/biocubed

Compatible with:

  • Google Chrome
  • Microsoft Edge
  • Mozilla Firefox
  • Safari
  • Android devices
  • iPhone and iPad devices

Technical Highlights

Interactive 3D Environment

Built a fully interactive cube with four information panels that users can explore naturally through drag and touch interactions.

Dual Interaction System

Cards support both:

  • Rotation through dragging.
  • Information access through clicking.

This allows the experience to remain intuitive without sacrificing usability.

Responsive Design

Designed to function across desktop and mobile browsers.

Single-File Architecture

The entire project intentionally resides within a single HTML file.

This approach allows users to:

  • Download one file.
  • Open it directly in a browser.
  • Avoid dependency installation.
  • Avoid build systems.
  • Avoid module-loading and CORS issues.

Lightweight and Portable

No frameworks.

No package managers.

No external dependencies.

No server requirements.

Tools and Technologies Used

Languages

  • HTML5
  • CSS3
  • JavaScript

Development Tools

  • Visual Studio Code
  • GitHub
  • GitHub Pages

AI-Assisted Development

BioCubed was developed using an AI-assisted workflow.

Tools used during development included:

  • ChatGPT
  • Claude
  • GitHub Copilot / Codex

These tools accelerated:

  • Brainstorming
  • UI design ideas
  • Problem solving
  • Debugging
  • Iterative improvements
  • Content refinement

AI was treated as an engineering multiplier rather than a replacement for human judgment.

Creative Process

My goal was to create something that felt different from a normal portfolio website.

Rather than presenting information through standard pages, I wanted visitors to feel like they were exploring an interactive environment.

The design evolved through many iterations involving:

  • User interaction improvements.
  • Card positioning refinements.
  • Mobile responsiveness.
  • Visual styling.
  • Click-versus-drag behavior.
  • Accessibility and usability considerations.

The final result emphasizes simplicity, portability, and user experience rather than unnecessary complexity.

Challenges and Lessons Learned

One of the more interesting challenges involved allowing users to rotate the cube directly from the cards themselves without accidentally opening them.

This required implementing a drag threshold so that:

  • Dragging rotates the cube.
  • Clicking opens information.

Another challenge was maintaining a responsive layout while preserving proper 3D alignment across different screen sizes and devices.

Future Enhancements

Potential future ideas include:

  • Additional cube walls.
  • Audio narration.
  • Video support.
  • Theme customization.
  • Search capabilities.
  • Virtual Reality (VR) support.
  • WebXR support.
  • AI-generated content.
  • Three.js rendering.
  • Story mode and presentation mode.

Fun Facts

BioCubed was originally created to satisfy a request to create a “vibe-coded experience.”

The project intentionally demonstrates how modern AI-assisted development can produce high-quality, portable, and user-friendly experiences through rapid iteration and human-guided refinement.

The architecture was kept intentionally simple to maximize portability and minimize technical barriers for users who simply want to explore the experience.

Licensing

BioCubed is open-source under the MIT License.

You are welcome to study, modify, and build upon the project.

Attribution is appreciated.

Website:

www.nealsdevsite.com

Feedback

Suggestions, ideas, and improvements are always welcome.

Thank you for taking the time to explore BioCubed!

Visit and Explore

GitHub Repository

https://github.com/nealbrandonjr/biocubed

Live Demo

https://nealbrandonjr.github.io/biocubed

Have a great day!

Neal Brandon Jr
Author: Neal Brandon Jr

Jr. Developer