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 <meta name="theme-color" content="#111315"> 7 <meta name="description" content="OrangeJuce82 â experimental web apps for music, geometry, and useful real-world tools."> 8 <title>OrangeJuce82 â Creative Web Apps</title> 9 <link rel="preconnect" href="https://fonts.googleapis.com"> 10 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 11 <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet"> 12 <link rel="stylesheet" href="./styles.css"> 13
13<script src="./script.js" defer></script>
13 14</head> 15<body> 16 <div class="noise" aria-hidden="true"></div> 17 18 <header class="site-header"> 19 <a class="brand" href="#top" aria-label="Back to top"> 20 <img src="./assets/profile.jpg" alt="Avatar OrangeJuce82" width="42" height="42"> 21 <span>OrangeJuce82</span> 22 </a> 23 <nav class="main-nav" aria-label="Main navigation"> 24 <a href="#sonarcan">SonArcan</a> 25 <a href="#battrochtek">Battrochtek</a> 26 <a href="#z5omes">Z5omes</a> 27 <a href="#chord-charts-library">Chord Charts Library</a> 28 <a class="coffee-link" href="https://www.paypal.com/paypalme/z5omes" target="_blank" rel="noreferrer"> 29 <span aria-hidden="true">â</span> Buy me a coffee 30 </a> 31 <a class="icon-link" href="https://github.com/OrangeJuce82" target="_blank" rel="noreferrer" aria-label="OrangeJuce82 GitHub profile"> 32 <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 .7a11.5 11.5 0 0 0-3.64 22.41c.58.11.79-.25.79-.56v-2.23c-3.22.7-3.9-1.37-3.9-1.37-.53-1.34-1.29-1.7-1.29-1.7-1.05-.72.08-.71.08-.71 1.16.08 1.78 1.2 1.78 1.2 1.03 1.7
327 2.71 1.26 3.37.96.1-.75.4-1.26.73-1.55-2.57-.29-5.27-1.29-5.27-5.72 0-1.26.45-2.3 1.2-3.11-.12-.29-.52-1.47.11-3.06 0 0 .97-.31 3.17 1.19a11.02 11.02 0 0 1 5.77 0c2.2-1.5 3.17-1.19 3.17-1.19.63 1.59.23 2.77.11 3.06.75.81 1.2 1.85 1.2 3.11 0 4.44-2.71 5.42-5.29 5.71.42.36.79 1.06.79 2.14v3.17c0 .31.21.67.8.56A11.5 11.5 0 0 0 12 .7Z"/></svg> 33 </a> 34 </nav> 35 </header> 36 37 <main id="top"> 38 <section class="hero" aria-labelledby="hero-title"> 39 <div class="hero-copy reveal"> 40 <p class="eyebrow"><span></span> Creative coding · Music · Geometry</p> 41 <h1 id="hero-title">Experimental web apps<br><em>made to be useful,</em><br>made to be used.</h1> 42 <p class="hero-text">I build experimental web apps, with little patience for unintuitive interfaces and a strong bias toward music and geometry. I like creating tools that help people and actually get used in real life.</p> 43 <div class="hero-actions"> 44 <a class="button button-primary" href="#projects">Explore the projects <span>â</span></a> 45 <a class="button button-ghost" href="https://github.com/OrangeJuce82" target="_blank" rel="noreferrer">GitHub â</a> 46 </div> 47 </div> 48 49 <div class="hero-portrait reveal" aria-hidden="true"> 50 <div class="orbit orbit-one"></div> 51 <div class="orbit orbit-two"></div> 52 <div class="portrait-card"> 53 <img src="./assets/profile.jpg" alt=""> 54 </div> 55 <span class="floating-tag tag-code"></></span> 56 <span class="floating-tag tag-music">âª</span> 57 <span class="floating-tag tag-shape">â</span> 58 </div> 59 </section> 60 61 <section class="projects-section" id="projects" aria-labelledby="projects-title"> 62 <div class="section-heading reveal"> 63 <p class="eyebrow"><span></span> Projects</p> 64 <h2 id="projects-title">Things I build.</h2> 65 <p>Browser-based tools built to be opened, explored and used â no account, no detour.</p> 66 </div> 67 68 <div class="projects-grid"> 69 <article class="project-card project-sonarcan reveal" id="sonarcan"> 70 <a class="project-preview screenshot-preview" href="https://github.com/OrangeJuce82/sonarcan/releases" target="_blank" rel="noreferrer" aria-label="Download SonArcan"> 71 <img src="./assets/sonarcan.png" alt="SonArcan music practice and analysis interface"> 72 </a> 73 <div class="project-body"> 74 <div class="project-meta"><span class="project-kind">Music practice · Desktop app</span></div> 75 <h3>SonArcan</h3> 76 <p>A local-first workspace for musicians to learn, analyze and rehearse music. Build seamless A/B loops, change tempo and pitch independently, detect beats and chords, and isolate stems â all while keeping your projects on your computer.</p> 77 <div class="tags"><span>Tauri</span><span>Audio analysis</span><span>Stem separation</span></div> 78 <div class="project-links"> 79 <a href="https://github.com/OrangeJuce82/sonarcan/releases" target="_blank" rel="noreferrer">Download <strong>â</strong></a> 80 <a href="https://github.com/OrangeJuce82/sonarcan" target="_blank" rel="noreferrer">GitHub source</a> 81 </div> 82 </div> 83 </article> 84 85 <article class="project-card project-battrochtek reveal" id="battrochtek"> 86 <a class="project-preview screenshot-preview" href="https://orangejuce82.github.io/battrochtek/" target="_blank" rel="noreferrer" aria-label="Open Battrochtek"> 87 <img src="./assets/battrochtek.png" alt="Battrochtek drum sequencer interface"> 88 </a> 89 <div class="project-body"> 90 <div class="project-meta"><span class="project-kind">Drum sequencer · PWA</span></div> 91 <h3>Battrochtek</h3> 92 <p>A browser-based drum sequencer made for musicians: playable grooves, step sequencing, velocity, memories and a <strong>FEEL</strong> engine that reshapes a pattern without destroying the original.</p> 93 <div class="tags"><span>Web Audio</span><span>Sequencer</span><span>Offline</span></div> 94 <div class="project-links"> 95 <a href="https://orangejuce82.github.io/battrochtek/" target="_blank" rel="noreferrer">Open app <strong>â</strong></a> 96 <a href="https://github.com/OrangeJuce82/battrochtek" target="_blank" rel="noreferrer">GitHub source</a> 97 </div> 98 </div> 99 </article> 100 101 <article class="project-card project-z5omes reveal" id="z5omes"> 102 <a class="project-preview screenshot-preview" href="https://orangejuce82.github.io/z5omes/" target="_blank" rel="noreferrer" aria-label="Open Z5omes"> 103 <img src="./assets/z5omes.png" alt="Z5omes 3D geometry interface"> 104 </a> 105 <div class="project-body"> 106 <div class="project-meta"><span class="project-kind">3D geometry tool</span></div> 107 <h3>Z5omes</h3> 108 <p>An interactive tool for designing <strong>zomes</strong> and geometric structures. Explore the model in 3D, adjust its construction and export it in several formats for fabrication, prototyping or experimentation.</p> 109 <div class="tags"><span>3D</span><span>Geometry</span><span>Export</span></div> 110 <div class="project-links"> 111 <a href="https://orangejuce82.github.io/z5omes/" target="_blank" rel="noreferrer">Open app <strong>â</strong></a> 112 <a href="https://github.com/OrangeJuce82/z5omes" target="_blank" rel="noreferrer">GitHub source</a> 113 </div> 114 </div> 115 </article> 116 117 <article class="project-card project-chords reveal" id="chord-charts-library"> 118 <a class="project-preview screenshot-preview" href="https://orangejuce82.github.io/chord-charts-library/" target="_blank" rel="noreferrer" aria-label="Open Chord Charts Library"> 119 <img src="./assets/chord-charts-library.png" alt="Chord Charts Library interface"> 120 </a> 121 <div class="project-body"> 122 <div class="project-meta"><span class="project-kind">Music library</span></div> 123 <h3>Chord Charts Library</h3> 124 <p>A large chord-chart library built around the iReal Pro ecosystem. Search by title, composer, style or groove, preview charts in the browser and open songs directly in <strong>iReal Pro</strong>.</p> 125 <div class="tags"><span>iReal Pro</span><span>Search</span><span>Music</span></div> 126 <div class="project-links"> 127 <a href="https://orangejuce82.github.io/chord-charts-library/" target="_blank" rel="noreferrer">Open app <strong>â</strong></a> 128 <a href="https://github.com/OrangeJuce82/chord-charts-library" target="_blank" rel="noreferrer">GitHub source</a> 129 </div> 130 </div> 131 </article> 132 </div> 133 </section> 134 135 <section class="support reveal"> 136 <div> 137 <p class="eyebrow"><span></span> Open source fuel</p> 138 <h2>Fuel the next build.</h2> 139 <p>If one of these apps is useful to you, you can support its development with a coffee. It usually gets converted into code.</p> 140 </div> 141 <a class="coffee-card" href="https://www.paypal.com/paypalme/z5omes" target="_blank" rel="noreferrer">
142 <span class="coffee-emoji">â</span> 143 <span><small>Support development</small><strong>Buy me a coffee</strong></span> 144 <b>â</b> 145 </a> 146 </section> 147 </main> 148 149 <footer> 150 <span>© <span id="year"></span> OrangeJuce82</span> 151 </footer> 152</body> 153</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.