thedustprotocol/about.html at main · atmosphericdust/thedustprotocol · 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>About — The Dust Protocol</title>
<meta name="description" content="The protocol to give voice to planetary intelligence. Each event transforms atmospheric data into a spatial sonic environment.">
<meta property="og:type" content="website">
<meta property="og:site_name" content="The Dust Protocol">
<meta property="og:title" content="About — The Dust Protocol">
<meta property="og:description" content="The protocol to give voice to planetary intelligence. Each event transforms atmospheric data into a spatial sonic environment.">
<link rel="icon" href="assets/img/favicon.png">
<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=Inter:wght@900&family=League+Spartan:wght@900&family=Manrope:wght@400;700;800;900&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<a class="skip" href="#main">Skip to content</a>

<header class="masthead">
  <div class="wrap masthead__inner">
    <a class="logo" href="index.html" aria-label="The Dust Protocol, home">
      <img src="assets/img/logo.png" alt="" onerror="this.remove()">
    </a>
    <button class="nav-toggle" type="button" aria-expanded="false" aria-controls="nav">Menu</button>
    <nav class="nav" id="nav" aria-label="Main">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html" aria-current="page">About</a></li>
        <li><a href="events.html">Events</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>

<main id="main">

  <section class="hero">
    <div class="wrap">
      <h1>The Protocol To Give Voice To Planetary Intelligence.</h1>
    </div>
  </section>

  <section class="band">
    <div class="wrap">
      <div class="rule band__head">
        <p class="label">The Protocol</p>
        <h2 class="wide">Each event transforms atmospheric data into a spatial sonic environment.</h2>
      </div>

      <div class="steps">
        <article class="step rule">
          <p class="step__no">Step 01</p>
          <h3>Simulate the Earth</h3>
          <p>Approximate Navier-Stokes equations. Discretize the atmospheric flow. Utilize the High Performance Infrastructures. Analyze the atmospheric dust data.</p>
        </article>
        <article class="step rule">
          <p class="step__no">Step 02</p>
          <h3>Transform to Sound</h3>
          <p>Mineral composition of dust modulates the absorption of solar energy. It can warm or cool the atmosphere. Transform these oscillations into sound.</p>
        </article>
        <article class="step rule">
          <p class="step__no">Step 03</p>
          <h3>Compose an Opera</h3>
          <p>Find harmonies and melodies in the sound sequence. Arrange them to tell a story of the processes from the tiniest particles to large scale atmospheric waves spreading over thousands of kilometers.</p>
        </article>
        <article class="step rule">
          <p class="step__no">Step 04</p>
          <h3>Give Voice to the Planet</h3>
          <p>Understand the message beyond the calculations. Channel the state of the planet to the audience. Bring the voice of the planet closer to every individual present.</p>
        </article>
      </div>
    </div>
  </section>

  <section class="band">
    <div class="wrap">
      <div class="rule band__head">
        <p class="label">The Architects</p>
        <h2>Scientific Core. Sonic Architecture. Planetary Voice.</h2>
      </div>

      <div class="people">
        <article class="person">
          <img src="assets/img/luka.jpg" alt="Luka Ilić, PhD" loading="lazy">
          <div class="person__text">
            <h3>Luka Ilić, PhD</h3>
            <p class="role">Atmospheric Physicist, Founder</p>
            <p>Simulates the planet and creates the initial sound sequence.</p>
            <p class="links"><a href="https://www.atmosphericdust.com" rel="noopener">atmosphericdust.com</a><a href="https://www.instagram.com/atmospheric.dust" rel="noopener">Instagram</a></p>
          </div>
        </article>
        <article class="person">
          <img src="assets/img/cristobal.jpg" alt="Cristóbal Ulloa Cotapos" loading="lazy">
          <div class="person__text">
            <h3>Cristóbal Ulloa Cotapos</h3>
            <p class="role">Sonic Systems Architect</p>
            <p>Transforms the sound sequence into an electronic opera.</p>
            <p class="links"><a href="https://cristobalulloa.com/" rel="noopener">cristobalulloa.com</a><a href="https://www.instagram.com/cristobalulloacotapos" rel="noopener">Instagram</a></p>
          </div>
        </article>
        <article class="person">
          <img src="assets/img/milica.jpg" alt="Milica Jovičić, Soprano" loading="lazy">
          <div class="person__text">
            <h3>Milica Jovičić, Soprano</h3>
            <p class="role">Emissary of Planetary Intelligence</p>
            <p>Interprets the initial data and the musical composition into a performance.</p>
            <p class="links"><a href="https://www.instagram.com/leyla_cantante" rel="noopener">Instagram</a></p>
          </div>
        </article>
      </div>
    </div>
  </section>

  <section class="band">
    <div class="wrap">
      <div class="rule band__head">
        <p class="label">Send An Enquiry</p>
      </div>
      <div class="enquiry">
        <div class="enquiry__intro">
          <h2>A collaboration in mind?</h2>
          <p>We collaborate with institutions, festivals, and independent producers to stage atmospheric opera and physics-based performance works.</p>
        </div>
        <div class="enquiry__contact">
          <form class="form" action="https://api.web3forms.com/submit" method="POST" data-form>
            <input type="hidden" name="access_key" value="a3cf3967-b21e-4d79-aefb-d82f3e824282">
            <input type="hidden" name="subject" value="Enquiry from thedustprotocol.com">
            <input type="checkbox" name="botcheck" class="sr-only" style="display:none" tabindex="-1" autocomplete="off">

            <div class="form__row">
              <div>
                <label class="sr-only" for="name">Name</label>
                <input id="name" name="name" type="text" placeholder="Name" autocomplete="name" required>
              </div>
              <div>
                <label class="sr-only" for="email">Email</label>
                <input id="email" name="email" type="email" placeholder="Email" autocomplete="email" required>
              </div>
            </div>

            <div>
              <label class="sr-only" for="title">Title</label>
              <input id="title" name="title" type="text" placeholder="Title">
            </div>

            <div>
              <label class="sr-only" for="message">Message</label>
              <textarea id="message" name="message" placeholder="Message" required></textarea>
            </div>

            <button class="send" type="submit">Send</button>
            <p class="form__status" data-status role="status" aria-live="polite"></p>
            <p class="note">Messages are delivered through Web3Forms.</p>
          </form>
        </div>
      </div>
    </div>
  </section>
</main>

<footer class="outro">
  <div class="wrap">
    <div class="outro__cta">
      <h2>Organizing an <strong>EVENT?</strong></h2>
      <a class="pill" href="contact.html">Enquiries</a>
    </div>

    <ul class="social">
      <li class="rule">
        <a href="https://www.instagram.com/thedustprotocol" rel="me noopener">
          <span>
            <span class="name">Instagram</span>
            <span class="handle">@thedustprotocol</span>
          </span>
          <span class="icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.2c3.2 0 3.6 0 4.9.1 1.2.1 1.8.2 2.2.4.6.2 1 .5 1.4 1 .4.4.7.8 1 1.4.2.4.4 1 .4 2.2.1 1.3.1 1.7.1 4.9s0 3.6-.1 4.9c-.1 1.2-.2 1.8-.4 2.2-.2.6-.5 1-1 1.4-.4.4-.8.7-1.4 1-.4.2-1 .4-2.2.4-1.3.1-1.7.1-4.9.1s-3.6 0-4.9-.1c-1.2-.1-1.8-.2-2.2-.4-.6-.2-1-.5-1.4-1-.4-.4-.7-.8-1-1.4-.2-.4-.4-1-.4-2.2C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.9c.1-1.2.2-1.8.4-2.2.2-.6.5-1 1-1.4.4-.4.8-.7 1.4-1 .4-.2 1-.4 2.2-.4C8.4 2.2 8.8 2.2 12 2.2zm0 3.2A6.6 6.6 0 1 0 18.6 12 6.6 6.6 0 0 0 12 5.4zm0 10.9A4.3 4.3 0 1 1 16.3 12 4.3 4.3 0 0 1 12 16.3zm6.9-11.1a1.5 1.5 0 1 0 1.5 1.5 1.5 1.5 0 0 0-1.5-1.5z"/></svg></span>
        </a>
      </li>
      <li class="rule">
        <a href="https://www.youtube.com/@thedustprotocol" rel="me noopener">
          <span>
            <span class="name">YouTube</span>
            <span class="handle">@thedustprotocol</span>
          </span>
          <span class="icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M22.5 7.1a2.7 2.7 0 0 0-1.9-1.9C18.9 4.7 12 4.7 12 4.7s-6.9 0-8.6.5A2.7 2.7 0 0 0 1.5 7.1 28.2 28.2 0 0 0 1 12a28.2 28.2 0 0 0 .5 4.9 2.7 2.7 0 0 0 1.9 1.9c1.7.5 8.6.5 8.6.5s6.9 0 8.6-.5a2.7 2.7 0 0 0 1.9-1.9A28.2 28.2 0 0 0 23 12a28.2 28.2 0 0 0-.5-4.9zM9.8 15.3V8.7l5.7 3.3z"/></svg></span>
        </a>
      </li>
    </ul>

    <p class="copyright">©<span data-year>2026</span> TheDustProtocol. All Rights Reserved.</p>
  </div>
</footer>

<button class="totop" type="button" aria-label="Back to top">
  <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
</button>

<script src="assets/js/events.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>