1<!doctype html> 2<html lang="en"> 3<head> 4<meta charset="utf-8"> 5<meta name="viewport" content="width=device-width, initial-scale=1"> 6<title>Minty Crisp | Justin Ekema - Web XR Developer & Game Maker</title> 7<!-- Favicon --> 8<link rel="icon" type="image/png" sizes="16x16" crossorigin="anonymous" href="assets/img/favicon.ico"/> 9<link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicon-16x16.png"> 10<link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicon-32x32.png"> 11<link rel="apple-touch-icon" sizes="76x76" href="assets/img/apple-touch-icon.png"> 12<link rel="mask-icon" href="assets/img/safari-pinned-tab.svg" color="#5bbad5"> 13<!-- Mastodon Verification --> 14<link rel="me" href="https://mastodon.social/@mintycrisp"> 15<!-- TBD 16<link rel="manifest" href="./site.webmanifest"> 17<meta name="msapplication-TileColor" content="#da532c"> 18<meta name="theme-color" content="#ffffff"> 19--> 20<!-- Search Info --> 21<meta name="description" content="Minty Crisp | Justin Ekema - Web XR Developer & Game Maker"> 22<meta name="keywords" content="A-Frame,aframe,xr,webxr,vr,webvr,ar, webar,html,css,javascript,3d,blender,prototype,prototypes,virtual,reality,virtualreality,animation,animations,articles,blog,minty,crisp,mintycrisp,minty-crisp,minty_crisp,justin,ekema,justinekema"> 23<!-- Social Media Share --> 24<meta property="og:title" content="Minty Crisp | Justin Ekema - Web XR Developer & Game Maker"> 25<meta property="og:type" content="XR"> 26<meta property="og:url" content="justinekema.com"> 27<!-- TBD 28<meta property="og:image" content="assets/img/share.jpg"> 29--> 30<!-- MVP.css --> 31<link rel="stylesheet" href="assets/css/mvp.css"> 32<!-- CSS --> 33<link rel="stylesheet" href="assets/css/style.css"> 34</head> 35<body> 36<!-- Sticky --> 37<div id="stickyBar" class="sticky flexRow"> 38 <span class="flexRow flexStart"> 39 <img id="stickyIcon" src="assets/img/logo.png" alt="site-icon" / class="flexCol"> 40 <span id="stickyTitle" class="flexCol"><h3>Minty Crisp | Justin Ekema Web XR Developer</h3></span> 41 </span> 42</div> 43<!-- Main --> 44<main> 45<section> 46<aside id="card"> 47 <a href="#aboutMe"><button id="bottomButton">v About Me v</button></a> 48</aside> 49</section> 50<h1 class='centerText'>Recent Projects</h1> 51<section> 52 53<!-- Jinn Divination --> 54<aside id="jinnDivination"> 55 <img id="jinn-photo" src="./assets/img/previews/projects/mintycrisp-jinn-divination.jpg"> 56 <h3>OnCyber : Jinn Divination</h3> 57 <sup class='centerText'>Jam Winner</sup> 58 <p>Extra challenge Jam submission built with the pre-alpha <a href='https://oncyber.io/' target='_blank'>OnCyber</a> platform utilizing Mungi's remixable scroll scene.</p> 59 <ul> 60 <li>Scroll on Desktop or Mobile to interact.</li> 61 </ul> 62 <a href="https://oo.oncyber.io/minty-jinn-divination"><button id="launchJinn">Launch</button></a> 63</aside> 64 65<!-- Snack Grabber --> 66<aside id="snackGrabber"> 67 <img id="snack-photo" src="./assets/img/previews/projects/mintycrisp-snack-grabber.jpg"> 68 <h3>OnCyber : Snack Grabber</h3> 69 <p>Jam submission built with the pre-alpha <a href='https://oncyber.io/' target='_blank'>OnCyber</a> platform. A time trial, combo based collect-athon game. View the itch page for all rules or view within arena. Classic desktop controls, WASD & Mouse controls. </p> 70 <ul> 71 <li><a href="https://mintycrisp.itch.io/oo-jam-snack-grabber-by-minty-crisp">Itch Landing Page & Game Instructions</a></li> 72 <li><a href="https://oo.oncyber.io/minty-snack-grabber">OnCyber Project Direct Link</a></li> 73 </ul> 74 <a href="https://mintycrisp.itch.io/oo-jam-snack-grabber-by-minty-crisp"><button id="launchSnack">Launch</button></a> 75</aside> 76 77<!-- Auxl --> 78<aside id="auxl"> 79 <img id="auxl-photo" src="./assets/img/previews/projects/mintycrisp-auxl-march-preview1.jpg"> 80 <img id="auxl-photo2" src="./assets/img/previews/projects/mintycrisp-auxl-march-preview2.jpg"> 81 <h3>A-Frame UX Library (AUXL)</h3> 82 <p>* AUXL is being pivoted into another project. Stay tuned for more</p> 83 <p>A Web XR World, System, Object Generator Engine & Universal Controller built to streamline the creation of dynamic A-Frame XR site experiences. Support for VR | Desktop | Mobile.</p> 84 <ul> 85 <li><a href="https://minty-crisp.github.io/AUXL/">v0.4 Beta All-In-One Demo Experience</a></li> 86 </ul> 87 <a href="https://github.com/Minty-Crisp/AUXL"><button id="launchAuxl">View v0.4 Repo</button></a> 88</aside> 89 90 91 92<!-- Clock --> 93<aside id="clock"> 94 <img id="clock-photo" src="./assets/img/previews/projects/mintycrisp-aframe-orbit-clock.jpg"> 95 <h3>A-Frame Orbit Clock</h3> 96 <p>A screensaver inspired clock to display the date and time as well as the current second, minute, hour, day, month and the years progress via orbits with A-Frame. The sky animates through night and day as well.</p> 97 <ul> 98 <li>View : <a href="https://mintycrisp-aframe-orbit-clock.glitch.me/"> Scene</a> - <a href="https://glitch.com/~mintycrisp-aframe-orbit-clock">Code</a></li> 99 </ul> 100 <a href="https://mintycrisp-aframe-orbit-clock.glitch.me"><button id="launchClock">Launch</button></a> 101</aside> 102
103<!-- Pinball --> 104<aside id="pinball"> 105 <img id="pinball-photo" src="./assets/img/previews/projects/mintycrisp-oo-mcpinball.jpg"> 106 <h3>OnCyber : MC Pinball</h3> 107 <p>Jam submission built with the pre-alpha <a href='https://oncyber.io/' target='_blank'>OnCyber</a> platform utilizing Rapier physics for Pinball mechanics along with various game objectives, points, interactions and unique paddle styles. Currently configured for Desktop Keyboard controls.</p> 108 <ul> 109 <li><a href="https://mintycrisp.itch.io/oo-jam-mc-pinball-mintycrisp">Itch Landing Page & Game Instructions</a></li> 110 <li><a href="https://oo.oncyber.io/play/l6IZSyxHl3CqkblWgBsR?draft=true">OnCyber Project Direct Link</a></li> 111 </ul> 112 <a href="https://mintycrisp.itch.io/oo-jam-mc-pinball-mintycrisp"><button id="launchPinball">Launch</button></a> 113</aside> 114 115<!-- Game of Life --> 116<aside id="gol"> 117 <img id="gol-photo" src="./assets/img/previews/projects/mintycrisp-gol-thumbnail.jpg"> 118 <h3>Conway's Game of Life in A-Frame</h3> 119 <sup class='centerText'>* Glitch App of the Week *</sup> 120 <sup class='centerText'>* Glitch Honorable Mention for Coolest Web XR Project of the Year *</sup> 121 <ul> 122 <li>View : <a href="https://mintycrisp-a-frame-game-of-life.glitch.me"> Scene</a> - <a href="https://glitch.com/~mintycrisp-a-frame-game-of-life">Code</a></li> 123 </ul> 124 <a href="https://mintycrisp-a-frame-game-of-life.glitch.me"><button id="playGol">Launch</button></a> 125</aside> 126 127 128<!-- XRcade --> 129<aside id="xrcade"> 130 <img id="xrcade-photo" src="./assets/img/previews/projects/mintycrisp-xrcade-preview1.jpg"> 131 <img id="gallery-photo" src="./assets/img/previews/projects/mintycrisp_xrcade_spooky-update.jpg"> 132 <h3>Minty's XRcade</h3> 133 <p>A WebXR arcade full of A-Frame built games using A-Frame UX Library (AUXL). Currently with 10 games to choose from! Support for VR | Desktop | Mobile.</p> 134 <ul> 135 <li>10 Mini Games to Play!</li> 136 <li>NEW : Spooky Zone w/ 3 Killer Experiences!</li> 137 <li><a href="https://github.com/Minty-Crisp/XRcade">View Repo</a></li> 138 </ul> 139 <a href="https://minty-crisp.github.io/XRcade/"><button id="launchXRcade">Launch Mintys XRcade</button></a> 140</aside> 141 142<!-- Banter BounceForce --> 143<aside id="bounceForce"> 144 <img id="banter-photo" src="./assets/img/previews/projects/mintyCrisp-banter-bounceForce-grand_prize_winner.jpg"> 145 <h3>Banter : BounceForce VR Target Battle Arena</h3> 146 <sup class='centerText'>* Grand Prize Winner *</sup> 147 <p>BounceForce is built with AUXL support specifically for Sidequest's Banter. It was created for a hackathon competition sponsored by Sidequest to test and create content for their Banter VR verse application.</p> 148 <ul> 149 <li><a href="https://github.com/Minty-Crisp/banter-bounceforce">View Repo & Game Info</a></li> 150 <li><a href="https://www.oculus.com/experiences/quest/5404906916283287/">Download Banter for Quest</a></li> 151 </ul> 152 <a href="banter://minty-crisp.github.io/banter-bounceforce/"><button id="launchBounceforce">Launch</button></a><p>*Requires Banter App to Play</p> 153</aside> 154 155<!-- Pac-Man XR --> 156<aside id="pacmanXR"> 157 <img id="pacman-photo" src="./assets/img/previews/projects/mintycrisp-aframe_pac-man-xr.jpg"> 158 <h3>Pac-Man XR</h3> 159 <p>A XR version clone of the classic Pac-Man game with controls for VR, Desktop Keyboard|Mouse & Mobile.</p> 160 <ul> 161 <li><a href="https://github.com/Minty-Crisp/Pac-Man-XR_A-Frame">View Repo</a></li> 162 </ul> 163 <a href="https://minty-crisp.github.io/Pac-Man-XR_A-Frame/"><button id="launchPacmanXR">Launch</button></a> 164</aside> 165 166<!-- XR Art Gallery --> 167<aside id="artGallery"> 168 <img id="gallery-photo" src="./assets/img/previews/projects/mintycrisp-aframe-aic-gallery.jpg"> 169 <h3>Art Institute of Chicago XR Gallery</h3> 170 <p>Browse through an assortment of images provided by the Art Institute of Chicago in an immersive environment surrounded by multiple Frames for easy viewing.</p> 171 <ul> 172 <li><a href="https://github.com/Minty-Crisp/aic-xr-gallery">View Repo</a></li> 173 </ul> 174 <a href="https://minty-crisp.github.io/aic-xr-gallery/"><button id="launchArtGallery">Launch</button></a> 175</aside> 176 177 178<!-- Glitch --> 179<aside id="glitch"> 180 <h3>A-Frame Projects on Glitch</h3> 181 <ul> 182 <li>A-Frame Cannon Physics Starter : <a href="https://mintycrisp-aframe-cannon-starter.glitch.me"> View</a> - <a href="https://glitch.com/~mintycrisp-aframe-cannon-starter">Project</a></li> 183 <li>A-Frame Parent Child Tutorial : <a href="https://mintycrisp-aframe-parent-child.glitch.me"> View</a> - <a href="https://glitch.com/~mintycrisp-aframe-parent-child">Project</a> - <a href="https://dev.to/mintycrisp/mintys-a-frame-tips-tricks-looping-animation-timeline-3gp3">Article</a></li> 184 <li>A-Frame Parent Child Tutorial : <a href="https://mintycrisp-aframe-animation-looping.glitch.me"> View</a> - <a href="https://glitch.com/~mintycrisp-aframe-animation-looping">Project</a> - <a href="https://dev.to/mintycrisp/mintys-a-frame-tips-tricks-parent-child-relationship-1h53">Article</a></li> 185 <li>A-Frame Mascot Prototyping : <a href="https://mintycrisp-aframe-mascot-a-bot.glitch.me"> View</a> - <a href="https://glitch.com/~mintycrisp-aframe-mascot-a-bot">Project</a></li> 186 <li>Player Rig Reference : <a href="https://mintycrisp-a-frame-aplayerref-example.glitch.me"> View</a> - <a href="https://glitch.com/~mintycrisp-a-frame-aplayerref-example">Project</a></li> 187 <li>Checkpoint Override : <a href="https://stitch-terrific-block.glitch.me"> View</a> - <a href="https://glitch.com/~mintycrisp-a-frame-movingaround-tweak">Project</a></li> 188 <!-- <li>NAME : <a href=""> View</a> - <a href="">Project</a></li> --> 189 </ul> 190</aside> 191 192<!-- Code Repos --> 193<aside id="repos"> 194 <h3>Github Repositories</h3> 195 <p>Check out some of my open source work and various contributions.</p> 196 <ul> 197 <li>A-Frame UX Library : <a href="https://minty-crisp.github.io/AUXL/">Example</a> - <a href="https://github.com/Minty-Crisp/AUXL">Repo</a></li> 198 <li>Minty's XRcade : <a href="https://mintyxr.com">Example</a> - <a href="https://github.com/Minty-Crisp/XRcade">Repo</a></li> 199 <li>
199BounceForce VR Target Battle Arena : <a href="banter://minty-crisp.github.io/banter-bounceforce/">Banter Link</a> - <a href="https://github.com/Minty-Crisp/banter-bounceforce">Repo</a></li> 200 <li>Color Theory Gen : <a href="https://minty-crisp.github.io/colorTheoryGen/">Example</a> - <a href="https://github.com/Minty-Crisp/colorTheoryGen">Repo</a></li> 201 <li>Art Institute of Chicago XR Gallery : <a href="https://minty-crisp.github.io/aic-xr-gallery/">View</a> - <a href="https://github.com/Minty-Crisp/aic-xr-gallery">Repo</a></li> 202 <li>Pac-Man XR : <a href="https://minty-crisp.github.io/Pac-Man-XR_A-Frame/">Play</a> - <a href="https://github.com/Minty-Crisp/Pac-Man-XR_A-Frame">Repo</a> - <a href="https://dev.to/mintycrisp/a-frame-pac-man-xr-game-clone-overview-20ba">Article</a></li> 203 <li>Image Fallback JS : <a href="https://github.com/Minty-Crisp/Image-Fallback.js">Repo</a></li> 204 </ul> 205</aside> 206 207<!-- Prototypes --> 208<aside id="learning"> 209 <h3>Learning A-Frame Scenes</h3> 210 <ul> 211 <li>3D Idle Click Demo : <a href="./scenes/3d-idle-click-demo.html">View Scene</a> - <a href="https://dev.to/mintycrisp/a-frame-web-xr-idle-click-game-progress-overview-32l8">Article</a></li> 212 <li>VR Thunderstorm Scene, Asset Spawn, Teleportation & Find Secret : <a href="./scenes/vr-thunderstorm-spawn-teleportation.html">View Scene</a> - <a href="https://dev.to/mintycrisp/a-frame-web-xr-thunderstorm-scene-w-teleportation-types-and-overview-3g3h">Article</a></li> 213 <li>3D Swipe Node Locomotion : <a href="./scenes/3d-swipe-node-locomotion.html">View Scene</a> - <a href="https://dev.to/mintycrisp/a-frame-web-xr-isometric-node-navigation-overview-4cni">Article</a></li> 214 <li>VR Landscape Scene, Hover Locomotion & Asset Respawn : <a href="./scenes/vr-landscape-locomotion-respawn.html">View Scene</a> - <a href="https://dev.to/mintycrisp/a-frame-web-xr-hub-home-ui-locomotion-4m38">Article</a></li> 215 <li>3D Asset Customization : <a href="./scenes/3d-asset-customization.html">View Scene</a> - <a href="https://dev.to/mintycrisp/a-frame-web-xr-asset-color-customization-overview-2o86">Article</a></li> 216 <li>VR Animation Playground : <a href="./scenes/vr-animation-playground.html">View Scene</a> - <a href="https://dev.to/mintycrisp/a-frame-web-xr-animation-testing-scene-and-overview-3llj">Article</a></li> 217 <li>VR Orb Sky Changer : <a href="./scenes/vr-orb-sky-changer.html">View Scene</a> - <a href="https://dev.to/mintycrisp/a-frame-web-xr-orb-sky-changer-scene-and-overview-17f5">Article</a></li> 218 </ul> 219</aside> 220 221</section> 222 223<!-- Stores 224<aside id="stores"> 225 <h3>Stores<sup>Coming Soon</sup></h3> 226 <p>Physical & Digital online shops ^-^</p> 227 <ul> 228 <li>Itch.io : <a href="https://mintycrisp.itch.io/">MintyCrisp</a></li> 229 <li>Merch : <a href="">Coming Soon</a></li> 230 </ul> 231</aside> 232 --> 233 234<!-- About Me --> 235<hr id='aboutMe'> 236<h1 class='centerText'>About Me</h1> 237<section> 238<!-- Photo --> 239<section> 240 <img id="photo" src="./assets/img/self-sq.jpg"> 241</section> 242</section> 243 244<!-- Skills & Experience --> 245<section> 246<section> 247 <a href="#"><button id="topButton">Top ^</button></a> 248</section> 249<!-- Future --> 250<section> 251<aside id="future"> 252 <h2>A few words...</h2> 253 <p> I love learning new things and figuring out how they work. From the more mundane stuff like the innovative irrigation systems over the millennia to the mind boggling cosmic web that makes up our known universe. With so much to discover, my interest in technology never waivered. Thanks to the hard work and innovations of so many people, technology has caught up with many of our now so called science fiction ideas.</p> 254 <p> One of these popular ideas is the <b>Metaverse</b>, spawned from many artistic visions like the novels <i>Snow Crash</i> and <i>Ready Player One</i>. They often involve a single unified system that is extensible, customizable and connects a lot people. Currently the easiest and best way to reach as many people as possible is to simply create a website. Thankfully the fundamental technologies behind websites have gotten exponentially better and more powerful.</p> 255 <p> From more advanced base tools HTML, CSS and Javascript to the Web XR API and amazing frameworks like Three.js / A-Frame. The work of open-source contributions have been inspiring. Including many other excellent public tools / contributions like Blender or just people sharing their knowledge, experience and efforts. Simply put, the streamlined ability to create 3D, VR, AR interactable experiences in a Web Browser is the foundation required for the pop-culture version of the Metaverse that we dream about. What we need now is more and more people trying out these technologies, testing the limits of it and just attempting to make something interesting.</p> 256 <p>And that is exactly what I plan on doing.</p> 257</aside> 258</section> 259 260<section> 261<aside id="skillsExp"> 262 <h3>Skills</h3> 263 <details> 264 <summary>Programming</summary> 265 <ul> 266 <li>Systems Architecture</li> 267 <li>Helper Functions</li> 268 <li>Data Controls</li> 269 <li>Games</li> 270 <li>Interactions</li> 271 <li>Templates</li> 272 <li>Documentation</li> 273 </ul> 274 </details> 275 <details> 276 <summary>Design</summary> 277 <ul> 278 <li>Web XR (3D, VR, AR) UX</li> 279 <li>3D Assets, Animation & Optimization</li> 280 <li>Still & Motion Graphics</li> 281 </ul> 282 </details> 283 <details> 284 <summary>Frameworks</summary> 285 <ul> 286 <li>A-Frame</li> 287 <li>Three.js</li> 288 <li>OnCyber</li> 289 <li>Banter</li> 290 <li>Wordpress</li> 291 <li>RenPy</li> 292 </ul> 293 </details> 294 <details> 295 <summary>Languages</summary> 296 <ul> 297 <li>HTML</li> 298 <li>CSS</li> 299 <li>Javascript</li> 300 <li>Python</li> 301 <li>Git</li> 302 <li>Bash</li> 303 <li>
303Batch</li> 304 </ul> 305 </details> 306 <details> 307 <summary>Systems & Technology</summary> 308 <ul> 309 <li>Troubleshoot, Repair, Maintain & Build</li> 310 <li>Mac, Windows, Linux, Android, Network & Virtual Machines</li> 311 <li>Desktop, Laptop, Mobile, Server, Console, Imaging, Print & Misc</li> 312 <li>Digital & Analog</li> 313 <li>Research & QA</li> 314 <li>Apple Certified</li> 315 </ul> 316 </details> 317 <details> 318 <summary>Software</summary> 319 <ul> 320 <li>Blender</li> 321 <li>Adobe CC Suite</li> 322 <li>Final Cut Suite</li> 323 <li>Apple i Suites</li> 324 <li>Office Suite</li> 325 <li>Wide Variety of System & Third Party Tools</li> 326 </ul> 327 </details> 328 <details> 329 <summary>Video & Photo</summary> 330 <ul> 331 <li>Cinematography, Video Editing, VFX & Production</li> 332 <li>Photography, Photo Editing, Manipulation & Restoration</li> 333 <li>Live Production</li> 334 <li>Stop-Motion Animation</li> 335 </ul> 336 </details> 337 <details> 338 <summary>Other</summary> 339 <ul> 340 <li>Tutoring</li> 341 <li>Collaborating</li> 342 <li>Organization</li> 343 <li>Quick Learner</li> 344 <li>Puzzle Solver</li> 345 <li>Product & Service Sales</li> 346 </ul> 347 </details> 348 <h3>Experience</h3> 349 <details> 350 <summary>History</summary> 351 <ul> 352 <li>Web XR Freelancer</li> 353 <li>IT, Web, Video, Photo & Tutor Freelancer</li> 354 <li>Product Photographer & Assistant </li> 355 <li>IT Helpdesk, On-Site Support and Vendor Coordinator</li> 356 <li>NOC Engineer</li> 357 <li>Live Stream Coordinator, Editor and Assistant Editor, Camera Operator, Boom, PA and Asset Manager</li> 358 <li>Tutor Volunteer</li> 359 <li>Level 2 IT, Consultant, Apple, Web, Tutor Specialist and Vendor Coordinator</li> 360 <li>QA Software Specialist</li> 361 <li>Lead Salesman, Photo Restoration / Manipulation, Hardware Repair, Tutor and Vendor Coordinator</li> 362 <li>Graphics Design and Print Specialist</li> 363 </ul> 364 </details> 365</aside> 366</section> 367 368<!-- Get in Touch --> 369<section> 370<aside id="getInTouch"> 371 <img src="./assets/img/previews/mintycrisp-portfolio-tiny.jpg" alt="Minty Crisp Work Preview"> 372 <h2>Get in Touch</h2> 373 <p>Interested in working together? Reach out to me and we can chat about all the cool things we can build!</p> 374 <ul> 375 <li>Email : <a href="mailto:[email protected]">[email protected]</a></li> 376 <li>Github : <a href="https://github.com/Minty-Crisp">Minty-Crisp</a></li> 377 <li>Mastodon : <a href="https://mastodon.social/@mintycrisp">MintyCrisp</a></li> 378 <li>BlueSky : <a href="https://bsky.app/profile/mintycrisp.bsky.social">MintyCrisp.bsky.social</a></li> 379 <li>Discord : <a href="discordapp.com/users/983857672233304064">MintyCrisp</a></li> 380 <li>Glitch : <a href="https://glitch.com/@mintycrisp">@MintyCrisp</a></li> 381 <li>Dev.to : <a href="https://dev.to/mintycrisp">MintyCrisp</a></li> 382 </ul> 383</aside> 384</section> 385 386</section> 387 388<h2>Thanks for visiting!</h2> 389 390<section> 391 <a href="#"><button id="topButton">Top ^</button></a> 392</section> 393 394</main> 395 396<!-- Footer --> 397<footer> 398 <blockquote><small id="randomquote"> 399 "Quote" - Attribution 400 </small></blockquote> 401 402</footer> 403 404<!-- Random Quote JS -->
405<script src="assets/js/randomquote.js"></script>
405 406 407</body> 408 409</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.