-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.php
293 lines (268 loc) · 14.8 KB
/
index.php
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
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Katie Porter</title>
<link href="portfolio-style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="//use.typekit.net/zso1gnq.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="portfolio.js"></script>
</head>
<body>
<!-- WRAPPER -->
<div id="wrapper">
<div class="container">
<!-- HEADER -->
<section id="main-header" class="header">
<img src="images/logo.png" alt="kp logo">
<h1>Katie Porter</h1>
<h2>designer & developer</h2>
<!-- NAV -->
<nav class="nav">
<ul>
<li><a class="scrollable batch" href="#about-me"></a></li>
<li><a class="scrollable batch" href="#projects"></a></li>
<li><a class="scrollable batch" href="#contact"></a></li>
</ul>
</nav>
<!-- END NAV -->
</section>
<!-- END HEADER -->
<!-- BEGIN ABOUT ME -->
<section id="about-me">
<div id="about-me-main" class="group">
<div class="content">
<a class="scrollable batch" href="#main-header"></a><br>
<h1>WHO I AM</h1>
<a class="scrollable batch" href="#projects"></a><br>
<p class="body-text">
My name is Katie Porter, and I am a designer and developer from Boulder, CO. I am a lover of travel, coffee, my dog, and all things design. I will be graduating from University of Colorado Boulder this May with a degree in psychology and a minor in technology, arts, & media. In my design work, I do my best to incorporate my knowledge of the human mind into every piece that I create with an end goal of an incredible digital experience.<br><br>
“Simplicity is not the goal. It is the by-product of a good idea and modest expectations.” - Paul Rand<br><br>
Check out my <a href="#about-me" onclick="resume_show();" class="scrollable">resume</a>, <a href="https://github.com/katieporter" target="_blank">GitHub</a>, and <a href="http://dribbble.com/janekporter" target="_blank">Dribbble</a>!
</p>
<img src="images/selfie.png" alt="self portrait" class="large-image">
</div>
</div>
<!-- BEGIN RESUME -->
<section id="resume">
<div class="content">
<h2>EDUCATION</h2><br>
Senior at the University of Colorado Boulder graduating in May 2014<br>
<div class="resume-bp">
• 3.94 overall GPA<br>
• Major in Psychology (3.95 GPA)<br>
• Minor in Philosophy (3.95 GPA)<br>
• Minor in Technology, Arts, and Media (4.0 GPA)<br>
• Dean's List for all semesters thus far<br>
• Recipient of Dean’s Scholars’ Award (Scholarship for four consecutive semesters)<br>
• Member of the CU Boulder Psychology Club<br>
• Member of Psi Chi, the International Honor Society in Psychology<br><br>
</div>
<h2>WORK EXPERIENCE</h2><br>
CU Housing & Dining Department of Information Technology<br>
Student Web Developer, 08/13-Present<br>
<div class="resume-bp">
• Creating a brand new portal for on-campus students and staff members where they will be able to pay rent, implement programs in the Residence Halls, etc. online<br>
• Working on the front-end and back-end to create an intuitive and functional user experience for students and employees across all of our sites<br><br>
</div>
CU Housing & Dining<br>
Strategic Communication Intern, 07/13-Present<br>
<div class="resume-bp">
• Creating content for the Housing & Dining Services websites and social media outlets<br>
• Earning my certification in Google analytics<br>
• Working with my team to brainstorm and implement our new “Be Boulder.” branding campaign for all of the content in our department<br>
• Created a video production for incoming students to help them choose their on-campus living experience, and edited a video for professional staff recruitment<br><br>
</div>
<h2>LEADERSHIP EXPERIENCE</h2><br>
CU Housing & Dining Department of Residence Life<br>
Student Team Leader, 02/11-08/13<br>
<div class="resume-bp">
• Implemented a more efficient and organized travel documentation system for the department<br>
• Prepared and processed financial and travel documents for professional staff<br>
• Held multiple training sessions on the travel process for professional staff<br>
• Hired and trained the student assistant team consisting of four members<br><br>
</div>
Dance Over Anaheim Musical Group<br>
Co-founder and lead vocalist/guitarist, 04/09-08/10<br>
<div class="resume-bp">
• Played shows regularly all across Colorado<br>
• Recorded two albums, one of which was released on iTunes<br>
• Released a music video for a single from our first album<br>
• Performed at the National Association of Music Merchants conference in Anaheim, CA as a SchoolJam USA competitor in 2010<br>
• Received the Fan Favorite award at the SchoolJam USA competition at NAMM in Anaheim, CA<br><br>
</div>
<h2>OTHER INVOLVEMENT</h2><br>
Cheyenne Village Volunteer<br>
Cheyenne Village is a non-profit organization that provides housing and employment opportunities to people with developmental disabilities; I helped with various office tasks, went on trips with the younger residents, volunteered as a greeter at the annual fundraising event “Vineyard at the Village”, and performed with my musical group at events<br><br>
<h2>ADDITIONAL SKILLS</h2><br>
Skilled in: Adobe CS6, Garage Band, Google Apps, Guitar, HTML/CSS, iMovie, Microsoft Office Suite, Vocal performance<br>
Intermediate in: Agile product management, Git, Drupal 7, Final Cut Pro, JavaScript, jQuery, PHP<br>
Proficient in: Arduino, Google Analytics, Logic Pro, MySQL, Objective-C<br>
<a href="#about-me" onclick="resume_hide();" class="button scrollable">Close</a>
<a href="katie-porter-resume.pdf" target="_blank" class="button">Download PDF</a>
</div>
</section>
<!-- END RESUME -->
</section>
<!-- END ABOUT ME -->
<!-- BEGIN PROJECTS -->
<section id="projects">
<div id="projects-main" class="group">
<div class="content">
<a class="scrollable batch" href="#main-header"></a><br>
<h1>WHAT I'VE DONE</h1>
<a class="scrollable batch" href="#contact"></a>
<p class="project-text">
I am passionate about clean and functional design, and I try to incorporate that into every piece that I create. Below is some of my work. In addition to this, I have also dabbled in <a href="#projects" onclick="project_show(7)"; class="scrollable">music</a>!
</p><br>
<div class="project-icon-box left-image" onmouseenter="name_show(1)"; onmouseleave="name_hide(1)";>
<a href="#projects" class="project scrollable" onclick="project_show(1);"><img src="images/design-elements-icon.png" alt="design elements icon" class="project-icon"></a>
<div class="project-name scrollable" id="name-1" onclick="project_show(1); location.href='#projects';">
Design Elements
</div>
</div>
<div class="project-icon-box" onmouseenter="name_show(2)"; onmouseleave="name_hide(2)";>
<a href="#projects" class="project scrollable" onclick="project_show(2);"><img src="images/avenir-icon.png" alt="avenir type spec icon" class="project-icon"></a>
<div class="project-name scrollable" id="name-2" onclick="project_show(2); location.href='#projects';">
Avenir Type Spec
</div>
</div>
<div class="project-icon-box right-image" onmouseenter="name_show(3)"; onmouseleave="name_hide(3)";>
<a href="#projects" class="project scrollable" onclick="project_show(3);"><img src="images/social-media-book-icon.png" alt="social media book icon" class="project-icon"></a><br>
<div class="project-name scrollable" id="name-3" onclick="project_show(3); location.href='#projects';">
Never Lonely
</div>
</div>
<div class="project-icon-box left-image" onmouseenter="name_show(4)"; onmouseleave="name_hide(4)";>
<a href="#projects" class="project scrollable" onclick="project_show(4);"><img src="images/atelier-icon.png" alt="atelier icon" class="project-icon"></a>
<div class="project-name scrollable" id="name-4" onclick="project_show(4); location.href='#projects';">
Atelier
</div>
</div>
<div class="project-icon-box" onmouseenter="name_show(5)"; onmouseleave="name_hide(5)";>
<a href="#projects" class="project scrollable" onclick="project_show(5);"><img src="images/dots-menu-icon.png" alt="dots-menu-icon"class="project-icon"></a>
<div class="project-name scrollable" id="name-5" onclick="project_show(5); location.href='#projects';">
Dot's Menu
</div>
</div>
<div class="project-icon-box right-image" onmouseenter="name_show(6)"; onmouseleave="name_hide(6)";>
<a href="#projects" class="project scrollable" onclick="project_show(6);"><img src="images/athens-icon.jpg" alt="athens logo icon" class="project-icon"></a>
<div class="project-name scrollable" id="name-6" onclick="project_show(6); location.href='#projects';">
Athens Logo
</div>
</div>
</div>
</div>
<!-- BEGIN PROJECT DETAILS -->
<section id="project-1" class="projects group">
<h1>DESIGN ELEMENTS</h1>
<img src="images/design-elements-01.png" class="image-proj-1 left-image" alt="design elements image one">
<img src="images/design-elements-02.png" class="image-proj-1 center-image" alt="design elements image two">
<img src="images/design-elements-03.png" class="image-proj-1 right-image" alt="design elements image three">
<p class="project-text">
This is a piece I made to explore various fundamental design elements. Check out the full piece <a href="http://bit.ly/1iSnsru" target="_blank">here</a>.<br>
<a href="#projects" onclick="project_hide(1);" class="button scrollable">Close</a>
</p>
</section>
<section id="project-2" class="projects group">
<h1>AVENIR TYPE SPEC</h1>
<img src="images/avenir.png" class="image-proj-2 center-image" alt="avenir type spec">
<p class="project-text">
This piece was created as a class project. I chose to do a type spec poster for Avenir, one of my absolute favorite typefaces.<br>
<a href="#projects" onclick="project_hide(2);" class="button scrollable">Close</a>
</p>
</section>
<section id="project-3" class="projects group">
<h1>NEVER LONELY</h1>
<img src="images/social-media-book-01.png" class="image-proj-3 left-image" alt="social media book image one">
<img src="images/social-media-book-02.png" class="image-proj-3 center-image" alt="social media book image two">
<img src="images/social-media-book-03.png" class="image-proj-3 right-image" alt="social media book image three">
<p class="project-text">
This was a digital book I created as a critique of social media. Check out the full piece <a href="http://bit.ly/1iIayfE" target="_blank">here</a>.<br>
<a href="#projects" onclick="project_hide(3);" class="button scrollable">Close</a>
</p>
</section>
<section id="project-4" class="projects group">
<h1>ATELIER</h1>
<img src="images/atelier-01.png" class="image-proj-4 center-image" alt="social media book image one"><br><br>
<img src="images/atelier-02.png" class="image-proj-4 center-image" alt="social media book image two">
<p class="project-text">
I created Atelier with a couple of friends, and it is essentially a fashion profile site. My primary roles for the project included overall site design on the front end, which I worked on with my partner-in-crime Tu, as well as back end functionality for the "Discover" page, which collects input from the user and gives them a fashion "flipbook" created by my other teammate, Garrett. Check out the site <a href="http://redwood.colorado.edu/tuph0947/dm2/groupproject/" target="_blank">here</a>.<br>
<a href="#projects" onclick="project_hide(4);" class="button scrollable">Close</a>
</p>
</section>
<section id="project-5" class="projects group">
<h1>DOT'S MENU</h1>
<img src="images/dots-menu-01.png" class="image-proj-5 center-image" alt="dots menu cover">
<img src="images/dots-menu-02.png" class="image-proj-5 center-image" alt="dots menu content">
<p class="project-text">
I go to Dot's Diner nearly weekly for brunch, and I've always wanted to redesign their menu. So I did!<br>
<a href="#projects" onclick="project_hide(5);" class="button scrollable">Close</a>
</p>
</section>
<section id="project-6" class="projects group">
<h1>ATHENS LOGO</h1>
<img src="images/athens-01.jpg" class="image-proj-1 left-image" alt="athens logo one">
<img src="images/athens-02.jpg" class="image-proj-1 center-image" alt="athens logo two">
<img src="images/athens-03.jpg" class="image-proj-1 right-image" alt="athens logo three">
<p class="project-text">
I created these images as a class project for my Digital Design course. We were asked to create a city logo, and I chose to do Athens, Greece. My goal was to create a logo that captured the rich architectural history while remaining modern and simple.<br>
<a href="#projects" onclick="project_hide(6);" class="button scrollable">Close</a>
</p>
</section>
<section id="project-7" class="projects group">
<h1>MUSIC</h1>
<p class="project-text">
<audio controls>
<source src="sound/youre-the-reason-cover.mp3" type="audio/mp3">
<source src="sound/youre-the-reason-cover.ogg" type="audio/ogg">
"Your browser does not support the html5 audio tag."
</audio><br>
"You're the Reason I Come Home" (Cover) <br>
Original by Ron Pope<br><br>
<audio controls>
<source src="sound/sand-in-your-shoes-cover.mp3" type="audio/mp3">
<source src="sound/sand-in-your-shoes-cover.ogg" type="audio/ogg">
"Your browser does not support the html5 audio tag."
</audio><br>
"Sand in Your Shoes" (Cover)<br>
Original by This Providence<br>
<a href="#projects" onclick="project_hide(7);" class="button scrollable">Close</a>
</p>
</section>
<!-- END PROJECT DETAILS -->
</section>
<!-- END PROJECTS -->
<!-- BEGIN CONTACT -->
<a name="contact" class="anchor"></a>
<section id="contact" class="group">
<div class="content">
<a class="scrollable batch" href="#main-header"></a><br>
<h1>WHERE TO REACH ME</h1>
<p class="body-text">
Interested in working with me?<br>Please get in touch, I would love to hear from you!
</p>
<a href="mailto:[email protected]" class="button">Email</a>
<a href="http://www.linkedin.com/pub/katie-porter/61/996/857/" target="_blank" class="button">LinkedIn</a>
<a href="http://twitter.com/janekporter" target="_blank" class="button">Twitter</a>
</div>
</section>
<!-- END CONTACT -->
</div>
<!-- END WRAPPER -->
<!-- FOOTER -->
<div id="footer">
Copyright © 2014 Katie Porter.
</div>
<!-- END FOOTER -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-48876864-1', 'janekporter.com');
ga('send', 'pageview');
</script>
</body>
</html>