-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
320 lines (315 loc) · 28.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
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
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Portfolio</title>
<meta name="title" content="Моё портфолио">
<meta name="description" content="Здесь вы сможете ознакомиться с моими работами и узнать больше обо мне">
<meta property="og:type" content="website">
<meta property="og:url" content="https://metatags.io/">
<meta property="og:title" content="Мое портфолио">
<meta property="og:description" content="Здесь вы сможете ознакомиться с моими работами и узнать больше обо мне">
<meta property="og:image" content="https://metatags.io/assets/meta-tags-16a33a6a8531e519cc0936fbba0ad904e52d35f34a46c97a2c9f6f7dd7d336f2.png">
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://metatags.io/">
<meta property="twitter:title" content="Мое портфолио">
<meta property="twitter:description" content="Здесь вы сможете ознакомиться с моими работами и узнать больше обо мне">
<meta property="twitter:image" content="https://metatags.io/assets/meta-tags-16a33a6a8531e519cc0936fbba0ad904e52d35f34a46c97a2c9f6f7dd7d336f2.png">
<link rel="apple-touch-icon" sizes="57x57" href="icons/favicon//apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="icons/favicon//apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="icons/favicon//apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="icons/favicon//apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="icons/favicon//apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="icons/favicon//apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="icons/favicon//apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="icons/favicon//apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="icons/favicon//apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="icons/favicon//android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon//favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="icons/favicon//favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon//favicon-16x16.png">
<link rel="manifest" href="icons/favicon//manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="icons/favicon//ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<link rel="stylesheet" href="css/style.min.css">
</head>
<body id="element">
<div class="menu">
<div class="menu__block">
<div class="menu__close"><img src="icons/close.svg" alt="close" width="30" height="30"></div>
<nav>
<ul class="menu__list">
<li class="menu__link"><a href="#about" class="dosis">about me</a></li>
<li class="menu__link"><a href="#resume" class="dosis">experience</a></li>
<li class="menu__link"><a href="#skills" class="dosis">skills</a></li>
<li class="menu__link"><a href="#portfolio" class="dosis">portfolio</a></li>
<li class="menu__link"><a href="#contacts" class="dosis">contacts</a></li>
</ul>
</nav>
</div>
<div class="menu__overlay"></div>
</div>
<header class="promo" id="up">
<div class="hamburger"><span></span><span class="hamburger_long"></span><span></span></div>
<div class="container">
<ul class="promo__technologies">
<li class="promo__item"><img src="./img/technologies/html.png" alt="html"></li>
<li class="promo__item"><img src="./img/technologies/css.png" alt="css"></li>
<li class="promo__item"><img src="./img/technologies/javascript.png" alt="javascript"></li>
<li class="promo__item"><img src="./img/technologies/sass.png" alt="sass"></li>
<li class="promo__item"><img src="./img/technologies/git.png" alt="git"></li>
<li class="promo__item"><img src="./img/technologies/github.png" alt="github"></li>
<li class="promo__item"><img src="./img/technologies/react.png" alt="react"></li>
</ul>
<div class="title title_fz16 promo__subtitle">Меня зовут Никита Шмидт</div>
<h1 class="title title_fz48 promo__title dosis">Hi, i Front-End Developer</h1>
<div class="promo__btns"><a href="#about" class="promo__link btn_promo dosis">About me</a><a href="#portfolio" class="promo__link btn_promo dosis">Portfolio</a><a href="#contacts" class="promo__link btn_promo dosis">Contacts</a></div>
</div>
</header>
<section class="about" id="about">
<div class="container">
<div class="about__wrapper">
<div class="about__descr">
<h2 class="title title_fz16 about__title">Обо мне</h2>
<h3 class="title title_fz36 about__subtitle">Меня зовут Никита</h3>
<div class="divider about__divider"></div>
<ul class="about__items">
<li class="about__item">► Спокойный, не конфликтный. </li>
<li class="about__item">► Усидчив.</li>
<li class="about__item">► В поисках дружелюбного коллектива, в котором будет возможность развиваться не только как разботчик, но и по части soft-skills.</li>
<li class="about__item">► Интересуюсь мобильными девайсами, сборками компьютеров.</li>
<li class="about__item">► В поисках только удаленной работы.</li>
<li class="about__item">► Уровень английского - начальный.</li>
<li class="about__item">► В свободное время люблю подтягиваться на турнике. </li>
<li class="about__item">► В планах вырости до позиции Senior FrontEnd Developer и приобрести хорошую экспертизу в данной области. </li>
</ul>
</div>
</div>
</div>
</section>
<section class="resume" id="resume">
<div class="container">
<h2 class="title title_fz16 title__section-title resume__title">Опыт</h2>
<h3 class="title title_fz36 title__section-subtitle resume__subtitle">Чем я буду полезен</h3>
<div class="divider resume__divider"></div>
<div class="resume__wrapper">
<div class="resume__column">
<h4 class="title title_fz20 resume__column-title">Образование & Курсы</h4>
<ul>
<li>
<div class="resume__item">
<div class="resume__item-head">
<div class="resume__item-icon"><img src="icons/experience/university.svg" alt="university" width="21" height="25"></div>
<h5 class="title title_fz14">Омский Авиационный колледж</h5>
<div class="resume__item-location">Технология машиностроения | Омск (2017-2022)</div>
</div>
<p class="resume__item-body">Закончил обучение в Авиационном колледже, специальность - «Технология машиностроения».</p>
</div>
</li>
<li>
<div class="resume__item">
<div class="resume__item-head">
<div class="resume__item-icon"><img src="icons/experience/courses.svg" alt="courses" width="25" height="24"></div>
<h5 class="title title_fz14">Udemy</h5>
<a href='https://www.udemy.com/course/webdeveloper' target="_blank" class="resume__item-location">Курс по Web-разработке от Ивана Петриченко</a>
</div>
<p class="resume__item-body">Данный курс помог мне более лучше понять html и css, до курса только слышал об адаптивной верстке, но после курса, я уже достаточно уверенно мог сделать для своего веб-сайта мобильную версию, познакомился с препроцессорами
- SASS, SCSS, а также настроил gulp и в дальнейшем его применял для своих проектов.
</p>
</div>
<div class="resume__item">
<div class="resume__item-head">
<div class="resume__item-icon"><img src="icons/experience/courses.svg" alt="courses" width="25" height="24"></div>
<h5 class="title title_fz14">Udemy</h5>
<a href='https://www.udemy.com/course/javascript_full/' target="_blank" class="resume__item-location">Курс по JavaScript & React.js от Ивана Петриченко</a>
</div>
<p class="resume__item-body">
Освоил базу по JavaScrpipt, также получил первый опыт работы с React, Redux, Redux-thunk.
</p>
</div>
</li>
</ul>
</div>
<div class="resume__column">
<h4 class="title title_fz20 resume__column-title">Опыт работы</h4>
<ul>
<li>
<div class="resume__item">
<div class="resume__item-head">
<div class="resume__item-icon"><img src="icons/experience/developer.svg" alt="developer" width="25" height="25"></div>
<h5 class="title title_fz14"> Front-End Developer [ part time ] </h5>
<div class="resume__item-location"> <a href="https://framework.team/" target="_blank" >FrameWork Team</a> | [ Декабрь 2020 - Январь 2023 ] </div>
</div>
<p class="resume__item-body">
В компании занимался версткой лендингов, 404 страниц, различными модальными окнами, выпадающими списками и работой с анимациями. Писал скрипты по реализации слайдеров, табов, модальных окон, форм, выпадающих меню.
Версткой UI-компонентов под React, также тех.поддержкой сайтов на React, доработкой, а также разработкой нового функционала.
</p>
</div>
</li>
<li>
<div class="resume__item">
<div class="resume__item-head">
<div class="resume__item-icon"><img src="icons/experience/designer.svg" alt="designer" width="25" height="25"></div>
<h5 class="title title_fz14">Front-End Developer</h5>
<div class="resume__item-location"> <a href="https://fermastudio.com/" target="_blank">Ferma</a> | Май 2023 - текущее время </div>
</div>
<p class="resume__item-body">
Занимаюсь в компании разработкой сайтов, поддержкой, рефакторингом.
</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="skills" id="skills">
<div class="container">
<h2 class="title title_fz16 title__section-title skills__title">Навыки</h2>
<h3 class="title title_fz36 title__section-subtitle skills__subtitle">Что я использую в работе</h3>
<div class="divider skills__divider"></div>
<div class="skills__items">
<div class="skills__item">
<div class="skills__item-img"><img src="icons/skills/html5.svg" alt="html5" width="46" height="65"></div>
<div class="skills__item-subtitle">HTML5</div>
<p class="skills__item-descr">Именно он создает каркас сайта или приложения, а пятая версия позволит мне создавать более SEO-оптимизированную структуру продукта.</p>
</div>
<div class="skills__item">
<div class="skills__item-img"><img src="icons/skills/css3.svg" alt="css3" width="46" height="65"></div>
<div class="skills__item-subtitle">CSS3</div>
<p class="skills__item-descr">Этот язык стилей позволяет мне создавать внешний вид сайта или приложения. Все ограничивается только фантазией дизайнера!</p>
</div>
<div class="skills__item">
<div class="skills__item-img"><img src="icons/skills/js.svg" alt="JavaScript" width="65" height="65"></div>
<div class="skills__item-subtitle">JavaScript</div>
<p class="skills__item-descr"> Продвинутое владение JavaScript - Scope, Closure, this, promises, event loop, prototype. </p>
</div>
<div class="skills__item">
<div class="skills__item-img"><img src="icons/skills/react.webp" alt="react" width="65" height="65"></div>
<div class="skills__item-subtitle">React.js</div>
<p class="skills__item-descr"> Среднее владение react.js - hooks, virtual dom, fiber, методы жизненного цикла. </p>
</div>
<div class="skills__item">
<div class="skills__item-img"><img src="icons/skills/typescript.png" alt="typescript" width="65" height="65"></div>
<div class="skills__item-subtitle">Typescript</div>
<p class="skills__item-descr"> Базовое владение языком - interface, enum, generics, tuple. </p>
</div>
<div class="skills__item">
<div class="skills__item-img"><img src="icons/skills/redux-logo-landscape.png" alt="redux" width="68" height="65"></div>
<div class="skills__item-subtitle">Redux / Redux-thunk</div>
<p class="skills__item-descr"> Есть небольшой опыт работы с этим стейт менеджером, для ассинхронных экшенов использовал redux-thunk. </p>
</div>
<div class="skills__item">
<div class="skills__item-img"><img src="icons/skills/axios.png" alt="axios" width="65" height="65"></div>
<div class="skills__item-subtitle">Axios</div>
<p class="skills__item-descr"> Для запросов использую библиотеку axios. </p>
</div>
<div class="skills__item">
<div class="skills__item-img"><img src="icons/skills/formik.png" alt="formik" width="75" height="65"></div>
<div class="skills__item-subtitle">Formik</div>
<p class="skills__item-descr"> Был небольшой опыт использование Formik. </p>
</div>
<div class="skills__item">
<div class="skills__item-img"><img src="icons/skills/react-hook-form.png" alt="react-hook-form" width="65" height="65"></div>
<div class="skills__item-subtitle">React-hook-form</div>
<p class="skills__item-descr"> Также есть небольшой опыт работы с React-Hook-Form, очень удобно использовать, когда у тебя свои ui-компоненты. </p>
</div>
<div class="skills__item">
<div class="skills__item-img"><img src="icons/skills/storybook.png" alt="storybook" width="65" height="65"></div>
<div class="skills__item-subtitle">Storybook</div>
<p class="skills__item-descr"> Верстал ui-компоненты под storybook. </p>
</div>
<div class="skills__item">
<div class="skills__item-img"><img src="icons/skills/git.png" alt="git" width="200" height="65"></div>
<div class="skills__item-subtitle">GIT</div>
<p class="skills__item-descr">Имеется начальные знания. подключение к удаленному репозиторию, push, commit, клонирование репозитория</p>
</div>
<div class="skills__item">
<div class="skills__item-img"><img src="icons/skills/sass-logo1.png" alt="sass/scss" width="80" height="60"></div>
<div class="skills__item-subtitle">SASS / SCSS</div>
<p class="skills__item-descr">Эти препроцессоры позволяют писать код намного быстрей, создавая готовые компоненты и в дальнейшем их переиспользовать, а также удобно разделять на отдельные файлы.</p>
</div>
<div class="skills__item">
<div class="skills__item-img"><img src="icons/skills/avocode.png" alt="avocode" width="60" height="60"><img src="icons/skills/figma.png" alt="figma" width="60" height="45"></div>
<div class="skills__item-subtitle">Avocode / Figma</div>
<p class="skills__item-descr">Эти два приложения помогают перенесосить решения дизайнера в браузер, а также быстро и удобно "вытаскивать" изображения из макетов.</p>
</div>
<div class="skills__item">
<div class="skills__item-img"><img src="icons/skills/gulp.jpg" alt="gulp" width="130" height="65"></div>
<div class="skills__item-subtitle">Gulp</div>
<p class="skills__item-descr">Данный сборщик задач помогает компилировать SASS / SCSS в обычный CSS, сжимать код, а также собирать весь проект в одном месте.</p>
</div>
<div class="skills__item">
<div class="skills__item-img"><img src="icons/skills/i.webp" alt="devtools" width="130" height="65"></div>
<div class="skills__item-subtitle">Google DevTools</div>
<p class="skills__item-descr">Активно пользуюсь консолью разработчика, очень сильно помогает при разработке, быстро поменять к примеру, стили, не заходя в редактор кода.</p>
</div>
</div>
</div>
</section>
<section class="portfolio" id="portfolio">
<div class="container">
<h2 class="title title_fz16 title__section-title">Портфолио</h2>
<h3 class="title title_fz36 title__section-subtitle">Мои работы</h3>
<div class="divider"></div>
<div class="portfolio__attention">Небольшое описание моих проектов:<br>
<ul class="portfolio__attention-items">
<li class="portfolio__attention-item">► Основной сайт портфолио выполнялся на курсе, в последствии был мной изменен.</li>
<li class="portoflio__attention-item">► <a href="portfolio" target="_blank">Portfolio</a> - написан в самом начале моего пути по ролику с youtube, после всех моих проектов был немного доделан.</li>
<li class="portoflio__attention-item">► <a href="uber" target="_blank">Uber</a> - разработан на курсе с помощью bootstrap.</li>
<li class="portoflio__attention-item">► <a href="pulse" target="_blank">Pulse</a> - дестктопная версия была написана на курсе, а мобильной версией занимался уже сам.</li>
<li class="portoflio__attention-item">► <a href="globalOpt" target="_blank">Global OPT</a><a href="prengi" target="_blank">Prengi</a><a href="homeOwd" target="_blank">Home OWD</a><a href="cuda" target="_blank">Cuda</a><a href="lampadari" target="_blank">Lampadari</a> <a href="purrweb" target="_blank">Purrweb Test</a> <a href="ferma" target="_blank">Ferma Test</a> <a href="https://main--resilient-axolotl-f659aa.netlify.app/" target="_blank">AppEvent Test</a> <a href="https://extraordinary-kitten-cb6fcc.netlify.app/" target="_blank">Only Company Test</a> <br/> - проекты
полностью сделанные мной.</li>
<li class="portoflio__attention-item">► <a href="https://portfoliotodoapp.netlify.app/" target="_blank">Todo App</a> - Самый интересный мой проект, базу взял (~10% проекта) Было добавлено большое кол-во функционала - добавление, удаление задач, добавление комментариев, смена фона задачи,
добавление в корзину и т.д. Все данные добавляются в localstorage. </li>
<li class="portoflio__attention-item">► <a href="https://friendly-gaufre-ab4acc.netlify.app/" target="_blank"> React JS</a> - небольшие проекты сделанные с помощью React JS. </li>
<li class="portoflio__attention-item">► <a href="https://tranquil-hotteok-e76864.netlify.app/" target="_blank"> Gallery App</a> - проект сделанный на React JS + Fetch API, state был организован с помощью Context API, также была реализованна логика по смене темы на сайте, пагинация,
фильтрация по имени, авторам, локации и по дате создания картины. </li>
<li class="portoflio__attention-item">► <a href="https://silly-empanada-585c24.netlify.app/" target="_blank"> Art Galley </a> - похожий проект на прошлый, написан на React + Typescript, использовались такие библиотеки, как - formik, ( в ближайшее время будет react-hook-form
), для валидации yup, redux, react router dom, swiper, storybook, sass. Для форматирования был eslint и prettier. </li>
</ul>
</div>
<div class="portfolio__wrapper"><a href="portfolio" title="portfolio" class="portfolio__item"><img src="img/works/portfolio.jpg" alt="portfolio" width="280" height="280"></a><a href="uber" class="portfolio__item" title="uber"><img src="img/works/uber.jpg" alt="uber" width="280" height="280"></a>
<a
href="pulse" class="portfolio__item" title="pulse"><img src="img/works/pulse.jpg" alt="pulse" width="280" height="280"></a><a href="globalOpt" class="portfolio__item" title="global opt"><img src="img/works/airplane.png" alt="global opt" width="280" height="280"></a><a href="prengi" class="portfolio__item"
title="prengi"><img src="img/works/bg.png" alt="prengi" title="prengi" width="280" height="280"></a><a href="homeOwd" class="portfolio__item"><img src="img/works/home.png" alt="home owd" title="home owd" width="280" height="280"></a>
<a
href="cuda" class="portfolio__item" title="cuda"><img src="img/works/cuda.png" alt="cuda" width="280" height="280"></a><a href="lampadari" class="portfolio__item"><img src="img/works/lampadari.png" alt="lampadari" width="280" height="280"></a></div>
</div>
</section>
<section class="contacts" id="contacts">
<div class="container">
<div class="contacts__wrapper">
<div class="contacts__descr">
<h2 class="title title_fz16 contacts__title">Контакты</h2>
<h3 class="title title_fz36 contacts__subtitle">Свяжитесь со мной</h3>
<div class="divider"></div><img class="contacts__descr_img" src="img/myphoto.jpg" width="200" height="241" alt="my photo">
<div class="title title_fz14 contacts__text">Любым удобным для вас способом:</div>
<div class="contacts__social"><a href="https://t.me/nikitashmidt" class="contacts__link" target="_blank"><img src="icons/contacts/telegram.png" alt="telegram" width="30" height="30"></a><a href="https://www.linkedin.com/in/nikita-shmidt-9784b4204/" class="contacts__link"
target="_blank"><img src="icons/contacts/linkedin.png" alt="linkedin" width="30" height="30"></a><a href="https://github.com/nikitaShmidt" class="contacts__link" target="_blank"><img src="icons/contacts/github.png" alt="github" width="30" height="30"></a>
<!-- <a
href="tel:+79088039053" class="contacts__link"><img src="icons/contacts/telephone.png" alt="telephone" width="30" height="30"></a> -->
</div>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="footer__wrapper">
<hr class="footer__hr">
<div class="footer__wrapper-thanks">Thank you.</div>
<hr class="footer__hr">
<div class="footer__wrapper-geolocation"><img src="icons/geolocation.png" alt="geolocation" width="50" height="50">
<div class="footer__wrapper-descr dosis">Russia, Omsk</div>
</div>
</div>
</footer><a href="#up" class="pageup"><img src="icons/up.svg" alt="up"></a>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/script.js"></script>
<script src="js/animation.js"></script>
</body>
</html>