-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
213 lines (185 loc) · 11 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width = device-width, initial-scale = 1">
<title>Carla Stockalper Portfolio</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Rock+Salt" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Barrio|Open+Sans+Condensed:300" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
</head>
<body>
<svg id="triangles" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 792 455.98"><defs>
<style>
.cls-2{fill:#FF9F80;opacity:0.3;}#triangles{position:fixed;z-index:0}
#tri1{-webkit-animation:mvtri;animation-duration:2s;animation-direction:reverse;}
#tri2{-webkit-animation:mvtri2;animation-duration:3s;}
#tri3{-webkit-animation:mvtri;animation-duration:2s;}
#tri4{-webkit-animation:mvtri2;animation-duration:1s;}
#tri5{-webkit-animation:mvtri3;animation-duration:4s;}
#tri6{-webkit-animation:mvtri4;animation-duration:4s;}
#tri7{-webkit-animation:mvtri2;animation-duration:2s;}
#tri8{-webkit-animation:mvtri4;animation-duration:4s;}
@-webkit-keyframes mvtri{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
@-webkit-keyframes mvtri2{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(-360deg);}
}
@-webkit-keyframes mvtri3{
from {-webkit-transform: rotateX(0deg);}
to {-webkit-transform: rotateX(360deg);}
}
@-webkit-keyframes mvtri4{
from {-webkit-transform: rotateX(0deg);}
to {-webkit-transform: rotateX(-360deg);}
}
</style></defs>
<g id="Layer_3" data-name="Layer 3">
<polygon id="tri1" class="cls-2" points="0.5 455.98 792.5 0 792.5 455.98 0.5 455.98"/>
<polygon id="tri2" class="cls-2" points="567.5 0 0.47 326.45 0.47 0 567.5 0"/>
<polygon id="tri3" class="cls-2" points="2.13 0 403.5 455.98 2.13 455.98 2.13 0"/>
<polygon id="tri4" class="cls-2" points="792 455.98 375.09 0 792 0 792 455.98"/>
<polygon id="tri5" class="cls-2" points="334.33 423.12 763.49 176.04 763.49 423.12 334.33 423.12"/>
<polygon id="tri6" class="cls-2" points="403.5 51.09 96.25 227.99 96.25 51.09 403.5 51.09"/>
<polygon id="tri7" class="cls-2" points="72.73 176.04 290.22 423.12 72.73 423.12 72.73 176.04"/>
<polygon id="tri8" class="cls-2" points="615.45 316.17 389.54 69.09 615.45 69.09 615.45 316.17"/></g>
</svg>
<div class="scene" id="scene1">
<h1 class="title">Carla Stockalper</h1>
<div class="subtitle">
<h3 class="w">W</h3><h3 class="e1">E</h3><h3 class="b">B</h3><h3 class="space"> </h3><h3 class="d">D</h3><h3 class="e2">E</h3><h3 class="v">V</h3><h3 class="e3">E</h3><h3 class="l">L</h3><h3 class="o">O</h3><h3 class="p">P</h3><h3 class="e4">E</h3><h3 class="r">R</h3>
</div>
<div class="empty"></div>
<img class="arrow" src="images/arrow.svg" alt="">
</div>
<div class="scene" id="scene2">
<div class="scene-overlay">
<h2>Thanks for stopping by!</h2>
<div class="outerText">
<div class="innerText">
<p>My name is Carla, I'm a full stack web developer with a background in illustration and marketing.<br /><br />
I love building fluid front end interfaces, but am also a sucker for structuring servers and interacting with databases.
I am fascinated by the evolution of our interactions with technology; I think about the small, almost subconscious daily
exchanges we have with our machines and how they shape our lives; how can we make these more seamless?<br /><br />
I've worked as a graphic/web designer, illustrator and marketing director. I have a passion for helping people and businesses
tell a story through digital media.<br /><br />
When I'm not on a computer, you can find me on a yoga mat! I also run a yoga studio with my family back in So Cal.
Check out some of my recent projects, cheers!</p>
</div>
<div class="innerText skills">
<h5><span id="skills">SKILLS:</span><br />HTML5/CSS3<br /> Javascript<br /> jQuery <br />Bootstrap<br /> ReactJS <br />NodeJS <br />Express <br />Webpack <br />MongoDB <br />PostgreSQL<br /> Adobe CS<br />FinalCut Pro</h5>
</div>
</div>
<a target="_blank" href="resume.pdf"><div id="resumeArrow"></div><span id="resume">RESUME</span></a>
</div>
</div>
<div class="scene" id="scene3">
<div class="scene-overlay scene-overlay-3">
<div><h2>Projects</h2></div>
<div class="project-container">
<div class="project-item modalbtnmytwocents">
<h2>My Two Cents</h2>
<img src="images/mytwocents.png" alt="">
</div>
<div class="project-item modalbtncfys">
<h2><span class="cfys">Center for Yoga Studies</span></h2>
<img src="images/cfys.png" alt="">
</div>
<div class="project-item modalbtnheyo">
<h2>Heyooo</h2>
<img src="images/heyooo.png" alt="">
</div>
<div class="project-item modalbtnmars">
<h2><span class="mars">Message from Mars</span></h2>
<img src="images/MfM1.png" alt=""><div class="mmodalbtn"></div>
</div>
<div class="project-item modalbtnmonster">
<h2>Monster Fish</h2>
<img src="images/MonsterFishStill.png" alt="">
</div>
</div>
<div class="scroll"><h2><span class="scrollType">SCROLL > > ></span></h2></div>
</div>
<div class="modal" id="mytwocentsModal">
<h2>My Two Cents</h2>
<h4>Team Project: Logo Design / Front End Design and Development</h4>
<p>Website for charitable donation mobile app. A user may create an account via mobile app which links their bank account of choice.
Each purchase made is rounded to the nearest dollar, that change is then donated to charities that the user selects. The goal is to
support meaningful causes pennies at a time. Small change for a big impact.</p>
<img class="project-image mytwocentsImage" src="images/mytwocents.png" alt="">
<h4>Tech Used: HTML5, CSS3, Bootsrap, jQuery</h4>
<a target="_blank" href="http://www.mytwocents.nyc/"><button>Try it out</button></a>
<a target="_blank" href="https://github.com/carlarenee/website-bootstrap"><button>GitHub</button></a>
<div class="x4"><h2>X</h2></div>
</div>
<div class="modal" id="cfysModal">
<h2>Center for Yoga Studies</h2>
<h4>Solo Project: Logo Design / Web Design / Full Stack App Development</h4>
<p>Center for Yoga Studies is an international yoga and lifestyle retreat and training center. Based in San Diego, CA, they
offer yoga teacher trainings, week long yoga and surf retreats, and short format workshops that cover an array of
healing modalities. They offer programs in Encinitas, CA and at their facility in Nosara, Costa Rica. Full site coming soon.</p>
<img class="project-image cfysImage" src="images/cfys.png" alt="">
<h4>Tech Used: HTML5, CSS3, Bootsrap, jQuery</h4>
<a target="_blank" href="http://centerforyogastudies.com/"><button>Try it out</button></a>
<a target="_blank" href="https://github.com/carlarenee/retreat"><button>GitHub</button></a>
<div class="x5"><h2>X</h2></div>
</div>
<div class="modal" id="heyoModal">
<h2>Heyooo</h2>
<h4>Solo Project: Full Stack App Development / Animation</h4>
<p>Mood tracking web app that gives you feedback based phrases you type in. The app uses IBM's Watson API
to detect the emotional value of your input. It gives back a score, and over time, you can track which emotions
are most present day to day. The app offers quotes as well as breathing exercises based on your most prominent emotion.</p>
<img class="project-image heyoImage" src="images/heyooo.png" alt="">
<h4>Tech Used: Node.js, PSQL, React.js, CSS, IBM Watson API, Animatron</h4>
<a target="_blank" href="https://heyooo.herokuapp.com/"><button>Try it out</button></a>
<a target="_blank" href="https://github.com/carlarenee/project4"><button>GitHub</button></a>
<div class="x"><h2>X</h2></div>
</div>
<div class="modal" id="mfmModal">
<h2><span class="mars">Message from Mars</span></h2>
<h4>Team Project: API integration / Database / Front End fetch calls</h4>
<p>In this group project, we created a web app allowing a user to prompt 3 different machines to interact with each other.
The result is a machine generated triptych composed of a random image from Mars, a phrase describing this image, and
a second image found by plugging the descriptive phrase into a search engine.</p>
<img class="project-image marsImage" src="images/MfM1.png" alt=""><div class="mmodalbtn"></div>
<h4>Tech Used: Node.js, PSQL, React.js, CSS, NASA Mars Rover API, Microsoft Vision Data & Bing API</h4>
<a target="_blank" href="https://messagesfrommars.herokuapp.com/"><button>Try it out</button></a>
<a target="_blank" href="https://github.com/carlarenee/project3"><button>GitHub</button></a>
<div class="x x3"><h2>X</h2></div>
</div>
<div class="modal" id="monsterFishModal">
<h2>Monster Fish</h2>
<h4>Solo Project: Full Stack App Development / Illustration</h4>
<p>Single shooter underwater game. You have 20 seconds to shoot and destroy the evil monster fish. The faster the monster
moves, the more points you'll earn if you hit them, but beware! If you hit a friendly fish, you lose points, so accuracy
counts. You must score 30 points in 20 seconds to beat the level. (Ignore the funny looking landing page, this was a student
project with a requirement to have a landing page mimicked from another site)</p>
<img class="project-image monsterImage" src="images/MonsterFishStill.png" alt="">
<h4>Tech Used: HTML, CSS, jQuery, Adobe Illustrator</h4>
<a target="_blank" href="https://carlarenee.github.io/waterGame/"><button>Try it out</button></a>
<a target="_blank" href="https://github.com/carlarenee/waterGame"><button>GitHub</button></a>
<div class="x x2"><h2>X</h2></div>
</div>
</div>
<div class="scene" id="scene4">
<div class="scene-overlay">
<h2>Get in Touch!</h2>
<div class="contact">
<a target="_blank" href="https://github.com/carlarenee"><h4>GitHub</h4></a>
<img class="downArrow" src="images/downArrow.svg" alt="">
<a target="_blank" href="https://www.linkedin.com/in/carlastockalper/"><h4>LinkedIn</h4></a>
<img class="downArrow" src="images/downArrow.svg" alt="">
<a target="_blank" href="mailto:cstockalper@gmail.com"><h4>Email</h4></a>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="script/script.js" type="text/javascript" charset="utf-8" async defer></script>
</body>
</html>