astrollytelling.github.io/index.html at master · astrollytelling/astrollytelling.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<html lang="en">

  <head>
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-111319281-1"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'UA-111319281-1');
    </script>

    <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>Astrollytelling</title>

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

    <!-- Custom fonts for this template -->
    <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Cabin:700" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Mukta+Mahee:400,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

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

  </head>

  <body id="page-top">

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
      <div class="container">
        <a class="navbar-brand js-scroll-trigger" href="#page-top">Astrollytelling</a>
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
                data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
                aria-label="Toggle navigation">Menu<i class="fa fa-bars"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#topics">Topics</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#about">About</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <!-- Intro Header -->
    <header class="masthead">
      <div class="viz"></div>
      <div class="intro-body">
        <div class="container">
          <div class="row">
            <div class="col-lg-12 mx-auto">
              <h1 class="brand-heading">Astronomy + Scrollytelling</h1>
              <p class="intro-text">Astronomy through visual stories</p>
              <a href="https://github.com/astrollytelling" class= "btn btn-circle js-scroll-trigger"><i class="fa fa-github"></i></a>
              <a href="https://twitter.com/astrollytelling" class= "btn btn-circle js-scroll-trigger"><i class="fa fa-twitter"></i></a>
              <a href="mailto:astrollytelling@gmail.com" class= "btn btn-circle js-scroll-trigger"><i class="fa fa-envelope"></i></a>
            </div>
          </div>
        </div>
      </div>
    </header>

    <!-- Research Section -->
    <section id="topics" class="content-section text-center">
      <div class="container">
        <div class="row">
          <div class="col-sm-4">
            <h4>Stars</h4>
          </div>
          <div class="col-sm-4">
            <h4>Exoplanets</h4>
          </div>
          <div class="col-sm-4">
            <h4>Cosmology</h4>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-4">
            <div class="img-item">
              <a href="./stellar_evolution/index.html"><img class="mx-auto" src="img/home/stellar_evolution.png" alt=""></a>
              <p class="text-muted">The life of a star</p>
            </div>
          </div>
          <div class="col-sm-4">
            Coming soon
          </div>
          <div class="col-sm-4">
            Coming soon
          </div>
        </div>
      </div>
    </section>


    <!-- About Section -->
    <section id="about" class="content-section text-center">
      <div class="container">
        <div class="row">
          <div class="col-lg-8 mx-auto">
            <h2>About</h2>
            <p>Astrollytelling is an initiative of
              <a href="http://www.fernandobecerra.com">Fernando Becerra</a> with the objective of bringing together
              astronomy and scrollytelling. Scrollytelling, as well as storytelling in general, has gained huge popularity
              in the last years, especially in journalism. It is used as a way to tell visual stories step by step by
              simply scrolling down a webpage. In this project we have adapted this technique to explain basic
              astronomy concepts and ideas. Originally aimed to undergrad and grad students, this visualization tool is
              also useful for any astronomy enthusiast who wants to learn more about the science we do.
            </p>
            <p>
              This work could not have been possible without the help of fellow
              astronomy grad student <a href="https://www.cfa.harvard.edu/~fbecerra">Jieun Choi</a>.
              The website was built using
              <a href="https://getbootstrap.com">Bootstrap</a>,
              <a href="https://github.com/BlackrockDigital/startbootstrap-grayscale">Grayscale</a>, and
              <a href="https://d3js.org">D3.js</a>, and the code for the constellations on the
              homepage has been adapted from
              <a href="http://bl.ocks.org/erohinaelena/261c58f2c283eae3a72d">Елена Ерохина’s Block</a>.
              Did you notice that different constellations are shown every time you refresh the webpage?
            </p>
          </div>
        </div>
      </div>
    </section>


    <!-- Footer -->
    <footer>
      <div class="container text-center">
        <p>Copyright &copy; Astrollytelling 2017</p>
      </div>
    </footer>

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

    <!-- Plugin JavaScript -->
    <script src="js/jquery.easing.min.js"></script>

    <!-- D3 -->
    <script src="js/d3.min.js"></script>

    <!-- Custom scripts for this template -->
    <script src="js/astrollytelling.js"></script>
    <script src="js/stars.js"></script>


  </body>

</html>