webdev-rest/about.html at main · Jespr0/webdev-rest · 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
<!DOCTYPE html>
<html>
    <head>

        <meta charset="utf-8"/>
        <meta name = "viewport" content="width=device-width, initial-scale=1"/>
        <link rel="stylesheet" href="css/foundation.css"/>
        <script type="application"></script>
        <title>Website</title>
        <style>
            a {
                color: black;
                text-decoration: none;
            }
            body {
                background-color: rgb(208, 208, 211);
            }
        </style>
    </head>
    <body>
        <div class="grid-x grid-padding-x">
            <div class="cell small-12 medium-6 large-6" style="color:black">
                <a href="index.html"><h4><center>Home</center></h4></a>
            </div>
            <div class="cell small-12 medium-6 large-6" style="color:black">
                <a href="about.html"><h4><center><b>About</b></center></h4></a>
            </div>
        </div>
        <div class="grid-container">
            <div class="grid-x grid-padding-x">
                <h1 class="cell auto center" style="font-family:arial"><b>About the Project</b></h1>
            </div>
            <br/>
        </div>

        <div class="grid-container names rcor">

            <h1 class="cell auto center"> Who are we?</h1>
            <div class="grid-x grid-padding-x">
                <div class="cell small-12 large-6 center"><img src ="PictureOfAndy.jpeg"  alt="Picture of Andy"/></div>
                <div class="cell center small-12 large-6 ">
                    <h1>Name:</h1>
                    <p>My name is Andy Harnisch, and I am a senior at the University of St. Thomas.</p>
                    <br/>
                    <h1>Studies:</h1>
                    <p>I am studying Computer Science for my major, and double minoring in Applied Statistics and Philsosphy.</p>
                    <br/>
                    <h1>Goals After College:</h1>
                    <p>I am currently undecided in what I want to pursue as a career in the computer science field.
                        However, if I had to choose I would want to do cyber security as of now.</p>
                </div>
            </div>
            <br/>


            <div class="grid-x grid-padding-x">
                <div class="cell small-12 large-6 center"><img src ="PictureOfJasper.jpeg" alt="Picture of Jasper"/></div>
                <div class="cell small-12 large-6 center ">
                <h1>Name:</h1>
                    <p>My name is Jasper Olson, and I am a senior at the University of St. Thomas!</p>
                    <br/>
                    <h1>Studies:</h1>
                    <p>I am majoring in Computer Science.</p>
                    <h1>Goals After College:</h1>
                    <p>Currently I have a few different fields that I am interested in. I would like to go into Software
                        Engineering, but I also think Web Development is a very cool and creative field.</p>
                </div>
            </div>
            <br/>

            <div class="grid-x grid-padding-x">
                <div class="cell small-12 large-6 center"><img src ="PictureOfNate.jpg" alt="Picture of Nate"/></div>
                <div class="cell center small-12 large-6 ">
                    <h1>Name:</h1>
                    <p>My name is Nate Goenner, and I am a senior at the University of St. Thomas!</p>
                    <br/>
                    <h1>Studies:</h1>
                    <p>I am majoring in Computer Science, and minoring in Applied Statistics. </p>
                    <h1>Goals After College:</h1>
                    <p>I don't have any plans as of right now but I would like to go into Software Engineering. </p>

                </div>
            </div>
            <br/>
            <video width="640" height="360" controls>
                <source src="St. Paul Crime Map - Google Chrome 2023-12-21 18-17-31.mp4" type="video/mp4">
                Your browser does not support the video tag.
            </video>

            <div class="grid-container">
                <br/>
                <br/>
                <div class="grid-x grid-padding-x">
                    <h1 class="cell small-12 large-12 center">Six Interesting Things</h1>

                    <div class="cell small-12 large-6 center">
                        <p>We discovered how to map values from one sql query to another in order to dynamically populate our table</p>
                    </div>
                    <div class="cell small-12 large-6 center">
                        <p>Learned the diverse ways the Nominatim API can interact with the Leaflet API</p>
                    </div>
                    <div class="cell small-12 large-6 center">
                        <p>We discovered we needed to change our Rest Server in
                             order to correctly display the Incidents Table</p>
                    </div>
                    <div class="cell small-12 large-6 center">
                        <p>While looking more closely at the data we found that
                            a majority of incidents are proactive police visits</p>
                    </div>
                    <div class="cell small-12 large-6 center">
                        <p>We found the setView method which is a great way to adjust your
                             leaflet maps zoom and position</p>
                    </div>
                    <div class="cell small-12 large-6 center">
                        <p>We learned are able to create markers on your leaflet map using json key value
                            pairs and the Nominatim API
                        </p>
                    </div>
                </div>
                <br/>
            </div>
            <div class="grid-container">
                <div class="grid-x grid-padding-x">
                    <h1 class="cell large-12 center">Tools Used</h1>

                    <div class="cell small-12 large-6 center">
                        <p><strong>Foundation Framework</strong>
                            <br/>
                            Foundation allowed us to style the HTML side of the website.
                        </p>

                    </div>

                    <div class="cell small-12 large-6 center">
                        <p><strong>Nominatim API</strong>
                            <br/>
                           The Nominatim API allowed us to search for a location by entering a location
                           and then it converting to latitude and longitude.
                        </p>
                    </div>
                    <div class="cell small-12 large-6 center">
                        <p><strong>Leaflet API</strong>
                            <br/>
                            The Leaflet API allowed us to create a customised map with neighborhoods and crimes in said neighborhoods.
                        </p>
                    </div>

                    <div class="cell small-12 large-6 center">
                        <p><strong>St. Paul Crime API</strong>
                            <br/>
                            The St. Paul Crime API allowed us to use real crime data from St. Paul from August 2014 to December 2023.
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <br/>
        <br/>
    </body>
</html>