-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
262 lines (258 loc) · 13.3 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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Francesca Bueti</title>
<link href="img/icon.png" rel="icon" type="image/png">
<link href="main.css" rel="stylesheet" type="text/css"><!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Poiret+One|Raleway" rel="stylesheet"><!-- Slick -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>
<link href="slick.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<script src="slick.min.js" type="text/javascript">
</script>
<script src='jquery.zoom.js'>
</script>
<!-- analytics -->
<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','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-97409872-1', 'auto');
ga('send', 'pageview');
</script>
<script>
$(document).ready(function(){
$('.slideable').slick({
arrows: false,
dots: true
});
$('.zoom').zoom({ on:'click' });
});
</script>
</head>
<body>
<aside class="noselect">
<div id="content">
<div id="initals">
FB
</div>
<p>Hi I'm Francesca.</p><br>
<p>I'm a student at Stevens Institute of Technology studying computer science and visual design.</p><br>
<p>My resume is <a href="resume.pdf">here</a>.</p>
<div id="socialIcons">
<a href="http://www.vsco.com/fbueti"><img src="img/vsco.png"></a> <a href="http://www.linkedin.com/in/fbueti"><img src="img/linkedin.png" style="opacity:.8"></a> <a href="http://www.twitter.com/atfran"><img src="img/twitter.png"></a>
</div>
</div>
</aside>
<div id="projects">
<div class="slideable">
<div class="slide">
<div class="project" style="background-color: #e5e5e5">
<div class="project-content">
<img src="img/ventureHacks.png">
<h1>Venture Hacks</h1>
<p class="first-p">Co-founded a hackathon that works to redefine entrepreneurial education. Developed and designed logos, promotional material, presentations and a website. Additionally, facilitated the events, presented on technical and design topics, mentored particpants and coordinated logistics.</p>
</div>
</div>
</div>
<div class="slide" style="text-align: center">
<div class="project" style="background-color: #e5e5e5">
<div class="project-content padded double-padded">
<h1>The Logo</h1>
<p>Designed for versatility and the ability to brand each hackathon with a unique color.</p><span class='zoom nofloat'><img class="thirdLeft" src="img/ventureHacksGreen.png"></span> <span class='zoom'><img class="thirdLeft" src="img/ventureHacksOrange.png"></span> <span class='zoom'><img class="thirdLeft hidden" src="img/ventureHacksBlue.png"></span>
</div>
</div>
</div>
<div class="slide" style="text-align: center">
<div class="project" style="background-color: #e5e5e5">
<div class="project-content padded">
<h1>Branding</h1>
<p style="margin-bottom: -10px">Used to brand tshirts, powerbanks, and water bottles.</p><span class='zoom zoomIn'><img class="thirdLeft" src="img/bottle.png"></span> <span class='zoom'><img class="thirdLeft" src="img/tshirt.png"></span> <span class='zoom'><img class="thirdLeft" src="img/powerbank.png" style="padding: 10px;"></span>
</div>
</div>
</div>
<div class="slide" style="text-align: center">
<div class="project" style="background-color: #e5e5e5">
<div class="project-content padded double-padded">
<h1>The Website</h1>
<p>A way for applicants to learn more about Venture Hacks. See the current version live <a href="http://www.venturehacks.xyz">here</a>.</p><span class='zoom'><img class="thirdLeft" src="img/vhComm1.png"></span>
</div>
</div>
</div>
<div class="slide" style="text-align: center">
<div class="project" style="background-color: #e5e5e5">
<div class="project-content padded double-padded">
<h1>Challenges</h1>
<p>Keeping things interesting with puzzles. Try to solve it here <a href="http://www.venturehacks.xyz/in">here</a>.</p><span class='zoom'><img class="thirdLeft" src="img/mystery.png"></span>
</div>
</div>
</div>
<div class="slide" style="text-align: center">
<div class="project" style="background-color: #e5e5e5">
<div class="project-content padded">
<h1>Presentations</h1>
<p>Aimed to be pretty, straightforward, and informative. See them in full <a href="https://drive.google.com/drive/u/0/folders/0B98mV-KKhZCyektiR3BMVHlzSFU">here</a>.</p><span class='zoom'><img class="thirdLeft" src="img/slide.png"></span> <span class='zoom'><img class="thirdLeft" src="img/slide1.png"></span>
</div>
</div>
</div>
<div class="slide" style="text-align: center">
<div class="project" style="background-color: #e5e5e5">
<div class="project-content padded">
<h1>Results</h1>
<p>A ton of cool <a href="https://venturehacks-2016-freshman.devpost.com/submissions">projects</a> and some short-lived fame from <a href="http://hmag.com/venture-hacks-stevens-host-hackathon-aimed-improving-life-hoboken-july-16-17/">HMAG</a> and the <a href="http://www.hudsonreporter.com/view/full_story/27222309/article-Hoboken--Hacking-Stevens-Hackathon-needs-ideas-from-you-about-community-problems-?instance=more_page">Hudson Reporter</a>.</p><span class='zoom'><img class="thirdLeft" src="img/news1.png" style="height:140px"></span> <span class='zoom'><img class="thirdLeft" src="img/news2.png" style="height:140px"></span>
</div>
</div>
</div>
</div>
<div class="slideable">
<div class="slide">
<div class="project" style="background-color: #c1b098">
<div class="project-content">
<img src="img/sollia.png">
<h1>Sollia Salon</h1>
<p class="first-p">Helped found the family business. Developed and designed a website and marketing plans, managed social media, and created graphics that served as advertisements and were displayed on-site. Effectively increased walk=in rate by over 20%.</p>
</div>
</div>
</div>
<div class="slide" style="text-align: center">
<div class="project" style="background-color: #c1b098">
<div class="project-content padded double-padded">
<h1 style="margin-top:-30px">The Logo</h1>
<p>A tribute to the sunny days in Italy, the roots of our business.</p><img src="img/solliaLogo1.png" style="float: none; display:inline; height: 180px"></div>
</div>
</div>
<div class="slide" style="text-align: center">
<div class="project" style="background-color: #c1b098">
<div class="project-content">
<h1 style="margin-top:-30px">The Website</h1>
<p>Aims to tell my family's story in a clean and simple way. See it <a href="http://www.solliasalon.com">here</a>.</p><span class='zoom'><img class="thirdLeft" style="height: 160px" src="img/solliaWeb.png"></span> <span class='zoom'><img class="thirdLeft" style="height: 160px" src="img/solliaWeb1.png"></span>
</div>
</div>
</div>
<div class="slide" style="text-align: center">
<div class="project" style="background-color: #c1b098">
<div class="project-content padded double-padded">
<h1 style="margin-top:-30px">Results</h1>
<p>Sollia Salon has successfully been in business for over 8 years.</p><span class='zoom notHiddenUntilSmall'><img src="img/solliaNews.png" style="float: none; display:inline;"></span>
<span class='zoom hiddenUntilSmall'><img src="img/smallNews.png" style="float: none; display:inline;"></span>
</div>
</div>
</div>
</div>
<div class="slideable" style="background-color: #4b4a51; color:white">
<div class="slide">
<div class="project" style="background-color: #4b4a51">
<div class="project-content padded double-padded">
<img src="img/dphie.png" style="height:150px">
<h1>Delta Phi Epsilon</h1>
<p class="first-p">Developed an automated system using Google scripts and sheets to track attendance scores of over 90 sisters. Managed the distribution of information. Developed and designed a website and various promotional materials.</p>
</div>
</div>
</div>
<div class="slide" style="text-align: center">
<div class="project" style="background-color: #4b4a51">
<div class="project-content padded double-padded">
<h1 style="margin-top:-30px">Automated Tracking</h1>
<p>A series of Google Scripts to keep up with every sister on every event.</p><img src="img/dphieScript.png" style="float: none; display:inline; height: 180px"></div>
</div>
</div>
<div class="slide" style="text-align: center">
<div class="project" style="background-color: #4b4a51">
<div class="project-content padded double-padded">
<h1 style="margin-top:-40px">Print</h1>
<p>A series of printed posters for informal recruitment.</p><span class='zoom'><img src="img/dphiePoster.png"></span> <span class='zoom'><img src="img/dphiePoster1.png"></span> <span class='zoom'><img src="img/dphiePoster2.png" class="hidden"></span>
</div>
</div>
</div>
<div class="slide" style="text-align: center">
<div class="project" style="background-color: #4b4a51">
<div class="project-content ">
<h1 style="margin-top:-40px">Ads</h1>
<p>A cheesy way to advertise for Grilled Cheese Night.</p><span class='zoom'><img src="img/cheese.png"></span> <span class='zoom'><img src="img/cheese1.png"></span>
</div>
</div>
</div>
<div class="slide" style="text-align: center">
<div class="project" style="background-color: #4b4a51">
<div class="project-content padded double-padded">
<h1 style="margin-top:-40px">Website</h1>
<p>Designed to showcase our sisterhood. Soon to be live.</p>
<img src="img/dphie.png" style="float: none; display:inline; height: 180px">
</div>
</div>
</div>
</div>
<div class="slideable" style="background-color: #86a88c;">
<div class="slide">
<div class="project" style="background-color: #86a88c">
<div class="project-content">
<img src="img/contracts-go.png" style="height: 180px">
<h1>Contracts-Go</h1>
<p class="first-p">As an Innovation & Entreprenuership Summer Scholar, designed and developed a web application with a team to virtualize the process of issuing non-disclosure agreements within our school community. Worked on user research, user experience, visual design, and front-end web development.</p>
</div>
</div>
</div>
<div class="slide" style="text-align: center">
<div class="project">
<div class="project-content padded double-padded">
<h1>User Research</h1>
<p> Conducted a series of interviews and worked closely with industry professionals to learn the ins-and-outs of non-disclosure agreements. </p>
<span class='zoom'><img src="img/nda.jpg" class="hidden"></span> <span class='zoom'><img src="img/nda1.png" class="hidden"></span> <span class='zoom'><img src="img/nda2.png"></span>
</span>
</div>
</div>
</div>
<div class="slide" style="text-align: center">
<div class="project">
<div class="project-content padded double-padded">
<h1>Web App</h1>
<p >A simple and elegant interface. See it live <a href="contracts-go.com">here</a>.</p>
<img src="img/contracts-go-web.png" style="float: none; display:inline; height: 180px">
</div>
</div>
</div>
<div class="slide" style="text-align: center">
<div class="project">
<div class="project-content padded double-padded">
<h1>Material Design</h1>
<p>Closely followed Google's material design principles and implemented through ember-paper.</p>
<img src="img/contractsMaterial.gif" style="float: none; display:inline; height: 150px">
</div>
</div>
</div>
</div>
<div class="slideable">
<div class="slide">
<div class="project" style="background-color: #95afaf">
<div class="project-content padded double-padded">
<img src="img/glance.png">
<h1>Glance</h1>
<p class="first-p">Designed and developed a social media application build for Android with a team as part of Google CodeU, an invite-only exclusive technical development program. Awarded the people's choice award.</p>
</div>
</div>
</div>
<div class="slide" style="text-align: center">
<div class="project" style="background-color: #95afaf">
<div class="project-content padded double-padded">
<h1><br>Material Design</h1>
<p> Followed Google Material Design closely to create a simple, easy to use interface.</p>
<span class="zoom"><img src="img/glanceMaterial.png" style="float: none; display:inline; height: 180px"></span>
</div>
</div>
</div>
<div class="slide" style="text-align: center">
<div class="project" style="background-color: #95afaf">
<div class="project-content padded double-padded">
<h1><br>Results</h1>
<p> Awarded the People's Choice Award at Google Code 2015. Read more <a href="http://googleforstudents.blogspot.com/2015/12/celebrating-android-app-creators.html">here</a>.</p>
<span class="zoom"><img src="img/codeU.png" style="float: none; display:inline; height: 150px"></span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>