mischa-robots.github.io/index.html at main · mischa-robots/mischa-robots.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MischaRobots — AI, Robots & Art</title>
  <meta name="description" content="Mischa's projects exploring AI, autonomous robots, interactive art, and educational hardware.">

  <!-- Open Graph / Social -->
  <meta property="og:type" content="website">
  <meta property="og:title" content="Mischa Robots — AI, autonomous Robots and other projects">
  <meta property="og:description" content="Mischa's projects exploring AI, autonomous robots, interactive art, and educational hardware.">
  <meta property="og:url" content="https://mischa-robots.github.io">
  <meta property="og:image" content="https://mischa-robots.github.io/assets/robot.jpg">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Mischa Robots — AI, autonomous Robots and other projects">
  <meta name="twitter:description" content="AI, autonomous robots, interactive art, and educational hardware projects.">
  <meta name="twitter:image" content="https://mischa-robots.github.io/assets/robot.jpg">

  <!-- Additional SEO -->
  <meta name="author" content="Mischa">
  <meta name="keywords" content="AI, robotics, autonomous robots, interactive art, educational hardware, LearningMachina, robot art, machine learning">
  <meta name="robots" content="index, follow">
  <link rel="canonical" href="https://mischa-robots.github.io">
  <meta name="theme-color" content="#0d1117">

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,200,0,0&family=Noto+Sans:ital,wght@0,300;0,400;0,500;1,400&family=Roboto:ital,wght@0,100;0,300;0,400;1,400&family=Roboto+Mono:wght@400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>

  <!-- SCROLL PROGRESS -->
  <div class="scroll-progress" id="scrollProgress"></div>

  <!-- NAV -->
  <nav id="nav">
    <a href="#" class="nav-logo">Mischa<span>Robots</span></a>
    <ul class="nav-links" id="navLinks">
      <li><a href="#" data-i18n="nav.home">Home</a></li>
      <li><a href="#projects" data-i18n="nav.projects">Projects</a></li>
      <li><a href="#about" data-i18n="nav.about">About</a></li>
    </ul>
    <div class="nav-right">
      <button class="lang-toggle" id="langToggle" aria-label="Switch language">
        <span class="lang-flag" id="langFlag">🇬🇧</span>
        <span class="lang-code" id="langCode">EN</span>
      </button>
      <a href="https://github.com/mischa-robots" class="nav-cta" target="_blank">
        <span class="material-symbols-outlined">code</span> <span data-i18n="nav.github">GitHub</span>
      </a>
      <button class="hamburger" id="hamburger" aria-label="Toggle menu">
        <span></span><span></span><span></span>
      </button>
    </div>
  </nav>

  <!-- BRAIN CANVAS (fixed background) -->
  <canvas id="brainCanvas"></canvas>

  <!-- MAIN SECTIONS (toggled by router) -->
  <div id="main-sections">

    <!-- HERO -->
    <section class="hero">
      <div class="hero-eyebrow" data-i18n="hero.eyebrow">AI, autonomous Robots and other projects</div>
      <h1>
        Mischa <span class="accent">Robots</span>
      </h1>
      <p class="hero-desc" data-i18n="hero.desc">
        I build autonomous robots, interactive art installations with robots, design educational hardware, and explore the space where AI meets physical machines.
      </p>
      <div class="hero-actions">
        <a href="#projects" class="btn-primary">
          <span class="material-symbols-outlined">rocket_launch</span> <span data-i18n="hero.cta1">View Projects</span>
        </a>
        <a href="https://github.com/mischa-robots" class="btn-secondary" target="_blank">
          <span class="material-symbols-outlined">code</span> <span data-i18n="hero.cta2">GitHub</span>
        </a>
      </div>
    </section>

    <div class="divider"></div>

    <!-- PROJECTS -->
    <section id="projects">
      <div class="section-label" data-i18n="projects.label">Projects</div>
      <h2 data-i18n="projects.title">What I'm working on.</h2>
      <div class="tracks">

        <!-- Interactive Robot Art -->
        <div class="track-card reveal" style="--delay: 0s">
          <div class="track-icon material-symbols-outlined">palette</div>
          <div class="track-level" data-i18n="proj.ira.label">Art × Robotics</div>
          <h3 data-i18n="proj.ira.title">Interactive Robot Art</h3>
          <p data-i18n="proj.ira.desc">How can humans interact with robots and AI to create art together? An interactive art installation exploring human-robot collaboration.</p>
          <div class="project-links">
            <a href="#page/interactive-robot-art">
              <span class="material-symbols-outlined">article</span> <span data-i18n="proj.ira.more">Read more</span>
            </a>
            <a href="https://interactiverobotart.github.io" target="_blank">
              <span class="material-symbols-outlined">open_in_new</span> <span data-i18n="proj.ira.site">Visit website</span>
            </a>
          </div>
        </div>

        <!-- LearningMachina -->
        <div class="track-card reveal" style="--delay: 0.1s">
          <div class="track-icon material-symbols-outlined">school</div>
          <div class="track-level" data-i18n="proj.lm.label">EdTech × Hardware</div>
          <h3 data-i18n="proj.lm.title">LearningMachina</h3>
          <p data-i18n="proj.lm.desc">An open-source robot that is also a computer and a teacher. Learn programming, robotics, and AI — all on one device.</p>
          <div class="project-links">
            <a href="#page/learning-machina">
              <span class="material-symbols-outlined">article</span> <span data-i18n="proj.lm.more">Read more</span>
            </a>
            <a href="https://learningmachina.github.io" target="_blank">
              <span class="material-symbols-outlined">open_in_new</span> <span data-i18n="proj.lm.site">Visit website</span>
            </a>
          </div>
        </div>

        <!-- Agentic Robot -->
        <div class="track-card reveal" style="--delay: 0.2s">
          <div class="track-icon material-symbols-outlined">smart_toy</div>
          <div class="track-level" data-i18n="proj.ar.label">AI × Autonomy</div>
          <h3 data-i18n="proj.ar.title">Agentic Robot</h3>
          <p data-i18n="proj.ar.desc">An autonomous robot controlled by AI coding agents. Stereo vision, real-time reasoning, and a web dashboard — all running on a Jetson Nano.</p>
          <div class="project-links">
            <a href="https://github.com/mischa-robots/agentic-robot" target="_blank">
              <span class="material-symbols-outlined">code</span> <span data-i18n="proj.ar.repo">GitHub</span>
            </a>
          </div>
        </div>

        <!-- Vision Demo -->
        <div class="track-card reveal" style="--delay: 0.3s">
          <div class="track-icon material-symbols-outlined">visibility</div>
          <div class="track-level" data-i18n="proj.vd.label">Computer Vision</div>
          <h3 data-i18n="proj.vd.title">Vision Demo</h3>
          <p data-i18n="proj.vd.desc">Stereo depth, optical flow, background subtraction, and YOLO detection — all running headless on a Jetson Nano, streamed live to a browser.</p>
          <div class="project-links">
            <a href="https://github.com/mischa-robots/vision-demo" target="_blank">
              <span class="material-symbols-outlined">code</span> <span data-i18n="proj.vd.repo">GitHub</span>
            </a>
          </div>
        </div>

        <!-- Multi-Agent Docker -->
        <div class="track-card reveal" style="--delay: 0.4s">
          <div class="track-icon material-symbols-outlined">deployed_code</div>
          <div class="track-level" data-i18n="proj.mad.label">DevTools × AI</div>
          <h3 data-i18n="proj.mad.title">Multi-Agent Docker</h3>
          <p data-i18n="proj.mad.desc">A Docker Compose workspace for Claude Code, GitHub Copilot CLI, and OpenAI Codex — all sharing a common base image and project directory.</p>
          <div class="project-links">
            <a href="https://github.com/mischa-robots/multi-agent-docker" target="_blank">
              <span class="material-symbols-outlined">code</span> <span data-i18n="proj.mad.repo">GitHub</span>
            </a>
          </div>
        </div>

        <!-- Jetson Nano Ubuntu 22.04 -->
        <div class="track-card reveal" style="--delay: 0.5s">
          <div class="track-icon material-symbols-outlined">memory</div>
          <div class="track-level" data-i18n="proj.jn.label">Embedded × Linux</div>
          <h3 data-i18n="proj.jn.title">Jetson Nano Ubuntu 22</h3>
          <p data-i18n="proj.jn.desc">A ready-to-run Ubuntu 22.04 server image for the Jetson Nano with CUDA, TensorRT, OpenCV, Python 3.10, and automatic fan control pre-installed.</p>
          <div class="project-links">
            <a href="https://github.com/mischa-robots/jetson-nano-ubuntu22" target="_blank">
              <span class="material-symbols-outlined">code</span> <span data-i18n="proj.jn.repo">GitHub</span>
            </a>
          </div>
        </div>

      </div>
    </section>

    <div class="divider"></div>

    <!-- ABOUT -->
    <section id="about">
      <div class="section-label" data-i18n="about.label">About</div>
      <h2 data-i18n="about.title">Hi, I'm Mischa.</h2>
      <p class="about-text reveal" data-i18n="about.text">
        I create interactive artworks using robots, build educational hardware, and explore the intersection of AI and physical machines. My projects ask questions about how humans and robots can collaborate, learn together, and shape our future.
      </p>
      <div class="hero-actions reveal" style="--delay: 0.1s">
        <a href="https://github.com/mischa-robots" class="btn-primary" target="_blank">
          <span class="material-symbols-outlined">code</span> <span data-i18n="about.github">GitHub</span>
        </a>
        <a href="https://www.instagram.com/mischa.ai/" class="btn-secondary" target="_blank">
          <span class="material-symbols-outlined">photo_camera</span> <span data-i18n="about.instagram">Instagram</span>
        </a>
      </div>
    </section>

  </div><!-- /main-sections -->

  <!-- PAGE CONTENT (markdown router target) -->
  <div id="page-content" style="display:none">
    <a href="#" class="page-back">
      <span class="material-symbols-outlined">arrow_back</span>
      <span data-i18n="page.back">Back to home</span>
    </a>
    <div class="page-body"></div>
  </div>

  <!-- FOOTER (always visible) -->
  <footer>
    <a href="#" class="logo">Mischa<span>Robots</span></a>
    <p><span data-i18n="footer.text">© 2026 Michael Schaefer · Built with ♥</span> · <a href="https://github.com/mischa-robots" target="_blank">github.com/mischa-robots</a></p>
  </footer>

  <script src="js/marked.min.js"></script>
  <script src="js/i18n.js"></script>
  <script src="js/main.js"></script>
  <script src="js/router.js"></script>
  <script src="js/brain.js"></script>
</body>
</html>