-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
282 lines (269 loc) · 9.39 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
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Portfolio</title>
<script
src="https://kit.fontawesome.com/b84dc9025b.js"
crossorigin="anonymous"
></script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Oxygen+Mono&family=Oxygen:wght@300;400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./css/style.css" />
<link rel="stylesheet" href="./css/animation.css" />
</head>
<body>
<!-- navigation bar -->
<nav class="new-nav">
<ul>
<li>
<h1>
<a href="index.html"
><span class="fa-solid fa-layer-group"></span> Kiarash Sajadian</a
>
</h1>
</li>
<li><a href="#projects">Projects</a></li>
<li><a href="">About</a></li>
<li><a href="#contact">Contact</a></li>
<li>
<a
href="https://www.linkedin.com/in/kiarash-sajadian-front-end-developer/"
><span class="fa-brands fa-linkedin" aria-hidden="true"></span
><span class="sr-only">Linkedin</span></a
>
</li>
<li>
<a href="https://github.com/KiarashSajadian"
><span class="fa-brands fa-square-github" aria-hidden="true"></span
><span class="sr-only">Github</span></a
>
</li>
<li><a href="" class="cta-button">Resume</a></li>
</ul>
</nav>
<!-- hero section -->
<section id="intro">
<p class="name fadeInUp">
Hi, my name is<span class="fadeInUp"> Kiarash Sajadian.</span>
</p>
<h2 class="fadeInUp">I am a Front-end Developer</h2>
<p class="fadeInUp">
Currently, I'm working as a freelancer web designer, specializing in
Front-end development and no-code technologies such as Webflow and
Wordpress.
</p>
<p class="fadeInUp">
This is my portfolio website at the moment
<a href="https://lumanastudio.com">LumanaStudio.com</a>
</p>
</section>
<!-- end of hero section -->
<!-- my skills section -->
<div class="my-skills-section">
<section id="my-skills">
<h2 class="fadeInUp">My Skills</h2>
<div class="grid-wrapper">
<img
src="./img/Profile-Pic-saveForWeb.jpg"
class="fadeInUp"
alt="profile picture of Kiarash Sajadian | The front-end developer"
/>
<div class="bio-text-description">
<div class="skills">
<ul class="fadeInUp">
<li>JavasScript</li>
<li>React</li>
<li>Webflow</li>
<li>Wordpress</li>
<li>HTML</li>
<li>CSS</li>
<li>Figma</li>
</ul>
<ul class="fadeInUp">
<li>Photoshop</li>
<li>Illustrator</li>
<li>Premiere Pro</li>
<li>After Effects</li>
<li>InDesign</li>
</ul>
</div>
<div class="bio-box">
<h3 class="fadeInUp">I love building stuff</h3>
<p class="bio-paragraph-box fadeInUp">
I started doing stuff with computers when I was 8 years-old.
Back then I started with playing around in Photoshop 6 and Since
then I have been tinkering with all sorts of technologies that
in some way or another led me to work on music, photography,
sound engineering, graphics, video production, 2d motion design
and 3D design.
</p>
<p>
<a href="./about.html" class="fadeInUp">Keep reading my bio</a>
</p>
</div>
</div>
</div>
</section>
</div>
<!-- end of my skills section -->
<!-- projects section -->
<!-- project 1 -->
<div class="gradient-2"></div>
<div class="projects-section">
<section id="projects">
<h2>Latest Projects</h2>
<article>
<div class="text">
<h4>Web design | Branding</h4>
<h3>Lumana Studio</h3>
<p class="project-paragraph-box">
Lumana Studio is my personal portfolio website, designed in Figma
and developed with Elementor in WordPress, incorporating extensive
custom JavaScript, CSS, and HTML coding. The custom code enabled
dynamic animations, and a interactive features enhancing the
overall user experience.<br /><br />
<a href="https://lumanastudio.com">Link to this project</a>
</p>
<h4>Technologies used include:</h4>
<ul>
<li>Wordpress</li>
<li>JavasScript</li>
<li>CSS</li>
<li>HTML</li>
</ul>
</div>
<img
src="./img/lumana-cover-video.gif"
alt="gif video of lumana studio website hero section"
/>
</article>
</section>
</div>
<!-- end of project 1 -->
<div class="gradient"></div>
<!-- project 2 -->
<div class="projects-section">
<section id="projects">
<article class="reverse">
<div class="text">
<h4>Web design</h4>
<h3>Ali Sabouki Portfolio</h3>
<p class="project-paragraph-box">
The Ali Sabouki portfolio website was designed in Figma and built
with Elementor in WordPress, incorporating custom JavaScript, CSS,
and HTML. The main focus was on showcasing his artworks in a
perfect and visually striking way and I could craft a clean,
modern design that effectively showcases his work.<br /><br />
<a href="https://alisabouki.com">Link to this project</a>
</p>
<h4>Technologies used include:</h4>
<ul>
<li>Wordpress</li>
<li>JavasScript</li>
<li>CSS</li>
<li>HTML</li>
</ul>
</div>
<img
src="./img/hero-section-aliSabouki.gif"
alt="gif video of lumana studio website hero section"
/>
</article>
</section>
</div>
<!-- end of project 2 -->
<div class="gradient-2"></div>
<!-- project 3 -->
<div class="projects-section">
<section id="projects">
<article>
<div class="text">
<h4>Web design | SEO</h4>
<h3>Finan formworks</h3>
<p class="project-paragraph-box">
The Ali Sabouki portfolio website was designed in Figma and built
with Elementor in WordPress, incorporating custom JavaScript, CSS,
and HTML. The main focus was on showcasing his artworks in a
perfect and visually striking way and I could craft a clean,
modern design that effectively showcases his work.<br /><br />
<a href="https://www.finanformworks.com/">Link to this project</a>
</p>
<h4>Technologies used include:</h4>
<ul>
<li>Wordpress</li>
<li>JavasScript</li>
<li>CSS</li>
<li>HTML</li>
</ul>
</div>
<img
src="./img/finanFormWorks.gif"
alt="Screenshot of the Wall of Wonder."
/>
</article>
</section>
</div>
<!-- end of project 3 -->
<!-- end of project section -->
<!-- contact section -->
<div class="gradient"></div>
<div class="contact-section">
<section id="contact">
<h2>Contact Me</h2>
<p>
I'm always interested in hearing about new job opportunities,
freelance projects and design collabs.
</p>
<p>
<a href="mailto:[email protected]" class="cta-button"
>Email me</a
>
</p>
</section>
</div>
<!-- end of contact section -->
<div class="gradient-2"></div>
<!-- footer -->
<footer>
<h2>Kiarash Sajadian | Front-end Developer</h2>
<ul>
<li>
<a
href="https://www.linkedin.com/in/kiarash-sajadian-front-end-developer/"
><span class="fa-brands fa-linkedin" aria-hidden="true"></span
><span class="sr-only">Linkedin</span></a
>
</li>
<li>
<a href="https://github.com/KiarashSajadian"
><span class="fa-brands fa-square-github" aria-hidden="true"></span
><span class="sr-only">Github</span></a
>
</li>
<li>
<a href="mailto:[email protected]"
><span class="fa-solid fa-envelope" aria-hidden="true"></span
><span class="sr-only">Github</span></a
>
</li>
<li>
<a href="https://www.instagram.com/_burningkid/"
><span
class="fa-brands fa-square-instagram"
aria-hidden="true"
></span
><span class="sr-only">Instagram</span></a
>
</li>
</ul>
<p><small>© 2024 Kiarash Sajadian. All rights reserved.</small></p>
</footer>
<!-- end of footer -->
</body>
</html>