Skip to content

Commit 8e8739e

Browse files
64bitpandas64bitpandas
committed
Add project information
1 parent af6ca20 commit 8e8739e

File tree

2 files changed

+170
-22
lines changed

2 files changed

+170
-22
lines changed

‎css/custom.css‎

Lines changed: 61 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -252,7 +252,7 @@ nav button {
252252
* ==================================== */
253253

254254
#projects .container {
255-
overflow-y: hidden;
255+
overflow-y: hidden;
256256
}
257257

258258
#projects img {
@@ -274,7 +274,7 @@ nav button {
274274
}
275275

276276
.balloon {
277-
padding: 5vw;
277+
padding-top: 3vh;
278278
}
279279

280280
/* ====================================
@@ -431,6 +431,47 @@ body.is-article-visible #header {
431431
}
432432
}
433433

434+
/* Icons */
435+
436+
ul.icons {
437+
cursor: default;
438+
list-style: none;
439+
padding-left: 0;
440+
}
441+
442+
ul.icons li {
443+
display: inline-block;
444+
padding: 0 0.75em 0 0;
445+
}
446+
447+
ul.icons li:last-child {
448+
padding-right: 0;
449+
}
450+
451+
ul.icons li a {
452+
border-radius: 100%;
453+
box-shadow: inset 0 0 0 1px #ffffff;
454+
display: inline-block;
455+
height: 2.25rem;
456+
line-height: 2.25rem;
457+
text-align: center;
458+
width: 2.25rem;
459+
-moz-transition: background-color 0.2s ease-in-out;
460+
-webkit-transition: background-color 0.2s ease-in-out;
461+
-ms-transition: background-color 0.2s ease-in-out;
462+
transition: background-color 0.2s ease-in-out;
463+
color: #ffffff;
464+
}
465+
466+
ul.icons li a:hover {
467+
background-color: rgba(255, 255, 255, 0.075);
468+
text-decoration: none;
469+
}
470+
471+
ul.icons li a:active {
472+
background-color: rgba(255, 255, 255, 0.175);
473+
}
474+
434475
/* ====================================
435476
* FOOTER
436477
* ==================================== */
@@ -516,3 +557,21 @@ body.is-article-visible #header {
516557
opacity: 1;
517558
}
518559
}
560+
561+
/* ==========================
562+
* CUSTOM SELECTION
563+
* ========================== */
564+
565+
::selection {
566+
background: transparent;
567+
/* WebKit/Blink Browsers */
568+
color: #90caf9;
569+
text-shadow: 0 0 0.5rem #1976d2;
570+
}
571+
572+
::-moz-selection {
573+
background: transparent;
574+
/* Gecko Browsers */
575+
color: #90caf9;
576+
text-shadow: 0 0 0.5rem #1976d2;
577+
}

‎index.html‎

Lines changed: 109 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -139,23 +139,27 @@ <h1 class="underline">Projects</h1>
139139

140140
<!-- Work -->
141141
<div class="container">
142+
143+
<!-- Balloons inspired by an icon by Vectors Market from Flaticon https://www.flaticon.com/authors/vectors-market.
144+
Licensed by Creative Commons 3.0 - http://creativecommons.org/licenses/by/3.0/ -->
145+
142146
<a href="#climate">
143147
<img src="img/balloon-climate.svg" alt="Climate.js" class="balloon"><br>
144148
</a>
145-
<a href="#climate">
146-
<img src="img/balloon-atomblast.svg" alt="Climate.js" class="balloon"><br>
149+
<a href="#atomblast">
150+
<img src="img/balloon-atomblast.svg" alt="AtomBlast" class="balloon"><br>
147151
</a>
148-
<a href="#climate">
149-
<img src="img/balloon-aegis.svg" alt="Climate.js" class="balloon"><br>
152+
<a href="#aegis">
153+
<img src="img/balloon-aegis.svg" alt="AegisVR" class="balloon"><br>
150154
</a>
151-
<a href="#climate">
152-
<img src="img/balloon-audisea.svg" alt="Climate.js" class="balloon"><br>
155+
<a href="#audisea">
156+
<img src="img/balloon-audisea.svg" alt="AudiSea" class="balloon"><br>
153157
</a>
154-
<a href="#climate">
155-
<img src="img/balloon-carrotcane.svg" alt="Climate.js" class="balloon"><br>
158+
<a href="#carrotcane">
159+
<img src="img/balloon-carrotcane.svg" alt="CarrotCane" class="balloon"><br>
156160
</a>
157-
<a href="#climate">
158-
<img src="img/balloon-electrotab.svg" alt="Climate.js" class="balloon"><br>
161+
<a href="#electrotab">
162+
<img src="img/balloon-electrotab.svg" alt="ElectroTab" class="balloon"><br>
159163
</a>
160164
</div>
161165
</section>
@@ -164,16 +168,101 @@ <h1 class="underline">Projects</h1>
164168
<!-- Work popups -->
165169
<div id="main">
166170
<article id="climate">
167-
<h2 class="major">Work</h2>
168-
<!-- <span class="image main"><img src="images/pic02.jpg" alt="" /></span> -->
169-
<p>Adipiscing magna sed dolor elit. Praesent eleifend dignissim arcu, at eleifend sapien imperdiet ac. Aliquam erat
170-
volutpat. Praesent urna nisi, fringila lorem et vehicula lacinia quam. Integer sollicitudin mauris nec lorem
171-
luctus
172-
ultrices.</p>
173-
<p>Nullam et orci eu lorem consequat tincidunt vivamus et sagittis libero. Mauris aliquet magna magna sed nunc
174-
rhoncus pharetra. Pellentesque condimentum sem. In efficitur ligula tate urna. Maecenas laoreet massa vel lacinia
175-
pellentesque lorem ipsum dolor. Nullam et orci eu lorem consequat tincidunt. Vivamus et sagittis libero. Mauris
176-
aliquet magna magna sed nunc rhoncus amet feugiat tempus.</p>
171+
<h2 class="major">Climate.js</h2>
172+
<p>Climate.js takes raw weather data and offers a variety of customizable color schemes and visualizers to reflect the
173+
current weather. Add extra flair to location-based webapps, or perhaps give a homey feel with weather from your
174+
hometown- anything to help make your site more responsive :)</p>
175+
<br>
176+
<ul class="icons">
177+
<li>
178+
<a href="https://github.com/dbqeo/climate.js" class="icon fab fa-github"></a>
179+
</li>
180+
<li>
181+
<a href="https://www.npmjs.com/package/climate.js" class="icon fab fa-node-js"></a>
182+
</li>
183+
</ul>
184+
</article>
185+
<article id="atomblast">
186+
<h2 class="major">AtomBlast</h2>
187+
<p>AtomBlast is an online multiplayer arena game set at the atomic level. You control your own atom and fight with your
188+
team against other players to gain the most points. Collect atoms to craft into compounds with the click of a button-
189+
each compound has unique qualities that can help you attack, defend, and gain buffs! Strategically minded maps,
190+
weaponry, team play, and game modes only add to the fuel!</p>
191+
<p>AtomBlast is a project created in collaboration with <a href="https://bananiumlabs.com">BananiumLabs.</a></p>
192+
<br>
193+
<ul class="icons">
194+
<li>
195+
<a href="https://github.com/BananiumLabs/AtomBlastPublicIssues" class="icon fab fa-github"></a>
196+
</li>
197+
</ul>
198+
</article>
199+
<article id="aegis">
200+
<h2 class="major">AegisVR</h2>
201+
<p>Aegis is an interactive virtual reality self-defense simulation, focused on educating its users on how to deal with
202+
dangerous situations involving another person. We wanted to spread awareness about self defense and educate people on
203+
techniques so they would have a better chance of escape should they ever end up in such a situation. In the future,
204+
we'd like to add more scenarios and refine the animations to give a smoother learning experience.</p>
205+
<p>Aegis was created as a part of BaseHacks 3.</a></p>
206+
<br>
207+
<ul class="icons">
208+
<li>
209+
<a href="https://bananiumlabs.github.io/AegisVR/" class="icon fas fa-globe"></a>
210+
</li>
211+
<li>
212+
<a href="https://basehacks.hackerearth.com/sprints/basehacks-30/dashboard/9cbe285/submission/" class="icon fas fa-bullhorn"></a>
213+
</li>
214+
<li>
215+
<a href="https://github.com/BananiumLabs/AtomBlastPublicIssues" class="icon fab fa-github"></a>
216+
</li>
217+
</ul>
218+
</article>
219+
<article id="audisea">
220+
<h2 class="major">AudiSea</h2>
221+
<p>AudiSea is an ocean whose waves sync up to the beats of whatever music is playing, letting the user sea the music
222+
they're listening to. It also has fish and dolphins that appear periodically in sync with the music. We also added
223+
voice recognition to allow the user to play their music hands-free by integrating our app with Spotify.</p>
224+
<p>AudiSea was awarded 4th Place Overall at MenloHacks III.</p>
225+
<br>
226+
<ul class="icons">
227+
<li>
228+
<a href="https://dbqeo.github.io/AudiSea/" class="icon fas fa-globe"></a>
229+
</li>
230+
<li>
231+
<a href="https://devpost.com/software/audisea" class="icon fas fa-bullhorn"></a>
232+
</li>
233+
<li>
234+
<a href="https://github.com/BananiumLabs/AudiSea" class="icon fab fa-github"></a>
235+
</li>
236+
</ul>
237+
</article>
238+
<article id="carrotcane">
239+
<h2 class="major">CarrotCane</h2>
240+
<p>CarrotCane is a DIY cane attachment to assist the blind and visually impaired. Features include:
241+
automatic detection of nearby objects with audible alarm and feedback when approaching too quickly,
242+
ability to attach a smartphone to provide live GPS tracking and video feed, and
243+
online supervisor console to give voice directions and monitor video feed for the caneholder.</p>
244+
<p>Awarded 1st Place Overall at TinoHacks II, April 21-22 2018</p>
245+
<br>
246+
<ul class="icons">
247+
<li>
248+
<a href="https://devpost.com/software/carrotcane" class="icon fas fa-bullhorn"></a>
249+
</li>
250+
<li>
251+
<a href="https://github.com/BananiumLabs/CarrotCane" class="icon fab fa-github"></a>
252+
</li>
253+
</ul>
254+
</article>
255+
<article id="electrotab">
256+
<h2 class="major">ElectroTab</h2>
257+
<p>The ultimate modular New Tab Page! Create your own widgets and rearrange them however you wish. All configuration
258+
settings are saved by account- login using your email, Google, or Github. Change the themes, color, and more!</p>
259+
<p>ElectroTab is a project created in collaboration with <a href="https://bananiumlabs.com">BananiumLabs.</a></p>
260+
<br>
261+
<ul class="icons">
262+
<li>
263+
<a href="https://github.com/BananiumLabs/ElectroTab" class="icon fab fa-github"></a>
264+
</li>
265+
</ul>
177266
</article>
178267
</div>
179268

0 commit comments

Comments
 (0)