-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
181 lines (181 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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN>
<html xmlns="http://www.w3.org/1999/xhtml">
<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>joana's portfolio</title>
<link href='https://fonts.googleapis.com/css?family=Montserrat:700|Oswald|Open+Sans:300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/milligram.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="introduction">
<div class="container">
<section class="row">
<div class ="column">
<h1>hi, i'm joana</h1>
<p>Living in sunny Lisboa, I am currently working as a <em>front-end developer</em>. I'm passionate about CSS and UX Design.</p>
<p>I like building things, I like tinkering, I like solving problems.</p>
<ul>
<li><a href="https://www.instagram.com/joanabpereira/"><img src="img/instagram-logo.svg"></a></li>
<li><a href="https://twitter.com/joanabpereira"><img src="img/twitter-logo-silhouette.svg"></a></li>
<li><a href="https://pt.linkedin.com/in/joanabpereira"><img src="img/linkedin-logo.svg"></a></li>
<li><a href="https://github.com/joanabpereira"><img src="img/github-logo.svg"></a></li>
</ul>
</div>
</section>
</div>
</div>
<div class="container">
<section id="about">
<div class="row">
<div id="words" class="column column-80">
<p>I began my career in Tech by studying <strong>Computer Science & Software Engineering</strong> at <em>Instituto Superior Técnico</em>. I graduated as a MSc in 2014. That same year, I began working as an <i>OutSystems developer</i> at Glintt. Always thirsty for knowledge, I took a 6-month course in <strong>UX/UI Design</strong> at <em>EDIT. - Digital Disruptive Education</em>. In 2017, I transitioned from full-stack development to front-end development.</p>
<h6><em>Where do I see myself in 3 years?</em></h6>
<p> Ideally, I see myself being a <strong>unicorn</strong>: a front-end developer and a UX designer. </p>
</div>
</div>
</section>
<section id="skills">
<div class="row">
<div class="column column-100">
<h3 class="clearfix">Skills</h3>
<div class="row">
<div class="column column-33">
<div>HTML5</div>
<div class="skill skill-90"></div>
</div>
<div class="column column-33">
CSS3
<div class="skill skill-90"></div>
</div>
<div class="column column-33">
<div>JavaScript</div>
<div class="skill skill-70"></div>
</div>
</div>
<div class="row">
<div class="column column-33">
<div>jQuery</div>
<div class="skill skill-80"></div>
</div>
<div class="column column-33">
<div>Bootstrap</div>
<div class="skill skill-60"></div>
</div>
<div class="column column-33">
<div>React</div>
<div class="skill skill-50"></div>
</div>
</div>
<div class="row">
<div class="column column-33">
<div>UX Design</div>
<div class="skill skill-70"></div>
</div>
<div class="column column-33">
<div>UI Design</div>
<div class="skill skill-50"></div>
</div>
<div class="column column-33">
<div>OutSystems</div>
<div class="skill skill-80"></div>
</div>
</div>
</div>
</div>
</section>
</div>
<div id="quotewrapper">
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="50" viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon x="0" y="0" points="0,100 100,0 100,100" style="fill:#5DB7DE" />
</svg>
<div id="quote">
<div class="container">
<section class="row">
<div class="column column-70">
<p>"Once you stop learning you start dying"</p>
<p>Albert Einstein</p>
</div>
</section>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="50" viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon x="0" y="0" points="0,0 0,100 100,0" style="fill:#5DB7DE" />
</svg>
</div>
<div class="container">
<section id="projects" class="row">
<div class="column column-80">
<h3 class="clearfix">Projects</h3>
<div id="timeline">
<div class="project" date-is="Semptember 2017">
<p>Dashboard, <em>Outfit - Tailored Agile Solutions</em></p>
<p>Dashboard showing information from sensors. Showcased at NextStep 2017.</p>
</div>
<div class="project" date-is="May - Semptember 2017">
<p>Web App (Front-office & back-office), <em>ForkIT</em></p>
<p>Web app for an eSports platform. Built using React-Redux-Saga & SAAS.</p>
</div>
<div class="project" date-is="February 2017">
<p>UX Design, <em>EDIT</em></p>
<p>Designing a better user experience for Mercedes-Benz customers when droping their cars for servicing and reminding them when to do so. This project also had a Marketing component, developed by students from the Marketing course.</p>
</div>
<div class="project" date-is="November - December 2016">
<p>Mobile App, <em>Outfit - Tailored Agile Solutions</em> for <em>OutSystems</em></p>
<p>Working as a front-end developer on a mobile app, using OutSystems' Platform 10 for a Mexican delivery company.</p>
</div>
<div class="project" date-is="April 2016">
<p><a href="http://www.outfit.pt/OutBooster/">Campaign landing page</a>, <em>Outfit - Tailored Agile Solutions</em></p>
<p>Landing page to promote the solutions available at Outfit for future clients. This campaign was used to gather new clients by sending them a jar of sweets with a label directing them to the campaign page.</p>
</div>
<div class="project" date-is="March - April 2016">
<p><a href="http://www.encontroterapeutico.com.pt">Website</a>, <em>Encontro Terapêutico - Consultório de Psicologia</em></p>
<p>Website and blog, developed using Wordpress and the Bootstrap framework. The client needed a new website that could give her the possibility to edit the pages about the practice and also add blog posts. The client wanted a clean and simple website, cheerful but sober.</p>
</div>
<div class="project" date-is="December 2015">
<p><a href="http://outfit.pt/OutfitXmas/xmas.html">Xmas Postcards</a>, <em>Outfit - Tailored Agile Solutions</em></p>
<p>Working with the Marketing department, I developed interactive postcards for Outfit's clients, workers and friends. The postcard was initially empty then allowing the user to tailor the postcard to her taste by choosing one of the five available characters.</p>
</div>
<div class="project" date-is="October 2015">
<p><a href="http://outfit.pt/">Landing Page</a>, <em>Outfit - Tailored Agile Solutions</em></p>
<p>Landing page for Outfit - Tailored Agile Solutions. The website was developed with the help of the Bootstrap framework. Worked closely with the Marketing department.</p>
</div>
<div class="project" date-is="February 2015 - April 2015">
<p>Content Management System, <em>Associação Portuguesa de Seguradores</em></p>
<p>Content Managment System developed using OutSystems.</p>
</div>
<div class="project" date-is="October 2014">
<p>Content Management System, <em>Bacardi Martini Portugal</em></p>
<p>Content Managment System developed using OutSystems.</p>
</div>
</div>
</div>
</section>
</div>
<div id="footer">
<div class="container-fluid">
<footer class="row">
<p>2017 Joana Pereira</p>
<div>
<ul>
<li><a href="https://www.instagram.com/joanabpereira/"><img src="img/instagram-logo.svg"></a></li>
<li><a href="https://twitter.com/joanabpereira"><img src="img/twitter-logo-silhouette.svg"></a></li>
<li><a href="https://pt.linkedin.com/in/joanabpereira"><img src="img/linkedin-logo.svg"></a></li>
<li><a href="https://github.com/joanabpereira"><img src="img/github-logo.svg"></a></li>
</ul>
</div>
</footer>
</div>
</div>
<div id="instafeed"></div>
</body>
<script src="js/instafeed.min.js"></script>
<script>
const feed = new Instafeed({
clientId: '46fea468c9cd4dd1a165eec7e0dfdb8e'
});
feed.run();
</script>
</html>