-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
146 lines (119 loc) · 7.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Maíra Martins K - Front End Web Developer</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400i" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="./css/main.css">
<link rel="stylesheet" href="./css/grid.css">
</head>
<body>
<div class="container">
<header class="header">
<div class="logo">
<span class="logo--M">MK</span>
<span class="logo--K">Maira Martins K</span>
</div>
<div class="mobile__toggle">
<span></span>
<span></span>
<span></span>
</div>
<nav class="navbar">
<a href="#about" class="nav__link">About</a>
<a href="#projects" class="nav__link">Projects</a>
<a href="#skills" class="nav__link">Skills</a>
<a href="https://mairamartins.com/blog" class="nav__link" target="_blank" rel="noopener">Blog</a>
</nav>
</header>
<main>
<div class="image--header parallax hero">
<h3 class="hero__title">hey!</h3>
</div>
<section id="about" class="section section--colored">
<h2 class="section__title">About me.</h2>
<p>I'm Maíra, a web developer and photographer living in Barcelona.</p>
<p>I started my professional life in the cinema industry, as a video editor. Later I built my own photography
business, working mainly with weddings and corpo rate clients. After more than a decade in the creat ive
audiovisual industry, I decided to change careers and focus on another <stro ng>passion</strong>: <em>web
development</em>.</p>
<p>I am a self-taught developer, and a full-time programming student since October 2017. I always loved
building websites, since my teens, and I'm really proud to have been awarded a <em>Scholarship</em> for a
Udacity Front End Nanodegree, after competing with 200k students.</p>
<p>To learn more about what I do, check out my <a href="#projects" class="section__link link--inline">projects</a>
and my <a href="#skills" class="section__link link--inline">skills</a>.</p>
</section>
<section id="projects" class="section">
<h2 class="section__title">Projects.</h2>
<ul class="grid"></ul>
</section>
<div class="section">
<blockquote class="quote">
<p>I am inspired by innovation, and I create my best work when surrounded by a motivated team.</p>
</blockquote>
</div>
<div class="image--skills parallax"></div>
<section id="skills" class="section section--colored">
<h2 class="section__title">Skills & Experience.</h2>
<p>I have a strong focus on the visual aspects of web development. I have always been attracted to design and
am a lover of good typography coupled with a nice color palette. I usually present myself as a <em>front end
web developer</em>, and I am interested in all aspects of web development, from idea to delivery.</p>
<p>I believe a good website should be easy-to-use, beautiful and modern. I write semantic <strong>HTML</strong>
and love <strong>CSS</strong>. I like <strong>Sass</strong> and sometimes use <strong>Bootstrap</strong> or
<strong>Semantic UI</strong> -- although I often prefer to write my styles from scratch <em>(Native CSS
grid?! Yay!)</em>.</p>
<p>I enjoy working with <strong>React.js</strong> and am planning on learning Vue.js in the near future. I am
also quite interested in learning more about the JAM Stack, specially Gatsby and GraphQL.</p>
<p>On the backend side of things, I'm familiar with Node.js, Express and MongoDB with Mongoose. Due to my
background, I am also highly skilled in image and video editing with <strong>Photoshop</strong>, Lightroom
and Premiere.</p>
<a href="https://www.linkedin.com/in/mairamartinsk/" target="_blank" rel="noopener" class="section__link">See
my CV on Linkedin</a>
<p>I have a degree in Communications - Radio & TV, and a specialization in video editing for cinema and TV. I
received a full Google Scholarship for a Udacity Front End Nanodegree, after being one of the top 10%
students on <em>Google's Developer Challenge 2017/2018</em>. I completed my Nanodegree in August 2018.</p>
<a href="https://github.com/mairamartinsk" target="_blank" rel="noopener" class="section__link">See my code on
Github</a>
</section>
<div class="section">
<blockquote class="quote">
<p>I have lived in five countries and speak five languages.</p>
<p>I love: computers, comics, my dog, photography, reading books, my husband, watching movies and a good
wine.</p>
</blockquote>
</div>
<div class="gallery">
<img src="./img/01-sm.jpg" class="gallery__item vertical" alt="Black and white portrait of Maíra Martins">
<img src="./img/02-sm.jpg" class="gallery__item" alt="Closeup portrait of Maíra Martins">
<img src="./img/03-sm.jpg" class="gallery__item" alt="Flock of seagulls flying">
<img src="./img/04-sm.jpg" class="gallery__item vertical" alt="Portrait of Maíra Martins and her golden retriever dog">
<img src="./img/05-sm.jpg" class="gallery__item" alt="Portrait of woman against stormy beach">
<img src="./img/06-sm.jpg" class="gallery__item" alt="Two feet wearing yellow flip-flops standing on green Moroccan tiles">
<img src="./img/07-sm.jpg" class="gallery__item" alt="Dog walking down a path in a wild flower field during sunrise">
<img src="./img/08-sm.jpg" class="gallery__item" alt="A river in the middle of a forest in Norway">
<img src="./img/09-sm.jpg" class="gallery__item" alt="Fjord rocks extending into ocean">
<img src="./img/10-sm.jpg" class="gallery__item" alt="Black and white image of wild flower against sunlight">
</div>
</main>
<footer class="footer">
<p class="footer__text">Code and love by Maíra Martins K.</p>
<div class="footer__social">
<a href="https://github.com/mairamartinsk" target="_blank" rel="noopener" class="social__link"><i class="fa fa-github"
title="Github" aria-hidden></i></a>
<a href="https://twitter.com/mairamartinsk" target="_blank" rel="noopener" class="social__link"><i class="fa fa-twitter"
title="Twitter" aria-hidden></i></a>
<a href="https://www.linkedin.com/in/mairamartinsk/" target="_blank" rel="noopener" class="social__link"><i
class="fa fa-linkedin" title="Linkedin" aria-hidden></i></a>
<a href="https://instagram.com/mairamartinsk" target="_blank" rel="noopener" class="social__link"><i class="fa fa-instagram"
title="Instagram" aria-hidden></i></a>
</div>
</footer>
</div>
<script src="./js/app.js"></script>
</body>
</html>