← Back to Projects

 · 1 min read

Markdown elements demo post

Markdown elements demo post
//Technology
  • Astro: website architecture
  • A-Frame: VR/AR Code
  • Tailwind CSS: UI Styling
//Project_Description

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

View Live Site // View on GitHub

Project Overview

An interactive augmented reality business card that transforms a traditional paper card into a 3D immersive experience, showcasing my portfolio, skills, and contact information in an engaging spatial interface.
AR Business Card being scanned by a smartphone showing 3D elements

Technical Architecture

The application was built on two primary technologies: A-Frame for handling the VR/AR functionality and Astro as the framework for the overall project architecture. A-Frame provided the entity-component system needed for creating interactive 3D elements, while Astro's partial hydration approach was perfect for delivering the AR experience with minimal JavaScript overhead. This combination allowed for efficient content delivery, with heavy 3D assets loaded only when needed during the AR experience.
Technical diagram showing A-Frame and Astro integration for AR functionality

User Experience & AR Interactions

Working in augmented reality presented unique UX challenges compared to traditional web development. Many users were encountering AR for the first time, requiring an intuitive approach to spatial interactions. Key results included:
  • Seamless integration between physical business card and digital AR experience
  • Cross-device compatibility with 90% of modern smartphones
  • Positive user feedback with 80% completion rate of the AR experience
  • Featured in web development and AR technology showcases
I implemented progressive onboarding that guided users through their first AR experience, with visual cues that helped establish spatial awareness in the 3D environment.
User interacting with AR business card elements floating in 3D space

Users

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Leads

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

ROI

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Share: