-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
209 lines (187 loc) · 11.4 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
208
209
<!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>Student Work - Mr. Budi</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="https://jordanbudi.github.io/studentwork/css/3-col-portfolio.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="./">Mr. Budisantoso</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</a>-->
<!--</li>-->
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Page Content -->
<div class="container">
<!-- Page Heading -->
<h1 class="my-4">Student Work
<small>#myfavorites</some></small>
</h1>
<div class="row justify-content-center">
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<a href="https://knickens.github.io/music-code" target="_blank"><img class="card-img-top" src="images/BLM-losinControl.gif" alt=""></a>
<div class="card-body">
<h4 class="card-title">
<a href="https://knickens.github.io/music-code" target="_blank">Music and Code</a>
<br><small>by Kiara Nickens</small>
</h4>
<p class="card-text">Kiara: <i>"Originally I wanted this to be a Black Lives Matter project. But the actual project came out really colorful and didn’t give me a serious kind of vibe to it. It was pretty slow and chill. Unlike the Black Lives Matter movement which is important and a serious topic. I chose the song because the beat went really well with the color and the moves. It was slow and had a chill colorful tone to me."</p></i>
<p class="instructions">Instructions: Have your sound on. Click and hold your mouse or trackpad to activate the animation.</p>
</div>
<div class="links">
<span class="p-links"><a href="https://knickens.github.io/music-code" target="_blank">View Project</a></span>
<span class="p-links"><a href="https://github.com/knickens/music-code" target="_blank">View Code</a></span>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<a href="https://big-face.github.io/javascript-html-calculator/" target="_blank"><img class="card-img-top" src="images/rusheaCalculator.gif" alt=""></a>
<div class="card-body">
<h4 class="card-title">
<a href="https://big-face.github.io/javascript-html-calculator/" target="_blank">Javascript Caculator</a>
<br><small>by Rushea Davis</small>
</h4>
<p class="card-text">I was invited to speak at the 2017 College Board Dream Deferred Conference and brought Rushea along to sit on the panel with me. Rushea talked about her experiences learning CS for the first time and what that meant to her, <em>This is my favorite project because it showed me that I had to be focused and determined to get it done. I started this project in class but I had to finish it at home. Having to finish it when my teacher was not around was when my determination kicked in. There were a lot of times I messed up, and would email Mr. Budi, but when he wouldn't respond right away, I had to learn to just get it done on my own.</em></p>
<p><a href="https://youtu.be/qiRUYYk27iA" target="_blank">YouTube: Watch Rushea read a personal thank you letter from the National Science Foundation</a></p>
</div>
<div class="links">
<span class="p-links"><a href="https://big-face.github.io/javascript-html-calculator/" target="_blank">View Project</a></span>
<span class="p-links"><a href="https://github.com/big-face/javascript-html-calculator/" target="_blank">View Code</a></span>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<a href="https://baby-namify-0a437ca1d6f9.herokuapp.com/" target="_blank"><img class="card-img-top" src="images/babyNames.gif" alt=""></a>
<div class="card-body">
<h4 class="card-title">
<a href="https://baby-namify-0a437ca1d6f9.herokuapp.com/" target="_blank">Baby Namify</a>
<br><small>by Alexis Weaver and Moses Avin</small>
</h4>
<p class="card-text">When a group of 10th graders in Miami told me they wanted to build a Baby Name Generator I was immediately put off. But as I helped them build this, I noticed something extremely powerful. <b>Go on the app store and search for a baby name generator. You will not find an app that caters to black and carribean names.</b> This example speaks volumes to the importance of diversity in tech.</p>
</div>
<div class="links">
<span class="p-links"><a href="https://baby-namify-0a437ca1d6f9.herokuapp.com/" target="_blank">View Project</a></span><span class="p-links">
<a href="https://github.com/jordanbudi/desired-fate" target="_blank">View Code</a></span>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<a href="https://saucegame.herokuapp.com/" target="_blank"><img class="card-img-top" src="images/saucegame.gif" alt=""></a>
<div class="card-body">
<h4 class="card-title">
<a href="https://saucegame.herokuapp.com/" target="_blank">Sauce Game</a>
<br><small>by Andrea Eberhardt</small></h4>
<p class="card-text">This app just makes me laugh. It represents the personality, humor, and swagger of teens in Miami. Not only is it aesthetically beautiful, but technically sound. Andrea pushed herself to use the Twilio API so that her app could send text messages. For weeks she came to me after school to work out bugs, get guidance, and just talk through her ideas. It is easily one of my favorite apps. </p>
</div>
<div class="links">
<span class="p-links"><a href="saucegame.herokuapp.com" target="_blank">View Project</a></span>
<span class="p-links"><a href="https://github.com/andreaeberhardt/sauce-game" target="_blank">View Code</a></span>
</div>
</div>
</div>
<!--insert here-->
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<a href="https://dzeleke.github.io/vrdream" target="_blank"><img class="card-img-top" src="images/vrDream.gif" alt=""></a>
<div class="card-body">
<h4 class="card-title">
<a href="https://dzeleke.github.io/vrdream" target="_blank">VR Dream</a>
<br><small>by Dagmawit Zeleke</small>
</h4>
<p class="card-text">Dagmawit: <em>I started coding Virtual Reality stuff near the end of my 9th-grade year. This is the second VR project I've built and I wanted to showcase an abstract themed experience incorporating some of my favorite colors and random shapes. I wanted to bring my imagination to life and create a dream-like world, and through VR, I was able to.</em></p>
<p class="instructions">Instructions: Click and drag your mouse to look around. Walk around with the W-A-S-D keys on your keyboard. If you have a Google Cardboard and a smart phone you can click the VR icon at the bottom right of the screen to view in Virtual Reality.</p>
</div>
<div class="links">
<span class="p-links"><a href="https://dzeleke.github.io/vrdream" target="_blank">View Project</a></span>
<span class="p-links"><a href="https://github.com/dzeleke/vrdream" target="_blank">View Code</a></span>
</div>
</div>
</div>
<!--<div class="col-lg-4 col-sm-6 portfolio-item">-->
<!-- <div class="card h-100">-->
<!-- <a href="#" target="_blank"><img class="card-img-top" src="images/" alt=""></a>-->
<!-- <div class="card-body">-->
<!-- <h4 class="card-title">-->
<!-- <a href="https://github.io/" target="_blank">Project Six</a>-->
<!-- <br><small>by Student</small>-->
<!-- </h4>-->
<!-- <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque earum nostrum suscipit ducimus nihil provident, perferendis rem illo, voluptate atque, sit eius in voluptates, nemo repellat fugiat excepturi! Nemo, esse.</p>-->
<!-- </div>-->
<!-- <div class="links">-->
<!-- <span class="p-links"><a href="https://github.io/" target="_blank">View Project</a></span>-->
<!-- <span class="p-links"><a href="https://github.com/" target="_blank">View Code</a></span>-->
<!-- </div> -->
<!-- </div>-->
<!--</div>-->
</div>
<!-- /.row -->
<!-- Pagination -->
<!-- commented out
<ul class="pagination justify-content-center">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
-->
</div>
<!-- /.container -->
<!-- Footer -->
<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">Mr. Budisantoso <br> <a href="www.wlapcs.org">Washington Leadership Academy Public Charter School</a></p>
</div>
<!-- /.container -->
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/popper/popper.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>