-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
288 lines (285 loc) · 22 KB
/
index.html
File metadata and controls
288 lines (285 loc) · 22 KB
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
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Дизайнер Вадик Матвеев</title>
<meta charset="UTF-8" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="MobileOptimized" content="320" />
<meta name="HandheldFriendly" content="true" />
<meta name="description" content="Сайт-портфолио дизайнера Вадика Матвеева. Разработка дизайна сайтов, приложений, логотипов, айдентики и фирменных стилей" />
<meta name="keywords" content="apps, мобильные приложения, mobile, iOS, Android, Windows Phone, iPhone разработка, разработка мобильных приложений, верстка сайтов, html, css, веб-дизайн, UI/UX, web design" />
<link rel="author" href="humans.txt" />
<link href="http://fonts.googleapis.com/css?family=Roboto:100,300,400,700,400italic&subset=cyrillic-ext" rel="stylesheet" type="text/css" />
<link href="css/main.css" rel="stylesheet" />
<!-- ----------- FAVICON --------------->
<link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-touch-icon.png" />
<link rel="icon" type="image/png" href="/img/favicon/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="/img/favicon/favicon-16x16.png" sizes="16x16" />
<link rel="manifest" href="/img/favicon/manifest.json" />
<link rel="mask-icon" href="/img/favicon/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#262626" />
<meta name="msapplication-TileImage" content="/img/favicon/mstile-144x144.png" />
<meta name="theme-color" content="#ffffff" />
<meta property="og:image" content="img/my-face.jpg" /> </head>
<body class="main">
<section class="main-header">
<div class="hidden-xs-down main-header__bg-anim-container">
<div class="vm-logo-animation"> <object id="vm-logo" type="image/svg+xml" data="img/vm-logo__bg-anim.svg"></object> </div>
</div>
<div class="main-header__container">
<div class="row">
<div class="main-header__logo col-xs-10 col-md-3 col-md-offset-0"> <svg version="1.1" id="main-logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" class="logo" width="212px" height="40.9166679px" viewBox="0 0 212 40.9166679" enable-background="new 0 0 212 40.9166679"
fill="#fff" xml:space="preserve">
<g>
<polygon points="21.8790302,40 41.9587288,40 62.0385284,1 41.9587288,1 "/>
<polygon points="62.0385284,40 82.1183319,40 102.1983261,1 82.1183319,1 "/>
<g>
<polygon points="104.0096283,4.3382306 93.9697266,23.9472656 102.1983261,40 122.2782288,40 "/>
</g>
<g>
<polygon points="20.06213,36.85466 30.1019306,17.1427612 21.8736305,0.987061 1.7936296,0.987061 "/>
</g>
<polygon points="60.2272301,36.85466 70.2670288,17.1428604 63.850029,4.543961 53.8102303,24.2555618 "/>
</g>
<g>
<path d="M178.9450226,17.8967991l4.2272034,6.3306007h-3.3507996l-2.7657013-4.4603996l-1.1299896,1.0515995
v3.4088001h-2.7077026V10.3577995h2.7077026v7.4215012l3.5449982-3.6035004h3.2532959L178.9450226,17.8967991z"/>
<path d="M136.4494324,10.3577995l3.1166992,9.7391014l3.155899-9.7391014h3.1557007l-4.6165009,13.8696003
h-3.4477081l-4.5395966-13.8696003H136.4494324z"/>
<path d="M151.8197327,24.2273998c-0.1363983-0.3698006-0.1555023-0.5268002-0.1943054-0.9738998
c-0.8572998,0.8565006-2.0453033,1.2658005-3.2532043,1.2658005c-2.2205963,0-3.5848999-1.1485996-3.5848999-3.0391006
c0-2.6299992,2.3967133-2.941,4.383606-3.1947002c1.7922974-0.2332001,2.4544983-0.3887005,2.4544983-1.2069988
c0-0.9153004-0.5845947-1.3451004-1.8121033-1.3451004c-1.2658997,0-1.7917938,0.3901005-1.9868927,1.539999h-2.5908966
c0.156189-2.2412996,1.7536011-3.3894997,4.656189-3.3894997c2.0256042,0,4.3827057,0.4663,4.3827057,3.2721004v4.3449001
c0,0.9148998-0.019104,1.8698006,0.3506012,2.7264996H151.8197327z M149.6579285,19.8637009
c-0.9550018,0.1552982-2.0265045,0.2727985-2.0265045,1.5005989c0,0.8374996,0.5656128,1.343401,1.5196075,1.343401
c1.441803,0,2.4546967-0.7978001,2.4546967-2.2398014v-1.1308002
C150.9632263,19.7082005,150.3587341,19.7464008,149.6579285,19.8637009z"/>
<path d="M163.3710327,24.2273998v-1.286499c-0.6623077,1.0325985-1.6558075,1.5591984-3.0391083,1.5591984
c-2.785202,0-4.5578918-2.0842991-4.5578918-5.3373985c0-3.175601,1.7337952-5.2598009,4.4023895-5.2598009
c1.1881104,0,2.4152069,0.4870005,3.0583038,1.5195007v-5.0646009h2.7465057v13.8696003H163.3710327z M160.9362335,16.0839005
c-1.5003967,0-2.3769073,1.1497993-2.3769073,3.0788002c0,1.9476986,0.8963013,3.1166,2.3769073,3.1166
c1.5196991,0,2.3959961-1.1292,2.3959961-3.0976009C163.3322296,17.2336998,162.4361267,16.0839005,160.9362335,16.0839005z"/>
<path d="M170.9356232,12.6941004h-2.7655945v-2.3363008h2.7655945V12.6941004z M170.9356232,24.2273998h-2.7655945
V14.1758003h2.7655945V24.2273998z"/>
<path d="M133.972229,26.1511002h4.3437958l3.2342072,9.5251007l3.1557922-9.5251007h4.2460022v13.8694992h-2.862793
v-9.8564987l-3.4096069,9.8564987h-2.3569946l-3.4476013-9.7596989v9.7596989h-2.9028015V26.1511002z"/>
<path d="M157.9037323,40.0205994c-0.1363983-0.3695984-0.1553955-0.5263977-0.194397-0.9738007
c-0.8572083,0.8563995-2.0453033,1.2657013-3.2531128,1.2657013c-2.2206879,0-3.5847931-1.1484985-3.5847931-3.0391006
c0-2.6300011,2.3959961-2.9407997,4.3833008-3.1945c1.7924957-0.2332001,2.4546051-0.3885994,2.4546051-1.2070999
c0-0.9153996-0.5843048-1.3451004-1.8121033-1.3451004c-1.2657013,0-1.7915039,0.3901005-1.9866028,1.5401993h-2.5910034
c0.1562042-2.2411976,1.7534027-3.3897991,4.6562042-3.3897991c2.0254059,0,4.3824921,0.4664001,4.3824921,3.2724018v4.3444977
c0,0.9152031-0.0189972,1.8700027,0.3506012,2.7266006H157.9037323z M155.7417297,35.6571007
c-0.954895,0.1554985-2.0261993,0.2728004-2.0261993,1.5004005c0,0.8375969,0.5653992,1.3435974,1.5193939,1.3435974
c1.4420013,0,2.4546051-0.7978973,2.4546051-2.2395973v-1.1310997
C157.047226,35.5017014,156.4429321,35.5396996,155.7417297,35.6571007z"/>
<path d="M166.0330353,36.5723c0,0.9738007,0.0197906,1.4227982,1.2077942,1.4227982
c0.2917938,0,0.5066986,0,0.8374939-0.0396996v2.1049004c-0.7597961,0.0572014-1.05159,0.0776024-1.6749878,0.0776024
c-2.3768005,0-3.116806-0.6231003-3.116806-3.078701v-5.2201004h-1.6757965v-1.8701h1.6757965v-3.0391006h2.7465057V36.5723z"/>
<path d="M178.0324249,29.9689999l-3.4087982,10.0515995h-3.097702l-3.4476013-10.0515995h2.9217987
l2.1429138,6.8571987l2.1427917-6.8571987H178.0324249z"/>
<path d="M183.9012299,40.3125c-3.0970001,0-5.1423035-2.1032982-5.1423035-5.2598
c0-3.1168003,2.1230011-5.3756008,5.0449066-5.3756008c3.039093,0,4.9678955,2.2207012,4.9678955,5.7468014v0.2728996h-7.2077026
c0.0390015,1.7336998,0.876297,2.6679993,2.3570099,2.6679993c1.0127869,0,1.6362915-0.4473,2.0453949-1.4610977h2.6490021
C187.9920349,39.0864983,186.1807251,40.3125,183.9012299,40.3125z M183.803833,31.6837997
c-1.2270966,0-2.0843048,0.8563995-2.2398071,2.2587013h4.4024048
C185.8491364,32.716301,185.1868286,31.6837997,183.803833,31.6837997z"/>
<path d="M195.0885315,40.3125c-3.0970001,0-5.142395-2.1032982-5.142395-5.2598
c0-3.1168003,2.1230927-5.3756008,5.0448914-5.3756008c3.0391998,0,4.9678955,2.2207012,4.9678955,5.7468014v0.2728996h-7.207489
c0.0387878,1.7336998,0.8763885,2.6679993,2.3568878,2.6679993c1.0129089,0,1.6362-0.4473,2.0455017-1.4610977h2.6489105
C199.1793365,39.0864983,197.3680267,40.3125,195.0885315,40.3125z M194.9910278,31.6837997
c-1.2268982,0-2.084198,0.8563995-2.2395935,2.2587013h4.4023895
C197.0364227,32.716301,196.3740234,31.6837997,194.9910278,31.6837997z"/>
<path d="M210.5428314,29.9689999l-3.408905,10.0515995h-3.0977936l-3.4472961-10.0515995h2.9214935
l2.1428986,6.8571987l2.1430969-6.8571987H210.5428314z"/>
</g>
</svg> </div>
</div>
<div class="row">
<div class="col-xs-12 col-md-8 col-lg-7">
<div class="main-header__about">
<h1 class="main-header__name">Вадик Матвеев</h1>
<h3 class="main-header__flow">Дизайнер // 25 лет // Санкт-Петербург</h3>
</div>
</div>
</div>
<div class="main-header__contact">
<div class="col-xs-12 col-md-4"> <span class="main-header__mailto">Писать на <a href="mailto:fooontic@gmail.com" class="link">fooontic@gmail.com</a></span></div>
<div class="col-xs-12 col-md-4 col-lg-3"><span class="main-header__blog">Веду <a href="https://t.me/dotmus" class="link">канал о музыке </a></span> </div>
<div class="col-xs-12 col-md-4"><a href="Vadik Matveev.pdf" target="_blank" class="main-header__cv link">Резюме</a><span class="main-header__cv-size"> (pdf 293 KB)</span></div>
<div class="col-xs-12">
<ul class="main-header__soc-link">
<li class="main-header__soc-link-item"><a href="https://twitter.com/fooontic_" target="_blank" class="link">Twitter</a></li>
<li class="main-header__soc-link-item"><a href="https://www.instagram.com/fooontic/" target="_blank" class="link">Instagram</a></li>
<li class="main-header__soc-link-item"><a href="https://vk.com/fooontic" target="_blank" class="link">Вконтакте</a></li>
<li class="main-header__soc-link-item"><a href="https://www.facebook.com/ba.dick.7" target="_blank" class="link">Facebook</a></li>
<li class="main-header__soc-link-item"><a href="http://www.last.fm/user/fooontic" target="_blank" class="link">LastFm </a></li>
<li class="main-header__soc-link-item"><a href="https://www.behance.net/fooontic" target="_blank" class="link">Behance</a></li>
<li class="main-header__soc-link-item"><a href="https://www.dribbble.com/fooontic" target="_blank" class="link">Dribbble</a></li>
<li class="main-header__soc-link-item"><a href="https://github.com/fooontic" target="_blank" class="link">GitHub</a></li>
<li class="main-header__soc-link-item"><a href="https://ru.linkedin.com/in/вадим-матвеев-1359a2108" target="_blank" class="link">LinkedIn</a></li>
</ul>
</div>
</div>
</div>
</section>
<article id="projects" class="projects">
<h2 class="h2">Проекты</h2>
<ul class="projects__list">
<li class="projects__item projects__item--wide wow fadeInUp"><a href="projects/daisy.html" class="projects__pic"><img src="img/preview__daisy.jpg" alt=""/></a>
<h3 class="projects__title"><a href="projects/daisy.html" class="link">Daisy Extreme // Веб-сервис</a></h3>
<div class="projects__tags">UI/UX, Веб-дизайн</div>
</li>
<li class="projects__item projects__item--draft projects__item--small wow fadeInUp">
<div class="projects__pic"><img src="img/preview__fanera.jpg" alt="" /></div>
<h3 class="projects__title"><span>Фанера // Журнал (Скоро будет)</span></h3>
<div class="projects__tags">Дизайн журнала, верстка</div>
</li>
<li class="projects__item projects__item--half wow fadeInUp"><a href="projects/tmsr.html" class="projects__pic"><img src="img/preview__tmsr.jpg" alt=""/></a>
<h3 class="projects__title"><a href="projects/tmsr.html" class="link">TMSR // Фирменный стиль и сайт</a></h3>
<div class="projects__tags">Графический дизайн, UI/UX, веб-дизайн, веб-разработка</div>
</li>
<li class="projects__item projects__item--half wow fadeInUp"><a href="projects/whatobuy.html" class="projects__pic"><img src="img/preview__whatobuy.jpg" alt=""/></a>
<h3 class="projects__title"><a href="projects/whatobuy.html" class="link">Чокупить? // Мобильное приложение</a></h3>
<div class="projects__tags">UI/UX, дизайн мобильного приложения</div>
</li>
<li class="projects__item projects__item--small wow fadeInUp"><a href="projects/logomotiv.html" class="projects__pic"><img src="img/preview__logomotiv.jpg" alt=""/></a>
<h3 class="projects__title"><a href="projects/logomotiv.html" class="link">Logomotiv Apps // Сайт для студии</a></h3>
<div class="projects__tags">UI/UX, Веб-дизайн, веб-разработка</div>
</li>
<li class="projects__item projects__item--small wow fadeInUp"><a href="projects/durecipes_app.html" class="projects__pic"><img src="img/preview__dur-app.jpg" alt=""/></a>
<h3 class="projects__title"><a href="projects/durecipes_app.html" class="link">Дюрецепты // Мобильное приложение</a></h3>
<div class="projects__tags">UI/UX, дизайн мобильного приложения</div>
</li>
<li class="projects__item projects__item--small wow fadeInUp"><a href="projects/durecipes_logo.html" class="projects__pic"><img src="img/preview__dur-logo.jpg" alt=""/></a>
<h3 class="projects__title"><a href="projects/durecipes_logo.html" class="link">Дюрецепты // Логотип и иконка</a></h3>
<div class="projects__tags">Графический дизайн</div>
</li>
</ul>
</article>
<article class="about">
<div class="row">
<div class="col-xs-12 col-lg-8">
<h2 class="h2">Коротко о себе</h2>
<div class="row">
<div class="about__photo"><img src="img/my-face.jpg" alt="Vadik Matveev" /></div>
<div class="about__me">
<p class="about__flow">Проектирую сайты, мобильные приложения, логотипы и фирменные стили. Часто сам верстаю разработанные веб-проекты. Учился в СПБГУ на Графическом дизайне. Закончил курсы по основам After Effects в московской школе компьютерной
графики Real-Time School в 2013 году. В 2015–2016 прошел два курса по верстке сайтов (базовый и PRO) и один курс по основам JS в школе интернет-технологий Epic Skills. Знаю HTML и CSS, использую Pug и SASS.
Осваиваиваю JavaScript. С начал 2017 года преподаю в Epic Skills на курсе веб-дизайна. Веду занятия по адаптиву и анимации. Почитать подробнее о моих навыках и опыте работы можно в <a href="Vadik Matveev.pdf"
target="_blank" class="link">резюме (pdf 293 KB)</a> или в <a href="https://ru.linkedin.com/in/вадим-матвеев-1359a2108" class="link">LinkedIn</a>. </p>
<p class="about__flow">В свободное время люблю порисовать буквы, послушать новый альбом, сходить на концерт, поиграть в настольные игры или прогуляться по Санкт-Петербургу. Веду <a href="https://t.me/dotmus" class="link">канал в телеграме </a>с обзорами
на музыкальные альбомы. Очень редко пишу в <a href="https://medium.com/@fooontic" class="link">блоге</a>. Люблю кофе. Не курю. </p>
</div>
</div>
</div>
<section class="blog">
<div class="blog__box">
<h2 class="h2">Последнее в <a href="http://fooontic.tumblr.com/" class="link">блоге</a></h2>
<ul class="blog__list">
<li class="blog__item"><a href="https://goo.gl/iQMcsx" class="blog__link link">How to change Edit Original in Illustrator to Photoshop?</a><span class="blog__date">13 октября 2016</span></li>
<li class="blog__item"><a href="https://goo.gl/SjezPp" class="blog__link link">Awesome Hover Animation</a><span class="blog__date">14 августа 2016</span></li>
<li class="blog__item"><a href="https://goo.gl/K7H4s4" class="blog__link link">Первые впечатления от Медиума</a><span class="blog__date">2 августа 2016</span></li>
<li class="blog__item"><a href="https://medium.com/@fooontic/%D0%BA%D0%B0%D0%BA-%D1%8F-%D0%B4%D0%B5%D0%BB%D0%B0%D0%BB-%D1%81%D0%B2%D0%BE%D0%B9-%D1%81%D0%B0%D0%B9%D1%82-%D0%B8%D0%BB%D0%B8-%D0%BA%D0%B0%D0%BA-%D0%BD%D0%B5%D0%BB%D1%8C%D0%B7%D1%8F-%D0%B6%D0%B8%D1%82%D1%8C-55fe15abe375#.f2vxcmihb"
class="blog__link link">Как я делал свой сайт? Или как нельзя жить.</a><span class="blog__date">1 августа 2016</span></li>
<li class="blog__item"><a href="https://medium.com/@fooontic/%D0%BC%D0%BE%D0%B9-%D0%B1%D0%BB%D0%BE%D0%B3-%D0%BF%D0%B5%D1%80%D0%B5%D0%B5%D1%85%D0%B0%D0%BB-%D0%BD%D0%B0-%D0%BC%D0%B5%D0%B4%D0%B8%D1%83%D0%BC-34e8f420b60f#.cmmwgm83i" class="blog__link link">Мой блог переехал на Медиум</a>
<span
class="blog__date">31 июля 2016</span>
</li>
</ul>
</div>
</section>
</div>
</article>
<footer class="footer">
<div class="container-fluid">
<div class="row">
<div class="likely-inner col-xs-12 col-md-6 col-md-push-6"><span class="share">Поделиться </span>
<div class="likely likely-big">
<div data-via="fooontic_" class="twitter"></div>
<div class="facebook"></div>
<div class="vkontakte"></div>
<div data-text="Зацени-ка" class="telegram"></div>
</div>
</div>
<div class="col-xs-12 col-md-6 col-md-pull-6">
<div class="footer__copyright">© 2015–2017</div>
<div class="footer__mail">Пишите мне на <a class="link">fooontic@gmail.com</a></div>
</div>
</div>
</div>
</footer>
</body>
<script src="js/main.js"></script>
<script>
// WOW Animation ////////////////////////////////
new WOW().init();
var vmVivus = new Vivus('vm-logo',
{
type: 'delayed',
duration: 1500,
delay: 700
});
//- var vivusTimer = setTimeout(function drawVivus() {
//- vmVivus.stop().play(-1);
//- vivusTimer = setTimeout(drawVivus, 2000);
//- console.log('?')
//- }, 2000);
//- setInterval(function() {vmVivus.play(-1) }, 1000);
//- function easeOutBounce (x) {
//- var base = -Math.cos(x * (0.5 * Math.PI)) + 1;
//- var rate = Math.pow(base,1.5);
//- var rateR = Math.pow(1 - x, 2);
//- var progress = -Math.abs(Math.cos(rate * (2.5 * Math.PI) )) + 1;
//- return (1- rateR) + (progress * rateR);
//- }
//- var timing,
//- timingProps = {
//- type: 'delayed',
//- duration: 150,
//- start: 'autostart',
//- pathTimingFunction: Vivus.LINEAR,
//- animTimingFunction: Vivus.LINEAR
//- };
//- function timingTest (buttonEl, property, type) {
//- var activeSibling = buttonEl.parentNode.querySelector('button.active');
//- activeSibling.classList.remove('active');
//- buttonEl.classList.add('active');
//- timingProps.type = (property === 'type') ? type : timingProps.type;
//- timingProps.pathTimingFunction = (property === 'path') ? Vivus[type] : timingProps.pathTimingFunction;
//- timingProps.animTimingFunction = (property === 'anim') ? Vivus[type] : timingProps.animTimingFunction;
//- timing && timing.stop().destroy();
//- timing = new Vivus('timing-example', timingProps);
//- }
//- var hi = new Vivus('hi-there', {type: 'scenario-sync', duration: 20, start: 'autostart', dashGap: 20, forceRender: false},
//- function () {
//- if (window.console) {
//- console.log('Animation finished. [log triggered from callback]');
//- }
//- }),
//- obt1 = new Vivus('obturateur1', {type: 'delayed', duration: 150}),
//- obt2 = new Vivus('obturateur2', {type: 'async', duration: 150}),
//- obt3 = new Vivus('obturateur3', {type: 'oneByOne', duration: 150}),
//- pola = new Vivus('polaroid', {type: 'scenario-sync', duration: 20, forceRender: false});
$('.projects__title a').hover(function()
{
$(this).parent().siblings('.projects__pic').addClass('projects__pic--hover');
}, function()
{
$(this).parent().siblings('.projects__pic').removeClass('projects__pic--hover');
});
$('.projects__pic').hover(function()
{
$(this).siblings('.projects__title').addClass('projects__title--hover');
}, function()
{
$(this).siblings('.projects__title').removeClass('projects__title--hover');
});
//- $('.projects__pic').click(
//- function(){
//- $(this).siblings('.projects__title').find('.link').attr('href')
//- });
</script>
</html>