-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
199 lines (190 loc) · 9.04 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 http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>I am Heba</title>
<meta name="description" content="This is my portfolio. I'm a web developer currently studying at Reykjavík Academy of Web Development. I have some years of experience working at web agencies witch has introduced me to various programming languages and platforms.">
<meta name="keywords" content="Heba, portfolio, developer, web developer">
<meta name="author" content="Heba Farestveit Úlfarsdóttir">
<link rel="stylesheet" href="./styles/css/normalize.css">
<link rel="stylesheet" href="./styles/css/styles.css">
</head>
<body>
<!-- Start of Header -->
<header>
<nav>
<ul>
<li><a class="line-hover" href="#about">About me</a></li>
<li><a class="line-hover" href="#skill">Skills</a></li>
<li><a class="line-hover" href="#projects">Projects</a></li>
<li><a class="line-hover" href="#education">Education</a></li>
</ul>
</nav>
</header>
<!-- End of Header -->
<!-- Start of Main -->
<main class="wrapper">
<!-- About Section -->
<section id="about" class="about">
<h1 class="header about__header">Hello</h1>
<h2 class="about__subheader">I am Heba</h2>
<div class="about__img">
<img src="./assets/heba_portrait.JPG?height=200&width=200&mode=crop" alt="Portrait of Heba">
</div>
<div class="about__info">
<p>I'm a web developer currently studying at Reykjavík Academy of Web Development. I have some years of experience working at web agencies witch has introduced me to various programming languages and platforms.</p>
<p>My interest is mostly in programming well-designed responsive websites and I consider myself to have a good eye for detail and do my best to achieve the right look and experience as the designer intended and also try to cultivate my meticulousness, orderliness and good finish. when it comes to writing code.</p>
<p>I still have a lot to learn and I am very interested in working with good and talented people in the workplace with a learning strategy.</p>
</div>
</section>
<!-- Skill Section -->
<section id="skill" class="skill">
<h2 class="subheader">My Skills</h2>
<div class="skill__item">
<h3>Html <span>90%</span></h3>
<div class="progress html">
<span class="percent"></span>
</div>
</div>
<div class="skill__item">
<h3>CSS <span>80%</span></h3>
<div class="progress css">
<span class="percent"></span>
</div>
</div>
<div class="skill__item">
<h3>JS <span>45%</span></h3>
<div class="progress js">
<span class="percent"></span>
</div>
</div>
<div class="skill__item">
<h3>React <span>20%</span></h3>
<div class="progress react">
<span class="percent"></span>
</div>
</div>
<div class="skill__item">
<h3>Figma <span>60%</span></h3>
<div class="progress figma">
<span class="percent"></span>
</div>
</div>
</section>
<!-- Projects Section -->
<section id="projects" class="projects">
<h2 class="subheader">My Projects</h2>
<div class="projects__item">
<div class="projects__item__info">
<h3><a href="https://www.veritas.is/samfelagsskyrsla">Veritas Social Report 2020</a> [ 2021 ]</h3>
<p>A website made from scratch by design at Vettvangur using Umbraco CMS.</p>
</div>
<div class="projects__item__img">
<img src="./assets/veritas-samfelagsskyrsla.png" alt="Screenshot of project Veritas Social Report 2020 webpage">
</div>
</div>
<div class="projects__item">
<div class="projects__item__info">
<h3><a href="https://www.veritas.is/">veritas.is</a> [ 2020 ]</h3>
<p>A website made from scratch by design at Vettvangur using Umbraco CMS.</p>
</div>
<div class="projects__item__img">
<img src="./assets/veritas.png" alt="Screenshot of project Veritas webpage">
</div>
</div>
<div class="projects__item">
<div class="projects__item__info">
<h3><a href="https://www.felagsbustadir.is/">felagsbustadir.is</a> [ 2020 ]</h3>
<p>A website made from scratch by design at Vettvangur using Umbraco CMS.</p>
</div>
<div class="projects__item__img">
<img src="./assets/felagsbustadir.png" alt="Screenshot of project Felagsbustadir webpage">
</div>
</div>
<div class="projects__item">
<div class="projects__item__info">
<h3><a href="https://www.kolibri.is/">kolibri.is</a> [ 2019 ]</h3>
<p>Website developed in collaboration with Kolibri.</p>
<p>Using Prismic as a headless cms and Next.js (React) with Typescript and Zeit Now for deploy.</p>
</div>
<div class="projects__item__img">
<img src="./assets/kolibri.png" alt="Screenshot of project Kolibri webpage">
</div>
</div>
<div class="projects__item">
<div class="projects__item__info">
<h3><a href="https://www.minilux.is/">minilux.is</a> [ 2018 ]</h3>
<p>Wix template web with tweaked design and connection to Braintree payment gateway.</p>
</div>
<div class="projects__item__img">
<img src="./assets/minilux.png" alt="Screenshot of project Minilux webpage">
</div>
</div>
</section>
<!-- Jobs Section -->
<section id="jobs" class="jobs">
<h2 class="subheader">Previous Jobs</h2>
<div>
<h3>Vettvangur ehf. - viðmótsforritun [ 2020-2021 ]</h3>
<ul>
<li>Set up new websites using Umbraco and worked from a design</li>
<li>Work on web improvements</li>
<li>HTML - CSS - JS - React - Umbraco - </li>
</ul>
</div>
<div>
<h3>Hugsmiðjan ehf. - Viðmótsforritun [ 2017-2019 ]</h3>
<ul>
<li>Worked in Eplica CMS system, developed at Hugsmiðjan.</li>
<li>Implemented web redesign</li>
<li>Improvements and additions to websites (appearance and functionality)</li>
<li>Work in customer service regarding the Eplica CMS system.</li>
</ul>
</div>
<div>
<h3>Skapalón ehf. - Viðmótsforritun [ 2015 - 2017 ]</h3>
<ul>
<li>Set up websites using Disill CMS system, developed at Skapalón.</li>
<li>Set up websites from scratch by design.</li>
<li>Implemented web redesign</li>
<li>Improvements and additions to websites (appearance and functionality)</li>
<li>Develop templates for websites in Disill CMS</li>
</ul>
</div>
</section>
<!-- Education Section -->
<section id="education" class="education">
<h2 class="subheader">My Education</h2>
<div>
<h3>Various online courses [ 2014-2020 ]</h3>
<p>Udemy, codeschool, codecademy etc.</p>
</div>
<div>
<h3>Hugsmiðjan Web Academy [ 2014 ]</h3>
<p>Basic web interface technology</p>
</div>
<div>
<h3>Reykjavik Multimedia School [ 2013 ]</h3>
<p>Html5, Css3 og JS</p>
</div>
<div>
<h3>Reykjavík Technical School [ 2012 ]</h3>
<p>Journeymans Degree in Tailoring</p>
</div>
<div>
<h3>Breiðholt Polytech [ 2005 ]</h3>
<p>Undergraduate Degree</p>
</div>
</section>
</main>
<!-- End of Main -->
<!-- Start of Footer -->
<footer>
<a class="line-hover" href="mailto:heba.farestveit@gmail.com">Email me</a>
<a class="line-hover" href="./assets/cv2021-heba.pdf" target="_blank">View printable portfolio</a>
</footer>
<!-- End of Footer -->
</body>
</html>