-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
223 lines (219 loc) · 11.5 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
211
212
213
214
215
216
217
218
219
220
221
222
223
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Arton Folio</title>
<meta name="description" content="This page is a CV and a project for my school examination 1 semester, the purpose of this site is to showcase my experience in practice and as well to use for future job possibilities.">
<link rel="stylesheet" href="css/main.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
<script src="js/main.js"></script>
</head>
<body>
<div id="wrapper">
<div id="mobile__menu">
<nav>
<ul>
<li><a href="#frontpage">Home</a></li>
<li><a href="#about__me">About me</a></li>
<li><a href="#cases">Cases</a></li>
<li><a href="#contact">Get in touch</a></li>
</ul>
</nav>
</div>
<nav id="frontpage">
<div id="brand">
<div id="logo"></div>
<p>FOLIO</p>
</div>
<ul id="desktop__menu">
<li><a href="#frontpage">Home</a></li>
<li><a href="#about__me">About me</a></li>
<li><a href="#cases">Cases</a></li>
<li><a href="#contact">Get in touch</a></li>
</ul>
</nav>
<header>
<div id="frontpage__content">
<div class="welcome__message">
<p class="over__title">Arton Agroni</p>
<h2 class="enormous__text">
Hello I’m Arton
and I am a
Web Designer
</h2>
</div>
<figure id="logo__me">
<img src="img/me.png" alt="An image of the designer">
</figure>
</div>
</header>
<div id="header--bg"></div>
<div id="header--pattern"></div>
<main>
<section id="about__me">
<div id="about__me__content">
<div class="introduction">
<p class="over__title">What do I do?</p>
<h2 class="introduction__text">I enjoy creating userfriendly
interactive experiences</h2>
</div>
<div class="my__story">
<p class="title">My story</p>
<p class="bread">For as long as I can remember I have always wanted to work with computers, as I grew older and I experimented with different artworks I finally ended up in the UX & UI world, I fell in love with how closely related your creation were to people and how simple apps could help people find each other. Ever since I have worked on improving my skills in this field and I continue to do so.</p>
</div>
<div class="my__reason">
<p class="title">Why am I doing this?</p>
<p class="bread">I live and breathe for Web Design, I find joy in making compelling and user-friendly designs. Everyday I have a new Idea of something I want to create and design.</p>
</div>
</div>
</section>
<section id="education">
<div class="education__width">
<div class="place">
<h3>Web Integrator</h3>
<p>3 years of coding education</p>
</div>
<div class="place place--edit">
<h3>Mediagraphicsdesigner</h3>
<p>5 years of graphic design education</p>
</div>
<div class="place">
<h3>Multimediadesigner</h3>
<p>2 years of UX & UI education</p>
</div>
</div>
<div class="education__bg">
</div>
</section>
<section id="experience">
<div class="experience__width">
<h2 class="enormous__text--white">
Research, Sketching and Design
</h2>
<div class="text">
<p class="bread--white">I have always delved deep into my projects, making sure that every part of the design is there to create meaning and have a purpose. It has always been important for me that my designs make sense and are easy for users to use. Where everything is backed up by research and countless of sketches.
</p>
<p class="bread--white">
To do exacly that I have acquired experiences in many programs, to help me solve those tasks that come along my way.
</p>
</div>
<div id="skills">
<img src="img/skills/Photoshop.svg" alt="Logo of the software Photoshop">
<img src="img/skills/Illustrator.svg" alt="Logo of the software Illustrator">
<img class="phone__skill" src="img/skills/XD.svg" alt="Logo of the software Adobe XD">
<img src="img/skills/InDesign.svg" alt="Logo of the software InDesign">
<img src="img/skills/Animate.svg" alt="Logo of the software Animate">
<img class="phone__skill" src="img/skills/AfterEffect.svg" alt="Logo of the software After Effect">
<img src="img/skills/Primere.svg" alt="Logo of the software Primere Pro">
</div>
</div>
<div id="big__logo"></div>
</section>
<section id="cases">
<div class="cases__width">
<h2>Cases</h2>
<div id="gallery">
<a href="https://xd.adobe.com/view/15f3146e-8048-4394-b064-5363bdff8e87-40a0/?fullscreen" target="notarget">
<figure class="image__container">
<div class="image__text">
<h3>Blackvoid.io</h3>
<p>Visit project</p>
</div>
<div class="image">
<img src="img/projects/blackvoid.jpg" alt="A blackhole, from the project blackvoid">
</div>
</figure>
</a>
<a href="https://xd.adobe.com/view/4d21e796-6661-428c-8bbf-ebc7fa589857-1872/?fullscreen" target="notarget">
<figure class="image__container">
<div class="image__text">
<h3>Thurø TuristGuide</h3>
<p>Visit project</p>
</div>
<div class="image">
<img src="img/projects/thuro.jpg" alt="Logo from the project Thurø turistguide">
</div>
</figure>
</a>
<a href="http://projects.athaxdesigns.com/snakmedditbarn/" target="notarget">
<figure class="image__container">
<div class="image__text">
<h3>Snak med dit barn</h3>
<p>Visit project</p>
</div>
<div class="image">
<img src="img/projects/snakmedditbarn.jpg" alt="A poster from the project snakmedditbarn">
</div>
</figure>
</a>
<a href="https://xd.adobe.com/view/13047423-e609-49aa-90b2-56ecba392033-4657/" target="notarget">
<figure class="image__container">
<div class="image__text">
<h3>Reforgedmaps</h3>
<p>Visit project</p>
</div>
<div class="image">
<img src="img/projects/reforgedmaps.jpg" alt="A image from the project reforgedmaps">
</div>
</figure>
</a>
<a href="https://xd.adobe.com/view/699c6422-96d5-4b82-a286-997175347cfd-3ccf/" target="notarget">
<figure class="image__container">
<div class="image__text">
<h3>Dankos Multiservice</h3>
<p>Visit project</p>
</div>
<div class="image">
<img src="img/projects/dankos.jpg" alt="The logo of the project Dankos">
</div>
</figure>
</a>
</div>
</div>
</section>
<section id="contact">
<div id="contact__width">
<h2 class="enormous__text">Let us talk</h2>
<form>
<div class="input__box">
<label for="email">Your email:</label>
<input id="email" type="email" placeholder="please type your email">
</div>
<div class="input__box">
<label for="subject">Your Subject:</label>
<input id="subject" type="text" placeholder="please type your subject">
</div>
<div class="input__box textarea">
<label for="textarea">Your Subject:</label>
<textarea id="textarea" cols="30" rows="10" placeholder="please type your message"></textarea>
</div>
<button>Send your mail</button>
<p>or send me a mail directly <a class="link" href="mailto:[email protected]">[email protected]</a></p>
</form>
</div>
</section>
</main>
<footer>
<div id="footer__width">
<div class="footer__about">
<h3>About this site</h3>
<p>This page is a CV and a project for my school examination 1 semester, the purpose of this site is to showcase my experience in practice and as well to use for future job possibilities.</p>
</div>
<div class="footer__nav">
<h3>Pages</h3>
<nav>
<ul>
<li><a href="#frontpage">Home</a></li>
<li><a href="#about__me">About me</a></li>
<li><a href="#cases">Cases</a></li>
<li><a href="#contact">Get in touch</a></li>
</ul>
</nav>
</div>
</div>
</footer>
</div>
</body>
</html>