-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
187 lines (175 loc) · 12.8 KB
/
index.html
File metadata and controls
187 lines (175 loc) · 12.8 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>Miles Waite - Complex Systems & Creative Technology</title>
<meta name="description" content="Certified by the Santa Fe Institute of Complex Science. 20+ years experience in real-time complex systems, TouchDesigner, Python, and creative technology." />
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://mileswaite.net/" />
<meta property="og:title" content="Miles Waite - Complex Systems & Creative Technology" />
<meta property="og:description" content="Certified by the Santa Fe Institute of Complex Science. 20+ years experience in real-time complex systems, TouchDesigner, Python, and creative technology." />
<meta property="og:image" content="https://mileswaite.net/favicon-32x32.png" />
<meta property="og:site_name" content="Miles Waite" />
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://mileswaite.net/" />
<meta property="twitter:title" content="Miles Waite - Complex Systems & Creative Technology" />
<meta property="twitter:description" content="Certified by the Santa Fe Institute of Complex Science. 20+ years experience in real-time complex systems, TouchDesigner, Python, and creative technology." />
<meta property="twitter:image" content="https://mileswaite.net/favicon-32x32.png" />
<!-- Additional SEO -->
<meta name="keywords" content="complex systems, TouchDesigner, Python, creative technology, real-time systems, Santa Fe Institute, generative art, audio reactive, interactive installations" />
<meta name="author" content="Miles Waite" />
<link rel="canonical" href="https://mileswaite.net/" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="manifest" href="manifest.json">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/p5@1.6.0/lib/p5.min.js"></script>
<link rel="stylesheet" href="style.css?v=2">
</head>
<body>
<header>
<nav style="padding: 0 2rem 0 2rem; justify-content: space-between; margin: 0; margin-left: -1rem; margin-right: 0; max-width: none; width: 100%;">
<a href="#" class="logo" style="margin-left: calc(1rem + 5%);">mileswaite.net</a>
<ul class="nav-links" style="margin-right: calc(1rem + 5%);">
<li><a href="#projects">Projects</a></li>
<li><a href="#music">Music</a></li>
<li><a href="#code">Code</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</header>
<main>
<section class="hero">
<!-- Rotating Cube Canvas -->
<div id="cube-container"></div>
<div class="hero-content">
<p class="subtitle">Creative Technology & Complex Systems</p>
<h1>
<div class="moving-text">Robust.</div>
<div class="moving-text">Antifragile.</div>
<div class="moving-text">Emergent.</div>
</h1>
<p class="description">
Certified by the Santa Fe Institute of Complex Science, with expertise in complex, adaptive systems.
20+ years experience in designing, implementing & testing large-scale real-time complex systems,
& automating company-wide processes.
</p>
</div>
</section>
<section class="projects" id="projects" style="margin: 0; padding: 6rem 0; max-width: none; width: 100%;">
<h2>Projects</h2>
<div class="projects-grid" style="margin-left: calc(1rem + 5%); padding: 0; max-width: none; width: calc(100% - 2rem - 10%);">
<div class="project-card" onclick="window.location.href='audio-reactive-abstract-geometry.html'" style="height: 243px; border-radius: 0;">
<h3>Audio Reactive Abstract Geometry</h3>
<p>Real-time geometric visualizations that respond dynamically to audio input using TouchDesigner and Python</p>
</div>
<div class="project-card" onclick="window.location.href='particle-systems.html'" style="height: 243px; border-radius: 0;">
<h3>Particle Systems</h3>
<p>Complex particle behaviors and emergent visual patterns in 3D space</p>
</div>
<div class="project-card" onclick="window.location.href='api-text-dat.html'" style="height: 243px; border-radius: 0;">
<h3>API Text DAT</h3>
<p>Data-driven visualizations using real-time API feeds and text processing</p>
</div>
<div class="project-card" onclick="window.location.href='generative-max-for-live-tools.html'" style="height: 243px; border-radius: 0;">
<h3>Generative Max for Live Tools</h3>
<p>Custom Ableton Live devices for algorithmic music and visual generation</p>
</div>
</div>
</section>
<section class="music" id="music" style="margin: 0; padding: 6rem 0; max-width: none; width: 100%;">
<h2>Music</h2>
<div class="projects-grid" style="margin-left: calc(1rem + 5%); padding: 0; max-width: none; width: calc(100% - 2rem - 10%);">
<div class="project-card" onclick="window.location.href='audio-reactive-visuals.html'" style="height: 243px; border-radius: 0;">
<h3>Audio Reactive Visuals</h3>
<p>Real-time generative visuals that respond to audio input using TouchDesigner and Python</p>
</div>
<div class="project-card" onclick="window.location.href='live-performance.html'" style="height: 243px; border-radius: 0;">
<h3>Live Performance</h3>
<p>Interactive installations and live visual performances for events and exhibitions</p>
</div>
<div class="project-card" onclick="window.location.href='generative-music.html'" style="height: 243px; border-radius: 0;">
<h3>Generative Music</h3>
<p>Algorithmic composition and procedural music generation systems</p>
</div>
<div class="project-card" onclick="window.location.href='max-for-live-tools.html'" style="height: 243px; border-radius: 0;">
<h3>Max for Live Tools</h3>
<p>Custom devices and patches for Ableton Live integration</p>
</div>
</div>
</section>
<section class="code" id="code" style="margin: 0; padding: 6rem 0; max-width: none; width: 100%;">
<h2>Code</h2>
<div class="projects-grid" style="margin-left: calc(1rem + 5%); padding: 0; max-width: none; width: calc(100% - 2rem - 10%);">
<div class="project-card" onclick="window.location.href='touchdesigner.html'" style="height: 243px; border-radius: 0;">
<h3>TouchDesigner</h3>
<p>Complex visual systems, real-time rendering, and interactive installations</p>
</div>
<div class="project-card" onclick="window.location.href='python.html'" style="height: 243px; border-radius: 0;">
<h3>Python</h3>
<p>Data processing, API integration, and automation for creative projects</p>
</div>
<div class="project-card" onclick="window.location.href='systems-architecture.html'" style="height: 243px; border-radius: 0;">
<h3>Systems Architecture</h3>
<p>Large-scale real-time systems with antifragile design principles</p>
</div>
<div class="project-card" onclick="window.location.href='creative-coding.html'" style="height: 243px; border-radius: 0;">
<h3>Creative Coding</h3>
<p>Generative art, procedural graphics, and algorithmic design</p>
</div>
</div>
</section>
</main>
<footer>
<div class="footer-content">
<div class="footer-links">
<a href="mailto:lorenzsys@protonmail.com" class="social-link" title="Email">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
</svg>
</a>
<a href="https://milesy1-github-io.vercel.app" target="_blank" class="social-link" title="Live Portfolio">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
</svg>
</a>
<a href="https://www.instagram.com/miles_waite_td" target="_blank" class="social-link" title="Instagram">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
</svg>
</a>
<a href="https://vercel.com/miles-projects-a6445319" target="_blank" class="social-link" title="Vercel">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M24 22.525H0l12-21.05 12 21.05z"/>
</svg>
</a>
<a href="https://bento.me/mileswaite" target="_blank" class="social-link" title="Bento">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
</svg>
</a>
<a href="https://www.patreon.com/c/u39389547/collections" target="_blank" class="social-link" title="Patreon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M0 .48v23.04h4.22V.48zm15.385 0c-4.764 0-8.641 3.88-8.641 8.65 0 4.755 3.877 8.623 8.641 8.623 4.75 0 8.615-3.868 8.615-8.623C24 4.36 20.136.48 15.385.48z"/>
</svg>
</a>
</div>
<div class="footer-bottom">
© 2025 Miles Waite. All Rights Reserved.
</div>
</div>
</footer>
<script src="version.js"></script>
<script src="script.js"></script>
<script src="tooltips.js"></script>
<script src="pwa-init.js"></script>
<script src="ai-assistant.js"></script>
<script src="inline-expansions.js"></script>
<script src="ai-visual-indicators.js"></script>
</body>
</html>