-
Notifications
You must be signed in to change notification settings - Fork 0
/
index_old.html
200 lines (182 loc) · 13.2 KB
/
index_old.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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1 minimal-ui">
<meta name="description" content="Full stack web developer from Reno, Nevada"/>
<title>Portfolio - Jon Pabico</title>
<link rel="stylesheet" href="stylesheets/screen.css">
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js?ver=3.9-alpha-27111'></script>
</head>
<body class="home page page-id-347 page-template page-template-portfolio-php">
<header class="header header--push header-wrap">
<div class="container">
<div class="grid">
<div class="intro grid__cell unit-1-2--bp2">
<h1 class="intro__logo"><a href="javascript:history.go(0)">Jon Pabico</a><br/>Full-Stack Web Developer</h1>
<p class="intro__paragraph">"Solutions, one line at a time."</p>
</div>
<nav class="nav-container grid__cell unit-1-2--bp2">
<ul class="nav nav--primary">
<li class="is-current is-current"><a href="javascript:history.go(0)">Portfolio</a></li>
<li><a href="Pabico_CV_2015.pdf">Resume (pdf)</a></li>
</ul>
</nav>
</div>
</div>
</header>
<div class="site-wrap">
<section class="portfolio-piece highlight--blue">
<h2 class="portfolio-piece__title">
<a class="portfolio-piece__link" href="http://jury2.herokuapp.com" data-portfolio="www.jury2.herokuapp.com">Jury</a>
</h2>
<div class="portfolio-piece__wrap">
<div class="grid">
<div class="container">
<div class="grid__cell unit-1-2--bp2 portfolio-piece__image-wrap portfolio-piece__image-wrap--tall">
<div class = "section_quote">
<blockquote class = "highlight--blue"><p>"Always vote on principle, though you may vote alone, and you may cherish the sweetest reflection that your vote is never lost."</p><footer> - John Adams</footer></blockquote>
</div>
<a href="images/jury_landing_page.jpg" target="_blank"><img src="images/jury_landing_page.jpg" alt="" class="portfolio-piece__image portfolio-piece__image highlight--blue"></a>
<a href="images/jury_case_sample.jpg" target="_blank"><img src="images/jury_case_sample.jpg" alt="" class="portfolio-piece__image portfolio-piece__image highlight--blue"></a>
</div>
<div class="portfolio-piece__content grid__cell unit-1-2--bp2">
<p>
<b><em>Jury</em></b> is a social media web application that allows 2 parties to submit their arguments to the court of public opinion for resolution. Its structure allows users to share thoughts, experiences, ideas, and life moments. Educators can use this tool to help facilitate learning and discussion by involving students outside of the classroom.
</p>
<p>Some key features of <b><em>Jury</em></b> allow users to: </p>
<ul>
<li>Open new cases and make their arguments</li>
<li>Upload videos from YouTube to support their cases</li>
<li>Make a rebuttal to their opponents' cases</li>
<li>Comment on each party's argument and support their causes</li>
<li>Upvote and downvote comments</li>
<li>Vote on cases and decided the winner!</li>
</ul>
<p><b><em>Jury</em></b> is a Ruby on Rails web app making use of technologies such as ActiveRecord, HTML5, CSS3, Javascript, AJAX, and APIs (YouTube, CRON).</p>
<a href="http://jury2.herokuapp.com" class="icon--right-dir">Check out Jury</a>
</div>
</div>
</div>
</div>
</section>
<section class="portfolio-piece highlight--red">
<h2 class="portfolio-piece__title">
<a class="portfolio-piece__link" href="http://tumblr-clone-dbc.herokuapp.com" data-portfolio="www.tumblr-clone-dbc.herokuapp.com">Tumblr-Clone</a>
</h2>
<div class="portfolio-piece__wrap">
<div class="grid">
<div class="container">
<div class="grid__cell unit-1-2--bp2 portfolio-piece__image-wrap ">
<div class = "section_quote">
<blockquote class = "highlight--red"><p>"Whenever you do a thing, act as if all the world were watching."</p><footer> - Thomas Jefferson</footer></blockquote>
</div>
<a href="images/tumblr-clone-dbc.jpg" target="_blank"><img src="images/tumblr-clone-dbc.jpg" alt="" class="portfolio-piece__image portfolio-piece__image highlight--red"></a>
</div>
<div class="portfolio-piece__content grid__cell unit-1-2--bp2">
<p>
<b><em>Tumblr-Clone</em></b> is a social networking application modeled after the Tumbl platform. Like Tumblr, it allows users to post multimedia and other content to a short-form blog. <em>Tumblr-Clone</em> is a personal project used for instructional purposes to teach others how to develop web apps using the Ruby on Rails framework.
</p>
<p><b><em>Tumblr-Clone</em></b> is a web app making use of technologies such as ActiveRecord, HTML5, CSS3, Bootstrap, Javascript, Ruby and Ruby on Rails.</p>
<a href="http://tumblr-clone-dbc.herokuapp.com" class="icon--right-dir">Blog on Tumblr-Clone</a>
</div>
</div>
</div>
</div>
</section>
<section class="portfolio-piece highlight--green">
<h2 class="portfolio-piece__title">
<a class="portfolio-piece__link" href="http://letterstream.herokuapp.com" data-portfolio="www.letterstream.herokuapp.com">Letter Stream</a>
</h2>
<div class="portfolio-piece__wrap">
<div class="grid">
<div class="container">
<div class="grid__cell unit-1-2--bp2 portfolio-piece__image-wrap ">
<div class = "section_quote">
<blockquote class = "highlight--green"><p>"The more you read, the more things you will know. The more that you learn, the more places you'll go."</p><footer> - Dr. Seuss</footer></blockquote>
</div>
<a href="images/letterstream_pic.jpg" target="_blank"><img src="images/letterstream_pic.jpg" alt="" class="portfolio-piece__image portfolio-piece__image highlight--green"></a>
</div>
<div class="portfolio-piece__content grid__cell unit-1-2--bp2">
<p>
<b><em>Letter Stream</em></b> is an educational web app that aids children in improving their reading skills. Found "at the end of <em>The Reading Rainbow</em>", children can develop their creativity and write their own stories, adjust the speed and color of the reading highlighter, and upload text files for more practice.
</p>
<p>Designed with the Sinatra framework, <b><em>Letter Stream</em></b> uses HTML5, CSS3, Javascript, ActiveRecord, PostgreSQL and Ruby.</p>
<a href="http://letterstream.herokuapp.com" class="icon--right-dir">Try Letter Stream</a>
</div>
</div>
</div>
</div>
</section>
<section class="portfolio-piece highlight--blue">
<h2 class="portfolio-piece__title">
<a class="portfolio-piece__link" href="http://connect-4-dbc.herokuapp.com" data-portfolio="www.connect-4-dbc.herokuapp.com">Flizzard Connect</a>
</h2>
<div class="portfolio-piece__wrap">
<div class="grid">
<div class="container">
<div class="grid__cell unit-1-2--bp2 portfolio-piece__image-wrap ">
<div class = "section_quote">
<blockquote class = "highlight--blue"><p>"Talent wins games, but teamwork and intelligence wins championships."</p><footer> - Michael Jordan</footer></blockquote>
</div>
<a href="images/connect-4.jpg" target="_blank"><img src="images/connect-4.jpg" alt="" class="portfolio-piece__image portfolio-piece__image highlight--blue"></a>
</div>
<div class="portfolio-piece__content grid__cell unit-1-2--bp2">
<p>
<b><em>Flizzard Connect</em></b> is a group's take on the classic Connect 4 boardgame. Built as a team project at Dev Bootcamp, users can have hours of fun and enjoyment recapturing their childhood with this online version.
</p>
<p><em>Flizzard Connect</em></b> uses HTML5, CSS3, and Javascript (as well as one line of PHP!).</p>
<a href="http://connect-4-dbc.herokuapp.com" class="icon--right-dir">Play Flizzard Connect</a>
</div>
</div>
</div>
</div>
</section>
<section class="portfolio-piece highlight--purple">
<h2 class="portfolio-piece__title">
<a class="portfolio-piece__link" data-portfolio="currently under construction">Qu-est</a>
</h2>
<div class="portfolio-piece__wrap">
<div class="grid">
<div class="container">
<div class="grid__cell unit-1-2--bp2 portfolio-piece__image-wrap portfolio-piece__image-wrap--tall">
<div class = "section_quote">
<blockquote class = "highlight--purple"><p>"What we want to see is the child in pursuit of knowledge, and not the knowledge in pursuit of the child."</p><footer> - George Bernard Shaw</footer></blockquote>
</div>
<a href="images/quest_pic.jpg" target="_blank"><img src="images/quest_pic.jpg" alt="" class="portfolio-piece__image portfolio-piece__image highlight--purple"></a>
</div>
<div class="portfolio-piece__content grid__cell unit-1-2--bp2">
<p><b><em>Quest</em></b> is an educational web app that allows students to assess one another inside and outside the classroom.</p>
<p>Students can write a Quest (QUiz-tEST question) and send it via Twitter to his/her fellow classmates. Every student has the opportunity to answer questions and get immediate feedback.</p>
<p>In addition, teachers can see the results of the entire class for every question, allowing for better planning and instructional design.</p>
<a class="portfolio-piece__link icon--right-dir" data-portfolio="currently under construction">Check back soon to try Qu-est</a>
</div>
</div>
</div>
</div>
</section>
<section class="portfolio-piece highlight--orange">
<h2 class="portfolio-piece__title">
<a class="portfolio-piece__link" href="mailto:jbpabico%40gmail%2Ecom" data-portfolio="[email protected]">Contact Me</a>
</h2>
<div class="portfolio-piece__wrap">
<div class="grid">
<div class="container">
<div class="grid__cell unit-1-2--bp2 portfolio-piece__image-wrap ">
<img src="images/profile_pic.jpg" alt="" class="portfolio-piece__image portfolio-piece__image highlight--orange">
</div>
<div class="portfolio-piece__content grid__cell unit-1-2--bp2">
<a class="icon--right-dir">Do you have a project in mind?</a><br/>
<a class="icon--right-dir">Want to make your idea into a reality?</a><br/>
<a class="icon--right-dir">Just want to say "hi"?</a><br/><br/>
<a href="mailto:jbpabico%40gmail%2Ecom" target = "_blank"><img id="email" style= "border:none" src="images/email_button.png">Email me</a></p>
</div>
</div>
</div>
</div>
<footer><p id="copyright">© Copyright 2014 Jon Pabico</p></footer>
</section>
</div>
<script type='text/javascript' src='javascript/scripts.js'></script>
</body>
</html>