-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
199 lines (199 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paula Goyanes</title>
<link rel="shortcut icon" href="images/favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Montserrat:100,200,400|Sail" rel="stylesheet">
<link href="css/style.css" type="text/css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.4/js/all.js"></script>
<script src="scripts/script.js"></script>
</head>
<body>
<header id="main">
<!--BEGIN NAVIGATION-->
<nav>
<section class="nav-bar">
<img class="nav-logo" src="http://res.cloudinary.com/paulywag/image/upload/v1527207024/nav-logo.png" alt="Paula Goyanes logo">
<ul class="flex nav-horizontal">
<li><a href="#home"><h6>HOME</h6></a></li>
<li><a href="#about"><h6>ABOUT</h6></a></li>
<li><a href="#portfolio"><h6>PORTFOLIO</h6></a></li>
<li><a href="#contact"><h6>CONTACT</h6></a></li>
</ul>
<a class="nav-hamburger"><i class="fas fa-bars"></i></a>
<ul class="nav-dropdown">
<li><a href="#home"><h6>HOME</h6></a></li>
<li><a href="#about"><h6>ABOUT</h6></a></li>
<li><a href="#portfolio"><h6>PORTFOLIO</h6></a></li>
<li><a href="#contact"><h6>CONTACT</h6></a></li>
</ul>
</nav>
<!--BEGIN LANDING-->
<div id="home">
<video autoplay loop muted>
<source src="https://res.cloudinary.com/paulywag/video/upload/v1527209284/sun-video.mp4" type="video/mp4">
</video>
<header class="landing-text">
<div class="landing-text_name">
<h1>
<span id="first-typing"></span>
<br class="hide">
<span id="last-typing"></span>
</h1>
</div>
<h2>Software Engineer</h2>
</header>
</div>
</header>
<!--BEGIN QUOTE-->
<section class="container--quote flex col-center">
<h6>"The most dangerous phrase in the language is, 'We've always done it this way.'"</h6>
<p>- Grace Hopper</p>
</section>
<!--BEGIN ABOUT ME-->
<section class="page row-center" id="about">
<section class="row--about-me flex">
<aside class="info-col flex col-center">
<h4>Hola, Hello</h4>
<img class="info-col_avatar" src="http://res.cloudinary.com/paulywag/image/upload/v1527206840/avatar.png">
<div class="info-col_icons-row">
<div class="icon flex col-center">
<span role="img" aria-label="snake emoji">🐍</span>
<h6>Python</h6>
</div>
<div class="icon flex col-center">
<span role="img" aria-label="coffee emoji">☕</span>
<h6>JavaScript</h6>
</div>
<div class="icon flex col-center">
<span role="img" aria-label="artist palette emoji">🎨</span>
<h6>HTML/CSS</h6>
</div>
</div>
</aside>
<article class="info-col">
<h4>I'm Paula Goyanes</h4>
<div class="info-col_about">
<h5>FULL STACK WEB DEVELOPER</h5>
<h5>CREATIVITY // CODING // COLLABORATION</h5>
</div>
<section>
<p class="info-col_about_text"> <span>👩🎨</span> Once upon a time, I was a visual arts major at an art school. There, through the creation of enormous art installations, I discovered a passion for analytical problem-solving & physics.</p>
<p class="info-col_about_text"><span>👩🔬</span> So I pivoted into science, exploring & working in molecular biology for 8 years. It was through my career in biotech that I picked up coding. And so I learned about software engineering, an opportunity to work at the intersection of creativity & analytical thinking!</p>
<p class="info-col_about_text"><span>👩💻</span> Nowadays as a software engineer, I'm applying my experience in making art and executing the scientific method to a career where I can tinker and build freely.</p>
<p class="info-col_about_text">Check out my <a href="docs/Paula-Goyanes-Resume.pdf" target="_blank" rel="noopener noreferrer">🌟<em class="bold underline">resume</em> 🌟</a></p>
</section>
</article>
</section>
</section>
<!--BEGIN PORTFOLIO-->
<section class="page flex row-center" id="portfolio">
<div class="row--portfolio flex col-center">
<h4>PORTFOLIO</h4>
<section class="portfolio_grid">
<div class="flex row-center">
<figure class="card">
<a href="https://www.coursereport.com/" target="_blank" rel="noopener noreferrer">
<img src="https://res.cloudinary.com/paulywag/image/upload/v1527207866/course-report.png" alt="thumbnail of the course report site">
</a>
<div class="card_caption">
<h3>Course Report</h3>
<p>As a contract engineer for Course Report, I made several updates to their site & API (check out my <a href="docs/Paula-Goyanes-Resume.pdf" target="_blank" class="underline">resume</a> for details)</p>
<button onclick="window.open('https://www.coursereport.com/', '_blank')">Website</button>
</div>
</figure>
</div>
<div class="flex row-center">
<figure class="card">
<a href="https://warbler-project.herokuapp.com/" target="_blank" rel="noopener noreferrer">
<img src="https://res.cloudinary.com/paulywag/image/upload/v1527208698/warbler.png" alt="thumbnail for a social media app">
</a>
<div class="card_caption">
<h3>Warbler</h3>
<p>A Twitter Clone with a spin! <br/> Where users can create profiles, add messages, and interact with other users</p>
<button onclick="window.open('https://warbler-project.herokuapp.com/', '_blank')">Website</button>
<button onclick="window.open('https://github.com/Mhowitt/Warbler-Project', '_blank')">Github</button>
</div>
</figure>
</div>
<div class="flex row-center">
<figure class="card">
<a href="https://github.com/alexabush/LinkedList" target="_blank" rel="noopener noreferrer">
<img src="https://res.cloudinary.com/paulywag/image/upload/v1527207881/linked-list.png" alt="thumbnail for a job sharing app">
</a>
<div class="card_caption">
<h3>LinkedList API</h3>
<p>A backend for a LinkedIn/Angel List clone. Where companies, users, and jobs can interact</p>
<button onclick="window.open('https://github.com/alexabush/LinkedList', '_blank')">Github</button>
</div>
</figure>
</div>
<div class="flex row-center">
<figure class="card">
<a href="https://goyanespaula.github.io/hack-or-snooze/" target="_blank" rel="noopener noreferrer">
<img src="https://res.cloudinary.com/paulywag/image/upload/v1527208699/hack-or-snooze.png" alt="thumbnail for a news sharing app">
</a>
<div class="card_caption">
<h3>Hack Or Snooze</h3>
<p>A Hacker News clone<br/> Where users can post, read, and favorite stories</p>
<button onclick="window.open('https://goyanespaula.github.io/hack-or-snooze/', '_blank')">Website</button>
<button onclick="window.open('https://github.com/goyanespaula/hack-or-snooze', '_blank')">Github</button>
</div>
</figure>
</div>
<div class="flex row-center">
<figure class="card">
<a href="https://goyanespaula.github.io/memory-card-game/" target="_blank" rel="noopener noreferrer">
<img src="https://res.cloudinary.com/paulywag/image/upload/v1527209115/memory-game.png" alt="placeholder 1">
</a>
<div class="card_caption">
<h3>Memory Card Game</h3>
<p>A game where players click on cards to reveal images and match pairs as quickly as possible</p>
<button onclick="window.open('https://goyanespaula.github.io/memory-card-game/', '_blank')">Website</button>
<button onclick="window.open('https://github.com/goyanespaula/memory-card-game', '_blank')">Github</button>
</div>
</figure>
</div>
<div class="flex row-center">
<figure class="card">
<a href="https://goyanespaula.github.io/meme-generator/" target="_blank" rel="noopener noreferrer">
<img src="https://res.cloudinary.com/paulywag/image/upload/v1527208882/meme.png" alt="thumbnail salt bae">
</a>
<div class="card_caption">
<h3>Meme Generator</h3>
<p>A site where you can create your own memes from image urls by adding custom captions!</p>
<button onclick="window.open('https://goyanespaula.github.io/meme-generator/', '_blank')">Website</button>
<button onclick="window.open('https://github.com/goyanespaula/meme-generator', '_blank')">Github</button>
</div>
</figure>
</div>
</section>
</div>
</section>
<!--BEGIN CONTACT-->
<section class="page flex row-center" id="contact">
<section class="container--contact">
<section class="row--contact flex">
<aside class="flex col-center info-col">
<h4>Reach out!</h4>
<img id="contact_gif" src="http://res.cloudinary.com/paulywag/image/upload/v1527207384/old-school-comp.gif" alt="GIF of animated computer opening and closing">
</aside>
<aside class="contact_text info-col">
<h4>I'd love to hear from you</h4>
<h6><i class="fas fa-envelope"></i> Email me at: <em><a href="mailto:[email protected]">[email protected]</a></em></h6>
<h6><i class="fab fa-linkedin" style="color: #0077B5; font-size: 20px;"></i> Connect with me on <em><a href="https://www.linkedin.com/in/paulagoyanes/" target="_blank" class="underline" rel="noopener noreferrer">LinkedIn</a></em> </h6>
<h6><i class="fab fa-angellist" style="color: #000; font-size: 20px;"></i> Find me on <em><a href="https://angel.co/paula-goyanes" target="_blank" class="underline" rel="noopener noreferrer">AngelList</a></em></h6>
<h6><i class="fab fa-github-square" style="color: #333;font-size: 20px;"></i> Check out my <em><a href="https://github.com/goyanespaula" target="_blank" class="underline" rel="noopener noreferrer">Github</a></em></h6>
<h6><i class="fab fa-codepen" style="color: #212121; font-size: 20px";></i> See me on <em><a href="https://codepen.io/Paulywag/" target="_blank" class="underline" rel="noopener noreferrer">Codepen</a></em></h6>
<h6><span role="img" aria-label="Golden Gate Bridge emoji">🌉</span> Or catch me wandering the streets of San Francisco</h6>
</aside>
</section>
</section>
</section>
<footer> Coded and designed con mucho amor <i class="far fa-hand-spock"></i> by Paula Goyanes 2018 <i class="far fa-copyright"></i>
</footer>
</body>
</html>