Skip to content

Commit 4eb1dca

Browse files
saapoochsaapooch
committed
mobile version
1 parent 7426afb commit 4eb1dca

3 files changed

Lines changed: 121 additions & 62 deletions

File tree

‎css/poochstyle.css‎

Lines changed: 75 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -192,6 +192,25 @@
192192
font-size: 100%;
193193

194194
}
195+
196+
.projpaper{
197+
float:right;
198+
padding:20px
199+
}
200+
201+
.vertpads{
202+
padding:30px 0px 0px;
203+
}
204+
205+
.size1{
206+
font-size: 110%
207+
}
208+
209+
.size2{
210+
font-size: 70%;
211+
font-style:italic;
212+
}
213+
195214
}
196215

197216
@media only screen and (min-width: 1300px) {
@@ -214,22 +233,43 @@
214233
font-family: GeosansLight;
215234
}
216235

236+
.size1{
237+
font-size: 80%
238+
}
239+
240+
.size2{
241+
font-size: 50%;
242+
font-style:italic;
243+
}
244+
217245
.temp-border{
218246
border-bottom: 2px solid grey;
219247
}
220248

249+
.projpaper{
250+
float:center;
251+
padding:20px
252+
}
253+
254+
221255
.modern{
222256
color:black;
223257
font-family: GeosansLight;
224258
}
225259

226260
.pads{
227-
padding:6px;
228-
font-size: 80%;
261+
padding:0px 6px;
262+
font-size: 60%;
263+
}
264+
265+
.font-pad{
266+
padding: 0px 50px;
229267
}
230268

269+
270+
231271
.pads-title{
232-
padding: 6px;
272+
padding: 0px 6px;
233273
font-size:100%;
234274
}
235275

@@ -250,7 +290,21 @@
250290
}
251291

252292
.pooch_img{
253-
width:60%
293+
width:150px; /* you can use % */
294+
padding:0px 0px 20px;
295+
height: auto;
296+
display: block;
297+
margin:auto;
298+
}
299+
300+
301+
302+
.bio{
303+
display:none
304+
}
305+
306+
.education{
307+
display:none
254308
}
255309

256310
.link-1:hover {
@@ -262,7 +316,6 @@
262316
}
263317

264318

265-
266319
/*Bottom menu bar */
267320

268321

@@ -278,7 +331,7 @@
278331
/* entire container, keeps perspective */
279332
/* entire container, keeps perspective */
280333
.flip-container {
281-
perspective: 1000px;
334+
perspective: 500px;
282335
}
283336
/* flip the pane when hovered */
284337
.flip-container:hover .flipper, .flip-container.hover .flipper {
@@ -287,7 +340,7 @@
287340

288341
.flip-container, .front, .back {
289342
width: 100%;
290-
height: 300px;
343+
height: 150px;
291344
}
292345

293346
.contain{
@@ -308,7 +361,7 @@
308361
}
309362

310363
.job_pics{
311-
width:200px;
364+
width:100px;
312365
height:auto;
313366
display: block;
314367
margin-left: auto;
@@ -367,18 +420,25 @@
367420
border: 2px solid black;
368421
}
369422

370-
#section1{
423+
.fp-controlArrow{
371424
display:none
372425
}
373-
#section2{
374-
display:none
426+
427+
.pooch_font{
428+
font-size: 80%;
429+
text-align: center;
430+
375431
}
376-
#section3{
377-
display:none
432+
433+
.card{
434+
border: 1px solid black;
435+
width: 300px;
436+
height: 200px;
378437
}
379438

380-
.mobile-status{
381-
padding: 30px 0px 0px;
439+
.reduce{
440+
font-size: 70%;
382441
}
383442

443+
384444
}

‎index.html‎

Lines changed: 45 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858
<span class="navbar-toggler-icon" ></span>
5959
</button>
6060
<div class="collapse navbar-collapse ml-auto" id="navbarSupportedContent">
61-
<ul id="menu" class="nav navbar-nav ml-auto">
61+
<ul id="menu" class="nav navbar-nav ml-auto" style='float:right'>
6262
<li data-menuanchor="about" class="nav-item nav-link"><a class="modern link-1" href="#about">About</a></li>
6363
<li data-menuanchor="contact" class="nav-item nav-link"><a class="modern link-1" href="#contact">Contact</a></li>
6464
</ul>
@@ -80,7 +80,6 @@ <h1 class='modern temp-border'> Saahith Pochiraju </h1>
8080
<h3 class='modern' style='color:#375E97'> Analysis </h3>
8181
<h3 class='modern' style='color:#FB6542'> Code </h3>
8282
<h3 class='modern' style='color:#3F681C'> Design </h3>
83-
<h3 class='modern mobile-status'> Mobile Site Under Construction</h3>
8483
</div>
8584
</div>
8685
</div>
@@ -91,24 +90,24 @@ <h3 class='modern mobile-status'> Mobile Site Under Construction</h3>
9190
<div class="slide" id="slide1">
9291
<div class='container-fluid'>
9392
<div class='row'>
94-
<div class='col-lg-3 offset-lg-1'>
93+
<div class='col-sm-3 offset-sm-1'>
9594
<img class='pooch_img' src='images/poochpic.png' />
9695
</div>
97-
<div class='col-lg-7'>
96+
<div class='col-sm-7'>
9897
<div class='row'>
99-
<div class='col-lg-12'>
98+
<div class='col-sm-12'>
10099
<div class='row'>
101-
<div class='col-lg-12'>
102-
<h3 class='modern'> Bio </h3>
100+
<div class='col-sm-12'>
101+
<h3 class='modern bio'> Bio </h3>
103102
<p class='modern pooch_font'> Always striving to improve the world, Saahith is an innovator looking to create change. Currently, he creating this change by building whole-cell models at the Karr Lab in the Icahn School of Medicine at Mount Sinai. These computational models account for the function of every gene and molecule in a cell and have been described as “a grand challenge for the 21st century”. Saahith is constructing an automated data curation service to create these models and hopes to one day use these models to improve pharmaceutical selection and revolutionize personalized medicine. When Saahith is not trying to solve complex computer science and mathematical problems, he is playing golf or watching the NY Rangers bring the Stanley Cup to where it belongs. </p>
104103
</div>
105104
</div>
106-
<div class='row' style='padding:3vh 0px'>
107-
<div class='col-lg-2'>
105+
<div class='row education' style='padding:3vh 0px'>
106+
<div class='col-sm-2'>
108107
<h3 class='modern'> Education </h3>
109108
<img style="width:100%" src='images/emory.png' />
110109
</div>
111-
<div class='col-lg-6'>
110+
<div class='col-sm-6'>
112111
<h6 class='modern' style='padding:20% 0 0'> Applied Math and Biology, BS </h6>
113112
<h6 class='modern'> Class of 2017 </h6>
114113
</div>
@@ -123,52 +122,52 @@ <h6 class='modern'> Class of 2017 </h6>
123122
<div class="slide" id="slide2">
124123
<div class='container-fluid'>
125124
<div class='row'>
126-
<div class='col-lg-3 offset-lg-1 temp-border my-auto modern'>
127-
<h3 style="float:right;padding:20px"> Current Projects </h3>
125+
<div class='col-lg-3 offset-lg-1 my-auto modern'>
126+
<h3 class='temp-border projpaper'> Current Projects </h3>
128127
</div>
129128
<div class='col-lg-1'>
130129
<div class='tiny-borderz'></div>
131130
</div>
132-
<div class='col-lg-6 my-auto modern'>
131+
<div class='col-lg-6 my-auto modern font-pad'>
133132
<div class='row'>
134-
<h3> <a style='color:#375E97' href='https://github.com/KarrLab/kinetic_datanator'> Datanator </a></h3>
133+
<h3> <a class='reduce' style='color:#375E97' href='https://github.com/KarrLab/kinetic_datanator'> Datanator </a></h3>
135134
</div>
136135
<div class='row'>
137-
<h5 style='color:#375E97'> Creating functional, normalized data for Whole-Cell Models </h5>
136+
<h5 class='reduce' style='color:#375E97'> Creating functional, normalized data for Whole-Cell Models </h5>
138137
</div>
139-
<div class='row' style='padding:30px 0px 0px'>
140-
<h3> <a style='color:#FB6542' href='http://visitgallery.co'> Gallery </a></h3>
138+
<div class='row' style='padding:15px 0px 0px'>
139+
<h3> <a class='reduce' style='color:#FB6542' href='http://visitgallery.co'> Gallery </a></h3>
141140
</div>
142141
<div class='row'>
143-
<h5 style='color:#FB6542'> A digital art marketplace using the blockchain </h5>
142+
<h5 class='reduce' style='color:#FB6542'> A digital art marketplace using the blockchain </h5>
144143
</div>
145144
</div>
146145
</div>
147-
<div class='row' style='padding:30px 0px'>
148-
<div class='col-lg-3 offset-lg-1 temp-border my-auto'>
149-
<h3 class='modern' style="float:right;padding:20px"> Papers </h3>
146+
<div class='row vertpads' >
147+
<div class='col-lg-3 offset-lg-1 my-auto modern'>
148+
<h3 class='temp-border projpaper'> Papers </h3>
150149
</div>
151150
<div class='col-lg-1'>
152151
<div class='tiny-borderz'></div>
153152
</div>
154-
<div class='col-lg-6 my-auto'>
153+
<div class='col-lg-6 my-auto font-pad modern'>
155154
<div class='row'>
156-
<div class='modern'> <a style='color:#3F681C;font-size:110%' href='https://www.sciencedirect.com/science/article/pii/S2452310017301853'> A blueprint for human whole-cell modeling </a></div>
155+
<div> <a class='size1' style='color:#3F681C' href='https://www.sciencedirect.com/science/article/pii/S2452310017301853'> A blueprint for human whole-cell modeling </a></div>
157156
</div>
158157
<div class='row'>
159-
<div class='modern' style='color:#3F681C;font-style:italic;font-size:70%'> Current Opinion in Systems Biology</div>
158+
<div class='size2' style='color:#3F681C'> Current Opinion in Systems Biology</div>
160159
</div>
161160
<div class='row' style='padding:15px 0px 0px'>
162-
<div class='modern'> <a style='color:#FFBB00;font-size:110%' href='https://www.liebertpub.com/doi/abs/10.1089/neu.2017.5538'>Variability of leg kinematics during overground walking in persons with chronic incomplete spinal cord injury </a></div>
161+
<div > <a class='size1' style='color:#FFBB00' href='https://www.liebertpub.com/doi/abs/10.1089/neu.2017.5538'>Variability of leg kinematics during overground walking in persons with chronic incomplete spinal cord injury </a></div>
163162
</div>
164163
<div class='row'>
165-
<div class='modern' style='color:#FFBB00;font-style:italic;font-size:70%'> Journal of Neurotrama</div>
164+
<div class='size2' style='color:#FFBB00'> Journal of Neurotrama</div>
166165
</div>
167166
<div class='row' style='padding:15px 0px 0px'>
168-
<div class='modern'> <a style='color:#375E97;font-size:110%' href='http://onlinelibrary.wiley.com/doi/10.1002/mus.25181/abstract'> Superficial fibular nerve sensory nerve conduction study in children </a></div>
167+
<div > <a class='size1' style='color:#375E97' href='http://onlinelibrary.wiley.com/doi/10.1002/mus.25181/abstract'> Superficial fibular nerve sensory nerve conduction study in children </a></div>
169168
</div>
170169
<div class='row'>
171-
<div class='modern' style='color:#375E97;font-style:italic;font-size:70%'> Muscle & Nerve </div>
170+
<div class='size2' style='color:#375E97'> Muscle & Nerve </div>
172171
</div>
173172

174173
</div>
@@ -251,10 +250,10 @@ <h3 class='modern' style='padding:0 0 40px'> Skills </h3>
251250
<div class='col-10 offset-1'>
252251
<div class='contain'>
253252
<div class='row'>
254-
<div class='col-2'>
253+
<div class='col-lg-2'>
255254
<h4 class='modern'> Languages </h4>
256255
</div>
257-
<div class='col-10'>
256+
<div class='col-lg-10'>
258257
<img class='language' src='images/python.jpg' />
259258
<img class='language' src='images/java.png' />
260259
<img class='language' src='images/html.png' />
@@ -264,10 +263,10 @@ <h4 class='modern'> Languages </h4>
264263
</div>
265264
</div>
266265
<div class='row' style='padding:20px 0px'>
267-
<div class='col-2'>
266+
<div class='col-lg-2'>
268267
<h4 class='modern'> Frameworks </h4>
269268
</div>
270-
<div class='col-10'>
269+
<div class='col-lg-10'>
271270
<img class='language' src='images/flask.png' />
272271
<img class='language' src='images/django.png' />
273272
<img class='language' src='images/meteor.png' />
@@ -278,35 +277,35 @@ <h4 class='modern'> Frameworks </h4>
278277
</div>
279278
</div>
280279
<div class='row' style='padding:20px 0px'>
281-
<div class='col-2'>
280+
<div class='col-lg-2'>
282281
<h4 class='modern'> Libraries </h4>
283282
</div>
284-
<div class='col-10'>
283+
<div class='col-lg-10'>
285284
<h5 class='modern'> Sci-Kit Learn, D3, ReactJS, Jupyter Notebook,SQLAlchemy, NumPy, Matplotlib, SciPy, Pandas, Pytest, Mocha, Sphinx, Requests, Web3, Bootstrap</h5>
286285
</div>
287286
</div>
288287
<div class='row' style='padding:20px 0px'>
289-
<div class='col-2'>
288+
<div class='col-lg-2'>
290289
<h4 class='modern'> Production </h4>
291290
</div>
292-
<div class='col-10'>
291+
<div class='col-lg-10'>
293292
<img class='language-h' src='images/aws.jpg' />
294293
<img class='language-h' src='images/heroku.png' />
295294
</div>
296295
</div>
297296
<div class='row' style='padding:20px 0px'>
298-
<div class='col-2'>
297+
<div class='col-lg-2'>
299298
<h4 class='modern'> Quality Control </h4>
300299
</div>
301-
<div class='col-10'>
300+
<div class='col-lg-10'>
302301
<img class='language-h' src='images/circleci.png' />
303302
</div>
304303
</div>
305304
<div class='row' style='padding:20px 0px'>
306-
<div class='col-2'>
305+
<div class='col-lg-2'>
307306
<h4 class='modern'> Experimental </h4>
308307
</div>
309-
<div class='col-10'>
308+
<div class='col-lg-10'>
310309
<h5 class='modern'> PCR, Cryosectioning, Immunostaining, Microscopy, Western Blot </h5>
311310
</div>
312311
</div>
@@ -325,10 +324,10 @@ <h5 class='modern'> PCR, Cryosectioning, Immunostaining, Microscopy, Western Blo
325324
<div class='offset-lg-5 col-lg-6 pads'> </div>
326325
</div>
327326
<div class='row'>
328-
<div class='col-lg-4' style='padding:0px 30px'>
327+
<div class='col-4' style='padding:10px 30px'>
329328
<img style='width:75px;height:75px' src='images/sp_icon.png' />
330329
</div>
331-
<div class='col-lg-8' style='padding:5px 43px'>
330+
<div class='col-8' style='padding:5px 43px'>
332331
<div class='row'>
333332
<h4 class='modern'> Saahith Pochiraju </h4>
334333
</div>
@@ -341,22 +340,22 @@ <h4 class='modern'> Saahith Pochiraju </h4>
341340
</div>
342341
</div>
343342
<div class='row'>
344-
<div class='col-lg-12' style='margin:20px 0px 0px'>
343+
<div class='col-12' style='margin:20px 0px 0px'>
345344
<div style='width:100%;height:15px;background-color:#FFBB00'> </div>
346345
</div>
347346
</div>
348347
<div class='row'>
349-
<div class='col-lg-12'>
348+
<div class='col-12'>
350349
<div style='width:100%;height:15px;background-color:#FB6542'> </div>
351350
</div>
352351
</div>
353352
<div class='row'>
354-
<div class='col-lg-12'>
353+
<div class='col-12'>
355354
<div style='width:100%;height:15px;background-color:#375E97'> </div>
356355
</div>
357356
</div>
358357
<div class='row'>
359-
<div class='col-lg-12'>
358+
<div class='col-12'>
360359
<div style='width:100%;height:15px;background-color:#3F681C'> </div>
361360
</div>
362361
</div>

0 commit comments

Comments
 (0)