-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
207 lines (171 loc) · 9.82 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
<style>
body {
font-size: 1.1rem; /* Increased by 50% */
background-color: #8B4513;
zoom: 1; /* Scale up by 50% */
}
p, h2, figcaption, h3 {
color: #ffffff;
}
.container {
max-width: 1500px;
margin: auto; /* Center the container */
}
figure img {
width: 100%; /* Full width of its container */
max-width: 825px; /* Max width of the image */
height: auto; /* Maintain aspect ratio */
display: block; /* Block display to respect max-width */
margin: 0 auto; /* Center the image */
}
h2 {
font-size: 2.1rem; /* Heading size */
}
h3 {
font-size: 1.8rem; /* Subheading size */
}
p {
font-size: 1.2rem; /* Paragraph text size */
}
/* Ensure the main content is visible */
main {
padding: 1.5rem 0; /* Add padding around main content */
}
nav ul {
padding: 0.75rem 0; /* Padding for nav */
list-style-type: none; /* Remove list bullets */
margin: 0; /* Remove default margin */
padding: 0; /* Remove default padding */
display: flex; /* Add this line */
flex-wrap: nowrap; /* Add this line to prevent wrapping */
}
nav ul li {
display: inline; /* Display nav items in a line */
margin-right: 15px; /* Right margin for spacing */
}
nav ul li a {
text-decoration: none; /* Remove text underline */
font-size: 0.9rem; /* Smaller font size for nav links */
padding: 7.5px 15px; /* Add padding to give a button-like appearance */
border-radius: 75px; /* Rounded corners */
transition: background-color 0.3s, color 0.3s; /* Transition for smooth color change */
background-color: #81B29A; /* Set background color */
color: #fff; /* Set text color */
}
/* Change color on hover */
nav ul li a:hover {
background-color: #b8dac9; /* Change background color on hover */
color: #fff; /* Keep text color the same on hover */
text-decoration: underline; /* Add underline on hover */
}
li strong {
display: inline-block; /* Allow the boundary to wrap */
white-space: nowrap; /* Keep the text on a single line */
overflow: hidden; /* Hide overflow */
text-overflow: ellipsis; /* Show an ellipsis when the text overflows */
max-width: 100%; /* Limit the width to the parent's width */
}
nav ul {
display: flex; /* Use flexbox for layout */
flex-wrap: nowrap; /* Prevent wrapping to the next line */
justify-content: space-around; /* Distribute space evenly between items */
}
nav ul li {
font-size: calc(0.8rem + 0.7vw); /* Dynamically adjust font size based on viewport width */
}
nav ul li a {
font-size: calc(0.3rem + 0.4vw); /* Dynamically adjust font size based on viewport width */
}
/* Responsive styles for mobile!*/
@media (max-width: 1050px) {
body {
background-color: #8B4513 !important;
zoom: 1; /* Reset zoom for small screens */
min-height: 1000px;
}
.container {
max-width: 100%; /* Allow the container to use the full width of the screen */
padding: 0 1rem; /* Add some horizontal padding */
}
figure img {
max-width: 100%; /* Allow the image to use the full width of its container */
}
nav ul li {
margin-bottom: 10px; /* Bottom margin for spacing */
margin-right: 0; /* Remove right margin */
}
li strong {
white-space: normal; /* Allow the text to wrap to the next line */
}
nav ul li a , nav ul li{
font-size: calc(0.3rem + 0.2vw); /* Reduce font size for small screens */
}
}
/* THIS IS VERY IMPORTANT. My Google Chrome is in Dark Mode so it makes the background color black. This overrides that and fills any blank spaces with my desired color, instead of black*/
@media (prefers-color-scheme: dark) {
:root {
--background-color: #8B4513 !important; /* Or any other light color you prefer */
/* Define other variables or CSS rules as needed */
}
}
@media (prefers-color-scheme: light) {
:root {
--background-color: #8B4513 !important; /* Or any other light color you prefer */
/* Define other variables or CSS rules as needed */
}
}
</style>
<title>Home - Ritcher's Nepal Earthquake predictor</title>
</head>
<body>
<nav class="container-fluid">
<ul>
<li style="color: #fff;"><strong style="background-color:#81B29A; border: 2px solid #81B29A; padding: 5px; border-radius: 10px; ">Nepal 2015 Earthquake Building-Damage Predictor</strong></li> </ul>
<ul>
<li><a href="https://michael-ye-ritchers-earthquake-predictor-home.streamlit.app/" target="_blank">Home</a></li>
<li><a href="https://michael-ye-ritchers-earthquake-predictor-xgboost.streamlit.app/" target="_blank">XGBoost</a></li>
<li><a href="https://michael-ye-ritchers-earthquake-predictor-lgbm.streamlit.app/" target="_blank">LGBM</a></li>
<li><a href="https://michael-ye-ritchers-earthquake-predictor-neural-network.streamlit.app/" target="_blank">Neural Network</a></li>
<li><a href="https://michael-ye-ritchers-earthquake-predictor-tfdf.streamlit.app/" target="_blank">TF Decision Forest</a></li>
<li><a href="https://github.com/23yem/Richter-s-Predictor-Modeling-Earthquake-Damage" target="_blank">GitHub Repository</a></li>
</ul>
</nav>
<main class="container">
<div class="grid">
<section>
<hgroup >
<h2 style="color: #7af5b9;">Richter's Predictor: Modeling Earthquake Damage </h2>
<h3 style="color: #7af5b9;">My Third Machine Learning Project</h3>
</hgroup>
<p><strong style="color: #7af5b9;">Introduction: </strong>Hi, I'm Michael and this is my third Machine Learning Project. To give <a href="https://en.wikipedia.org/wiki/April_2015_Nepal_earthquake" target="_blank" style="color: #0000ff; text-decoration: underline;">some background information</a>, in April 25, 2015, Nepal was hit by a 7.8 magnitude earthquake, killing nearly 9,000 people and injuring close to 22,000 individuals. </p>
<p><strong style="color: #7af5b9;">This Website: </strong>This website will inform you about my whole thought process while completing this project, along with allowing you to try out my best deployed models (XGBoost, LGBM, Neural Network, TF Decision Forest).</p>
<p><strong style="color: #7af5b9;">Goal of Project: </strong>The primary challenge in this competition is to build a machine learning model that is able to predict the level of damage that a building in Nepal would have experienced based on factors like size, geographic location, building material, and more. The full range of reatures can be <a href="https://www.drivendata.org/competitions/57/nepal-earthquake/page/136/#features" target="_blank" style="color: #0000FF; text-decoration: underline;">found here</a>.</p>
<p><strong style="color: #7af5b9;">Learning Outcomes: </strong>Through this project I learned how to do GPU acceleration (which drastically improved performance and cooling of the computer), how to do hyperparameter tuning with other libraries (like Optuna), how to select the most appropriate models based on the problem, how to handle 270,000+ rows of data, and more!</p>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/2015_Nepal_depremi_%287%29.jpg/1200px-2015_Nepal_depremi_%287%29.jpg" alt="earthquake" />
<figcaption style="color: #7af5b9; font-size: 2.1rem;">Feel free to navigate to the other web pages above to look at the differnet models and try them out on the interactive website (no need to download anything). And also feel free to go to the github page for a more in-depth view of my project.</figcaption>
</figure>
</section>
</div>
<section>
<hgroup>
<h2 style="color: #7af5b9; font-size: 2.1rem;">My High Score</h2>
</hgroup>
<p>I achieved a high score of 74.82% in this project. The #1 global score is currently 75.58%. I'm currently in the <strong style="color: #7af5b9;">top 420 out of 7,221 (top 5.8%)</strong>.</p>
</section>
<section>
<hgroup>
<h2 style="color: #7af5b9; font-size: 2.1rem;">DrivenData's Competition</h2>
</hgroup>
<p>This project was part of a DrivenData Competition. DrivenData is a website that works on projects at the intersection of data science and social impact, in areas like international development, health, education, research and conservation, and public services. You can learn more about the competition and see other submissions on the DrivenData website.</p>
<p><a href="https://www.drivendata.org/competitions/57/nepal-earthquake/page/134/" target="_blank" style="color: #0000FF; text-decoration: underline;">Go to DrivenData's Competition</a></p>
</section>
</main>
</body>
</html>