aaron/www
1
0
Fork 0
Code Releases Activity

Initial commit

Browse Source
This commit is contained in:
Aaron Gutierrez
2018-07-22 15:39:43 -07:00
commit 59570c8e75
37 changed files with 1684 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

366
15418/index.html Normal file
View File

@@ -0,0 +1,366 @@
<html>
<head>
<title>ISPC++ - 15418 Final Project</title>
<link rel="stylesheet" href="style.css" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<h1>ISPC++</h1>
<h2> 15418 Final Project</h2>
<p>Aaron Gutierrez <br> amgutier@andrew <br> Carnegie Mellon University</p>
</header>
<section>
<h2>Final Write Up</h2>
<h3>Summary</h3>
<p>ISPC++ adds support for numeric polymorphic functions to the Intel SPMD
Program Compiler. Programmers can write a single function definition and use
the same function on any appropriate numeric type.</p>
<h3>Background</h3>
<p>ISPC++ is a <a href="https://github.com/aarongut/ispc">fork</a> of the
<a href="https://ispc.github.io/ispc.html"> Intel SPMD Program Compiler
(ISPC)</a>. ISPC aims to make writing programs that take advantage
of SIMD vector instructions easy for a C or C++ programmer. Because of the
target application, most functions perform computations on numeric data.
Based off of the C language, an ISPC program must include multiple
different definitions for each appropriate datatype.</p>
<p>ISPC++ removes that burden by providing polymorphic numeric types and
automatically compiling multiple versions of functions for use with
different datatypes. The programmer now needs to only write and maintain a
single version of each function. </p>
<code><pre>
<span class="type">number</span> <span class="ident">pow</span>(<span class="type">number</span> <span class="ident">b</span>, <span class="type">int</span> <span class="ident">a</span>) {
<span class="type">number</span> <span class="ident">out</span> <span class="op">=</span> <span class="ident">b</span>;
<span class="keyword">for</span> (<span class="type">int</span> <span class="ident">i</span> <span class="op">=</span> 1; <span class="ident">i</span><span class="op">&lt;</span><span class="ident">a</span>; <span class="ident">i</span><span class="op">++</span>) {
<span class="ident">out</span> <span class="op">*=</span> <span class="ident">b</span>;
}
<span class="keyword">return</span> <span class="ident">out</span>;
}
<span class="keyword">export</span> <span class="type">void</span> <span
class="ident">square</span>(<span class="type">uniform int</span> <span
class="ident">N</span>, <span class="type">uniform number</span> <span
class="ident">b</span>[], <span class="type">uniform number</span> <span class="ident">out</span>[]) {
<span class="keyword">foreach</span> (<span class="ident">i</span> <span class="op">=</span> 0 <span class="op">...</span> <span class="ident">N</span>) {
<span class="ident">out</span>[<span class="ident">i</span>] <span class="op">=</span> <span class="ident">pow</span>(<span class="ident">b</span>[<span class="ident">i</span>], 2);
}
}</pre>
</code>
<p class="caption">Sample function using a polymorphic helper method</p>
<h3>Approach</h3>
<p>Modifications to ISPC fall into two broad categories: adding support for
polymorphic type, and expanding functions with polymorphic arguments.<p>
<p>To add support for polymorphic types, I created a new type class
<kbd>PolyType</kbd>. There are three varieties: integer, floating, and
number. As with the other basic types in ISPC, we can have uniform or
varying, in addition to const, versions of each type. With the new types
added, the parser was modified to produce the new types. Finally, the new
cases produced by the new types are handled in typechecking.</p>
<p>After typechecking a function, we check for polymorphic parameters. If a
function has any polymorphic parameters, we create all of the permutations
of the function prototype. These prototypes are stored to produce the proper
header file later.</p>
<p>When adding definitions to the declarations, we traverse the abstract
syntax tree replacing the polymorphic types with the appropriate type from
the function definition. After this step is done, we are left with
overloaded functions and no polymorphic types. The rest of compilation
occurs normally.</p>
<p>When writing the final output, we add wrappers around all of the
polymorphic functions to enable convenient use from our C++ program.</p>
<p>For example, if we have a function <kbd>void foo(uniform int N, uniform
floating A[])</kbd>, we'd have the following header file:</p>
<code>
<pre><span class="comment">/* boilerplate from ISPC */</span>
<span class="keyword">extern</span> <span class="type">void</span> <span class="ident">foo_uni_un_3C_und_3E_</span>(<span class="type">int32_t</span> <span class="ident">N</span>, <span class="type">double</span> * <span class="ident">X</span>);
<span class="keyword">extern</span> <span class="type">void</span> <span class="ident">foo_uni_un_3C_unf_3E_</span>(<span class="type">int32_t</span> <span class="ident">N</span>, <span class="type">float</span> * <span class="ident">X</span>);
#if defined(__cplusplus)
<span class="keyword">extern</span> <span class="type">void</span> <span class="ident">foo</span>(<span class="type">int32_t</span> <span class="ident">N</span>, <span class="type">double</span> * <span class="ident">X</span>) {
<span class="keyword">return</span> <span class="ident">foo_uni_un_3C_und_3E_</span>(<span class="ident">N</span>, <span class="ident">X</span>);
}
<span class="keyword">extern</span> <span class="type">void</span> <span class="ident">foo</span>(<span class="type">int32_t</span> <span class="ident">N</span>, <span class="type">float</span> * <span class="ident">X</span>) {
<span class="keyword">return</span> <span class="ident">foo_uni_un_3C_unf_3E_</span>(<span class="ident">N</span>, <span class="ident">X</span>);
}
#endif <span class="comment">// __cplusplus</span>
<span class="comment">/* more boilerplate */</span>
</pre></code>
<p class="caption">Example header file showing overloaded polymorphic
function <kbd>foo</kbd></p>
<h3>Language Specification</h3>
<p>Most of the language is unchanged from ISPC. The specification can be
found in the ISPC <a
href="https://ispc.github.io/ispc.html#the-ispc-language">documentation</a>.</p>
<p>The only change is the 3 new types. The semantics follow if you treat the
types as their representative atomic types.</p>
<code>
<pre>&lt;type&gt; := &lt;variability&gt; &lt;typename&gt&lt;quant&gt;;
| <span class="comment">/* all the other ISPC types</span>
;
&lt;variability&gt; := <span class="ident">uniform</span>
| <span class="ident">varying</span>
| <span class="comment">/* empty, varying */</span>
;
&lt;typename&gt; := <span class="ident">integer</span>
| <span class="ident">floating</span>
| <span class="ident">number</span>
;
&lt;quant&gt; := <span class="ident">$</span>[0-9]+
| <span class="comment">/* empty, default quantifier */</span>
;</pre>
</code>
<p class="caption">Specification for an ISPC++ type</p>
<p><kbd>integer</kbd> is expanded to all of the integer types (signed and
unsigned, 8, 16, 32, and 64 bits). <kbd>floating</kbd> is expanded to both
<kbd>float</kbd> and <kbd>double</kbd>. <kbd>number</kbd> is expanded to the
union of the set of types for <kbd>integer</kbd> and
<kbd>floating</kbd>.</p>
<p>The quantifier is used to distinguish independent polymorphic types. If
no quantifier is specified, all similar types are considered identical.
Otherwise, types with different quantifiers are expanded independently. The
syntax for quantifiers has changed since the start of my project to avoid
conflict with vector types.</p>
<p>In the saxpy function bellow, we use type quantifiers to specify that the
input types can vary independent of the output type.</p>
<code>
<pre><span class="keyword">export</span> <span class="type">void</span> <span class="ident">saxpy</span>(<span class="keyword">uniform</span> <span class="keyword">int</span> <span class="ident">N</span>,
<span class="keyword">uniform</span> <span class="type">floating$0</span> <span class="ident">scale</span>,
<span class="keyword">uniform</span> <span class="type">floating$1</span> <span class="ident">X</span>[],
<span class="keyword">uniform</span> <span class="type">floating$1</span> <span class="ident">Y</span>[],
<span class="keyword">uniform</span> <span class="type">floating$2</span> <span class="ident">result</span>[])
{
<span class="keyword">foreach</span> (<span class="ident">i</span> <span class="op">=</span> 0 <span class="op">...</span> <span class="ident">N</span>) {
<span class="type">floating$2</span> <span class="ident">tmp</span> <span class="op">=</span> <span class="ident">scale</span> <span class="op">*</span> <span class="ident">X</span>[<span class="ident">i</span>] <span class="op">+</span> <span class="ident">Y</span>[<span class="ident">i</span>];
<span class="ident">result</span>[<span class="ident">i</span>] <span class="op">=</span> <span class="ident">tmp</span>;
}
}</pre>
</code>
<p class="caption">Example <kbd>saxpy</kbd> program showing quantified
polymorphic types</p>
<p>A function may only return a polymorphic type if that type appears in the
parameters. Any polymorphic type found in a function body not found in the
parameters is cause for a typechecking error.</p>
<h3>Results</h3>
<p>At present, my compiler works as intended on all of my test cases.</p>
<h4>Maintain full compatibility with the ISPC language</h4>
<p>To my first goal of maintaining compatibility with ISPC, out of 1330 test
cases, I fail 1 due to a variable named <kbd>number</kbd> which is now the
name of a type, and then 3 others that involve an implicit struct
definition, which I'll accept as minimally disruptive.</p>
<h4>Produce C and C++ compatible object code</h4>
<p>Compatibility with C++ is excellent: the produced header file defines a
single overloaded function for each exported polymorphic function that can
be used from the namespace <kbd>ispc</kbd>.</p>
<p>Compatibility with C is worse, but functional. Each version of a
polymorphic function is exported, but with a mangled name. Given that C does
not support polymorphic functions, this is as best as we can hope to do, but
working in C++ should be greatly preferred.</p>
<h4>Produce performant, vectorized versions of polymorphic functions</h4>
<p>Given that the backend of the compiler is not modified, the resulting
object file should be identical to non-polymorphic code. I do not have
extensive benchmarks, as I assumed performance would not be an issue, but
from my testing performance is not a concern.</p>
<p>Within ISPC, polymorphic functions are supported natively through
function overloading, including with concurrency through the
<kbd>launch</kbd> semantic.</p>
<h3>Conclusion</h3>
<p>Overall, I would consider ISPC++ a success. Aside from the issues with
implicitly defined structs, my finished product matches my vision coming
into this project and from my proposal.</p>
<p>We are able to easily make some academic observations using the new
functionality. For example, I modified our square root function from the
first assignment to observe single vs. double precision performance.</p>
<code><pre>[sqrt float serial]: [779.727] ms
[sqrt double serial]: [785.532] ms
[sqrt float ispc]: [117.996] ms
[sqrt double ispc]: [270.264] ms
[sqrt float task ispc]: [27.195] ms
[sqrt double task ispc]: [56.185] ms
(6.61x speedup from ISPC float)
(2.91x speedup from ISPC double)
(28.67x speedup from task ISPC float)
(13.98x speedup from task ISPC double)</pre>
</code>
<p class="caption">Newton's square root algorithm with single and double
precision values on an Intel Xeon E5-1660 v4 @ 3.20GHz</p>
<p>We can see that the speedup from vectorization is much lower with
doubles, while the speedup from tasks is comparable regardless of type. I
was able to run this test without duplicating any ISPC code. This conclusion
isn't surprising, given that we operate on half as many values when we
double the precision, but as a curious student, I can try any datatype or
modify the function without duplicating definitions.</p>
<p>In the same way ISPC enables a programmer to easily produce programs that
take advantage of modern CPU's, ISPC++ furthers that mission by reducing
code duplication. The easier it is for programmers to write high performance
code, the more programmers will write high performance code.</p>
</section>
<section>
<h2>Project Checkpoint</h2>
<h3>Work Completed</h3>
<p>I have a proof of concept implementation working. Using aggressive
textual replacement, it produces valid ISPC, with a different function for
each combination of polymorphic types.</p>
<code>
<pre><span class="keyword">export</span> <span class="type">void</span> <span class="ident">saxpy</span>(<span class="keyword">uniform</span> <span class="keyword">int</span> <span class="ident">N</span>,
<span class="keyword">uniform</span> <span class="type">floating&lt;0&gt;</span> <span class="ident">scale</span>,
<span class="keyword">uniform</span> <span class="type">floating&lt;1&gt;</span> <span class="ident">X</span>[],
<span class="keyword">uniform</span> <span class="type">floating&lt;1&gt;</span> <span class="ident">Y</span>[],
<span class="keyword">uniform</span> <span class="type">floating&lt;2&gt;</span> <span class="ident">result</span>[])
{
<span class="keyword">foreach</span> (<span class="ident">i</span> <span class="op">=</span> 0 <span class="op">...</span> <span class="ident">N</span>) {
<span class="type">floating&lt;2&gt;</span> <span class="ident">tmp</span> <span class="op">=</span> <span class="ident">scale</span> <span class="op">*</span> <span class="ident">X</span>[<span class="ident">i</span>] <span class="op">+</span> <span class="ident">Y</span>[<span class="ident">i</span>];
<span class="ident">result</span>[<span class="ident">i</span>] <span class="op">=</span> <span class="ident">tmp</span>;
}
}</pre>
</code>
<p>This simple SAXPY program produces a header file with multiple overloaded
definitions for the saxpy function. From the example, you can see the syntax
used for polymorphic types: <samp>floating&lt;0&gt;</samp> represents an
arbitrary floating point type, where the number is used to differentiate
independent polymorphic types. The only polymorphic types allowed are
<samp>floating</samp>, <samp>integer</samp>, and <samp>number</samp>. This
restriction solves one of the more complicated issues with separate
compilation of polymorphic code: we always generate all permutations of
polymorphic functions. We end up with an exponential blow up in code size,
but practical functions will likely only have a few polymorphic
parameters.</p>
<h3>Upcoming Work</h3>
<p>The next big step will be to modify the ISPC parser and elaboration
phases. My goals are largely unchanged, and I feel on track to produce a
complete, working solution:</p>
<ul>
<li>Maintain full compatibility with the ISPC language</li>
<li>Produce C and C++ compatible object code</li>
<li>Produce performant, vectorized versions of polymorphic functions</li>
<li>Integrate support for polymorphic functions into ISPC</li>
</ul>
<h3>Updated Schedule</h3>
<p>Due to illness and a realization that a preprocessor based implementation
would result in redundant work, I am no longer aiming to produce a complete
preprocessor based solution.</p>
<ul>
<li>April 15: implement a proof of concept, regex based preprocessor and
any needed runtime</li>
<li>April 19: modify the ISPC backend to generate the correct header files
for both C++ and C use.</li>
<li><del>April 25: complete a preprocessor based implementation</del></li>
<li>April 29: mostly-complete code generation implementation integrated
into ISPC</li>
<li>May 3: typechecking and parsing completed</li>
<li>May 6: final implementation completed</li>
<li>May 12: all documentation and analysis completed</li>
</ul>
</section>
<section>
<h2>Proposal</h2>
<p>ISPC++ is a <a href="https://github.com/aarongut/ispc">fork</a> of the <a
href="https://ispc.github.io/ispc.html"> Intel SPMD Program Compiler
(ISPC)</a> project that includes support of polymorphic datatypes and
functions.</p>
<h3>Background</h3>
<p>ISPC aims to make writing single program multiple data (SPMD) programs
easy and relatively target-agnostic. The programmer does not need to write
vector intrinsics for each target platform, but can still closely reason
about a programs' mapping to hardware. The language closely resembles C, and
produces object files compatible with conventional C or C++ programs.</p>
<p>With roots in C, ISPC faces the same limitation to code reuse as C; in
particular, both languages lack polymorphism. Given that ISPC functions are
primarily arithmetic in nature, adding polymorphism will enable programmers
to write a single procedure and use it with any vector-supported datatype. A
single function definition can be used with different sized datatypes or
even both floating point and integer versions.</p>
<p>Similarly to how ISPC frees the programmer from re-writing functions
using different versions of intrinsics, ISPC++ will extend the abstraction to
include different operands.</p>
<h3>Problem</h3>
<p>The root of the challenge stems from maintaining compatibility with ISPC
and with C or C++. ISPC is a large application with support for a wide range
of targets, and a successful project will not inhibit that flexibility.</p>
<h3>Resources</h3>
<p>This is a direct fork of the ISPC project. Hopefully, ISPC++ will share
the same compatibility as ISPC, able to run across platforms and with any
number of vector targets.</p>
<h3>Goals</h3>
<p>This project aims to</p>
<ul>
<li>Maintain full compatibility with the ISPC language</li>
<li>Produce C and C++ compatible object code</li>
<li>Produce performant, vectorized versions of polymorphic functions</li>
</ul>
<p>and hopefully fully supports</p>
<ul>
<li>Add support for polymorphic functions somewhat similar to C++ via a
preprocessor pass</li>
<li>Integrate support for polymorphic functions into ISPC</li>
</ul>
<h3>Assessment</h3>
<p>The first three goals are pretty hard requirements. For the last two
there is some ability to have partial success. This project will be
completely successful if a programmer can write a single ISPC++ function and
use that function with any appropriate datatypes via overloading in C++. Any
restrictions placed on expressiveness should be avoided. For example, if the
solution makes use of regular expressions rather than integrating with the
AST, I would consider the project only a partial success.</p>
<h3>Schedule</h3>
<ul>
<li>April 15: implement a proof of concept, regex based preprocessor and
any needed runtime</li>
<li>April 19: modify the ISPC backend to generate the correct header files
for both C++ and C use.</li>
<li>April 25: complete a preprocessor based implementation</li>
<li>April 29: incomplete implementation integrated into ISPC</li>
<li>May 6: final implementation completed</li>
<li>May 12: all documentation and analysis completed</li>
</ul>
</section>
</body>
</html>

104
15418/style.css Normal file
View File

@@ -0,0 +1,104 @@
body {
font-family: sans-serif;
background-color: #484848;
color: #989898;
padding: 24pt;
max-width: 800px;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
}
h1, h2, h3, h4, h5, h6 {
font-weight: lighter;
line-height: 150%;
}
h1 {
font-size: 24pt;
}
h2 {
font-size: 16pt;
color: #ae4c00;
}
h3 {
font-size: 12pt;
font-weight: bold;
color: #259089;
}
h4 {
font-size: 12pt;
font-weight: bold;
}
h4 {
line-height: 100%;
}
p, ul {
font-size: 10pt;
line-height: 12pt;
color: #b8b8b8;
}
p.caption {
margin-top: 2pt;
margin-bottom: 12pt;
margin-left: 12pt;
margin-right: 12pt;
text-align: center;
}
a {
color: #7878c8;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
body > * {
border-bottom: 1px solid #989898;
}
code {
background: #b8b8b8;
width: auto;
display: block;
padding: 10pt;
color: #222;
font-family: monospace;
overflow-x: scroll;
}
code > pre {
margin: 0;
line-height: 125%;
}
code .keyword {
color: #204a87;
font-weight: bold;
}
code .ident {
font-weight: bold;
}
code .op {
color: #208787;
}
code .comment {
color: #20874a;
}
code .type {
color: #ae4c00;
font-weight: bold;
}

13
bench.sh Normal file
View File

@@ -0,0 +1,13 @@
#!/bin/bash
set -e
set +x
for FILE in img/bench/webp-src/*.jpg; do
OUT="${FILE%.*}.webp"
OUT2X="${FILE%.*}@2x.webp"
cwebp -mt -resize 160 0 -q 40 $FILE -o $OUT
cwebp -mt -q 40 $FILE -o $OUT2X
done
mv img/bench/webp-src/*.webp img/bench/

52
bench/1.html Normal file
View File

@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Bench - Aaron Gutierrez</title>
<link rel="stylesheet" href="/site.css" >
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<h1>Bench.</h1>
</header>
<main>
<p>Towards the start of my time at Carnegie Mellon, I started taking
pictures of benches. It provided me an object to seek out; and seek
benches out I did. Since then, I've amassed a collection of photographs
from all over the world.</p>
<p>All images <a href="https://creativecommons.org/licenses/by-nc/4.0/">
CC BY-NC</a> Aaron Gutierrez.</p>
<div class="img-grid">
<a href="/img/bench/001.jpg"><picture><source type="image/webp" srcset="/img/bench/001.thumb.webp, /img/bench/001.thumb@2x.webp 2x"><img src="/img/bench/001.thumb.jpg"></picture></a>
<a href="/img/bench/002.jpg"><picture><source type="image/webp" srcset="/img/bench/002.thumb.webp, /img/bench/002.thumb@2x.webp 2x"><img src="/img/bench/002.thumb.jpg"></picture></a>
<a href="/img/bench/003.jpg"><picture><source type="image/webp" srcset="/img/bench/003.thumb.webp, /img/bench/003.thumb@2x.webp 2x"><img src="/img/bench/003.thumb.jpg"></picture></a>
<a href="/img/bench/004.jpg"><picture><source type="image/webp" srcset="/img/bench/004.thumb.webp, /img/bench/004.thumb@2x.webp 2x"><img src="/img/bench/004.thumb.jpg"></picture></a>
<a href="/img/bench/005.jpg"><picture><source type="image/webp" srcset="/img/bench/005.thumb.webp, /img/bench/005.thumb@2x.webp 2x"><img src="/img/bench/005.thumb.jpg"></picture></a>
<a href="/img/bench/006.jpg"><picture><source type="image/webp" srcset="/img/bench/006.thumb.webp, /img/bench/006.thumb@2x.webp 2x"><img src="/img/bench/006.thumb.jpg"></picture></a>
<a href="/img/bench/007.jpg"><picture><source type="image/webp" srcset="/img/bench/007.thumb.webp, /img/bench/007.thumb@2x.webp 2x"><img src="/img/bench/007.thumb.jpg"></picture></a>
<a href="/img/bench/008.jpg"><picture><source type="image/webp" srcset="/img/bench/008.thumb.webp, /img/bench/008.thumb@2x.webp 2x"><img src="/img/bench/008.thumb.jpg"></picture></a>
<a href="/img/bench/009.jpg"><picture><source type="image/webp" srcset="/img/bench/009.thumb.webp, /img/bench/009.thumb@2x.webp 2x"><img src="/img/bench/009.thumb.jpg"></picture></a>
<a href="/img/bench/010.jpg"><picture><source type="image/webp" srcset="/img/bench/010.thumb.webp, /img/bench/010.thumb@2x.webp 2x"><img src="/img/bench/010.thumb.jpg"></picture></a>
<a href="/img/bench/011.jpg"><picture><source type="image/webp" srcset="/img/bench/011.thumb.webp, /img/bench/011.thumb@2x.webp 2x"><img src="/img/bench/011.thumb.jpg"></picture></a>
<a href="/img/bench/012.jpg"><picture><source type="image/webp" srcset="/img/bench/012.thumb.webp, /img/bench/012.thumb@2x.webp 2x"><img src="/img/bench/012.thumb.jpg"></picture></a>
<a href="/img/bench/013.jpg"><picture><source type="image/webp" srcset="/img/bench/013.thumb.webp, /img/bench/013.thumb@2x.webp 2x"><img src="/img/bench/013.thumb.jpg"></picture></a>
<a href="/img/bench/014.jpg"><picture><source type="image/webp" srcset="/img/bench/014.thumb.webp, /img/bench/014.thumb@2x.webp 2x"><img src="/img/bench/014.thumb.jpg"></picture></a>
<a href="/img/bench/015.jpg"><picture><source type="image/webp" srcset="/img/bench/015.thumb.webp, /img/bench/015.thumb@2x.webp 2x"><img src="/img/bench/015.thumb.jpg"></picture></a>
<a href="/img/bench/016.jpg"><picture><source type="image/webp" srcset="/img/bench/016.thumb.webp, /img/bench/016.thumb@2x.webp 2x"><img src="/img/bench/016.thumb.jpg"></picture></a>
</div>
<div class="nav">
<a href="#">Prev</a>
<a href="/">Home</a>
<a href="/bench/2.html">Next</a>
</nav>
</main>
<hr>
<footer>
<a href="/">www.aarongutierrez.com</a>
<a href="/">www.frat.tech</a>
</footer>
</body>
</html>

52
bench/2.html Normal file
View File

@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Bench - Aaron Gutierrez</title>
<link rel="stylesheet" href="/site.css" >
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<h1>Bench.</h1>
</header>
<main>
<p>Towards the start of my time at Carnegie Mellon, I started taking
pictures of benches. It provided me an object to seek out; and seek
benches out I did. Since then, I've amassed a collection of photographs
from all over the world.</p>
<p>All images <a href="https://creativecommons.org/licenses/by-nc/4.0/">
CC BY-NC</a> Aaron Gutierrez.</p>
<div class="img-grid">
<a href="/img/bench/017.jpg"><picture><source type="image/webp" srcset="/img/bench/017.thumb.webp, /img/bench/017.thumb@2x.webp 2x"><img src="/img/bench/017.thumb.jpg"></picture></a>
<a href="/img/bench/018.jpg"><picture><source type="image/webp" srcset="/img/bench/018.thumb.webp, /img/bench/018.thumb@2x.webp 2x"><img src="/img/bench/018.thumb.jpg"></picture></a>
<a href="/img/bench/019.jpg"><picture><source type="image/webp" srcset="/img/bench/019.thumb.webp, /img/bench/019.thumb@2x.webp 2x"><img src="/img/bench/019.thumb.jpg"></picture></a>
<a href="/img/bench/020.jpg"><picture><source type="image/webp" srcset="/img/bench/020.thumb.webp, /img/bench/020.thumb@2x.webp 2x"><img src="/img/bench/020.thumb.jpg"></picture></a>
<a href="/img/bench/021.jpg"><picture><source type="image/webp" srcset="/img/bench/021.thumb.webp, /img/bench/021.thumb@2x.webp 2x"><img src="/img/bench/021.thumb.jpg"></picture></a>
<a href="/img/bench/022.jpg"><picture><source type="image/webp" srcset="/img/bench/022.thumb.webp, /img/bench/022.thumb@2x.webp 2x"><img src="/img/bench/022.thumb.jpg"></picture></a>
<a href="/img/bench/023.jpg"><picture><source type="image/webp" srcset="/img/bench/023.thumb.webp, /img/bench/023.thumb@2x.webp 2x"><img src="/img/bench/023.thumb.jpg"></picture></a>
<a href="/img/bench/024.jpg"><picture><source type="image/webp" srcset="/img/bench/024.thumb.webp, /img/bench/024.thumb@2x.webp 2x"><img src="/img/bench/024.thumb.jpg"></picture></a>
<a href="/img/bench/025.jpg"><picture><source type="image/webp" srcset="/img/bench/025.thumb.webp, /img/bench/025.thumb@2x.webp 2x"><img src="/img/bench/025.thumb.jpg"></picture></a>
<a href="/img/bench/026.jpg"><picture><source type="image/webp" srcset="/img/bench/026.thumb.webp, /img/bench/026.thumb@2x.webp 2x"><img src="/img/bench/026.thumb.jpg"></picture></a>
<a href="/img/bench/027.jpg"><picture><source type="image/webp" srcset="/img/bench/027.thumb.webp, /img/bench/027.thumb@2x.webp 2x"><img src="/img/bench/027.thumb.jpg"></picture></a>
<a href="/img/bench/028.jpg"><picture><source type="image/webp" srcset="/img/bench/028.thumb.webp, /img/bench/028.thumb@2x.webp 2x"><img src="/img/bench/028.thumb.jpg"></picture></a>
<a href="/img/bench/029.jpg"><picture><source type="image/webp" srcset="/img/bench/029.thumb.webp, /img/bench/029.thumb@2x.webp 2x"><img src="/img/bench/029.thumb.jpg"></picture></a>
<a href="/img/bench/030.jpg"><picture><source type="image/webp" srcset="/img/bench/030.thumb.webp, /img/bench/030.thumb@2x.webp 2x"><img src="/img/bench/030.thumb.jpg"></picture></a>
<a href="/img/bench/031.jpg"><picture><source type="image/webp" srcset="/img/bench/031.thumb.webp, /img/bench/031.thumb@2x.webp 2x"><img src="/img/bench/031.thumb.jpg"></picture></a>
<a href="/img/bench/032.jpg"><picture><source type="image/webp" srcset="/img/bench/032.thumb.webp, /img/bench/032.thumb@2x.webp 2x"><img src="/img/bench/032.thumb.jpg"></picture></a>
</div>
<div class="nav">
<a href="/bench/1.html">Prev</a>
<a href="/">Home</a>
<a href="/bench/3.html">Next</a>
</nav>
</main>
<hr>
<footer>
<a href="/">www.aarongutierrez.com</a>
<a href="/">www.frat.tech</a>
</footer>
</body>
</html>

52
bench/3.html Normal file
View File

@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Bench - Aaron Gutierrez</title>
<link rel="stylesheet" href="/site.css" >
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<h1>Bench.</h1>
</header>
<main>
<p>Towards the start of my time at Carnegie Mellon, I started taking
pictures of benches. It provided me an object to seek out; and seek
benches out I did. Since then, I've amassed a collection of photographs
from all over the world.</p>
<p>All images <a href="https://creativecommons.org/licenses/by-nc/4.0/">
CC BY-NC</a> Aaron Gutierrez.</p>
<div class="img-grid">
<a href="/img/bench/033.jpg"><picture><source type="image/webp" srcset="/img/bench/033.thumb.webp, /img/bench/033.thumb@2x.webp 2x"><img src="/img/bench/033.thumb.jpg"></picture></a>
<a href="/img/bench/034.jpg"><picture><source type="image/webp" srcset="/img/bench/034.thumb.webp, /img/bench/034.thumb@2x.webp 2x"><img src="/img/bench/034.thumb.jpg"></picture></a>
<a href="/img/bench/035.jpg"><picture><source type="image/webp" srcset="/img/bench/035.thumb.webp, /img/bench/035.thumb@2x.webp 2x"><img src="/img/bench/035.thumb.jpg"></picture></a>
<a href="/img/bench/036.jpg"><picture><source type="image/webp" srcset="/img/bench/036.thumb.webp, /img/bench/036.thumb@2x.webp 2x"><img src="/img/bench/036.thumb.jpg"></picture></a>
<a href="/img/bench/037.jpg"><picture><source type="image/webp" srcset="/img/bench/037.thumb.webp, /img/bench/037.thumb@2x.webp 2x"><img src="/img/bench/037.thumb.jpg"></picture></a>
<a href="/img/bench/038.jpg"><picture><source type="image/webp" srcset="/img/bench/038.thumb.webp, /img/bench/038.thumb@2x.webp 2x"><img src="/img/bench/038.thumb.jpg"></picture></a>
<a href="/img/bench/039.jpg"><picture><source type="image/webp" srcset="/img/bench/039.thumb.webp, /img/bench/039.thumb@2x.webp 2x"><img src="/img/bench/039.thumb.jpg"></picture></a>
<a href="/img/bench/040.jpg"><picture><source type="image/webp" srcset="/img/bench/040.thumb.webp, /img/bench/040.thumb@2x.webp 2x"><img src="/img/bench/040.thumb.jpg"></picture></a>
<a href="/img/bench/041.jpg"><picture><source type="image/webp" srcset="/img/bench/041.thumb.webp, /img/bench/041.thumb@2x.webp 2x"><img src="/img/bench/041.thumb.jpg"></picture></a>
<a href="/img/bench/042.jpg"><picture><source type="image/webp" srcset="/img/bench/042.thumb.webp, /img/bench/042.thumb@2x.webp 2x"><img src="/img/bench/042.thumb.jpg"></picture></a>
<a href="/img/bench/043.jpg"><picture><source type="image/webp" srcset="/img/bench/043.thumb.webp, /img/bench/043.thumb@2x.webp 2x"><img src="/img/bench/043.thumb.jpg"></picture></a>
<a href="/img/bench/044.jpg"><picture><source type="image/webp" srcset="/img/bench/044.thumb.webp, /img/bench/044.thumb@2x.webp 2x"><img src="/img/bench/044.thumb.jpg"></picture></a>
<a href="/img/bench/045.jpg"><picture><source type="image/webp" srcset="/img/bench/045.thumb.webp, /img/bench/045.thumb@2x.webp 2x"><img src="/img/bench/045.thumb.jpg"></picture></a>
<a href="/img/bench/046.jpg"><picture><source type="image/webp" srcset="/img/bench/046.thumb.webp, /img/bench/046.thumb@2x.webp 2x"><img src="/img/bench/046.thumb.jpg"></picture></a>
<a href="/img/bench/047.jpg"><picture><source type="image/webp" srcset="/img/bench/047.thumb.webp, /img/bench/047.thumb@2x.webp 2x"><img src="/img/bench/047.thumb.jpg"></picture></a>
<a href="/img/bench/048.jpg"><picture><source type="image/webp" srcset="/img/bench/048.thumb.webp, /img/bench/048.thumb@2x.webp 2x"><img src="/img/bench/048.thumb.jpg"></picture></a>
</div>
<div class="nav">
<a href="/bench/2.html">Prev</a>
<a href="/">Home</a>
<a href="/bench/4.html">Next</a>
</nav>
</main>
<hr>
<footer>
<a href="/">www.aarongutierrez.com</a>
<a href="/">www.frat.tech</a>
</footer>
</body>
</html>

52
bench/4.html Normal file
View File

@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<base href="http://www.aarongutierrez.com.s3.amazonaws.com">
<title>Bench - Aaron Gutierrez</title>
<link rel="stylesheet" href="/site.css" >
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<h1>Bench.</h1>
</header>
<main>
<p>Towards the start of my time at Carnegie Mellon, I started taking
pictures of benches. It provided me an object to seek out; and seek
benches out I did. Since then, I've amassed a collection of photographs
from all over the world.</p>
<p>All images <a href="https://creativecommons.org/licenses/by-nc/4.0/">
CC BY-NC</a> Aaron Gutierrez.</p>
<div class="img-grid">
<a href="/img/bench/049.jpg"><picture><source type="image/webp" srcset="/img/bench/049.thumb.webp, /img/bench/049.thumb@2x.webp 2x"><img src="/img/bench/049.thumb.jpg"></picture></a>
<a href="/img/bench/050.jpg"><picture><source type="image/webp" srcset="/img/bench/050.thumb.webp, /img/bench/050.thumb@2x.webp 2x"><img src="/img/bench/050.thumb.jpg"></picture></a>
<a href="/img/bench/051.jpg"><picture><source type="image/webp" srcset="/img/bench/051.thumb.webp, /img/bench/051.thumb@2x.webp 2x"><img src="/img/bench/051.thumb.jpg"></picture></a>
<a href="/img/bench/052.jpg"><picture><source type="image/webp" srcset="/img/bench/052.thumb.webp, /img/bench/052.thumb@2x.webp 2x"><img src="/img/bench/052.thumb.jpg"></picture></a>
<a href="/img/bench/053.jpg"><picture><source type="image/webp" srcset="/img/bench/053.thumb.webp, /img/bench/053.thumb@2x.webp 2x"><img src="/img/bench/053.thumb.jpg"></picture></a>
<a href="/img/bench/054.jpg"><picture><source type="image/webp" srcset="/img/bench/054.thumb.webp, /img/bench/054.thumb@2x.webp 2x"><img src="/img/bench/054.thumb.jpg"></picture></a>
<a href="/img/bench/055.jpg"><picture><source type="image/webp" srcset="/img/bench/055.thumb.webp, /img/bench/055.thumb@2x.webp 2x"><img src="/img/bench/055.thumb.jpg"></picture></a>
<a href="/img/bench/056.jpg"><picture><source type="image/webp" srcset="/img/bench/056.thumb.webp, /img/bench/056.thumb@2x.webp 2x"><img src="/img/bench/056.thumb.jpg"></picture></a>
<a href="/img/bench/057.jpg"><picture><source type="image/webp" srcset="/img/bench/057.thumb.webp, /img/bench/057.thumb@2x.webp 2x"><img src="/img/bench/057.thumb.jpg"></picture></a>
<a href="/img/bench/058.jpg"><picture><source type="image/webp" srcset="/img/bench/058.thumb.webp, /img/bench/058.thumb@2x.webp 2x"><img src="/img/bench/058.thumb.jpg"></picture></a>
<a href="/img/bench/059.jpg"><picture><source type="image/webp" srcset="/img/bench/059.thumb.webp, /img/bench/059.thumb@2x.webp 2x"><img src="/img/bench/059.thumb.jpg"></picture></a>
<a href="/img/bench/060.jpg"><picture><source type="image/webp" srcset="/img/bench/060.thumb.webp, /img/bench/060.thumb@2x.webp 2x"><img src="/img/bench/060.thumb.jpg"></picture></a>
<a href="/img/bench/061.jpg"><picture><source type="image/webp" srcset="/img/bench/061.thumb.webp, /img/bench/061.thumb@2x.webp 2x"><img src="/img/bench/061.thumb.jpg"></picture></a>
<a href="/img/bench/062.jpg"><picture><source type="image/webp" srcset="/img/bench/062.thumb.webp, /img/bench/062.thumb@2x.webp 2x"><img src="/img/bench/062.thumb.jpg"></picture></a>
<a href="/img/bench/063.jpg"><picture><source type="image/webp" srcset="/img/bench/063.thumb.webp, /img/bench/063.thumb@2x.webp 2x"><img src="/img/bench/063.thumb.jpg"></picture></a>
</div>
<div class="nav">
<a href="/bench/3.html">Prev</a>
<a href="/">Home</a>
<a href="#">Next</a>
</nav>
</main>
<hr>
<footer>
<a href="/">www.aarongutierrez.com</a>
<a href="/">www.frat.tech</a>
</footer>
</body>
</html>

36
bench_template.html Normal file
View File

@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Bench - Aaron Gutierrez</title>
<link rel="stylesheet" href="/site.css" >
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<h1>Bench.</h1>
</header>
<main>
<p>Towards the start of my time at Carnegie Mellon, I started taking
pictures of benches. It provided me an object to seek out; and seek
benches out I did. Since then, I've amassed a collection of photographs
from all over the world.</p>
<p>All images <a href="https://creativecommons.org/licenses/by-nc/4.0/">
CC BY-NC</a> Aaron Gutierrez.</p>
<div class="img-grid">
{0}
</div>
<div class="nav">
<a href="{1}">Prev</a>
<a href="/">Home</a>
<a href="{2}">Next</a>
</nav>
</main>
<hr>
<footer>
<a href="https://wwww.aarongutierrez.com">www.aarongutierrez.com</a>
<a href="https://www.frat.tech">www.frat.tech</a>
</footer>
</body>
</html>

BIN
campaign/aaron.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
campaign/banner.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 85 KiB

BIN
campaign/bettina.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 KiB

BIN
campaign/care.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

BIN
campaign/contact.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 55 KiB

BIN
campaign/cover.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 86 KiB

BIN
campaign/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 529 B

BIN
campaign/frame.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
campaign/icon0.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.8 KiB

BIN
campaign/icon1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

BIN
campaign/icon2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

203
campaign/index.html Normal file
View File

@@ -0,0 +1,203 @@
<!DOCTYPE html>
<html>
<head>
<title>Vaasavi and Aaron 2016</title>
<script src="https://use.typekit.net/bdx7ivv.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<link rel="stylesheet" href="site.css" >
<link rel="icon" type="image/png" href="favicon.png" >
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="header">
<div class="mobile">
<img src="logo.png">
</div>
</div>
<div class="main">
<nav class="desktop">
<img src="logo.png">
<ul class="clearfix">
<li><a href="#contact">Contact</a></li>
<li><a href="photo.html">Picture Creator</a></li>
<li><a href="#team">Team</a></li>
<li><a href="#platform">Platform</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
<img src="cover.jpg">
<h2 id="about">Who we are</h2>
<div class="clearfix">
<div class="block block-half">
<img src="vaas.jpg">
Vaasavi is a third year studying Economics at Carnegie Mellon
University. She has been involved in the Student Senate, Student Life,
Moneythink, and Counterpoint.
</div>
<div class="block block-half">
<img src="aaron.jpg">
Aaron is a junior computer science major with a minor in music. On
campus, Aaron is a four-time teaching assistant for 15-122, president of
Delta Tau Delta, and has served in various student government and senate
roles.
</div>
</div>
<h2>Why we care</h2>
<img src="care.jpg">
<div class="clearfix">
<div class="block block-half">
<h3>Vaasavi</h3>
In her time at Carnegie Mellon, Vaasavi has always wanted to make
student's lives better. After working with administration on the
University Strategic Plan, she realized that students were missing a
vital part of their Carnegie Mellon Experience: the infrastructure to
be innovators and leaders outside of the classroom. Since then, she
has worked to create environments encouraging students to think of
ways to change campus for the better. In her work as CA of E Tower,
she created a thinly-veiled incentive structure for students to engage
with the outside community. She wants to bring this to the overall CMU
community to make permanent improvements to campus.
</div>
<div class="block block-half">
<h3>Aaron</h3>
When Aaron first came to Carnegie Mellon, he took up as many
opportunities to try new things and engage with the campus as
possible. He felt that he grew and learned far more outside the
classroom. Not everyone takes that same path. More than anything else,
students are forced to prioritize at Carnegie Mellon, and that is the
cause of a lot of stress. But students should not have to make that
choice. Engaging and exploration with the campus outside the classroom
should be an integral part of the Carnegie Mellon experience.
</div>
</div>
<h2 id="platform">How we will help</h2>
<div class="clearfix">
<div class="block block-third">
<img src="icon0.png">
<h3>Fiscal Transparency</h3>
As students, we deserve to know where our tuition is going, how our
administrators are getting paid and about the university's spending.
Aaron and Vaasavi have read CMU's tax forms, so you don't have to.
Additionally, we are constantly asked for donations, yet it's not
always clear where that money is used. Look out for infographics on
our Facebook page! #financefridays
</div>
<div class="block block-third">
<img src="icon1.png">
<h3>The Model for Social Change</h3>
If we're going to change the world, we might as well get started. We
call it the President's Initiative--the common thread of the CMU
experience that we have the power to change. Vaasavi and Aaron
propose to mobilize club presidents around a common issue, and reward
the clubs and organizations that provide innovative cultural
solutions on our campus.
</div>
<div class="block block-third">
<img src="icon2.png">
<h3>Student Government Transparency</h3>
It shouldn't be normal that no one knows what Student Government
Executives do. The Student Body President should make an effort to be
present and available to all students, and regularly inform the
student body on what they're up to. Vaasavi and Aaron propose making
all student organization transactions public, a weekly column in the
Tartan, and going beyond the constitutionally required SBP office
hours in highly trafficked areas of campus, so there are no barriers
to being informed.
</div>
</div>
<h2 id="team">Our team</h2>
<div class="clearfix">
<div class="block block-half">
<img src="olivia.jpg">
<h3>Olivia Roy - Chief of Staff</h3>
I've known Aaron since we were freshmen in E-Tower. We and our
friends would sit on the floor of his room and talk about how we had
grown since high school. As introspective as those
conversations are, I don't want to just talk anymore, I want to do
something. Vaasavi has a compelling call to action, and the
leadership qualities that we need in a Student Body President. I'm
proud to support Vaas and Aaron because they don't just want to talk
about how CMU has changed us, but how we can change CMU.
</div>
<div class="block block-half">
<img src="zach.jpg">
<h3>Zach Newman - Recruitment</h3>
I support Vaasavi because from our first meeting, I knew how much
passion she has for this school and how much she is able to make
positive change. After conversations with her about deep rooted
issues we face as students, I realized the importance to have a leader
who understands so many different cultures within the student body to
make our four years at Carnegie Mellon more meaningful, impactful,
and positive. Despite her humility, I fully believe Vaasavi fits that
role and I am proud to be a part of her campaign.
</div>
<div class="block block-half">
<img src="srishti.jpg">
<h3>Srishti Jain - Public Relations</h3>
I'm tired of merely talking about social change, and am ready for
students at Carnegie Mellon to actually make change. I believe Vaasavi
and Aaron are the best candidates to facilitate these changes. With
their experience, ambition, and thoughtfulness, I know they have the
ability to improve the lives of the CMU student body. After witnessing
Vaasavi and Aaron in Student Senate for the past few years, I can
confidently say Vaasavi and Aaron will be meaningful and transparent
with their initiatives.
</div>
<div class="block block-half">
<img src="bettina.jpg">
<h3>Bettina Chou - Designer</h3>
The CMU design curriculum has instilled upon me a habit of looking at
problems as systems on various scales and looking for entry points to
resolve certain problem spaces. So, hearing Vaasavi's approach, I was
pleasantly surprised to learn the methods in econ/finance tackled
issues in a similar, yet more empirical way. Combined with her
intrinsic compassion and empathy, I am confident in her
solution-oriented mindset. I support her and Aaron because I believe
they will create effective solutions with a purpose as opposed to
temporary band-aid solutions.
</div>
</div>
<h2 id="contact">Have questions? Let's chat</h2>
<img src="contact.jpg">
Please feel free to contact us. We would be more than happy to talk over
coffee or tea.
<ul class="contact">
<li>Vaasavi Unnava:
<a href="mailto:vunnava@cmu.edu">vunnava@cmu.edu</a>
</li>
<li>
Aaron Gutierrez:
<a href="mailto:aarongutierrez@cmu.edu">aarongutierrez@cmu.edu</a>
</li>
</ul>
</div>
<div class="footer">
Vaasavi and Aaron 2016<br />
<a href="http://www.vaasandaaron.com">vaasandaaron.com</a><br />
<a href="http://www.vaasavi.com">vaasavi.com</a><br />
<a href="http://www.aarongutierrez.com">aarongutierrez.com</a>
</div>
<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-62761470-4', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>

BIN
campaign/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.6 KiB

BIN
campaign/olivia.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

138
campaign/photo.html Normal file
View File

@@ -0,0 +1,138 @@
<!DOCTYPE html>
<html>
<head>
<title>Profile Picture Creator - Vaasavi and Aaron 2016</title>
<script src="https://use.typekit.net/bdx7ivv.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<link rel="stylesheet" href="site.css" >
<link rel="icon" type="image/png" href="favicon.png" >
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '1522083631429252',
xfbml : true,
version : 'v2.5'
});
checkLoginState();
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "http://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function statusChangeCallback(response) {
if (response.status === 'connected') {
testAPI();
}
}
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
function testAPI() {
FB.api('/me/picture', {width: '800'}, function(response) {
if (response && !response.error) {
var image = document.getElementById("basePic");
image.src = response.data.url;
image.onload = function() {
makeImage();
}
}
});
}
function makeImage() {
document.getElementById('profPic').alt=
"You need an HTML5 compatible browser to use this feature";
var canvas = document.getElementById('profPicCanvas');
var context = canvas.getContext("2d");
var image = document.getElementById("basePic");
canvas.height = 800 * image.height / image.width;
// img, x, y, width, height
context.drawImage(document.getElementById("basePic"), 0, 0, 800, canvas.height);
context.drawImage(document.getElementById("logoPic"), 0, canvas.height - 242, 800, 242);
document.getElementById('profPic').src = canvas.toDataURL();
}
window.onload = function() {
makeImage();
document.getElementById('uploadImg').onchange = function(e) {
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById('basePic').src = e.target.result;
makeImage();
}
reader.readAsDataURL(e.target.files[0]);
};
};
</script>
<div class="header">
<div class="mobile">
<img src="logo.png">
</div>
</div>
<div class="main">
<nav class="desktop">
<img src="logo.png">
<ul class="clearfix">
<li><a href="index.html#contact">Contact</a></li>
<li><a href="#">Picture Creator</a></li>
<li><a href="index.html#team">Team</a></li>
<li><a href="index.html#platform">Platform</a></li>
<li><a href="index.html#about">About</a></li>
</ul>
</nav>
<h2>Profile Picture Creator</h2>
Login with Facebook to create your picture
<fb:login-button scope="public_profile" onlogin="checkLoginState();">
</fb:login-button>
or upload another image
<input type="file" name="image" accept="image/*" id="uploadImg">
<canvas id="profPicCanvas" width="800" height="800" class="hidden"></canvas>
<img class="profPic" id="profPic">
<img id="basePic" src="cover.jpg" crossOrigin="Anonymous" class="hidden">
<img id="logoPic" src="frame.png" class="hidden">
<div class="footer">
Vaasavi and Aaron 2016<br />
<a href="http://www.vaasandaaron.com">vaasandaaron.com</a><br />
<a href="http://www.vaasavi.com">vaasavi.com</a><br />
<a href="http://www.aarongutierrez.com">aarongutierrez.com</a>
</div>
<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-62761470-4', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>

50
campaign/pic.html Normal file
View File

@@ -0,0 +1,50 @@
<html>
<head>
<title>Random imgur image</title>
<style type="text/css">
img { max-width: 100%; height: auto; }
</style>
<script language="javascript" type="text/javascript">
function randomString(string_length)
{
var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghiklmnopqrstuvwxyz";
var output = "";
var index;
for (var i = 0; i < string_length; i++)
{
var index = Math.floor(Math.random() * chars.length);
output += chars.substring(index, index + 1);
}
return output;
}
function getImages()
{
var numTries = 1;
var imgObject = new Image();
var dots = "";
imgObject.onload = function()
{
if (this.width == 161 && this.height == 81)
{
this.src = "http://i.imgur.com/" + randomString(5) + ".jpg";
dots += ".";
document.getElementById('a').innerHTML = "Please wait..." + dots;
numTries++;
}
else
document.getElementById('a').innerHTML = "It took " + numTries + (numTries == 1 ? " try" : " tries") + " to get this picture. <a href=\"javascript:getImages();\">Load new image</a><br/><br/><a href=\"" + imgObject.src + "\">" + imgObject.src + "<br/><img src=\"" + imgObject.src + "\" /></a>";
}
// First image attempt that sets off the onload code defined above
imgObject.src = "http://i.imgur.com/" + randomString(5) + ".jpg";
}
</script>
<body onLoad="getImages();">
<h1>Random Imgur image</h1>
<div id="a">Please wait...</div>
</body>
</html>

170
campaign/platform.html Normal file
View File

@@ -0,0 +1,170 @@
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
<a href="http://www.vaasandaaron.com" style="text-align: center;">
Visit Vaas and Aaron's official campaign website here.
</a>
<img src="http://www.vaasandaaron.com/banner.jpg" width="100%" alt="Cover Photo">
<p>Thanks for checking out our platform!</p>
<p>
We're Vaasavi Unnava and Aaron Gutierrez, two rising seniors running for
Student Body President and Vice President. But this election isn't about
us--it's about you. It's about giving ourselves the tools to change campus for
the better, and leave a legacy we're proud of. Let's make change, together.
</p>
<h2>
Here's how we're making sure you have the power to do just that:
</h2>
<h3>
Platform for Social Change: The President's Initiative
</h3>
<ul>
<li>
Move the Board of the Directors to the beginning of the year, where clubs
and organizations build partnerships to make change
</li>
<li>
Set the agenda to address cultural problems on our campus, from SARV to
Mental Health
</li>
<li>
Reward the organization that provides the most innovative solution to a
prevalent campus problem
</li>
</ul>
<h3>
Fiscal Transparency: Getting the Information We Deserve
</h3>
<ul>
<li>
Provide flowcharts describing university budgetary process
</li>
<li>
Bring transparency to spending of the endowment
</li>
<li>
Create tangible goals for class donations, like material upgrades to the
campus community
</li>
</ul>
<h3>
Student Government Transparency: For the Students
</h3>
<ul>
<li>
Hold weekly office hours in the highest trafficked locations of campus
</li>
<li>
Create "To StuGov With Love" Facebook group, where students can directly
interact with student government officials
</li>
<li>
Write a weekly column for the Tartan outlining issues and decisions made
that week
</li>
</ul>
<p>
Let's create a campus where we get to take the lead on making CMU what we want
it to be, instead of waiting for administration to fix it. Why can we make
this happen?
</p>
<h2>Why We're Qualified</h2>
<div style="display: -webkit-flex; display: flex; width: 100%;
-webkit-flex-wrap: wrap; flex-wrap: wrap">
<div style="
-webkit-flex-grow: 1; -webkit-flex-basis: 0;
flex-grow: 1; flex-basis: 0; margin: 10px; min-width: 200px" >
<h3>Vaasavi Unnava</h3>
<h4>Student Body President</h4>
<img src="http://www.vaasandaaron.com/vaas.jpg" width="100%">
<p>
Vaasavi is a third year economics major at Carnegie Mellon. She is the
Community Advisor of Morewood E Tower and spent two years serving in the
Student Senate. In her tenure, she has:
</p>
<ul>
<li>
Started and managed the First Lectures (Watch at
<a href="https://youtube.com/thefirstlectures">youtube.com/thefirstlectures</a>)
</li>
<li>
Co-founded the Sexual Assault and Relationship Violence Prevention
(SARVP) committee, where her team helped improve graduate student
orientation and put together the TartanHacks branch SARV hackathon.
</li>
<li>
Reinitiated CMU's participation in Pittsburgh Student Government
Council
</li>
<li>
Created and taught a StuCo on financial literacy for the CMU Student
(98-272!)
</li>
<li>
Built an incentive structure in Morewood E Tower to significantly
raise engagement with the city of Pittsburgh (and accidentally
eliminated stress culture as a byproduct)
</li>
<li>
Chaired the Business Affairs Committee in the Student Senate, getting
new dumbbells in Skibo Gym, among other initiatives
</li>
</ul>
</div>
<div style="
-webkit-flex-grow: 1; -webkit-flex-basis: 0;
flex-grow: 1; flex-basis: 0; margin: 10px; min-width: 200px" >
<h3>Aaron Gutierrez</h3>
<h4>Student Body Vice President</h4>
<img src="http://www.vaasandaaron.com/aaron.jpg" width="100%">
<p>
Aaron is a third year computer science major with a minor in music at Carnegie
Mellon. In his tenure, he has:
</p>
<ul>
<li>
Served as President and Treasurer of Delta Tau Delta Fraternity
</li>
<li>
Worked for two years as a teaching assistant for 15-122
</li>
<li>
Advised Dining Services with selecting the new Skibo Cafe and Scott
Hall dining vendor
</li>
<li>
Served on the Academic Review board and University Disciplinary
committee
</li>
<li>
Allocated student organization space in the CUC in 2014 and 2016
</li>
</ul>
</div>
</div>
<p>
Thank you for taking the time to read through all of this! If you have any
questions, we'd love to get coffee or tea--please reach out to us at
<a href="mailto:vunnava@cmu.edu">vunnava@cmu.edu</a> or
<a href="mailto:aarongutierrez@cmu.edu">aarongutierrez@cmu.edu</a>.
</p>
</div>
</body>
</html>

37
campaign/privacy.html Normal file
View File

@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<title>Vaasavi and Aaron 2016</title>
<script src="https://use.typekit.net/bdx7ivv.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<link rel="stylesheet" href="site.css" >
<link rel="icon" type="image/png" href="favicon.png" >
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="header">
<div class="mobile">
<img src="logo.png">
</div>
</div>
<div class="main">
<nav class="desktop">
<img src="logo.png">
<ul class="clearfix">
<li><a href="/index.html#contact">Contact</a></li>
<li><a href="/index.html#team">Team</a></li>
<li><a href="/index.html#platform">Platform</a></li>
<li><a href="/index.html#about">About</a></li>
</ul>
</nav>
<h2>Privacy Policy</h2>
We use Google Analytics to collect anonymous information about who visits
our site. Other than that, we don't know anything about you. But if you'd
like to know more about us, please <a href="index.html#contact">contact
us</a>
</body>
</html>

114
campaign/site.css Normal file
View File

@@ -0,0 +1,114 @@
/* Variables */
/* sizes */
/* font sizes */
/* pallet */
h1, h2, h3, h4, h5, h6 {
font-family: "proxima-nova-alt-condensed", Arial, Helvetica, sans-serif;
font-weight: bold; }
body {
font-family: "proxima-nova", Arial, Helvetica, sans-serif;
font-size: 16px;
color: rgba(0, 0, 0, 0.9);
width: 100%;
margin: 0px; }
h1 {
font-size: 64px;
margin: 64px 16px;
display: inline; }
h2 {
font-size: 48px;
margin-top: 48px;
text-transform: uppercase; }
h3 {
margin-top: -16px; }
p {
margin: 16px; }
nav img {
width: initial; }
nav ul {
list-style-type: none;
margin: 0;
padding: 0 16px 0 0;
display: block;
box-sizing: border-box; }
nav li {
float: right; }
nav li a {
text-align: center;
width: 64px;
color: #38526b;
display: block;
padding: 8px;
text-decoration: none; }
nav li a:hover {
font-weight: bold; }
img {
width: 100%;
margin-bottom: 32px; }
img.profPic {
margin-top: 32px; }
.main, .header {
padding: 16px;
margin-right: auto;
margin-left: auto; }
.block {
float: left;
display: block;
box-sizing: border-box;
padding: 16px; }
.footer {
border-top: 1px solid #ba3845;
text-align: center;
margin: 16px;
padding: 16px; }
.standout {
background-color: #ba3845;
color: #ffeacf;
font-size: 20px;
font-weight: 600;
padding: 16px; }
.desktop {
display: none; }
.hidden {
display: none; }
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0; }
@media (min-width: 768px) {
.desktop {
display: inherit; }
.mobile {
display: none; }
.main, .header {
min-width: 752px;
max-width: 921.6px; }
.block-half {
max-width: 50%; }
.block-third {
max-width: 33.333%; } }
/*# sourceMappingURL=site.css.map */

BIN
campaign/srishti.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
campaign/vaas.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
campaign/zach.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 260 KiB

BIN
campaign/zach.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

BIN
img/aaron.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.6 KiB

BIN
img/aaron@2x.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
img/aaron@3x.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

72
index.html Normal file
View File

@@ -0,0 +1,72 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Aaron Gutierrez</title>
<link rel="stylesheet" href="site.css" >
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="Aaron Gutierrez">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.aarongutierrez.com">
<meta property="og:image" content="https://www.aarongutierrez.com/img/aaron@3x.jpg">
<meta property="og:description" content="Aaron Gutierrez is a software engineer at Asana, a CMU graduate, and fond of benches.">
</head>
<body>
<header>
<h1>Aaron Gutierrez</h1>
<img id="aaron" alt="Aaron" src="img/aaron.jpg"
srcset="img/aaron.jpg, img/aaron@2x.jpg 2x,img/aaron@3x.jpg 3x">
<p>
Integrations Engineer @ <a href="https://asana.com">Asana</a><br>
Carnegie Mellon University, SCS 2017
</p>
</header>
<hr>
<main>
<h2>Work</h2>
<section>
<h3>Asana</h3>
<ul>
<li>I've helped build Asana's
<a href="https://blog.asana.com/2018/05/new-asana-slack-integration/">
Slack</a>,
<a href="https://blog.asana.com/2017/10/emails-tasks-gmail-asana-integration/">
Gmail</a>,
<a href="https://blog.asana.com/2017/09/wufoo-web-form-integration/">
Forms</a>, and
<a href="https://asana.com/apps/csv-importer">CSV</a> integrations.
</li>
</ul>
</section>
<section>
<h3>Carnegie Mellon</h3>
<ul>
<li>I extended the <a href="https://ispc.github.io/ispc.html">Intel
SPMD Program Compiler (ISPC)</a> to support polymorphic datatypes in
my <a href="/15418/index.html">15-418 Final Project</a></li>
<li>I spent several semesters as a teaching assistant for
<abbr title="Principles of Imperitive Computation">15-122</abbr>,
<abbr title="History of Computing">15-292</abbr>, and
<abbr title="Compiler Design">15-411</abbr>.</li>
<li>I served as the Student Body Vice President for the 2016-2017 school
year</li>
<li>I served as Treasurer and President of the
<a href="https://rushdelt.com">Delta Beta Chapter</a> of
<a href="https://www.delts.org">∆T∆</a>, where I built and maintained our
reimbursement tracking web application.</li>
</ul>
<h2>Links</h2>
<ul>
<li><a href="bench/1.html">My Benches</a></li>
<li>Github: <a href="https://github.com/aarongut">aarongut</a></li>
<li>Public Key: <a href="pubkey.asc">9CAC97E9</a></li>
<li><a href="campaign/index.html">Campaign Website</a></li>
<li>Email: <a href="mailto:aaron@aarongutierrez.com">aaron@aarongutierrez.com</a>
</ul>
</main>
<hr>
<footer>
<a href="https://wwww.aarongutierrez.com">www.aarongutierrez.com</a>
<a href="https://www.frat.tech">www.frat.tech</a>
</footer>
</body>
</html>

112
pub.py Executable file
View File

@@ -0,0 +1,112 @@
#!/usr/bin/env python3
import argparse
import os
import sys
import boto3
BUCKET='www.aarongutierrez.com'
AWS_ACCESS_KEY='AKIAIDTVRR2EKQ5FYIEQ'
AWS_SECRET_KEY='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'
s3 = boto3.client('s3',
aws_access_key_id=AWS_ACCESS_KEY,
aws_secret_access_key=AWS_SECRET_KEY)
bench_fmt = """<a href="/img/bench/{0:03d}.jpg"><picture><source type="image/webp" srcset="/img/bench/{0:03d}.thumb.webp, /img/bench/{0:03d}.thumb@2x.webp 2x"><img src="/img/bench/{0:03d}.thumb.jpg"></picture></a>""" + "\n"
TYPE_MAP = {
'asc': 'text/plain',
'css': 'text/css',
'gif': 'image/gif',
'html': 'text/html; charset=utf8',
'jpg': 'image/jpeg',
'png': 'image/png',
'webp': 'image/webp',
}
def upload_file(filename):
print('Uploading {} to {}/{}'.format(filename, BUCKET, filename))
ext = filename.split('.')[-1]
s3.upload_file(filename, BUCKET, filename, ExtraArgs={
'ACL': 'public-read',
'ContentType': TYPE_MAP[ext]
})
print('\tDone.')
def filter_filenames(filenames, ext):
for f in filenames:
if (isinstance(ext, (list,)) and (f.split('.')[-1] in ext) \
or f.split('.')[-1] == ext):
yield f
def upload_root():
upload_file('index.html')
upload_file('site.css')
upload_file('pubkey.asc')
def upload_bench():
imgs = os.listdir('img/bench')
img_files = [f for f in filter_filenames(imgs, ['jpg', 'webp'])]
num_imgs = int(len(img_files) / 4)
with open('bench_template.html', 'r') as f:
template = f.read()
for i in range(1, num_imgs+1, 16):
page = ''
for j in range(i, min(num_imgs+1, i+16)):
page += bench_fmt.format(j)
prev_pg = i//16
next_pg = i//16 + 2
prev_link = '#' if (prev_pg == 0) else '/bench/{}.html'.format(prev_pg)
next_link = '#' if (i+16 > num_imgs) else '/bench/{}.html'.format(next_pg)
with open('bench/{}.html'.format(i//16 + 1), 'w') as out:
out.write(template.format(page, prev_link, next_link))
files = filter_filenames(os.listdir('bench'), 'html')
for f in files:
upload_file('bench/{}'.format(f))
for f in img_files:
upload_file('img/bench/{}'.format(f))
def upload_img():
files = filter_filenames(os.listdir('img'), ['jpg', 'webp'])
for f in files:
upload_file('img/{}'.format(f))
def upload_15418():
upload_file('15418/index.html')
upload_file('15418/style.css')
def upload_campaign():
files = filter_filenames(os.listdir('campaign'),
['html', 'css', 'jpg', 'png', 'gif'])
for f in files:
upload_file('campaign/{}'.format(f))
if __name__ == '__main__':
parser = argparse.ArgumentParser(description='Publish www.aarongutierrez.com')
pub_help = 'What to publish'
pub_choices = ['all', 'root', 'img', 'bench', '15418', 'campaign']
parser.add_argument('pub', choices=pub_choices, help=pub_help)
args = parser.parse_args()
if args.pub == 'root' or args.pub == 'all':
upload_root()
if args.pub == 'img' or args.pub == 'all':
upload_img()
if args.pub == 'bench' or args.pub == 'all':
upload_bench()
if args.pub == '15418' or args.pub == 'all':
upload_15418()
if args.pub == 'campaign' or args.pub == 'all':
upload_campaign()

61
site.css Normal file
View File

@@ -0,0 +1,61 @@
img#aaron {
width: 128px;
height: 128px;
}
body {
max-width: 800px;
padding: 20px;
}
h1 {
font-weight: normal;
}
header {
text-align: center;
}
footer {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.img-grid {
display: flex;
flex-wrap: wrap;
}
.img-grid a {
display: inline-block;
height: 160px;
margin-right: 40px;
margin-bottom: 10px;
width: 160px;
}
.img-grid img {
display: block;
margin-left: auto;
margin-right: auto;
max-width: 160px;
max-height: 160px;
}
div.nav {
display: flex;
justify-content: space-between;
width: 100%;
}
@media(min-width:600px) {
header {
text-align: left;
}
body {
margin: 0 auto;
}
}