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

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Galaxy Simulator</title>

    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/small-business.css" rel="stylesheet">

  </head>

  <body>

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
      <div class="container">
        <a class="navbar-brand" href="#">Galaxy Simulator</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home
                <span class="sr-only">(current)</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="about.html">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <!-- Page Content -->
    <div class="container">

      <!-- Heading Row -->
      <div class="row my-4">
        <div class="col-lg-8">
          <img class="img-fluid rounded" src="images/example_image_cropped_900x400.png" alt="">
        </div>
        <!-- /.col-lg-8 -->
        <div class="col-lg-4">
          <h1>Generation and Simulation</h1>
          <p>Generating star clusters and simulating the forces acting in them seemed like a good way to learn a lot of new programming concepts. You can find many of the results on this page and read the blogpost I update regularly by clicking on the button below.</p>
          <a class="btn btn-primary btn-lg" href="https://www.tildeho.me/generating-galaxies/">Read the Blogpost!</a>
        </div>
        <!-- /.col-md-4 -->
      </div>
      <!-- /.row -->

      <!-- Call to Action Well -->
      <div class="card text-white bg-secondary my-4 text-center">
        <div class="card-body">
          <p class="text-white m-0">This is (currently) a private project with limited resources, but if you are interested in diving deeper into the subject, feel free to contact me using one of the methods listed on the contact page!</p>
        </div>
      </div>

      <!-- content row -->
      <div class="row">
        <div class="col-md-4 mb-4">
          <div class="card h-100">
            <div class="card-body">
              <h2 class="card-title">What is this all?</h2>
              <p class="card-text">How did this all begin? How are the star clusters simulated? How is the simulation so fast? Where can I learn more about this? Who are Julio Navarro, Carlos Frenk, Simon White, Josh Barnes and  Piet Hut?</p>
            </div>
            <div class="card-footer">
              <a href="#" class="btn btn-primary">More info</a>
            </div>
          </div>
        </div>
        <!-- /.col-md-4 -->
        <div class="col-md-4 mb-4">
          <div class="card h-100">
            <div class="card-body">
              <h2 class="card-title">Writeup</h2>
              <p class="card-text">I wrote a writeup for people who want to implement this or just want to dive deeper into the rabbit hole. It contains the process of generating the star clusters and how the simulation efficiency can be increased alot.</p>
            </div>
            <div class="card-footer">
              <a href="http://writeup.emile.space/" class="btn btn-primary">writeup.emile.space</a>
            </div>
          </div>
        </div>
        <!-- /.col-md-4 -->
        <div class="col-md-4 mb-4">
          <div class="card h-100">
            <div class="card-body">
              <h2 class="card-title">Code</h2>
              <p class="card-text">The complete project is currently split up into multiple docker containers representing a micro-service each. It is currently stored in git and is always happy if new post-request are made!</p>
            </div>
            <div class="card-footer">
              <a href="http://code.emile.space" class="btn btn-primary">code.emile.space</a>
            </div>
          </div>
        </div>
        <!-- /.col-md-4 -->
      </div>
      <!-- /.row -->

      <!-- content row -->
      <div class="row">
        <div class="col-md-4 mb-4">
          <div class="card h-100">
            <div class="card-body">
              <h2 class="card-title">Generating</h2>
              <p class="card-text">The Generator container generates stars using NFW containers. This makes it incredibly fast, because it is not bound to a machine, but can operate on a giant cluster.</p>
            </div>
            <div class="card-footer">
              <a href="http://generator.nbg1.emile.space" class="btn btn-primary">generator.emile.space</a>
            </div>
          </div>
        </div>
        <!-- /.col-md-4 -->
        <div class="col-md-4 mb-4">
          <div class="card h-100">
            <div class="card-body">
              <h2 class="card-title">Database</h2>
              <p class="card-text">The current "Database" is a go array containing the galaxy stored in the form of a tree. This is not optimal, but it works and I'm working on a more scalable solution.</p>
            </div>
            <div class="card-footer">
              <a href="http://db.nbg1.emile.space" class="btn btn-primary">db.emile.space</a>
            </div>
          </div>
        </div>
        <!-- /.col-md-4 -->
        <div class="col-md-4 mb-4">
          <div class="card h-100">
            <div class="card-body">
              <h2 class="card-title">Manager</h2>
              <p class="card-text">The manager manages distributing stars to the simulator containers, it also collects the metrics from the Simulator containers and functions as a target for prometheus.</p>
            </div>
            <div class="card-footer">
              <a href="http://manager.nbg1.emile.space" class="btn btn-primary">manager.emile.space</a>
            </div>
          </div>
        </div>
        <!-- /.col-md-4 -->
      </div>
      <!-- /.row -->

        <!-- content row -->
        <div class="row">
          <div class="col-md-4 mb-4">
            <div class="card h-100">
              <div class="card-body">
                <h2 class="card-title">Simulator</h2>
                <p class="card-text">The simulator container get's stars from the manager and calculates the forces acting on it. It then inserts the new star into the database.</p>
              </div>
              <div class="card-footer">
                <a href="http://simulator.nbg1.emile.space" class="btn btn-primary">simulator.emile.space</a>
              </div>
            </div>
          </div>
          <!-- /.col-md-4 -->
          <div class="col-md-4 mb-4">
            <div class="card h-100">
              <div class="card-body">
                <h2 class="card-title">Traefik</h2>
                <p class="card-text"><a href="https://traefik.io/">Traefik</a> ist used as a reverse proxy for some services such as the generator container. It also allows a lot of other services to work.</p>
              </div>
              <div class="card-footer">
                <a href="http://db.nbg1.emile.space" class="btn btn-primary">db.emile.space</a>
              </div>
            </div>
          </div>
          <!-- /.col-md-4 -->
          <div class="col-md-4 mb-4">
            <div class="card h-100">
              <div class="card-body">
                <h2 class="card-title">Monitoring</h2>
                <p class="card-text">Monitoring is done by combining the power of <a href="https://prometheus.io">Prometheus</a> and <a href="https://grafana.com/">Grafana</a> using the other containers as targets to pull metrics from.</p>
              </div>
              <div class="card-footer">
                <a href="http://manager.nbg1.emile.space" class="btn btn-primary">manager.emile.space</a>
              </div>
            </div>
          </div>
          <!-- /.col-md-4 -->
      </div>
      <!-- /.row -->


    </div>
    <!-- /.container -->

      <!-- Footer -->
      <footer class="page-footer font-small blue">

        <!-- Copyright -->
        <div class="footer-copyright text-center py-3">Est. 2018:
          <a href="https://mdbootstrap.com/education/bootstrap/">emile.space</a>
        </div>
        <!-- Copyright -->

      </footer>
      <!-- Footer -->

    <!-- Bootstrap core JavaScript -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

  </body>

</html>