Skip to content

Commit 4522f06

Browse files
kylejavakylejava
committed
Created Featured Projects section
1 parent 0ca12c4 commit 4522f06

File tree

5 files changed

+195
-128
lines changed

5 files changed

+195
-128
lines changed

‎index.html‎

Lines changed: 153 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,12 @@ <h3 class="my-0 mr-md-auto font-weight-normal"><a href="#" id="head">KJ</a></h3
2626
<!-- End of nav bar -->
2727

2828
<!-- Start of home -->
29-
<div class="top container-fluid home" class="h-100 d-inline-block" >
29+
<div class=" container-fluid home" class="h-100 d-inline-block" >
3030
<a name = "top"></a>
3131
<div class="container-sm" >
3232
<div class="row">
3333
<div class="col">
34-
<img src="../pics/me.jpg" alt="picture of me" class="my-5 img rounded-circle mx-auto" id="me">
35-
<h1>Kyle Java</h1>
34+
<h1 id="title">Kyle Java</h1>
3635
<hr >
3736
<h3>Computer Science Student at the <br> California State University of San Marcos </h3>
3837
<hr>
@@ -61,22 +60,31 @@ <h3>Computer Science Student at the <br> California State University of San Marc
6160
<!-- Start Of about -->
6261
<div class="container-fluid about" >
6362
<div class="container-sm">
64-
<h2 class="text-center pt-5 pb-5">Learn More About Me!</h2>
65-
<div class="container">
66-
<h5 class = "text-center pb-5">
67-
Nice to meet you! My name is Kyle Java and I am a Computer Science student from the <br /> California State University San Marcos.
68-
<br/>
69-
<br/>
70-
I enjoy learning about new technologies, more specifically about websites and applications. My goal is <br/>
71-
to develop new products that will create an impact on society.
72-
<br/>
73-
<br/>
74-
I currently work as a Computer Science and Math tutor at CSU San Marcos. During my free time I like to <br/>
75-
work on personal projects, play piano, and participate in hackathons. I chose to pursue a career in <br/>
76-
Software Engineering during my Senior year of High School when I was exposed to the Python programming language.
77-
</h5>
78-
<h2 class="text-center py-5">The languages and tools I have worked with </h2>
63+
<h2 class="text-center pt-5 pb-5">Nice To Meet You!</h2>
64+
<div class="container-sm introduction">
65+
<div class="row">
66+
<div class="col-md-4">
67+
<img id="me" class="rounded-circle img-fluid"src="pics/me.jpg" alt="pic of me">
68+
</div>
69+
<div class="col-md-1">
70+
<br>
71+
<br>
72+
</div>
73+
<div class="col-md-7">
74+
<p class = "pb-5">
75+
I'm a Computer Science student at the California State University San Marcos graduating in Spring 2022.
76+
I enjoy learning about new technologies, more specifically about websites and applications. My goal is
77+
to develop new products that will create an impact on society.
78+
<br/>
79+
<br/>
80+
I currently work as a Computer Science and Math tutor at CSU San Marcos. During my free time I like to
81+
work on personal projects, play piano, and participate in hackathons. I chose to pursue a career in
82+
Software Engineering during my Senior year of High School when I was exposed to the Python programming language.
83+
</p>
84+
</div>
85+
</div>
7986
</div>
87+
<h2 class="text-center py-5">The languages and tools I have worked with </h2>
8088
<div class="table-responsive">
8189
<table class="table table-striped">
8290
<tbody>
@@ -115,53 +123,138 @@ <h2 class="text-center py-5">The languages and tools I have worked with </h2>
115123
</div>
116124
<a name = "projects"></a><br>
117125
</div>
118-
<!-- end of about -->
119-
<!-- Start of projects-->
120-
<div class="container-fluid">
121-
<div class="row ">
122-
<div class="col">
126+
<!-- end of about -->
123127

124-
<h1>Projects</h1>
128+
<!-- Start of Featured projects-->
129+
<div class="container-sm my-5">
130+
<h1 class="text-center my-5">Featured Projects</h1>
131+
<!-- Elementovate -->
132+
<div class="row">
133+
<div class="col-md-4">
134+
<a href="https://devpost.com/software/elementovate">
135+
<img class="featured-img" src="pics/elementovate.png" alt="pics">
136+
</a>
137+
</div>
138+
<div class="col-md-1">
139+
<br>
140+
<br>
141+
</div>
142+
<div class="col-md-7">
143+
<h2>Elementovate</h1>
144+
<p class="description">
145+
Elementovate is a mobile application that helps students learn the periodic table as well as use
146+
it as a tool for studying for future tests. Elementovate was awarded "Best Education Hack" at GrizzHacks 5.
147+
</p>
148+
<h3>
149+
<span class="badge bg-primary">Flutter</span>
150+
<span class="badge bg-secondary">Android Studio</span>
151+
</h3>
125152
</div>
126153
</div>
127-
<div class=" container-fluid card-deck">
128-
<div class="row py-3" >
129-
<div class="card" style="width: 18rem;">
130-
<!--<img src="..." class="card-img-top" alt="...">-->
131-
<div class="card-body">
132-
<h5 class="card-title">Elementovate</h5>
133-
<span class="badge badge-pill badge-primary">Flutter</span>
134-
<span class="badge badge-pill badge-secondary">Android Studio</span>
135-
<p class="card-text">Mobile app that allows students to use the periodic table in a more efficient way
136-
for learning and studying purposes. Won "Best Education Hack" at GrizzHacks 5.</p><br/>
137-
<a href="https://github.com/kylejava/GrizzHacks-2020" target = "_blank">
138-
<button type="button" class="btn btn-git"><i class="fab fa-github"></i> Github</button>
139-
</a>
140-
<a href="https://devpost.com/software/elementovate?ref_content=user-portfolio&ref_feature=in_progress" target = "_blank">
141-
<button type="button" class="btn btn-git"><i class="fas fa-link"></i> Devpost</button>
142-
</a>
143-
</div>
154+
<!-- Our Artistic Space -->
155+
<div class="row mt-5">
156+
<div class="col-md-4">
157+
<a href="https://devpost.com/software/our-artistic-space">
158+
<img class="featured-img" src="pics/oas.jpg" id="oas" alt="pics">
159+
</a>
144160
</div>
145-
<div class="card" style="width: 18rem;">
146-
<!--<img src="..." class="card-img-top" alt="...">-->
147-
<div class="card-body">
148-
<h5 class="card-title">Our Artistic Space</h5>
149-
<span class="badge badge-pill badge-primary">HTML</span>
150-
<span class="badge badge-pill badge-secondary">CSS</span>
151-
<span class="badge badge-pill badge-success">Python</span>
152-
<span class="badge badge-pill badge-danger">Flask</span>
153-
<span class="badge badge-pill badge-warning">Google App Engine</span>
161+
<div class="col-md-1">
162+
<br>
163+
</div>
164+
<div class="col-md-7">
165+
<h2>Our Artistic Space</h2>
166+
<p class="description">
167+
Our Artistic Space is a website aimed to help the local art community.
168+
Our website helps people find local art museums, galleries, schools, and stores in their area.
169+
Our Artistic Space was awarded "Best Beginner Hack" at Hacks And Crafts 2020.
170+
</p>
171+
<h3>
172+
<span class="badge badge-primary">HTML</span>
173+
<span class="badge badge-secondary">CSS</span>
174+
<span class="badge badge-success">Python</span>
175+
</h3>
176+
<h3>
177+
<span class="badge badge-danger">Flask</span>
178+
<span class="badge badge-warning">Google App Engine</span>
154179
<span class="badge badge-info">Yelp API</span>
155-
<p class="card-text">Web application that shows local art museums and galleries based on the user's location. Demoed the website at "Hacks And Crafts" and won "Best Beginner Hack."</p>
156-
<a href="https://github.com/kylejava/HacksAndCrafts2020" target = "_blank">
157-
<button type="button" class="btn btn-git"><i class="fab fa-github"></i> Github</button>
158-
</a>
159-
<a href="https://devpost.com/software/our-artistic-space" target = "_blank">
160-
<button type="button" class="btn btn-git"><i class="fas fa-link"></i> Devpost</button>
161-
</a>
180+
</h3>
181+
</div>
182+
</div>
183+
184+
<!-- SafeSpace -->
185+
<div class="row mt-5">
186+
<div class="col-md-4">
187+
<a href="https://devpost.com/software/safespace-oxnc1w">
188+
<img class="featured-img" src="pics/safespace.png" id="oas" alt="pics">
189+
</a>
190+
</div>
191+
<div class="col-md-1">
192+
<br>
193+
</div>
194+
<div class="col-md-7">
195+
<div class="row">
196+
<h2>SafeSpace</h2>
162197
</div>
198+
<p class="description">
199+
SafeSpace is a website aimed to create a safer internet for children.
200+
The user can input the URL of any website into our platform and SafeSpace will scan that website to see if there are any vulgar language.
201+
Demoed project at CatHacks: Winter Edition.
202+
</p>
203+
<h3>
204+
<span class="badge badge-primary">HTML</span>
205+
<span class="badge badge-secondary">CSS</span>
206+
<span class="badge badge-success">Bootstrap</span>
207+
</h3>
208+
<h3>
209+
<span class="badge badge-danger">Flask</span>
210+
<span class="badge badge-warning">Beautiful Soup</span>
211+
<span class="badge badge-info">MongoDB</span>
212+
</h3>
163213
</div>
164-
<div class="card" style="width: 18rem;">
214+
</div>
215+
216+
</div>
217+
<!-- END of Featured projects-->
218+
219+
<!-- Start of Other projects-->
220+
<div class="container-fluid my-5">
221+
<div class="row ">
222+
<div class="col my-5">
223+
<h1>Other Projects</h1>
224+
</div>
225+
</div>
226+
<div class=" container-fluid card-deck">
227+
<div class="row py-3" >
228+
<div class="card" style="width: 18rem;">
229+
<!--<img src="..." class="card-img-top" alt="...">-->
230+
<div class="card-body">
231+
<h5 class="card-title">BobaMe</h5>
232+
<span class="badge badge-pill badge-primary">Python</span>
233+
<span class="badge badge-pill badge-secondary">Kivy</span>
234+
<span class="badge badge-pill badge-success">Yelp API</span>
235+
<p class="card-text">Mobile app that suggests new boba tea location in a user's city or zip code. Retrieved boba tea shop locations by utilizing the Yelp API.</p><br/>
236+
<a href="https://github.com/kylejava/BobaMe" target = "_blank">
237+
<button type="button" class="btn btn-git"><i class="fab fa-github"></i> Github</button>
238+
</a>
239+
</div>
240+
</div>
241+
<div class="card" style="width: 18rem;">
242+
<!--<img src="..." class="card-img-top" alt="...">-->
243+
<div class="card-body">
244+
<h5 class="card-title">Simple Piano Keys</h5>
245+
<span class="badge badge-pill badge-primary">HTML</span>
246+
<span class="badge badge-pill badge-secondary">CSS</span>
247+
<span class="badge badge-pill badge-success">JavaScript</span>
248+
<span class="badge badge-pill badge-danger">Jinja</span>
249+
<span class="badge badge-pill badge-warning">Google Cloud Platform</span>
250+
<span class="badge badge-info">Python</span>
251+
<p class="card-text">Web application that allows the user to play a portion of the keyboard through their keyboard and mouse.</p><br/>
252+
<a href="https://github.com/kylejava/SimplePianoKeys" target = "_blank">
253+
<button type="button" class="btn btn-git"><i class="fab fa-github"></i> Github</button>
254+
</a>
255+
</div>
256+
</div>
257+
<div class="card" style="width: 18rem;">
165258
<!--<img src="..." class="card-img-top" alt="...">-->
166259
<div class="card-body">
167260
<h5 class="card-title">Root4U</h5>
@@ -178,22 +271,9 @@ <h5 class="card-title">Root4U</h5>
178271
<button type="button" class="btn btn-git"><i class="fas fa-link"></i> Devpost</button>
179272
</a>
180273
</div>
181-
</div>
274+
</div>
182275
</div>
183276
<div class = "row py-3">
184-
<div class="card" style="width: 18rem;">
185-
<!--<img src="..." class="card-img-top" alt="...">-->
186-
<div class="card-body">
187-
<h5 class="card-title">BobaMe</h5>
188-
<span class="badge badge-pill badge-primary">Python</span>
189-
<span class="badge badge-pill badge-secondary">Kivy</span>
190-
<span class="badge badge-pill badge-success">Yelp API</span>
191-
<p class="card-text">Mobile app that suggests new boba tea location in a user's city or zip code. Retrieved boba tea shop locations by utilizing the Yelp API.</p><br/>
192-
<a href="https://github.com/kylejava/BobaMe" target = "_blank">
193-
<button type="button" class="btn btn-git"><i class="fab fa-github"></i> Github</button>
194-
</a>
195-
</div>
196-
</div>
197277

198278
<div class="card" style="width: 18rem;">
199279
<!--<img src="..." class="card-img-top" alt="...">-->
@@ -223,10 +303,6 @@ <h5 class="card-title">Steroify</h5>
223303
</a>
224304
</div>
225305
</div>
226-
</div>
227-
<div class="row py-3">
228-
229-
230306
<div class="card" style="width: 18rem;">
231307
<!--<img src="..." class="card-img-top" alt="...">-->
232308
<div class="card-body">
@@ -243,46 +319,11 @@ <h5 class="card-title">FrightNight</h5>
243319
</a>
244320
</div>
245321
</div>
246-
247-
<div class="card" style="width: 18rem;">
248-
<!--<img src="..." class="card-img-top" alt="...">-->
249-
<div class="card-body">
250-
<h5 class="card-title">Simple Piano Keys</h5>
251-
<span class="badge badge-pill badge-primary">HTML</span>
252-
<span class="badge badge-pill badge-secondary">CSS</span>
253-
<span class="badge badge-pill badge-success">JavaScript</span>
254-
<span class="badge badge-pill badge-danger">Jinja</span>
255-
<span class="badge badge-pill badge-warning">Google Cloud Platform</span>
256-
<span class="badge badge-info">Python</span>
257-
<p class="card-text">Web application that allows the user to play a portion of the keyboard through their keyboard and mouse.</p><br/>
258-
<a href="https://github.com/kylejava/SimplePianoKeys" target = "_blank">
259-
<button type="button" class="btn btn-git"><i class="fab fa-github"></i> Github</button>
260-
</a>
261-
</div>
262-
</div>
263-
<div class="card" style="width: 18rem;">
264-
<!--<img src="..." class="card-img-top" alt="...">-->
265-
<div class="card-body">
266-
<h5 class="card-title">SafeSpace</h5>
267-
<span class="badge badge-pill badge-primary">HTML</span>
268-
<span class="badge badge-pill badge-secondary">CSS</span>
269-
<span class="badge badge-pill badge-success">Python</span>
270-
<span class="badge badge-pill badge-danger">Flask</span>
271-
<span class="badge badge-pill badge-warning">MongoDB</span>
272-
<span class="badge badge-info">Beautiful Soup</span>
273-
<p class="card-text">Web application aimed to make the internet a safer place for children. Hackathon project for CatHacks: Winter Edition</p><br/>
274-
<a href="https://github.com/kylejava/CatHacks-Winter-Edition-2020" target = "_blank">
275-
<button type="button" class="btn btn-git"><i class="fab fa-github"></i> Github</button>
276-
</a>
277-
<a href="https://devpost.com/software/safespace-oxnc1w" target = "_blank">
278-
<button type="button" class="btn btn-git"><i class="fas fa-link"></i> Devpost</button>
279-
</a>
280-
</div>
281-
</div>
282322
</div>
283323
</div>
284324
</div>
285325
<!-- End of Projects -->
326+
286327
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
287328
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
288329
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

0 commit comments

Comments
 (0)