commit facd36e480f57a84f1e93087631d7ab88fb18ae8 · anil.recoil.org/bellairs-quest

+234

site/index.html

···

       1
       1
       +
       <!DOCTYPE html>

     

       2
       2
       +
       <html lang="en">

     

       3
       3
       +
       <head>

     

       4
       4
       +
           <meta charset="UTF-8">

     

       5
       5
       +
           <meta name="viewport" content="width=device-width, initial-scale=1.0">

     

       6
       6
       +
           <title>A Human Approach to Computational Science</title>

     

       7
       7
       +
           <link rel="stylesheet" href="styles.css">

     

       8
       8
       +
           <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

     

       9
       9
       +
       </head>

     

       10
       10
       +
       <body>

     

       11
       11
       +
           <header>

     

       12
       12
       +
               <nav>

     

       13
       13
       +
                   <div class="logo">The Bellairs Manifesto</div>

     

       14
       14
       +
                   <div class="nav-container">

     

       15
       15
       +
                       <ul class="main-nav">

     

       16
       16
       +
                           <li><a href="#manifesto">Manifesto</a></li>

     

       17
       17
       +
                           <li><a href="#usecases">Actions</a></li>

     

       18
       18
       +
                           <li><a href="#timeline">Timeline</a></li>

     

       19
       19
       +
                           <li><a href="#about">About</a></li>

     

       20
       20
       +
                       </ul>

     

       21
       21
       +
                       <ul class="social-nav">

     

       22
       22
       +
                           <li class="social-icon"><a href="https://matrix.to/#/#bellairs-discuss:recoil.org" target="_blank" aria-label="Matrix">

     

       23
       23
       +
                               <img src="matrix-icon.svg" alt="Matrix" width="20" height="20" class="matrix-icon">

     

       24
       24
       +
                           </a></li>

     

       25
       25
       +
                           <li class="social-icon"><a href="https://bsky.app/profile/bellairs.quest" target="_blank" aria-label="Bluesky">

     

       26
       26
       +
                               <img src="bluesky-icon.svg" alt="Bluesky" width="20" height="20" class="bsky-icon">

     

       27
       27
       +
                           </a></li>

     

       28
       28
       +
                       </ul>

     

       29
       29
       +
                   </div>

     

       30
       30
       +
               </nav>

     

       31
       31
       +
           </header>

     

       32
       32
       +
       

     

       33
       33
       +
           <section id="hero">

     

       34
       34
       +
               <div class="container">

     

       35
       35
       +
                   <h2>A Human Approach to Computational Science</h2>

     

       36
       36
       +
                   <p class="byline">Our vision is a world where everybody can access tools to explore, participate in and benefit from computational science.</p>

     

       37
       37
       +
                   <a href="#manifesto" class="cta-button">Read the Manifesto</a>

     

       38
       38
       +
               </div>

     

       39
       39
       +
           </section>

     

       40
       40
       +
       

     

       41
       41
       +
           <section id="manifesto">

     

       42
       42
       +
               <div class="container">

     

       43
       43
       +
                   <h2>Manifesto</h2>

     

       44
       44
       +
                   <div class="byline">March 2025 Participants: <a href="https://anil.recoil.org" target="_blank">Anil Madhavapeddy</a>, <a href="https://www.cs.cornell.edu/~jnfoster/" target="_blank">Nate Foster</a>, <a href="https://cs.nyu.edu/~apanda/" target="_blank">Aurojit Panda</a>, <a href="https://cseweb.ucsd.edu/~mcoblenz/" target="_blank">Michael Coblenz</a>, <a href="https://www.cst.cam.ac.uk/people/mte24" target="_blank">Mark Elvers</a>, <a href="https://gazagnaire.org" target="_blank">Thomas Gazagnaire</a>, <a href="https://web.eecs.umich.edu/~comar/" target="_blank">Cyrus Omar</a>, <a href="https://www.jonmsterling.com" target="_blank">Jonathan Sterling</a>, <a href="https://www.ianbrown.tech" target="_blank">Ian Brown</a>, and <a href="#about">more signing up</a> since.</div>

     

       45
       45
       +
                   

     

       46
       46
       +
                   <p><a href="https://en.wikipedia.org/wiki/Computational_science">Computational science</a> uses large-scale computation and data to gain insights into how to solve complex physical problems ranging from the microscopic to the planetary scale. The legitimacy of computational science emerges from a continuous process of hypothesising, experimentation and recombination of code across these datasets.</p>

     

       47
       47
       +
                   <p>We've asked ourselves how we might recenter science on the numerous people involved in this process, and so propose the following first set of principles to start the conversation. We <a href="#about">invite</a> interested people to join our exploration.</p>

     

       48
       48
       +
                   

     

       49
       49
       +
                   <div class="principle">

     

       50
       50
       +
                       <h3>1. Rehumanising science for all</h3>

     

       51
       51
       +
                       <p>Science is a human endeavor shaped by contributions from many individuals, and scientific insights stem from and flow through people. All stakeholders, such as academics, curators, traditional knowledge holders, journalists, reviewers, policymakers, and citizens, should be included in and benefit from the process. Scientific digital infrastructure therefore exists to both support inquisitive exploration and also to distribute the benefits of evidence-driven actions across society.</p>

     

       52
       52
       +
                   </div>

     

       53
       53
       +
                   

     

       54
       54
       +
                   <div class="principle">

     

       55
       55
       +
                       <h3>2. Melding institutions and crowds</h3>

     

       56
       56
       +
                       <p>Opening the door to public participation in the scientific discourse means broadening access to data and the skills required to analyse it. Today, large institutions play the important role of bringing together researchers under one roof, but emerging digital infrastructure promises new opportunities for participation across institutional and geographic boundaries. We aim to decouple access to the tools for science from institutional affiliation, and thus reduce the barrier to meaningful participation.</p>

     

       57
       57
       +
                   </div>

     

       58
       58
       +
                   

     

       59
       59
       +
                   <div class="principle">

     

       60
       60
       +
                       <h3>3. Supporting positive scientific feedback loops</h3>

     

       61
       61
       +
                       <p>Academics, journalists, and politicians all collaborating effectively across their specialisms results in maximal return on investments in science. We aim to empower creators to disseminate datasets towards the accumulation of reliable evidence and to reduce ongoing maintenance costs. By tracking positive outcomes, we seek to incentivize the responsible, ongoing curation of datasets.</p>

     

       62
       62
       +
                   </div>

     

       63
       63
       +
                   

     

       64
       64
       +
                   <p>Modern computational science should leverage both traditional and community-centered sources of insights and data, and enable such groups to take full advantage of digital resources. We want to develop these in an open and collaborative process that follows the principles above. We <a href="#about">invite</a> you to work with us!</p>

     

       65
       65
       +
       

     

       66
       66
       +
       

     

       67
       67
       +
               <blockquote>"Our vision is a world where everybody can access tools to explore, participate in and benefit from computational science."</blockquote>

     

       68
       68
       +
               </div>

     

       69
       69
       +
       

     

       70
       70
       +
       

     

       71
       71
       +
                   

     

       72
       72
       +
           </section>

     

       73
       73
       +
       

     

       74
       74
       +
           <section id="usecases">

     

       75
       75
       +
               <div class="container">

     

       76
       76
       +
                   <h2>Reinforcing Use Cases</h2>

     

       77
       77
       +
                   <p>We are identifying use cases that can be used to help design and iterate on systems towards implementing our manifesto. The use cases are intended to represent needs that different kinds of scientists have. There will be many other additional use cases to bring to light concerns that may not be represented here. Please consider contributing yours!</p>

     

       78
       78
       +
                   

     

       79
       79
       +
                   <div class="usecase">

     

       80
       80
       +
                       <h3>1. Conservation and sensing</h3>

     

       81
       81
       +
                       <p>Some large-scale research projects require acquiring, aggregating, manipulating, analyzing, and reporting on a multitude of data sets. Sometimes, the outputs may even connect to real-time systems, such as data dashboards or sensor networks, which need to be configured as a result of the analysis.</p>

     

       82
       82
       +
                       <p>We explore how to balance open science with necessary privacy for sensitive ecological data.</p>

     

       83
       83
       +
                       <p class="investigators"><strong>Investigators:</strong> <a href="https://cseweb.ucsd.edu/~mcoblenz/" target="_blank">Michael Coblenz</a>, <a href="https://anil.recoil.org" target="_blank">Anil Madhavapeddy</a>, <a href="https://web.eecs.umich.edu/~comar/" target="_blank">Cyrus Omar</a></p>

     

       84
       84
       +
                       <p><a href="usecase-conservation.html" class="cta-button">Read More</a></p>

     

       85
       85
       +
                   </div>

     

       86
       86
       +
                   

     

       87
       87
       +
                   <div class="usecase">

     

       88
       88
       +
                       <h3>2. Breaking Specialist Training out of the University</h3>

     

       89
       89
       +
                       <p>Meaningful participation in important scientific discourses requires specialist knowledge, but access to specialized training is currently centralized in universities and gated behind tuition fees and time barriers.</p>

     

       90
       90
       +
                       <p>We aim to build sustainable infrastructure for a decentralized network of publicly accessible courseware.</p>

     

       91
       91
       +
                       <p class="investigators"><strong>Investigators:</strong> <a href="https://www.jonmsterling.com" target="_blank">Jonathan Sterling</a>, <a href="https://anil.recoil.org" target="_blank">Anil Madhavapeddy</a></p>

     

       92
       92
       +
                       <p><a href="usecase-training.html" class="cta-button">Read More</a></p>

     

       93
       93
       +
                   </div>

     

       94
       94
       +
                   

     

       95
       95
       +
                   <div class="usecase">

     

       96
       96
       +
                       <h3>3. Collaboration in the Small</h3>

     

       97
       97
       +
                       <p>Many research projects require inputs from other researchers, including those in different areas. Finding, using, and extending other researchers' digital artifacts is challenging today.</p>

     

       98
       98
       +
                       <p>We're developing systems to make it easier to discover digital artifacts, track contributions, and reduce friction for sharing between research groups.</p>

     

       99
       99
       +
                       <p class="investigators"><strong>Investigators:</strong> <a href="https://cseweb.ucsd.edu/~mcoblenz/" target="_blank">Michael Coblenz</a></p>

     

       100
       100
       +
                       <p><a href="usecase-collaboration.html" class="cta-button">Read More</a></p>

     

       101
       101
       +
                   </div>

     

       102
       102
       +
               </div>

     

       103
       103
       +
           </section>

     

       104
       104
       +
       

     

       105
       105
       +
           <section id="timeline">

     

       106
       106
       +
               <div class="container">

     

       107
       107
       +
                   <h2>Timeline</h2>

     

       108
       108
       +
                   <div class="timeline-separator">

     

       109
       109
       +
                       <span>Upcoming Events</span>

     

       110
       110
       +
                   </div>

     

       111
       111
       +
                   <div class="timeline">

     

       112
       112
       +
                       <div class="timeline-item future">

     

       113
       113
       +
                           <div class="timeline-date">October 2025</div>

     

       114
       114
       +
                           <div class="timeline-content">

     

       115
       115
       +
                               <p><a href="https://conf.researchr.org/home/icfp-splash-2025/propl-2025" target="_blank">Programming for the Planet</a> (PROPL) will bring us together again to refine the manifesto and continue designing our systems for decentralised science.</p>

     

       116
       116
       +
                           </div>

     

       117
       117
       +
                       </div>

     

       118
       118
       +
                   </div>

     

       119
       119
       +
                   <div class="timeline-separator">

     

       120
       120
       +
                       <span>Past Events</span>

     

       121
       121
       +
                   </div>

     

       122
       122
       +
                   <div class="timeline">

     

       123
       123
       +
                       <div class="timeline-item">

     

       124
       124
       +
                           <div class="timeline-date">March 2025</div>

     

       125
       125
       +
                           <div class="timeline-content">

     

       126
       126
       +
                               <p>We held the Bellairs research summit on planetary computing, where we launched the first version of the manifesto towards human computational science.</p>

     

       127
       127
       +
                           </div>

     

       128
       128
       +
                       </div>

     

       129
       129
       +
                       <div class="timeline-item">

     

       130
       130
       +
                           <div class="timeline-date">March 2025</div>

     

       131
       131
       +
                           <div class="timeline-content">

     

       132
       132
       +
                               <p><a href="https://www.jonmsterling.com" target="_blank">Jon Sterling</a> publishes the <a href="https://www.forester-notes.org/OYOJ.xml" target="_blank">Forester 5.0</a> design for global identity.</p>

     

       133
       133
       +
                           </div>

     

       134
       134
       +
                       </div>

     

       135
       135
       +
                       <div class="timeline-item">

     

       136
       136
       +
                           <div class="timeline-date">February 2025</div>

     

       137
       137
       +
                           <div class="timeline-content">

     

       138
       138
       +
                               <p><a href="https://www.ianbrown.tech" target="_blank">Ian Brown</a> contrasts <a href="https://www.ianbrown.tech/2025/02/18/fleeing-the-hellsite-mastodon-vs-bluesky/" target="_blank">Mastodon vs BlueSky</a> in a deep-dive of their architectures.</p>

     

       139
       139
       +
                           </div>

     

       140
       140
       +
                       </div>

     

       141
       141
       +
                       <div class="timeline-item">

     

       142
       142
       +
                           <div class="timeline-date">January 2025</div>

     

       143
       143
       +
                           <div class="timeline-content">

     

       144
       144
       +
                               <p><a href="https://gazagnaire.org" target="_blank">Thomas Gazagnaire</a> launches <a href="https://parsimoni.co/blog/2025-02-11-parsimoni-to-demonstrate-its-spaceos-in-orbit-on-clustergate-1.html" target="_blank">SpaceOS</a> to perform scientific computation in orbit.</p>

     

       145
       145
       +
                           </div>

     

       146
       146
       +
                       </div>

     

       147
       147
       +
                       <div class="timeline-item">

     

       148
       148
       +
                           <div class="timeline-date">September 2024</div>

     

       149
       149
       +
                           <div class="timeline-content">

     

       150
       150
       +
                               <p><a href="https://www.cst.cam.ac.uk/people/mte24" target="_blank">Mark Elvers</a> operates the first capability-based <a href="https://tarides.com/blog/2023-08-02-obuilder-on-macos/" target="_blank">distributed build platform</a> for open source software.</p>

     

       151
       151
       +
                           </div>

     

       152
       152
       +
                       </div>

     

       153
       153
       +
                       <div class="timeline-item">

     

       154
       154
       +
                           <div class="timeline-date">August 2024</div>

     

       155
       155
       +
                           <div class="timeline-content">

     

       156
       156
       +
                               <p><a href="https://cs.nyu.edu/~apanda/" target="_blank">Aurojit Panda</a> rethinks the <a href="https://cs.nyu.edu/~apanda/assets/papers/ie-sigcomm24.pdf" target="_blank">architecture of edge Internet services</a> to bring back end-to-end simplicity.</p>

     

       157
       157
       +
                           </div>

     

       158
       158
       +
                       </div>

     

       159
       159
       +
                       <div class="timeline-item">

     

       160
       160
       +
                           <div class="timeline-date">April 2024</div>

     

       161
       161
       +
                           <div class="timeline-content">

     

       162
       162
       +
                               <p><a href="https://cseweb.ucsd.edu/~mcoblenz/" target="_blank">Michael Coblenz</a> designs a <a href="https://dl.acm.org/doi/10.1145/3597503.3639139" target="_blank">theory of scientific programming efficacy</a>.</p>

     

       163
       163
       +
                           </div>

     

       164
       164
       +
                       </div>

     

       165
       165
       +
                       <div class="timeline-item">

     

       166
       166
       +
                           <div class="timeline-date">March 2024</div>

     

       167
       167
       +
                           <div class="timeline-content">

     

       168
       168
       +
                               <p><a href="https://web.eecs.umich.edu/~comar/" target="_blank">Cyrus Omar</a> talks about <a href="https://watch.eeg.cl.cam.ac.uk/w/3nGExywoVm6XFRBA2zYxSL" target="_blank">building live programming interfaces for planetary computing</a> at <a href="https://propl.dev" target="_blank">PROPL 2024</a>.</p>

     

       169
       169
       +
                           </div>

     

       170
       170
       +
                       </div>

     

       171
       171
       +
                       <div class="timeline-item">

     

       172
       172
       +
                           <div class="timeline-date">February 2024</div>

     

       173
       173
       +
                           <div class="timeline-content">

     

       174
       174
       +
                               <p><a href="https://anil.recoil.org" target="_blank">Anil Madhavapeddy</a> makes the case for <a href="https://arxiv.org/pdf/2303.04501" target="_blank">planetary computing for data-driven environmental policy-making</a> to handle the ingestion, transformation, analysis and publication of environmental data products.</p>

     

       175
       175
       +
                           </div>

     

       176
       176
       +
                       </div>

     

       177
       177
       +
                       <div class="timeline-item">

     

       178
       178
       +
                           <div class="timeline-date">August 2023</div>

     

       179
       179
       +
                           <div class="timeline-content">

     

       180
       180
       +
                               <p><a href="https://www.cs.cornell.edu/~jnfoster/" target="_blank">Nate Foster</a> considers how programming languages might help to <a href="https://yjolt.org/programming-language-future-interests" target="_blank">capture property conveyancing</a>, sparking an interest in the legal applications of ownership.</p>

     

       181
       181
       +
                           </div>

     

       182
       182
       +
                       </div>

     

       183
       183
       +
                   </div>

     

       184
       184
       +
               </div>

     

       185
       185
       +
           </section>

     

       186
       186
       +
       

     

       187
       187
       +
           <section id="about">

     

       188
       188
       +
               <div class="container">

     

       189
       189
       +
                   <h2>About</h2>

     

       190
       190
       +
                   <h3>Participants</h3>

     

       191
       191
       +
                   <div class="participants">

     

       192
       192
       +
                       <ul>

     

       193
       193
       +
                           <li class="original"><a href="https://anil.recoil.org" target="_blank">Anil Madhavapeddy</a></li>

     

       194
       194
       +
                           <li class="original"><a href="https://www.cs.cornell.edu/~jnfoster/" target="_blank">Nate Foster</a></li>

     

       195
       195
       +
                           <li class="original"><a href="https://cs.nyu.edu/~apanda/" target="_blank">Aurojit Panda</a></li>

     

       196
       196
       +
                           <li class="original"><a href="https://cseweb.ucsd.edu/~mcoblenz/" target="_blank">Michael Coblenz</a></li>

     

       197
       197
       +
                           <li class="original"><a href="https://www.cst.cam.ac.uk/people/mte24" target="_blank">Mark Elvers</a></li>

     

       198
       198
       +
                           <li class="original"><a href="https://gazagnaire.org" target="_blank">Thomas Gazagnaire</a></li>

     

       199
       199
       +
                           <li class="original"><a href="https://web.eecs.umich.edu/~comar/" target="_blank">Cyrus Omar</a></li>

     

       200
       200
       +
                           <li class="original"><a href="https://www.jonmsterling.com" target="_blank">Jonathan Sterling</a></li>

     

       201
       201
       +
                           <li class="original"><a href="https://www.ianbrown.tech" target="_blank">Ian Brown</a></li>

     

       202
       202
       +
                           <li><a href="https://dorchard.github.io" target="_blank">Dominic Orchard</a></li>

     

       203
       203
       +
                           <li><a href="https://profiles.imperial.ac.uk/h.haddadi" target="_blank">Hamed Haddadi</a></li>

     

       204
       204
       +
                           <li><a href="https://www.cst.cam.ac.uk/people/jac22" target="_blank">Jon Crowcroft</a></li>

     

       205
       205
       +
                           <li><a href="https://dynamicaspects.org/research/" target="_blank">Roly Perera</a></li>

     

       206
       206
       +
                           <li><a href="https://www.cst.cam.ac.uk/people/efs20" target="_blank">Emily Shuckburgh</a></li>

     

       207
       207
       +
                           <li><a href="https://www.cfse.cam.ac.uk/directory/marla_fuchs" target="_blank">Marla Fuchs</a></li>

     

       208
       208
       +
                       </ul>

     

       209
       209
       +
                   </div>

     

       210
       210
       +
                   

     

       211
       211
       +
                   <h3>Join the Conversation</h3>

     

       212
       212
       +
                   <p>We'd love to have you on board as well; we recognise that we need lots of input and participation from diverse stakeholders across disciplines, and so we invite you to join our exploration and contribute to this open collaboration. Just get in touch with any of the participants above and we can add you to the list above. We're using Matrix to stay connected as well.</p>

     

       213
       213
       +
                   <div class="social-links">

     

       214
       214
       +
                       <a href="https://matrix.to/#/#bellairs-discuss:recoil.org" class="matrix-link">

     

       215
       215
       +
                           <img src="matrix-icon.svg" alt="Matrix" width="20" height="20" class="matrix-icon">

     

       216
       216
       +
                           Join our Matrix Channel

     

       217
       217
       +
                       </a>

     

       218
       218
       +
                       <a href="https://bsky.app/profile/bellairs.quest" target="_blank" class="bluesky-link">

     

       219
       219
       +
                           <img src="bluesky-icon.svg" alt="Bluesky" width="20" height="20" class="bsky-icon">

     

       220
       220
       +
                           Follow on Bluesky

     

       221
       221
       +
                       </a>

     

       222
       222
       +
                   </div>

     

       223
       223
       +
               </div>

     

       224
       224
       +
           </section>

     

       225
       225
       +
       

     

       226
       226
       +
           <footer>

     

       227
       227
       +
               <div class="container">

     

       228
       228
       +
                   <p class="disclaimer">&copy; 2025 in the public domain. This site is not directly affiliated with the <a href="https://www.mcgill.ca/bellairs/" target="_blank">Bellairs Research Institute</a>, but we are grateful to them for hosting our research symposium that made this manifesto possible.</p>

     

       229
       229
       +
               </div>

     

       230
       230
       +
           </footer>

     

       231
       231
       +
       

     

       232
       232
       +
           <script src="scripts.js"></script>

     

       233
       233
       +
       </body>

     

       234
       234
       +
       </html>

+104

site/scripts.js

···

       1
       1
       +
       document.addEventListener('DOMContentLoaded', function() {

     

       2
       2
       +
           // Smooth scrolling for navigation links

     

       3
       3
       +
           document.querySelectorAll('a[href^="#"]').forEach(anchor => {

     

       4
       4
       +
               anchor.addEventListener('click', function(e) {

     

       5
       5
       +
                   e.preventDefault();

     

       6
       6
       +
                   

     

       7
       7
       +
                   document.querySelector(this.getAttribute('href')).scrollIntoView({

     

       8
       8
       +
                       behavior: 'smooth'

     

       9
       9
       +
                   });

     

       10
       10
       +
               });

     

       11
       11
       +
           });

     

       12
       12
       +
           

     

       13
       13
       +
           // Add CSS for animations

     

       14
       14
       +
           const style = document.createElement('style');

     

       15
       15
       +
           style.textContent = `

     

       16
       16
       +
               .timeline-item {

     

       17
       17
       +
                   opacity: 0;

     

       18
       18
       +
                   transform: translateY(50px);

     

       19
       19
       +
                   transition: opacity 0.6s ease, transform 0.6s ease;

     

       20
       20
       +
               }

     

       21
       21
       +
               

     

       22
       22
       +
               .timeline-item.animate {

     

       23
       23
       +
                   opacity: 1;

     

       24
       24
       +
                   transform: translateY(0);

     

       25
       25
       +
               }

     

       26
       26
       +
               

     

       27
       27
       +
               .timeline-item:nth-child(even) {

     

       28
       28
       +
                   transform: translateY(50px);

     

       29
       29
       +
               }

     

       30
       30
       +
               

     

       31
       31
       +
               .timeline-item:nth-child(even).animate {

     

       32
       32
       +
                   transform: translateY(0);

     

       33
       33
       +
               }

     

       34
       34
       +
               

     

       35
       35
       +
               .timeline-item:nth-child(1) {

     

       36
       36
       +
                   transition-delay: 0.1s;

     

       37
       37
       +
               }

     

       38
       38
       +
               

     

       39
       39
       +
               .timeline-item:nth-child(2) {

     

       40
       40
       +
                   transition-delay: 0.2s;

     

       41
       41
       +
               }

     

       42
       42
       +
               

     

       43
       43
       +
               .timeline-item:nth-child(3) {

     

       44
       44
       +
                   transition-delay: 0.3s;

     

       45
       45
       +
               }

     

       46
       46
       +
               

     

       47
       47
       +
               .timeline-item:nth-child(4) {

     

       48
       48
       +
                   transition-delay: 0.4s;

     

       49
       49
       +
               }

     

       50
       50
       +
               

     

       51
       51
       +
               .timeline-item:nth-child(5) {

     

       52
       52
       +
                   transition-delay: 0.5s;

     

       53
       53
       +
               }

     

       54
       54
       +
               

     

       55
       55
       +
               .timeline-item:nth-child(6) {

     

       56
       56
       +
                   transition-delay: 0.6s;

     

       57
       57
       +
               }

     

       58
       58
       +
           `;

     

       59
       59
       +
           document.head.appendChild(style);

     

       60
       60
       +
           

     

       61
       61
       +
           // Animate timeline elements on scroll

     

       62
       62
       +
           const timelineItems = document.querySelectorAll('.timeline-item');

     

       63
       63
       +
           

     

       64
       64
       +
           function animateOnScroll() {

     

       65
       65
       +
               timelineItems.forEach(item => {

     

       66
       66
       +
                   const itemPosition = item.getBoundingClientRect().top;

     

       67
       67
       +
                   const screenPosition = window.innerHeight / 1.2;

     

       68
       68
       +
                   

     

       69
       69
       +
                   if (itemPosition < screenPosition) {

     

       70
       70
       +
                       item.classList.add('animate');

     

       71
       71
       +
                   }

     

       72
       72
       +
               });

     

       73
       73
       +
           }

     

       74
       74
       +
           

     

       75
       75
       +
           // Initial animation setup

     

       76
       76
       +
           setTimeout(() => {

     

       77
       77
       +
               animateOnScroll();

     

       78
       78
       +
           }, 300);

     

       79
       79
       +
           

     

       80
       80
       +
           // Check on scroll

     

       81
       81
       +
           window.addEventListener('scroll', animateOnScroll);

     

       82
       82
       +
           

     

       83
       83
       +
           // Function to add new timeline items

     

       84
       84
       +
           window.addTimelineItem = function(date, title, content) {

     

       85
       85
       +
               const timeline = document.querySelector('.timeline');

     

       86
       86
       +
               const timelineItem = document.createElement('div');

     

       87
       87
       +
               timelineItem.classList.add('timeline-item');

     

       88
       88
       +
               

     

       89
       89
       +
               timelineItem.innerHTML = `

     

       90
       90
       +
                   <div class="timeline-date">${date}</div>

     

       91
       91
       +
                   <div class="timeline-content">

     

       92
       92
       +
                       <h3>${title}</h3>

     

       93
       93
       +
                       <p>${content}</p>

     

       94
       94
       +
                   </div>

     

       95
       95
       +
               `;

     

       96
       96
       +
               

     

       97
       97
       +
               timeline.appendChild(timelineItem);

     

       98
       98
       +
               

     

       99
       99
       +
               // Update animation elements

     

       100
       100
       +
               setTimeout(() => {

     

       101
       101
       +
                   animateOnScroll();

     

       102
       102
       +
               }, 100);

     

       103
       103
       +
           };

     

       104
       104
       +
       });

+792

site/styles.css

···

       1
       1
       +
       /* Base styles */

     

       2
       2
       +
       :root {

     

       3
       3
       +
           --primary-color: #3498db;

     

       4
       4
       +
           --og-color: #f3fffa;

     

       5
       5
       +
           --secondary-color: #2c3e50;

     

       6
       6
       +
           --accent-color: #e74c3c;

     

       7
       7
       +
           --light-color: #ecf0f1;

     

       8
       8
       +
           --dark-color: #2c3e50;

     

       9
       9
       +
           --text-color: #333;

     

       10
       10
       +
           --transition-speed: 0.3s;

     

       11
       11
       +
       }

     

       12
       12
       +
       

     

       13
       13
       +
       * {

     

       14
       14
       +
           margin: 0;

     

       15
       15
       +
           padding: 0;

     

       16
       16
       +
           box-sizing: border-box;

     

       17
       17
       +
       }

     

       18
       18
       +
       

     

       19
       19
       +
       html {

     

       20
       20
       +
           scroll-behavior: smooth;

     

       21
       21
       +
       }

     

       22
       22
       +
       

     

       23
       23
       +
       body {

     

       24
       24
       +
           font-family: 'Helvetica Neue', Arial, sans-serif;

     

       25
       25
       +
           line-height: 1.6;

     

       26
       26
       +
           color: var(--text-color);

     

       27
       27
       +
           background-color: var(--light-color);

     

       28
       28
       +
           font-size: 18px; /* Increased base font size */

     

       29
       29
       +
       }

     

       30
       30
       +
       

     

       31
       31
       +
       .container {

     

       32
       32
       +
           max-width: 1000px;

     

       33
       33
       +
           margin: 0 auto;

     

       34
       34
       +
           padding: 0 20px;

     

       35
       35
       +
       }

     

       36
       36
       +
       

     

       37
       37
       +
       h1, h2, h3, h4 {

     

       38
       38
       +
           margin-bottom: 20px;

     

       39
       39
       +
           color: var(--secondary-color);

     

       40
       40
       +
       }

     

       41
       41
       +
       

     

       42
       42
       +
       p {

     

       43
       43
       +
           margin-bottom: 20px;

     

       44
       44
       +
           font-size: 1.1rem; /* Larger paragraph text */

     

       45
       45
       +
           line-height: 1.8;

     

       46
       46
       +
           max-width: 100%;

     

       47
       47
       +
       }

     

       48
       48
       +
       

     

       49
       49
       +
       a {

     

       50
       50
       +
           color: var(--primary-color);

     

       51
       51
       +
           text-decoration: none;

     

       52
       52
       +
           transition: all var(--transition-speed) ease;

     

       53
       53
       +
       }

     

       54
       54
       +
       

     

       55
       55
       +
       a:hover {

     

       56
       56
       +
           color: var(--accent-color);

     

       57
       57
       +
       }

     

       58
       58
       +
       

     

       59
       59
       +
       /* Navigation */

     

       60
       60
       +
       header {

     

       61
       61
       +
           background-color: var(--secondary-color);

     

       62
       62
       +
           position: fixed;

     

       63
       63
       +
           top: 0;

     

       64
       64
       +
           left: 0;

     

       65
       65
       +
           right: 0;

     

       66
       66
       +
           z-index: 1000;

     

       67
       67
       +
           box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

     

       68
       68
       +
       }

     

       69
       69
       +
       

     

       70
       70
       +
       nav {

     

       71
       71
       +
           display: flex;

     

       72
       72
       +
           justify-content: space-between;

     

       73
       73
       +
           align-items: center;

     

       74
       74
       +
           padding: 20px;

     

       75
       75
       +
           max-width: 1000px;

     

       76
       76
       +
           margin: 0 auto;

     

       77
       77
       +
       }

     

       78
       78
       +
       

     

       79
       79
       +
       .logo {

     

       80
       80
       +
           color: white;

     

       81
       81
       +
           font-size: 1.5rem;

     

       82
       82
       +
           font-weight: bold;

     

       83
       83
       +
       }

     

       84
       84
       +
       

     

       85
       85
       +
       .nav-container {

     

       86
       86
       +
           display: flex;

     

       87
       87
       +
           align-items: center;

     

       88
       88
       +
       }

     

       89
       89
       +
       

     

       90
       90
       +
       nav ul {

     

       91
       91
       +
           display: flex;

     

       92
       92
       +
           list-style: none;

     

       93
       93
       +
       }

     

       94
       94
       +
       

     

       95
       95
       +
       .main-nav {

     

       96
       96
       +
           margin-right: 30px;

     

       97
       97
       +
       }

     

       98
       98
       +
       

     

       99
       99
       +
       .social-nav {

     

       100
       100
       +
           border-left: 1px solid rgba(255, 255, 255, 0.2);

     

       101
       101
       +
           padding-left: 20px;

     

       102
       102
       +
       }

     

       103
       103
       +
       

     

       104
       104
       +
       nav ul li {

     

       105
       105
       +
           margin-left: 30px;

     

       106
       106
       +
       }

     

       107
       107
       +
       

     

       108
       108
       +
       .main-nav li:first-child {

     

       109
       109
       +
           margin-left: 0;

     

       110
       110
       +
       }

     

       111
       111
       +
       

     

       112
       112
       +
       nav ul li.social-icon {

     

       113
       113
       +
           margin-left: 15px;

     

       114
       114
       +
       }

     

       115
       115
       +
       

     

       116
       116
       +
       .social-nav li:first-child {

     

       117
       117
       +
           margin-left: 0;

     

       118
       118
       +
       }

     

       119
       119
       +
       

     

       120
       120
       +
       nav ul li a {

     

       121
       121
       +
           color: white;

     

       122
       122
       +
           position: relative;

     

       123
       123
       +
       }

     

       124
       124
       +
       

     

       125
       125
       +
       nav ul li a:after {

     

       126
       126
       +
           content: '';

     

       127
       127
       +
           position: absolute;

     

       128
       128
       +
           width: 0;

     

       129
       129
       +
           height: 2px;

     

       130
       130
       +
           background: var(--accent-color);

     

       131
       131
       +
           bottom: -5px;

     

       132
       132
       +
           left: 0;

     

       133
       133
       +
           transition: width var(--transition-speed) ease;

     

       134
       134
       +
       }

     

       135
       135
       +
       

     

       136
       136
       +
       nav ul li a:hover:after {

     

       137
       137
       +
           width: 100%;

     

       138
       138
       +
       }

     

       139
       139
       +
       

     

       140
       140
       +
       /* Hero Section */

     

       141
       141
       +
       #hero {

     

       142
       142
       +
           background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

     

       143
       143
       +
           color: white;

     

       144
       144
       +
           text-align: center;

     

       145
       145
       +
           padding: 150px 20px 100px;

     

       146
       146
       +
           margin-top: 60px;

     

       147
       147
       +
       }

     

       148
       148
       +
       

     

       149
       149
       +
       #hero h2 {

     

       150
       150
       +
           font-size: 3rem;

     

       151
       151
       +
           margin-bottom: 30px;

     

       152
       152
       +
           color: white;

     

       153
       153
       +
           line-height: 1.2;

     

       154
       154
       +
           max-width: 700px;

     

       155
       155
       +
           margin-left: auto;

     

       156
       156
       +
           margin-right: auto;

     

       157
       157
       +
       }

     

       158
       158
       +
       

     

       159
       159
       +
       #hero .byline {

     

       160
       160
       +
           font-size: 1.5rem;

     

       161
       161
       +
           margin-bottom: 40px;

     

       162
       162
       +
       }

     

       163
       163
       +
       

     

       164
       164
       +
       .cta-button {

     

       165
       165
       +
           display: inline-block;

     

       166
       166
       +
           background-color: var(--accent-color);

     

       167
       167
       +
           color: white;

     

       168
       168
       +
           padding: 15px 30px;

     

       169
       169
       +
           border-radius: 5px;

     

       170
       170
       +
           font-weight: bold;

     

       171
       171
       +
           transition: background-color var(--transition-speed) ease;

     

       172
       172
       +
       }

     

       173
       173
       +
       

     

       174
       174
       +
       .cta-button:hover {

     

       175
       175
       +
           background-color: #c0392b;

     

       176
       176
       +
           color: white;

     

       177
       177
       +
       }

     

       178
       178
       +
       

     

       179
       179
       +
       /* Section Styles */

     

       180
       180
       +
       section {

     

       181
       181
       +
           padding: 80px 0;

     

       182
       182
       +
       }

     

       183
       183
       +
       

     

       184
       184
       +
       section h2 {

     

       185
       185
       +
           font-size: 2.5rem;

     

       186
       186
       +
           text-align: center;

     

       187
       187
       +
           margin-bottom: 50px;

     

       188
       188
       +
           position: relative;

     

       189
       189
       +
       }

     

       190
       190
       +
       

     

       191
       191
       +
       section h2:after {

     

       192
       192
       +
           content: '';

     

       193
       193
       +
           position: absolute;

     

       194
       194
       +
           width: 100px;

     

       195
       195
       +
           height: 3px;

     

       196
       196
       +
           background-color: var(--accent-color);

     

       197
       197
       +
           bottom: -15px;

     

       198
       198
       +
           left: 50%;

     

       199
       199
       +
           transform: translateX(-50%);

     

       200
       200
       +
       }

     

       201
       201
       +
       

     

       202
       202
       +
       /* Manifesto Section */

     

       203
       203
       +
       #manifesto {

     

       204
       204
       +
           background-color: white;

     

       205
       205
       +
       }

     

       206
       206
       +
       

     

       207
       207
       +
       #manifesto .byline {

     

       208
       208
       +
           font-size: 1.2rem;

     

       209
       209
       +
           text-align: center;

     

       210
       210
       +
           margin-bottom: 30px;

     

       211
       211
       +
       }

     

       212
       212
       +
       

     

       213
       213
       +
       #manifesto .byline a {

     

       214
       214
       +
           color: var(--primary-color);

     

       215
       215
       +
           text-decoration: none;

     

       216
       216
       +
           transition: color 0.3s ease;

     

       217
       217
       +
       }

     

       218
       218
       +
       

     

       219
       219
       +
       #manifesto .byline a:hover {

     

       220
       220
       +
           color: var(--accent-color);

     

       221
       221
       +
           text-decoration: underline;

     

       222
       222
       +
       }

     

       223
       223
       +
       

     

       224
       224
       +
       blockquote {

     

       225
       225
       +
           font-size: 1.5rem;

     

       226
       226
       +
           font-style: italic;

     

       227
       227
       +
           border-left: 5px solid var(--primary-color);

     

       228
       228
       +
           padding-left: 20px;

     

       229
       229
       +
           margin: 30px 0;

     

       230
       230
       +
           color: var(--primary-color);

     

       231
       231
       +
       }

     

       232
       232
       +
       

     

       233
       233
       +
       .closing-quote {

     

       234
       234
       +
           text-align: center;

     

       235
       235
       +
           border-left: none;

     

       236
       236
       +
           padding: 25px 20px;

     

       237
       237
       +
           margin: 40px auto 20px;

     

       238
       238
       +
           max-width: 800px;

     

       239
       239
       +
           color: var(--accent-color);

     

       240
       240
       +
           font-weight: 400;

     

       241
       241
       +
           background-color: rgba(231, 76, 60, 0.05);

     

       242
       242
       +
           border-radius: 8px;

     

       243
       243
       +
       }

     

       244
       244
       +
       

     

       245
       245
       +
       .principle {

     

       246
       246
       +
           margin-bottom: 40px;

     

       247
       247
       +
           padding: 20px;

     

       248
       248
       +
           border-radius: 5px;

     

       249
       249
       +
           background-color: rgba(236, 240, 241, 0.5);

     

       250
       250
       +
           transition: transform var(--transition-speed) ease;

     

       251
       251
       +
       }

     

       252
       252
       +
       

     

       253
       253
       +
       .principle:hover {

     

       254
       254
       +
           transform: translateY(-5px);

     

       255
       255
       +
           box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);

     

       256
       256
       +
       }

     

       257
       257
       +
       

     

       258
       258
       +
       .principle h3 {

     

       259
       259
       +
           color: var(--primary-color);

     

       260
       260
       +
       }

     

       261
       261
       +
       

     

       262
       262
       +
       /* Use Cases Section */

     

       263
       263
       +
       #usecases {

     

       264
       264
       +
           background-color: #f9f9f9;

     

       265
       265
       +
       }

     

       266
       266
       +
       

     

       267
       267
       +
       .usecase {

     

       268
       268
       +
           margin-bottom: 50px;

     

       269
       269
       +
           padding: 30px;

     

       270
       270
       +
           border-radius: 5px;

     

       271
       271
       +
           background-color: white;

     

       272
       272
       +
           box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);

     

       273
       273
       +
           transition: transform var(--transition-speed) ease;

     

       274
       274
       +
       }

     

       275
       275
       +
       

     

       276
       276
       +
       .usecase:hover {

     

       277
       277
       +
           transform: translateY(-5px);

     

       278
       278
       +
           box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);

     

       279
       279
       +
       }

     

       280
       280
       +
       

     

       281
       281
       +
       .usecase h3 {

     

       282
       282
       +
           color: var(--primary-color);

     

       283
       283
       +
           margin-bottom: 15px;

     

       284
       284
       +
       }

     

       285
       285
       +
       

     

       286
       286
       +
       .usecase ul {

     

       287
       287
       +
           margin-left: 20px;

     

       288
       288
       +
           margin-bottom: 20px;

     

       289
       289
       +
       }

     

       290
       290
       +
       

     

       291
       291
       +
       .usecase .cta-button {

     

       292
       292
       +
           display: inline-block;

     

       293
       293
       +
           background-color: var(--primary-color);

     

       294
       294
       +
           color: white;

     

       295
       295
       +
           padding: 8px 20px;

     

       296
       296
       +
           border-radius: 5px;

     

       297
       297
       +
           font-weight: bold;

     

       298
       298
       +
           font-size: 0.9rem;

     

       299
       299
       +
           margin-top: 10px;

     

       300
       300
       +
           transition: background-color var(--transition-speed) ease;

     

       301
       301
       +
       }

     

       302
       302
       +
       

     

       303
       303
       +
       .usecase .cta-button:hover {

     

       304
       304
       +
           background-color: var(--accent-color);

     

       305
       305
       +
           color: white;

     

       306
       306
       +
           text-decoration: none;

     

       307
       307
       +
       }

     

       308
       308
       +
       

     

       309
       309
       +
       .investigators {

     

       310
       310
       +
           font-style: italic;

     

       311
       311
       +
           color: var(--primary-color);

     

       312
       312
       +
           border-top: 1px solid #eee;

     

       313
       313
       +
           padding-top: 10px;

     

       314
       314
       +
           margin-top: 15px;

     

       315
       315
       +
       }

     

       316
       316
       +
       

     

       317
       317
       +
       /* Use Case Detail Page */

     

       318
       318
       +
       #usecase-detail {

     

       319
       319
       +
           background-color: #f9f9f9;

     

       320
       320
       +
           margin-top: 60px;

     

       321
       321
       +
           padding-top: 80px;

     

       322
       322
       +
       }

     

       323
       323
       +
       

     

       324
       324
       +
       .back-link {

     

       325
       325
       +
           margin-top: 30px;

     

       326
       326
       +
           margin-bottom: 20px;

     

       327
       327
       +
       }

     

       328
       328
       +
       

     

       329
       329
       +
       .back-link a {

     

       330
       330
       +
           display: inline-block;

     

       331
       331
       +
           color: var(--primary-color);

     

       332
       332
       +
           font-weight: 500;

     

       333
       333
       +
           transition: color var(--transition-speed) ease;

     

       334
       334
       +
       }

     

       335
       335
       +
       

     

       336
       336
       +
       .back-link a:hover {

     

       337
       337
       +
           color: var(--accent-color);

     

       338
       338
       +
           text-decoration: underline;

     

       339
       339
       +
       }

     

       340
       340
       +
       

     

       341
       341
       +
       .investigators a {

     

       342
       342
       +
           color: var(--primary-color);

     

       343
       343
       +
           text-decoration: none;

     

       344
       344
       +
           transition: color 0.3s ease;

     

       345
       345
       +
       }

     

       346
       346
       +
       

     

       347
       347
       +
       .investigators a:hover {

     

       348
       348
       +
           color: var(--accent-color);

     

       349
       349
       +
           text-decoration: underline;

     

       350
       350
       +
       }

     

       351
       351
       +
       

     

       352
       352
       +
       /* Timeline Section */

     

       353
       353
       +
       #timeline {

     

       354
       354
       +
           background-color: white;

     

       355
       355
       +
           padding-bottom: 100px;

     

       356
       356
       +
       }

     

       357
       357
       +
       

     

       358
       358
       +
       .timeline-separator {

     

       359
       359
       +
           text-align: center;

     

       360
       360
       +
           position: relative;

     

       361
       361
       +
           margin: 30px auto 40px;

     

       362
       362
       +
           max-width: 800px;

     

       363
       363
       +
       }

     

       364
       364
       +
       

     

       365
       365
       +
       .timeline-separator:before {

     

       366
       366
       +
           content: '';

     

       367
       367
       +
           position: absolute;

     

       368
       368
       +
           width: 100%;

     

       369
       369
       +
           height: 1px;

     

       370
       370
       +
           background-color: #e0e0e0;

     

       371
       371
       +
           top: 50%;

     

       372
       372
       +
           left: 0;

     

       373
       373
       +
           z-index: 1;

     

       374
       374
       +
       }

     

       375
       375
       +
       

     

       376
       376
       +
       .timeline-separator span {

     

       377
       377
       +
           display: inline-block;

     

       378
       378
       +
           padding: 10px 20px;

     

       379
       379
       +
           background-color: white;

     

       380
       380
       +
           color: var(--secondary-color);

     

       381
       381
       +
           font-weight: bold;

     

       382
       382
       +
           position: relative;

     

       383
       383
       +
           z-index: 2;

     

       384
       384
       +
           border-radius: 20px;

     

       385
       385
       +
           box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);

     

       386
       386
       +
           font-size: 1.1rem;

     

       387
       387
       +
       }

     

       388
       388
       +
       

     

       389
       389
       +
       .timeline-separator:first-of-type span {

     

       390
       390
       +
           color: #27ae60;

     

       391
       391
       +
           box-shadow: 0 3px 10px rgba(39, 174, 96, 0.15);

     

       392
       392
       +
       }

     

       393
       393
       +
       

     

       394
       394
       +
       .timeline {

     

       395
       395
       +
           position: relative;

     

       396
       396
       +
           max-width: 800px;

     

       397
       397
       +
           margin: 0 auto;

     

       398
       398
       +
       }

     

       399
       399
       +
       

     

       400
       400
       +
       .timeline:before {

     

       401
       401
       +
           content: '';

     

       402
       402
       +
           position: absolute;

     

       403
       403
       +
           top: 0;

     

       404
       404
       +
           bottom: 0;

     

       405
       405
       +
           left: 50%;

     

       406
       406
       +
           width: 4px;

     

       407
       407
       +
           background: linear-gradient(to bottom, var(--primary-color), var(--accent-color));

     

       408
       408
       +
           transform: translateX(-50%);

     

       409
       409
       +
           border-radius: 4px;

     

       410
       410
       +
       }

     

       411
       411
       +
       

     

       412
       412
       +
       .timeline-item.future:after {

     

       413
       413
       +
           border-color: #27ae60;

     

       414
       414
       +
           border-width: 3px;

     

       415
       415
       +
       }

     

       416
       416
       +
       

     

       417
       417
       +
       .timeline-item.future .timeline-content {

     

       418
       418
       +
           background-color: #f9fffc;

     

       419
       419
       +
           box-shadow: 0 5px 25px rgba(39, 174, 96, 0.15);

     

       420
       420
       +
       }

     

       421
       421
       +
       

     

       422
       422
       +
       .timeline-item.future .timeline-content:before {

     

       423
       423
       +
           border-right-color: #f9fffc;

     

       424
       424
       +
       }

     

       425
       425
       +
       

     

       426
       426
       +
       .timeline-item.future:nth-child(even) .timeline-content:before {

     

       427
       427
       +
           border-left-color: #f9fffc;

     

       428
       428
       +
       }

     

       429
       429
       +
       

     

       430
       430
       +
       .timeline-item.future .timeline-date {

     

       431
       431
       +
           color: #27ae60;

     

       432
       432
       +
       }

     

       433
       433
       +
       

     

       434
       434
       +
       .timeline-item {

     

       435
       435
       +
           position: relative;

     

       436
       436
       +
           margin-bottom: 70px;

     

       437
       437
       +
           display: flex;

     

       438
       438
       +
           justify-content: flex-start;

     

       439
       439
       +
           align-items: center;

     

       440
       440
       +
           width: 48%;

     

       441
       441
       +
           margin-right: 2%;

     

       442
       442
       +
       }

     

       443
       443
       +
       

     

       444
       444
       +
       .timeline-item:nth-child(even) {

     

       445
       445
       +
           margin-left: 52%;

     

       446
       446
       +
           margin-right: 0;

     

       447
       447
       +
           width: 48%;

     

       448
       448
       +
       }

     

       449
       449
       +
       

     

       450
       450
       +
       .timeline-item:after {

     

       451
       451
       +
           content: '';

     

       452
       452
       +
           position: absolute;

     

       453
       453
       +
           width: 16px;

     

       454
       454
       +
           height: 16px;

     

       455
       455
       +
           background-color: white;

     

       456
       456
       +
           border: 3px solid var(--primary-color);

     

       457
       457
       +
           top: 20px;

     

       458
       458
       +
           border-radius: 50%;

     

       459
       459
       +
           z-index: 2;

     

       460
       460
       +
           right: auto;

     

       461
       461
       +
           left: calc(104%);

     

       462
       462
       +
           transform: translateX(-50%);

     

       463
       463
       +
       }

     

       464
       464
       +
       

     

       465
       465
       +
       .timeline-item:nth-child(even):after {

     

       466
       466
       +
           left: -4%;

     

       467
       467
       +
           right: auto;

     

       468
       468
       +
           transform: translateX(-50%);

     

       469
       469
       +
       }

     

       470
       470
       +
       

     

       471
       471
       +
       .timeline-date {

     

       472
       472
       +
           position: absolute;

     

       473
       473
       +
           width: 170px;

     

       474
       474
       +
           text-align: right;

     

       475
       475
       +
           left: -200px;

     

       476
       476
       +
           color: var(--primary-color);

     

       477
       477
       +
           font-weight: bold;

     

       478
       478
       +
           font-size: 1.1rem;

     

       479
       479
       +
       }

     

       480
       480
       +
       

     

       481
       481
       +
       .timeline-item:nth-child(even) .timeline-date {

     

       482
       482
       +
           right: -200px;

     

       483
       483
       +
           left: auto;

     

       484
       484
       +
           text-align: left;

     

       485
       485
       +
       }

     

       486
       486
       +
       

     

       487
       487
       +
       .timeline-content {

     

       488
       488
       +
           background-color: #f9f9f9;

     

       489
       489
       +
           padding: 20px 25px;

     

       490
       490
       +
           border-radius: 8px;

     

       491
       491
       +
           box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);

     

       492
       492
       +
           position: relative;

     

       493
       493
       +
           width: 100%;

     

       494
       494
       +
           transition: transform 0.3s ease, box-shadow 0.3s ease;

     

       495
       495
       +
       }

     

       496
       496
       +
       

     

       497
       497
       +
       .timeline-content:hover {

     

       498
       498
       +
           transform: translateY(-5px);

     

       499
       499
       +
           box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);

     

       500
       500
       +
       }

     

       501
       501
       +
       

     

       502
       502
       +
       .timeline-content p {

     

       503
       503
       +
           font-size: 1.15rem;

     

       504
       504
       +
           line-height: 1.6;

     

       505
       505
       +
           margin: 0;

     

       506
       506
       +
           font-weight: 400;

     

       507
       507
       +
       }

     

       508
       508
       +
       

     

       509
       509
       +
       .timeline-content a {

     

       510
       510
       +
           color: var(--primary-color);

     

       511
       511
       +
           text-decoration: none;

     

       512
       512
       +
           font-weight: 500;

     

       513
       513
       +
           transition: color 0.3s ease;

     

       514
       514
       +
       }

     

       515
       515
       +
       

     

       516
       516
       +
       .timeline-content a:hover {

     

       517
       517
       +
           color: var(--accent-color);

     

       518
       518
       +
           text-decoration: underline;

     

       519
       519
       +
       }

     

       520
       520
       +
       

     

       521
       521
       +
       .timeline-content:before {

     

       522
       522
       +
           content: '';

     

       523
       523
       +
           position: absolute;

     

       524
       524
       +
           top: 20px;

     

       525
       525
       +
           right: 100%;

     

       526
       526
       +
           border: 12px solid transparent;

     

       527
       527
       +
           border-right-color: #f9f9f9;

     

       528
       528
       +
           margin-right: -1px;

     

       529
       529
       +
       }

     

       530
       530
       +
       

     

       531
       531
       +
       .timeline-item:nth-child(even) .timeline-content:before {

     

       532
       532
       +
           left: 100%;

     

       533
       533
       +
           right: auto;

     

       534
       534
       +
           border-color: transparent;

     

       535
       535
       +
           border-left-color: #f9f9f9;

     

       536
       536
       +
           margin-left: -1px;

     

       537
       537
       +
       }

     

       538
       538
       +
       

     

       539
       539
       +
       /* About Section */

     

       540
       540
       +
       #about {

     

       541
       541
       +
           background-color: #f9f9f9;

     

       542
       542
       +
           text-align: center;

     

       543
       543
       +
       }

     

       544
       544
       +
       

     

       545
       545
       +
       .participants ul {

     

       546
       546
       +
           display: flex;

     

       547
       547
       +
           flex-wrap: wrap;

     

       548
       548
       +
           justify-content: center;

     

       549
       549
       +
           list-style: none;

     

       550
       550
       +
           margin-bottom: 40px;

     

       551
       551
       +
       }

     

       552
       552
       +
       

     

       553
       553
       +
       .participants li {

     

       554
       554
       +
           margin: 10px 20px;

     

       555
       555
       +
           padding: 10px 20px;

     

       556
       556
       +
           background-color: white;

     

       557
       557
       +
           border-radius: 5px;

     

       558
       558
       +
           box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);

     

       559
       559
       +
           transition: transform var(--transition-speed) ease;

     

       560
       560
       +
           font-size: 1.1rem;

     

       561
       561
       +
       }

     

       562
       562
       +
       

     

       563
       563
       +
       .participants li:hover {

     

       564
       564
       +
           transform: translateY(-5px);

     

       565
       565
       +
           box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);

     

       566
       566
       +
       }

     

       567
       567
       +
       

     

       568
       568
       +
       .participants li a {

     

       569
       569
       +
           color: var(--secondary-color);

     

       570
       570
       +
           font-weight: 500;

     

       571
       571
       +
           text-decoration: none;

     

       572
       572
       +
           transition: color 0.3s ease;

     

       573
       573
       +
       }

     

       574
       574
       +
       

     

       575
       575
       +
       .participants li a:hover {

     

       576
       576
       +
           color: black;

     

       577
       577
       +
           text-decoration: underline;

     

       578
       578
       +
       }

     

       579
       579
       +
       

     

       580
       580
       +
       .participants li.original {

     

       581
       581
       +
           background-color: var(--og-color);

     

       582
       582
       +
       }

     

       583
       583
       +
       

     

       584
       584
       +
       .participants li.original a {

     

       585
       585
       +
           color: black;

     

       586
       586
       +
       }

     

       587
       587
       +
       

     

       588
       588
       +
       .participants li.original:hover {

     

       589
       589
       +
           background-color: var(--og-color);

     

       590
       590
       +
       }

     

       591
       591
       +
       

     

       592
       592
       +
       .social-icon a {

     

       593
       593
       +
           display: inline-block;

     

       594
       594
       +
           color: white;

     

       595
       595
       +
           transition: all var(--transition-speed) ease;

     

       596
       596
       +
           line-height: normal;

     

       597
       597
       +
       }

     

       598
       598
       +
       

     

       599
       599
       +
       .social-icon img.bsky-icon,

     

       600
       600
       +
       .social-icon img.matrix-icon {

     

       601
       601
       +
           position: relative;

     

       602
       602
       +
           top: 3px;

     

       603
       603
       +
           filter: invert(1);

     

       604
       604
       +
           vertical-align: baseline;

     

       605
       605
       +
       }

     

       606
       606
       +
       

     

       607
       607
       +
       .social-icon a:hover {

     

       608
       608
       +
           opacity: 0.8;

     

       609
       609
       +
       }

     

       610
       610
       +
       

     

       611
       611
       +
       .social-links {

     

       612
       612
       +
           display: flex;

     

       613
       613
       +
           gap: 15px;

     

       614
       614
       +
           margin-top: 20px;

     

       615
       615
       +
           justify-content: center;

     

       616
       616
       +
           flex-wrap: wrap;

     

       617
       617
       +
       }

     

       618
       618
       +
       

     

       619
       619
       +
       .matrix-link, .bluesky-link {

     

       620
       620
       +
           display: inline-flex;

     

       621
       621
       +
           align-items: center;

     

       622
       622
       +
           padding: 10px 20px;

     

       623
       623
       +
           color: white;

     

       624
       624
       +
           border-radius: 5px;

     

       625
       625
       +
           transition: background-color var(--transition-speed) ease;

     

       626
       626
       +
           font-weight: 500;

     

       627
       627
       +
       }

     

       628
       628
       +
       

     

       629
       629
       +
       .matrix-link {

     

       630
       630
       +
           background-color: var(--primary-color);

     

       631
       631
       +
       }

     

       632
       632
       +
       

     

       633
       633
       +
       .bluesky-link {

     

       634
       634
       +
           background-color: #0085FF;

     

       635
       635
       +
       }

     

       636
       636
       +
       

     

       637
       637
       +
       .bluesky-link img.bsky-icon,

     

       638
       638
       +
       .matrix-link img.matrix-icon {

     

       639
       639
       +
           margin-right: 8px;

     

       640
       640
       +
           position: relative;

     

       641
       641
       +
           top: 4px;

     

       642
       642
       +
           vertical-align: baseline;

     

       643
       643
       +
       }

     

       644
       644
       +
       

     

       645
       645
       +
       .matrix-link:hover {

     

       646
       646
       +
           background-color: #2980b9;

     

       647
       647
       +
           color: white;

     

       648
       648
       +
       }

     

       649
       649
       +
       

     

       650
       650
       +
       .bluesky-link:hover {

     

       651
       651
       +
           background-color: #0066CC;

     

       652
       652
       +
           color: white;

     

       653
       653
       +
       }

     

       654
       654
       +
       

     

       655
       655
       +
       /* Footer */

     

       656
       656
       +
       footer {

     

       657
       657
       +
           background-color: var(--secondary-color);

     

       658
       658
       +
           color: white;

     

       659
       659
       +
           text-align: center;

     

       660
       660
       +
           padding: 30px 0;

     

       661
       661
       +
       }

     

       662
       662
       +
       

     

       663
       663
       +
       footer .disclaimer {

     

       664
       664
       +
           font-size: 0.85rem;

     

       665
       665
       +
           opacity: 0.85;

     

       666
       666
       +
           max-width: 800px;

     

       667
       667
       +
           margin: 10px auto 0;

     

       668
       668
       +
           line-height: 1.5;

     

       669
       669
       +
       }

     

       670
       670
       +
       

     

       671
       671
       +
       footer .disclaimer a {

     

       672
       672
       +
           color: white;

     

       673
       673
       +
           text-decoration: underline;

     

       674
       674
       +
           opacity: 0.9;

     

       675
       675
       +
           transition: opacity 0.3s ease;

     

       676
       676
       +
       }

     

       677
       677
       +
       

     

       678
       678
       +
       footer .disclaimer a:hover {

     

       679
       679
       +
           opacity: 1;

     

       680
       680
       +
           color: white;

     

       681
       681
       +
       }

     

       682
       682
       +
       

     

       683
       683
       +
       /* Responsive styles */

     

       684
       684
       +
       @media (max-width: 768px) {

     

       685
       685
       +
           nav {

     

       686
       686
       +
               flex-direction: column;

     

       687
       687
       +
               padding: 15px;

     

       688
       688
       +
           }

     

       689
       689
       +
           

     

       690
       690
       +
           .logo {

     

       691
       691
       +
               display: none;

     

       692
       692
       +
           }

     

       693
       693
       +
           

     

       694
       694
       +
           .nav-container {

     

       695
       695
       +
               flex-direction: row;

     

       696
       696
       +
               width: 100%;

     

       697
       697
       +
               justify-content: center;

     

       698
       698
       +
           }

     

       699
       699
       +
           

     

       700
       700
       +
           .main-nav {

     

       701
       701
       +
               margin-right: 0;

     

       702
       702
       +
               margin-top: 0;

     

       703
       703
       +
               flex-wrap: wrap;

     

       704
       704
       +
               justify-content: center;

     

       705
       705
       +
           }

     

       706
       706
       +
           

     

       707
       707
       +
           .social-nav {

     

       708
       708
       +
               display: none;

     

       709
       709
       +
           }

     

       710
       710
       +
           

     

       711
       711
       +
           nav ul li {

     

       712
       712
       +
               margin: 10px;

     

       713
       713
       +
           }

     

       714
       714
       +
           

     

       715
       715
       +
           nav ul li.social-icon {

     

       716
       716
       +
               margin: 10px;

     

       717
       717
       +
           }

     

       718
       718
       +
           

     

       719
       719
       +
           #hero {

     

       720
       720
       +
               padding: 120px 20px 100px;

     

       721
       721
       +
               margin-top: 40px;

     

       722
       722
       +
           }

     

       723
       723
       +
           

     

       724
       724
       +
           #hero h2 {

     

       725
       725
       +
               font-size: 2.2rem;

     

       726
       726
       +
               padding: 0 10px;

     

       727
       727
       +
           }

     

       728
       728
       +
           

     

       729
       729
       +
           .timeline-separator {

     

       730
       730
       +
               margin: 40px auto 30px;

     

       731
       731
       +
           }

     

       732
       732
       +
           

     

       733
       733
       +
           .timeline-separator span {

     

       734
       734
       +
               padding: 8px 15px;

     

       735
       735
       +
               font-size: 1rem;

     

       736
       736
       +
           }

     

       737
       737
       +
           

     

       738
       738
       +
           .timeline:before {

     

       739
       739
       +
               left: 30px;

     

       740
       740
       +
           }

     

       741
       741
       +
           

     

       742
       742
       +
           .timeline-item, .timeline-item:nth-child(even) {

     

       743
       743
       +
               width: calc(100% - 60px);

     

       744
       744
       +
               margin-left: 0;

     

       745
       745
       +
               margin-right: 0;

     

       746
       746
       +
               padding-left: 60px;

     

       747
       747
       +
           }

     

       748
       748
       +
           

     

       749
       749
       +
           .timeline:before {

     

       750
       750
       +
               left: 30px;

     

       751
       751
       +
               transform: translateX(-50%);

     

       752
       752
       +
           }

     

       753
       753
       +
           

     

       754
       754
       +
           .timeline-item:after, .timeline-item:nth-child(even):after {

     

       755
       755
       +
               left: 30px;

     

       756
       756
       +
               right: auto;

     

       757
       757
       +
               transform: translateX(-50%);

     

       758
       758
       +
           }

     

       759
       759
       +
           

     

       760
       760
       +
           .timeline-date, .timeline-item:nth-child(even) .timeline-date {

     

       761
       761
       +
               left: 40px;

     

       762
       762
       +
               right: auto;

     

       763
       763
       +
               text-align: left;

     

       764
       764
       +
               top: -30px;

     

       765
       765
       +
               width: auto;

     

       766
       766
       +
           }

     

       767
       767
       +
           

     

       768
       768
       +
           .timeline-content:before, .timeline-item:nth-child(even) .timeline-content:before {

     

       769
       769
       +
               left: -20px;

     

       770
       770
       +
               right: auto;

     

       771
       771
       +
               border-color: transparent;

     

       772
       772
       +
               border-right-color: #f9f9f9;

     

       773
       773
       +
           }

     

       774
       774
       +
           

     

       775
       775
       +
           .timeline-item.future .timeline-content:before {

     

       776
       776
       +
               border-right-color: #f9fffc;

     

       777
       777
       +
           }

     

       778
       778
       +
           

     

       779
       779
       +
           .timeline-content {

     

       780
       780
       +
               font-size: 0.95rem;

     

       781
       781
       +
               padding-top: 30px;

     

       782
       782
       +
           }

     

       783
       783
       +
           

     

       784
       784
       +
           .timeline-content h3 {

     

       785
       785
       +
               font-size: 1.2rem;

     

       786
       786
       +
           }

     

       787
       787
       +
           

     

       788
       788
       +
           .participants ul {

     

       789
       789
       +
               flex-direction: column;

     

       790
       790
       +
               align-items: center;

     

       791
       791
       +
           }

     

       792
       792
       +
       }

+63

site/usecase-collaboration.html

···

       1
       1
       +
       <!DOCTYPE html>

     

       2
       2
       +
       <html lang="en">

     

       3
       3
       +
       <head>

     

       4
       4
       +
           <meta charset="UTF-8">

     

       5
       5
       +
           <meta name="viewport" content="width=device-width, initial-scale=1.0">

     

       6
       6
       +
           <title>Collaboration in the Small - A Human Approach to Computational Science</title>

     

       7
       7
       +
           <link rel="stylesheet" href="styles.css">

     

       8
       8
       +
           <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

     

       9
       9
       +
       </head>

     

       10
       10
       +
       <body>

     

       11
       11
       +
           <header>

     

       12
       12
       +
               <nav>

     

       13
       13
       +
                   <div class="logo">The Bellairs Manifesto</div>

     

       14
       14
       +
                   <div class="nav-container">

     

       15
       15
       +
                       <ul class="main-nav">

     

       16
       16
       +
                           <li><a href="index.html#manifesto">Manifesto</a></li>

     

       17
       17
       +
                           <li><a href="index.html#usecases">Actions</a></li>

     

       18
       18
       +
                           <li><a href="index.html#timeline">Timeline</a></li>

     

       19
       19
       +
                           <li><a href="index.html#about">About</a></li>

     

       20
       20
       +
                       </ul>

     

       21
       21
       +
                       <ul class="social-nav">

     

       22
       22
       +
                           <li class="social-icon"><a href="https://matrix.to/#/#bellairs-discuss:recoil.org" target="_blank" aria-label="Matrix">

     

       23
       23
       +
                               <img src="matrix-icon.svg" alt="Matrix" width="20" height="20" class="matrix-icon">

     

       24
       24
       +
                           </a></li>

     

       25
       25
       +
                           <li class="social-icon"><a href="https://bsky.app/profile/bellairs.quest" target="_blank" aria-label="Bluesky">

     

       26
       26
       +
                               <img src="bluesky-icon.svg" alt="Bluesky" width="20" height="20" class="bsky-icon">

     

       27
       27
       +
                           </a></li>

     

       28
       28
       +
                       </ul>

     

       29
       29
       +
                   </div>

     

       30
       30
       +
               </nav>

     

       31
       31
       +
           </header>

     

       32
       32
       +
       

     

       33
       33
       +
           <section id="usecase-detail">

     

       34
       34
       +
               <div class="container">

     

       35
       35
       +
                   <h2>Use Case: Collaboration in the Small</h2>

     

       36
       36
       +
                   

     

       37
       37
       +
                   <div class="usecase">

     

       38
       38
       +
                       <p>Many research projects necessitate the involvement of inputs from other researchers, including those in a different area. For example:</p>

     

       39
       39
       +
                       <ul>

     

       40
       40
       +
                           <li>Research on schedulers depends on the availability of traces (e.g., from large ML clusters or servers running databases for web servers) that are not readily available to the average computer systems researcher. At the same time, these traces are considered sensitive (because they reveal information about cluster size and machine specification) and are not often posted online.</li>

     

       41
       41
       +
                           <li>Research on verification and testing requires system specifications, which need to be validated by the programmers who built the software but are not experts in verification. Few groups have sufficient expertise to both write specifications for real-world software and use them for verification tasks, and collaboration is thus key to these efforts.</li>

     

       42
       42
       +
                           <li>Research that extends prior work, which constructs data or analysis artifacts, and would benefit from starting from these artifacts.</li>

     

       43
       43
       +
                       </ul>

     

       44
       44
       +
                       <p>However, finding other researchers' digital artifacts, and then using (or extending) them is challenging today: we have relatively few mechanisms to discover existing digital artifacts (the ones we have usually require serendipitously reading a research paper or website that describes the artifact); no mechanisms to ensure that contributions from publicly available artifacts are recognized; and nearly no good mechanism to share artifacts among a small set of research groups (each of which might have an evolving set of individual participants).</p>

     

       45
       45
       +
                       <p>We will address these challenges by developing systems that make it easier to discover digital artifacts, make it easier to track the contributions of each artifact's provider, and reduce friction for sharing artifacts between research groups.</p>

     

       46
       46
       +
                       <p class="investigators"><strong>Investigators:</strong> <a href="https://cseweb.ucsd.edu/~mcoblenz/" target="_blank">Michael Coblenz</a></p>

     

       47
       47
       +
                   </div>

     

       48
       48
       +
                   

     

       49
       49
       +
                   <div class="back-link">

     

       50
       50
       +
                       <a href="index.html#usecases">&larr; Back to all use cases</a>

     

       51
       51
       +
                   </div>

     

       52
       52
       +
               </div>

     

       53
       53
       +
           </section>

     

       54
       54
       +
       

     

       55
       55
       +
           <footer>

     

       56
       56
       +
               <div class="container">

     

       57
       57
       +
                   <p class="disclaimer">&copy; 2025 in the public domain. This site is not directly affiliated with the <a href="https://www.mcgill.ca/bellairs/" target="_blank">Bellairs Research Institute</a>, but we are grateful to them for hosting our research symposium that made this manifesto possible.</p>

     

       58
       58
       +
               </div>

     

       59
       59
       +
           </footer>

     

       60
       60
       +
       

     

       61
       61
       +
           <script src="scripts.js"></script>

     

       62
       62
       +
       </body>

     

       63
       63
       +
       </html>

+57

site/usecase-conservation.html

···

       1
       1
       +
       <!DOCTYPE html>

     

       2
       2
       +
       <html lang="en">

     

       3
       3
       +
       <head>

     

       4
       4
       +
           <meta charset="UTF-8">

     

       5
       5
       +
           <meta name="viewport" content="width=device-width, initial-scale=1.0">

     

       6
       6
       +
           <title>Conservation and Sensing - A Human Approach to Computational Science</title>

     

       7
       7
       +
           <link rel="stylesheet" href="styles.css">

     

       8
       8
       +
           <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

     

       9
       9
       +
       </head>

     

       10
       10
       +
       <body>

     

       11
       11
       +
           <header>

     

       12
       12
       +
               <nav>

     

       13
       13
       +
                   <div class="logo">The Bellairs Manifesto</div>

     

       14
       14
       +
                   <div class="nav-container">

     

       15
       15
       +
                       <ul class="main-nav">

     

       16
       16
       +
                           <li><a href="index.html#manifesto">Manifesto</a></li>

     

       17
       17
       +
                           <li><a href="index.html#usecases">Actions</a></li>

     

       18
       18
       +
                           <li><a href="index.html#timeline">Timeline</a></li>

     

       19
       19
       +
                           <li><a href="index.html#about">About</a></li>

     

       20
       20
       +
                       </ul>

     

       21
       21
       +
                       <ul class="social-nav">

     

       22
       22
       +
                           <li class="social-icon"><a href="https://matrix.to/#/#bellairs-discuss:recoil.org" target="_blank" aria-label="Matrix">

     

       23
       23
       +
                               <img src="matrix-icon.svg" alt="Matrix" width="20" height="20" class="matrix-icon">

     

       24
       24
       +
                           </a></li>

     

       25
       25
       +
                           <li class="social-icon"><a href="https://bsky.app/profile/bellairs.quest" target="_blank" aria-label="Bluesky">

     

       26
       26
       +
                               <img src="bluesky-icon.svg" alt="Bluesky" width="20" height="20" class="bsky-icon">

     

       27
       27
       +
                           </a></li>

     

       28
       28
       +
                       </ul>

     

       29
       29
       +
                   </div>

     

       30
       30
       +
               </nav>

     

       31
       31
       +
           </header>

     

       32
       32
       +
       

     

       33
       33
       +
           <section id="usecase-detail">

     

       34
       34
       +
               <div class="container">

     

       35
       35
       +
                   <h2>Use Case: Conservation and Sensing</h2>

     

       36
       36
       +
                   

     

       37
       37
       +
                   <div class="usecase">

     

       38
       38
       +
                       <p>Some large-scale research projects require acquiring, aggregating, manipulating, analyzing, and reporting on a multitude of data sets. Sometimes, the outputs may even connect to real-time systems, such as data dashboards or sensor networks, which need to be configured as a result of the analysis. For example, the IUCN Red List of Threatened Species is derived from a multitude of data regarding species sightings, habitat loss, and climate predictions. Among this data is output from the Centre for Earth Observation, which itself constructs complex models that assimilate data. As another example, a network of sensing buoys may receive control inputs from a control system that sends commands on the basis of weather predictions and mission inputs.</p>

     

       39
       39
       +
                       <p>Some inputs must be protected. For example, locations of threatened species may be useful in the analysis but need to be kept private lest poachers destroy those populations. Thus, although this scenario benefits from openness and transparency in general, not everything can be made public.</p>

     

       40
       40
       +
                       <p class="investigators"><strong>Investigators:</strong> <a href="https://cseweb.ucsd.edu/~mcoblenz/" target="_blank">Michael Coblenz</a>, <a href="https://anil.recoil.org" target="_blank">Anil Madhavapeddy</a>, <a href="https://web.eecs.umich.edu/~comar/" target="_blank">Cyrus Omar</a></p>

     

       41
       41
       +
                   </div>

     

       42
       42
       +
                   

     

       43
       43
       +
                   <div class="back-link">

     

       44
       44
       +
                       <a href="index.html#usecases">&larr; Back to all use cases</a>

     

       45
       45
       +
                   </div>

     

       46
       46
       +
               </div>

     

       47
       47
       +
           </section>

     

       48
       48
       +
       

     

       49
       49
       +
           <footer>

     

       50
       50
       +
               <div class="container">

     

       51
       51
       +
                   <p class="disclaimer">&copy; 2025 in the public domain. This site is not directly affiliated with the <a href="https://www.mcgill.ca/bellairs/" target="_blank">Bellairs Research Institute</a>, but we are grateful to them for hosting our research symposium that made this manifesto possible.</p>

     

       52
       52
       +
               </div>

     

       53
       53
       +
           </footer>

     

       54
       54
       +
       

     

       55
       55
       +
           <script src="scripts.js"></script>

     

       56
       56
       +
       </body>

     

       57
       57
       +
       </html>

+57

site/usecase-training.html

···

       1
       1
       +
       <!DOCTYPE html>

     

       2
       2
       +
       <html lang="en">

     

       3
       3
       +
       <head>

     

       4
       4
       +
           <meta charset="UTF-8">

     

       5
       5
       +
           <meta name="viewport" content="width=device-width, initial-scale=1.0">

     

       6
       6
       +
           <title>Breaking Specialist Training out of the University - A Human Approach to Computational Science</title>

     

       7
       7
       +
           <link rel="stylesheet" href="styles.css">

     

       8
       8
       +
           <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

     

       9
       9
       +
       </head>

     

       10
       10
       +
       <body>

     

       11
       11
       +
           <header>

     

       12
       12
       +
               <nav>

     

       13
       13
       +
                   <div class="logo">The Bellairs Manifesto</div>

     

       14
       14
       +
                   <div class="nav-container">

     

       15
       15
       +
                       <ul class="main-nav">

     

       16
       16
       +
                           <li><a href="index.html#manifesto">Manifesto</a></li>

     

       17
       17
       +
                           <li><a href="index.html#usecases">Actions</a></li>

     

       18
       18
       +
                           <li><a href="index.html#timeline">Timeline</a></li>

     

       19
       19
       +
                           <li><a href="index.html#about">About</a></li>

     

       20
       20
       +
                       </ul>

     

       21
       21
       +
                       <ul class="social-nav">

     

       22
       22
       +
                           <li class="social-icon"><a href="https://matrix.to/#/#bellairs-discuss:recoil.org" target="_blank" aria-label="Matrix">

     

       23
       23
       +
                               <img src="matrix-icon.svg" alt="Matrix" width="20" height="20" class="matrix-icon">

     

       24
       24
       +
                           </a></li>

     

       25
       25
       +
                           <li class="social-icon"><a href="https://bsky.app/profile/bellairs.quest" target="_blank" aria-label="Bluesky">

     

       26
       26
       +
                               <img src="bluesky-icon.svg" alt="Bluesky" width="20" height="20" class="bsky-icon">

     

       27
       27
       +
                           </a></li>

     

       28
       28
       +
                       </ul>

     

       29
       29
       +
                   </div>

     

       30
       30
       +
               </nav>

     

       31
       31
       +
           </header>

     

       32
       32
       +
       

     

       33
       33
       +
           <section id="usecase-detail">

     

       34
       34
       +
               <div class="container">

     

       35
       35
       +
                   <h2>Use Case: Breaking Specialist Training out of the University</h2>

     

       36
       36
       +
                   

     

       37
       37
       +
                   <div class="usecase">

     

       38
       38
       +
                       <p>Meaningful participation in important scientific discourses requires specialist knowledge. For example, to evaluate the safety of a plan to deploy machine learning in public infrastructure, some understanding of current techniques and their range of applicability is required; likewise, climate data cannot be meaningfully analysed by someone who lacks prior experience in statistics. Access to specialist training of this kind is presently centralised in the universities and gated behind tuition fees and time barriers.</p>

     

       39
       39
       +
                       <p>We will answer the erosion of public trust in the scientific process with a credible invitation: join us, learn our methods, and contribute to the discourse. To that end, we aim to build sustainable infrastructure for a decentralised network of publicly accessible online courseware, textbooks, tutorials, and social media that will serve as the roots of a new and serious partnership between the public and the scientific community.</p>

     

       40
       40
       +
                       <p class="investigators"><strong>Investigators:</strong> <a href="https://www.jonmsterling.com" target="_blank">Jonathan Sterling</a>, <a href="https://anil.recoil.org" target="_blank">Anil Madhavapeddy</a></p>

     

       41
       41
       +
                   </div>

     

       42
       42
       +
                   

     

       43
       43
       +
                   <div class="back-link">

     

       44
       44
       +
                       <a href="index.html#usecases">&larr; Back to all use cases</a>

     

       45
       45
       +
                   </div>

     

       46
       46
       +
               </div>

     

       47
       47
       +
           </section>

     

       48
       48
       +
       

     

       49
       49
       +
           <footer>

     

       50
       50
       +
               <div class="container">

     

       51
       51
       +
                   <p class="disclaimer">&copy; 2025 in the public domain. This site is not directly affiliated with the <a href="https://www.mcgill.ca/bellairs/" target="_blank">Bellairs Research Institute</a>, but we are grateful to them for hosting our research symposium that made this manifesto possible.</p>

     

       52
       52
       +
               </div>

     

       53
       53
       +
           </footer>

     

       54
       54
       +
       

     

       55
       55
       +
           <script src="scripts.js"></script>

     

       56
       56
       +
       </body>

     

       57
       57
       +
       </html>