-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
203 lines (195 loc) · 12 KB
/
index.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
201
202
203
<!DOCTYPE html>
<html>
<head>
<title>Peter Andringa</title>
<meta name="viewport" content="width=640, initial-scale=0.5">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="Peter Andringa - Mobile & web developer, entrepreneur, and student.">
<!-- CSS -->
<!-- Compiled into public/css/all.css
<link rel="stylesheet" href="css/bootstrap/css/bootstrap.min.css" type="text/css" >
<link rel="stylesheet" href="css/jqueryMobile.css" type="text/css" >
<link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css" type="text/css" >
<link rel="stylesheet" href="css/pushMenu.css" type="text/css" media="screen and (max-width: 640px)">
-->
<link rel="stylesheet" href="css/all.min.css" type="text/css">
</head>
<body>
<div id="background">
<div id="mobileNav">
<div class="toggle-menu menu-left">
<i class="fa fa-bars fa-2x"></i>
</div>
<ul class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left">
<li><a href="#head" class="mobileMenu-links">Home</a></li>
<li><a href="#about" class="mobileMenu-links">About</a></li>
<li><a href="#resume" class="mobileMenu-links">Resume</a></li>
<li><a href="#projects" class="mobileMenu-links">Projects</a></li>
<li><a href="#blog" class="mobileMenu-links">Blog</a></li>
<li><a href="mailto:[email protected]" class="mobileMenu-links">Contact</a></li>
</ul>
</div>
<div id="fixedNav">
<ul id="fixedList">
<li><a href="#head"><i class="fa fa-lg fa-circle-o" id="i-head"></i><span id="sideNav-head">Home</span></a></li>
<li><a href="#about"><i class="fa fa-lg fa-circle-o" id="i-about"></i><span id="sideNav-about">About</span></a></li>
<li><a href="#resume"><i class="fa fa-lg fa-circle-o" id="i-resume"></i><span id="sideNav-resume">Resume</span></a></li>
<li><a href="#projects"><i class="fa fa-lg fa-circle-o" id="i-projects"></i><span id="sideNav-projects">Projects</span></a></li>
<li><a href="#blog"><i class="fa fa-lg fa-circle-o" id="i-blog"></i><span id="sideNav-blog">Blog</span></a></li>
<li><a href="#contact"><i class="fa fa-lg fa-circle-o" id="i-contact"></i><span id="sideNav-contact">Contact</span></a></li>
</ul>
</div>
<div id="toTop">
<a href="#head"><i class="fa fa-angle-up fa-4x"></i></a>
</div>
<div id="scrollDown">
<a href="#about"><i class="fa fa-angle-down fa-4x"></i></a>
</div>
<section id="head"><div class="centered">
<div class="logo">Peter Andringa</div>
<span class="bio">Mobile & web developer, entrepreneur, and student.</span>
<nav id="nav"><a href="#about" class="links" id="linkAbout">About</a> | <a href="#resume" class="links" id="linkResume">Resume</a> | <a href="#projects" class="links" id="linkProjects">Projects</a> | <a href="#blog" class="links" id="linkBlog">Blog</a> | <a href="mailto:[email protected]" class="links" id="linkContact">Contact</a></nav>
</div>
</section>
<section id="about">
<h2 class="sectionTitle">About</h2>
<div class="row">
<div class="col-xs-0 col-sm-1"></div>
<div id="aboutText" class="col-xs-12 col-sm-7">
<p><span class="greet">Hello!</span> My name is Peter Andringa, and I'm currently a high school student at <a href="http://tjhsst.edu" target="_blank">Thomas Jefferson High School for Science and Technology</a>, an elite high school in Northern Virginia specifically for students who love math, science, engineering, and computer science. I'm currently in my Sophomore year, and even though its a lot of work I really enjoy studying there.</p>
<p>My first introduction to computer science came in 7th grade, when I picked up a cousin's C++ book and started to read it. I thought the idea of programming was fascinating, but I didn't quite understand everything going on in that book. I decided to teach myself how to code, by building a hands on project: creating an iPhone app. I started to teach myself, and eventually finished my app, a game called "Sharks Vs. Subs", in 8th grade. (I've since been removed it from the App Store, but you can <a href="https://web.archive.org/web/20131115233610/https://itunes.apple.com/us/app/sharks-vs.-subs/id500865559" target="_blank">check it out on The Wayback Machine</a>).</p>
<p>Over the last couple years since then I've developed a passion for entrepreneurship, product design, and making my ideas come to life through code. Outside of school I spend much of my time devoted to these things, whether it be through internships, helping lead my school's entrepreneurship club, organizing <a href="http://tjhackathon.com" target="_blank">HackTJ</a> and <a href="http://gopilot.org" target="_blank">PilotDC</a>, or even just tinkering on some of my own <a href="#projects">projects</a>. I love building cool stuff and teaching others how to do so, because I think there's nothing cooler than seeing your idea come to life.</p>
<p>I'm always open to new opportunities or ideas, so don't hesitate to <a href="#contact">contact</a> me via email (<a href="mailto:[email protected]">[email protected]</a>), because I'd love to hear from you!</p>
</div>
<div id="aboutImage" class="col-xs-0 col-sm-3">
<img src="img/portrait.jpg?new=1" class="img-responsive img-circle" alt="me">
</div>
<div class="col-xs-0 col-md-1"></div>
</div>
</section>
<section id="resume">
<h2 class="sectionTitle">Resume</h2>
<div class="row">
<div class="col-sm-4 resumeSection top">
<h3 class="section-head" id="education">Education:</h3>
<ul>
<li><a href="http://tjhsst.edu" target="_blank">TJHSST</a>, Class of 2016
<span class="description">
<ul>
<li>Accelerated Computer Science (Python)</li>
<li>AP Computer Science & Data Structures (Java)</li>
</ul>
</span></li>
<li><a href="http://cty.jhu.edu" target="_blank">Johns Hopkins Center For Talented Youth</a> (Online)
<span class="description">
<ul>
<li>Web development and design (HTML, CSS, & Javascript)</li>
<li>Javascript</li>
</ul>
</span></li>
<li><em>Much more to come...</em></li>
</ul>
</div>
<div class="col-sm-4 resumeSection">
<h3 class="section-head" id="skills">Skills:</h3>
<ul>
<li>Web Design with HTML, CSS, & Javascript</li>
<li>Server-side code in PHP & Node.js</li>
<li>Database management with MySql and SqlLite</li>
<li>Experience with Linux and Developer Operations</li>
<li>Proficient in Python, Lua, & Java</li>
<li>Experience with iOS app development in XCode</li>
<li>Experience with cross-platform mobile development with Corona SDK</li>
</ul>
</div>
<div class="col-sm-4 resumeSection">
<h3 class="section-head" id="experience">Work Experience:</h3>
<ul>
<li>DC Organizer, <a href="http://gopilot.org" target="_blank">Pilot</a> (Summer 2013 - present)
<span class="description">Lead organizer of the annual <a href="http://dc.gopilot.org" target="_blank">PilotDC</a> hackathon for high school students. Also a member of the <a href="http://gopilot.org/about" target="_blank">Pilot National Leadership Team</a>, since its inception in Summer 2013</span></li>
<li>Summer Associate, <a href="http://socialtables.com" target="_blank">Social Tables</a> (Summer 2013)
<span class="description">Web developer for <a href="http://socialtables.com" target="_blank">Social Tables</a>. Rewrote user-facing dashboard, worked with Node.js backend APIs and MySql database, and overhauled the internal platform for the sales team.</span></li>
<li>Founder of Blue Spruce Games (2011)
<span class="description">Founder and CEO of Blue Spruce Games. Wrote an iOS game called <a href="https://web.archive.org/web/20131115233610/https://itunes.apple.com/us/app/sharks-vs.-subs/id500865559" target="_blank">Sharks Vs. Subs</a>, and managed sales, marketing, and finances for the app.</span></li>
</ul>
</div>
</div>
<div id="downloadResume">
<a href="/resume.pdf" target="_blank"><i class="fa fa-sign-in"></i> Download my Resume</a>
</div>
</section>
<section id="projects">
<h2 class="sectionTitle">Projects</h2>
<div class="row">
<div class="col-sm-4 projectPanel">
<div class="thumbnail">
<img src="img/projects/lightSensor.jpg" alt="Light Sensor" class="projectThumb">
<div class="caption">
<h3>Light Sensor</h3>
<p>This project, built for a school science experiment measuring the feeding rate of oysters, uses a Raspberry Pi and Adafruit's <a href="http://www.adafruit.com/products/439" target="_blank">lumosity sensor</a> to measure and record the amount of light on the sensor. The data is then logged and uploaded to a server for analysis.</p>
<p class="buttonP"><a href="https://github.com/pandringa/RPi-Light-Sensor" class="btn btn-primary" role="button" target="_blank">View on GitHub</a></p>
</div>
</div>
</div>
<div class="col-sm-4 projectPanel">
<div class="thumbnail">
<img src="img/projects/led.jpg" alt="Light Notifier" class="projectThumb">
<div class="caption">
<h3>Light Notifier</h3>
<p>A system of LED notifications using a Raspberry Pi, which connects to various web services (e.g. Facebook, Twitter, GitHub, Google+, etc.) to check for unread notifications. The notifier is fully configurable through a Node.js web portal available on the local network.</p>
<p class="buttonP"><a href="#" class="btn btn-primary disabled" role="button" target="_blank">Coming soon to GitHub</a></p>
</div>
</div>
</div>
<div class="col-sm-4 projectPanel">
<div class="thumbnail">
<img src="img/projects/embed.jpg" alt="Chat Embedder" class="projectThumb">
<div class="caption">
<h3>Chat Embedder</h3>
<p>A Safari and Chrome extension that will automatically embed the content from any valid link (to Youtube, Vimeo, Soundcloud, etc.), directly into your Facebook chat. Powered by the <a href="http://embed.ly">embed.ly</a> API, allowing the user to embed content from over 250 websites.</p>
<p class="buttonP"><a href="https://github.com/pandringa/RPi-Light-Sensor" class="btn btn-primary" role="button" target="_blank">View on GitHub</a></p>
</div>
</div>
</div>
</div>
</section>
<section id="blog">
<h2 class="sectionTitle">Blog</h2>
<span id="loadingText">Loading...</span>
<div id="fillPosts">
<!-- Should be filled in -->
</div>
<h3><a href="https://medium.com/@p_andringa" id="viewMore">View more Posts <i class="fa fa-angle-right fa-lg"></i></a></h3>
</section>
<section id="contact">
<div id="contactText">If you want to contact me for any reason, email me at <a href="mailto:[email protected]">[email protected]</a>, or press the button right here. I'd love to hear from you!</div>
<a href="mailto:[email protected]" id="contact-button" class="btn btn-primary btn-lg btn-block" role="button">Contact Me</a>
</section>
<footer id="footer">
<div id="footerContainer">
<span id="social">
<a href="https://twitter.com/p_andringa" id="Twitter" class="socialIcons" target="_blank"></a>
<a href="http://www.linkedin.com/in/PeterAndringa" id="Linkedin" class="socialIcons" target="_blank"></a>
<a href="http://medium.com/feed/@p_andringa" id="Blog" class="socialIcons" target="_blank"></a>
<a href="http://medium.com/@p_andringa" id="Medium" class="socialIcons" target="_blank"></a>
<a href="http://dropitto.me/pandringa" id="Dropbox" class="socialIcons" target="_blank"></a>
<a href="http://github.com/pandringa" id="Github" class="socialIcons" target="_blank"></a>
</span>
<span id="footerText">
<span id="thanks" class="footerContent">Thanks for Visiting!</span><br>
<span id="copyright" class="footerContent">© 2013-2014, Peter Andringa</span>
</span>
</div>
</footer>
</div>
<script src="js/all.min.js" type="text/javascript"></script>
<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-45164401-1', 'andrin.ga');
ga('send', 'pageview');
</script>
</body>
</html>