Как я делал свой сайт? Или как нельзя жить.
Две недели назад я закончил делать личный сайт. Если вы его ещё не видели, то вот он foontic.github.io Работа над ним шла долго. Мучительно долго. Ниже я расскажу как, и почему так делать не стоит.
Задумался о сайте я полтора года назад. Сайт мне был нужен, потому что я собрался менять работу и необходимо было обновить портфолио. Делать это я люто ненавижу. Поэтому мой мозг пошёл сложным путём. Вместо того, чтобы готовить подачи новых проектов на Behance, я решил, что Behance это не тру. Сделать сайт по-быстрому, вот это тру. И туда уже когда-нибудь в будущем заливать новые проекты. Я стал бегло курить тему создания сайтов, в поиске готовых шаблонов и решений. Тогда же я обратил внимание на Behance Pro Site, который подходил для моих нужд. Да и подачи старых проектов не придётся переделывать, они легко скопируется с биханса. Но что-то не пошло. Шаблоны мне не нравились, ограниченный функционал подачи проектов тоже смущал. А чтобы что-то изменить — лезь в код и… страшно-страшно-страшно.
В итоге я пошёл изучать код. На курсы базовой вёрстки сайтов в школу интернет технологий Epic Skills. Там я узнал HTML5 и CSS3, отучился, закончил хорошо. Мне даже вручили скидку в 30% на любой следующий курс, как старательному ученику (таких было пятеро, из 25–30 человек). Мне понравилось верстать. Это меня расслабляло и успокаивало. После дизайна, где зачастую нужно что-то придумывать, ломать голову, напрягать фантазию, то в вёрстке всё казалось таким понятным, размеренным и умиротворенным, что я реально отдыхал, занимаясь этим. Я не говорю, что вёрстка это какое-то глупое плебейское занятие, отнюдь. Но главное отличие от дизайна в том, что там уже есть финальный результат, ты его видишь, он перед тобой и тебе лишь надо его достичь. Местами это тяжеловато, не всегда очевидно сходу, как добиться такого расположения элементов, но на деле ты знаешь, что всё решаемо: если не силами одного верстальщика, то уж мастер JS точно справится. Но что самое приятное, повторюсь, ты видишь конечную цель, которой добиваешься. Как? — вопрос второй. На 95% твоих затыков уже давно отвечено в гугле. Просто напиши верный запрос и вуаля — готовое решение. Адаптируй под себя и иди дальше.
По завершению базового курса, я решил сразу идти на продвинутый курс. Со скидкой в 30% мне тогда это встало в девять тысяч с копейками, из которых пять тысяч мне подарила мама, на радостях, что «её сынулька снова пошел учиться». Продвинутый курс вёрстки на порядок сложнее — огромный охват различных технологий. Тут тебе не базовый ввод в HTML и CSS, а методологии, БЭМ, работа с консолью, с гитом и гитхабом, препроцессоры, флексбоксы, bower, gulp, svg, jade, подробное знакомство с библиотеками Bootstrap, Foundation и jQuery. В общем, прорва информации за короткий срок. Я не усвоил и трети материала за курс. «Неусвоению» ещё способствовало большое количество народа в группе (ожидали меньше), болезнь одного преподавателя, авария другого, вследствие чего перемешалась программа курса. Но главную мысль усвоил — люди, которые уважают себя и ценят время, не пишут на голом HTML и CSS, не собирают всё вручную. Я понял, что огромное количество рутинной работы автоматизируется, либо упрощается. При этом твой код становится ещё и чище, понятней и быстрее. Из всей программы курса, я только слегка понял принципы и плюсы БЭМ, усвоил базовую концепцию препроцессоров и примерное понимание работы шаблонизатора Jade. Но даже эти знания мне сразу же облегчили жизнь. Проекты на работе стали быстрее решаться и главное, куда шустрее правиться.
Но к собственному сайту я по-прежнему не приступал…
Не приступал. Откладывал. Я думал так, вот освою весь курс и тогда со всеми новыми технологиями сделаю себе турбосайт. ХА-ХА-ХА! Как же глуп я был. НЕВОЗМОЖНО ОСВОИТЬ ВСЕ ТЕХНОЛОГИИ, КАРЛ! Их очень много. И каждый день появляются ещё.
В общем, я продолжил повторно ходить на занятия по темам, в которых у меня остались наибольшие пробелы. Довольно скоро я освоил работу в консоли и гит. На работе я стал уже не просто писать код в папочку, я стал его пушить на битбакет. Дольше всего я разбирался с галпом. Я понимал насколько это крутая штука и как сильно она важна, поэтому плотно изучал его. Спасибо преподавателю школы Игорю Тимохину, который терпел мои нубские вопросы в ВК и подробно отвечал на них. Поняв принцип работы галпа, я закреплял знания объясняя и помогая новым студентам курса в эпик скиллс. Лучший способ понять что-то — обучить кого-то этому. Я до сих пор тьютерю в эпике время от времени на ПРО курсе. Так что приходите учиться — тут научат!
Освоив необходимый минимум для удобного написания и поддержки сайта без админки, я приступил к его созданию. Начал я с самого лёгкого — покупки домена. Купил домен fooontic.ru, благо мой ник Фунтик с тремя «о» всегда свободен на всех ресурсах и сайтах.
Прикрутить домен к гитхабу сходу не смог. В дальнейшем найду время разобраться с этим и приколошмачу его. Поэтому мой сайт пока доступен только на домене гитхаба.
После покупки домена, деваться уже было некуда, пути отступления или обхода закончились. Я начал делать сайт.
И был он начат.
Не сразу, конечно… Пару недель я точно не приступал к сайту. В своей манере ленивой задницы я крепко пинал болтянского. А меж тем, отмечу, к тому времени шел уже ноябрь или декабрь 2015 года. Напомню, что задумал я свой сайт в марте 2015. К тому времени уже прошло 8–9 месяцев. Ненавижу себя.
Как бы то ни было. Я нашел в себе силы и засел-таки в свободное время за сайт. Открыл иллюстратор и стал накидывать варианты. Зная себя, я сразу решил, что выпущу сайт с ограниченным количеством проектов и напишу, что проекты будут дополняться походу дела. Я знал, что иначе бы сайт вообще не увидел света Н-И-К-О-Г-Д-А, поэтому я сразу начал с объявления, что сайт находиться в разработке. Придумал, на мой взгляд, неплохую идею с таймером и дорожными лентами, по нажатию на которые, фон сайта мигал красным. Сетку проектов нарисовал квадратную, чтобы уменьшить возню с вёрсткой. Позже понял, что скучновато и сделал её «съезжающей». До сих пор считаю это решение интересным, хоть оно и не прижилось в итоговом варианте. Надеюсь, я смогу его применить в будущих проектах. Когда собрал примерный макет главной страницы, я приступил к вёрстке. Все ховеры и анимации я сразу делал уже «наживую», на этапе разработки.
Что важно, к подачам проектов я по-прежнему не приступал…
Вёрстка пошла быстро и уверенно. За пару-тройку вечеров я сверстал главную, настроил все стили, придумал ховеры и настроил «мигалку» фона и таймер. А дальше? Дальше оставались подачи проектов.
Ещё пара недель прошли за пинанием болта. Но я взял себя в руки и засел рисовать подачи. Рисовал подачу — верстал. Рисовал — верстал. Так я сделал три первых проекта. «Дюрецепты» (приложение и логотип) и «Чокупить». Приступил к подаче сайта для Логомотива и издох. К тому времени я уже работал над стартапом Daisy Extreme, в свободное от основной работы время. Так что сил на свой сайт у меня уже не оставалось. Шёл декабрь. Близились праздники, во время которых я надеялся продолжить работу над сайтом. Но не тут-то было. Внезапно на праздники образовался бесплатный пилотный курс по основам JavaScript для тьюторов школы Epic Skills (ещё один плюс быть тьютором и помогать студентам). Я не мог такое пропустить и бóльшую часть праздников посвятил занятиям по JS.
После праздников было много работы, что в Логомотиве, что в Дэйзи. В итоге весь январь я не возвращался к своему сайту. В феврале я ушел из Логомотива, предполагая, что 3–4 дня в неделю я буду полноценно работать над Дэйзи, а оставшееся время делать свой сайт. Хуй. Там. Плавал. По увольнению, мы с Лизой слегка отдохнули в Скандинавии. По возвращению я работал только над Дэйзи, а остальное время отрывался. Мне наконец-то не надо было ходить на работу и денег после увольнения было нормально, да и с Дэйзи проблем не было. Я просто тусил. По-домашнему. Сидел дома и тупил, на самом деле. Залипал в сериалы, перестал читать, в общем, я даже не вспомню, что делал — настолько мое времяпровождение было бестолковым и бесполезным. Я морально разлагался. Овощил. Так я провел месяца два. К сайту не приступал. Работал над Дэйзи, журналом Фанера, и время от времени делал ещё мелкие заказики. В своё удовольствие рисовал обложку для дэт-металистов Spiteful Grin, которую недавно анонсировал.
Потом внезапно мне подкинули шанс пойти «под проект» в Motorola Solutions. Знакомая там уже работала, но были нужны ещё люди и она посоветовала меня.
Мне надо было за ДВА дня доделать портфолио! Смерть. Жопа. Сатана.
В усиленном режиме я начал за выходные доделывать портфолио. В итоге, к концу выходных было готово 5 проектов, из которых самый важный, Дэйзи, сделал из рук вон плохо. Времени на нормальную подачу не было, поэтому прикрутил простой слайдер из различных экранов. Для главной страницы пять проектов было слишком мало, поэтому сетка «пофлексилась» и заменилась на большую кнопку «Смотреть портфолио», по нажатию на которую, открывался первый проект. Для навигации между подачами в шапку добавил кнопки «Следующий проект» и «Предыдущий». Не шибко изящно, но на что хватило двух дней. Протестировать времени не было. Выкладывал буквально за пять минут до выхода на собеседование. Не спал всю ночь. Плохо. Очень плохо.
Собеседование провалил. Сидел тупил. Не спать перед собеседованием — не самая гениальная мысль. Сайт лагал. Сказывалось отсутствие тестирования. Ещё и обязательное резюме надо было принести. Контора-то серьёзная, а не дизайн-студия или диджитал агентство. Позднее мне сказали, что я им понравился, при всех моих фейлах, и работы оценили, но позвали другого. Увы. Сам виноват.
Я продолжил работать над Дэйзи и на горизонте замаячил следующий номер журнала Фанера. К сайту не подходил месяца два. Снова. Потом закончилась работа. От безделья и безденежья невольно осознал, что фрилансер из меня никудышный, и что пора искать новую нормальную работу. А для этого надо, блядь, закончить грёбаное портфолио. Ну или хотя бы довести его до состояния, когда показать будет не стыдно.
Месяц назад я крепко взялся за сайт и на этот раз не позволял никаким сторонним делам отвлекать меня от этого. Лиза мне помогла привести мой хаос в порядок и научила пользоваться календарём. Только в 25 лет я начал планировать свой день наперёд.
Я сразу решил, что переделаю главную страницу, сделаю её интереснее и ярче. На первом экране только самое важное: кто я, чем занимаюсь, сколько лет, в каких соцсетях сижу и как со мной связаться. Сетку проектов тоже надо было разнообразить, а вот блок «О себе» претерпел минимум изменений.
Я понимал, что на главной нужна какая-то фишечка, которая бы не отвлекала внимание, но была бы интересной. Я оставил переливающийся фоновый градиент, только на этот раз сделал его сильно крупнее. Но мне этого казалось мало, не хватало приятной детальки. Такую я подсмотрел у сайта крутейшей студии Charmer. Я захотел сделать похожий эффект фоновой svg-анимации, как у них. Позднее я нашел скрипт, который это делает, но ни черта его не понял. Зато узнал, что сама анимация происходит посредством изменения stroke-dasharray и stroke-dashoffset. Этих знаний хватило, чтобы гуглить в нужном направлении. Так же, как у Чармер, всё равно не получилось, но времени разбирать их абсолютно нечитаемый скрипт не было, так что хитрая бесконечная анимация «пофлексилась» до простой приветственной.
Шапку сайта я тоже переделал. Убрал всё лишнее (соцсети, телефон и прочее) и оставил самый минимум навигации. Для удобства добавил кнопку «Следующий». Настроил адаптив и бургер. Всё. Ничего лишнего.
Чтобы можно было без стыда отправлять ссылку арт-директорам студий, мне оставалось довести количество проектов хотя бы до шести. На тот момент у меня было четыре. Убогая подача экранов Дэйзи слайдером не в счёт. Мне оставалось 2 проекта. Началось. Я собрал волю в кулак и сел фигачить. За полторы недели я сделал две самых ярких своих подачи: ТМСР и Дэйзи Экстрим. Над последней возился особенно долго, но того стоило. Пока делал, подкачался в визуальных наворотах.
Закончив 6 проектов, решил, что нужен маяк для самого себя, чтобы не забывать добавлять следующие проекты. Так появился псевдо-проект, которого ещё нет, но уже есть анонс. Этим проектом стал журнал Фанера, который в скором времени доделаю и выложу. Благодаря ему, появились крутые ховеры, которые, как я позже узнал, понравились всем, кто их видел. В первоначальном варианте, при наведении на проект, слева вылезала стрелочка. Это было симпатично, но не интересно. Вообще. Да, я умею в CSS-анимацию, но сама анимация скучная. Для проекта, которого ещё нет, нужен был ховер отличающийся от остальных. Так появилась идея сделать бегущую надпись SOON. Мне понравилась она, и не долго думая, я сделал такой же ховер для остальных проектов, только со словом LOOK. Подправил резюме, переписал тексты, допилил по мелочам и вуаля!
Сайт готов. Прошел год и четыре месяца.
Мораль сей басни.
Что же главное? И почему не надо делать сайт, как делал я? Потому что это долго и мучительно больно. Да, я узнал огромное кол-во новых технологий, открыл для себя целый мир веб-разработки и теперь не хочу его покидать. Но это подходит не всем.
Я мог бы сделать себе сайт с помощью Биханса. Серьезно. Он нормальный, там хватит функционала для большинства дизайнерских выпендрёжей. Да, там нет параллакса и сложных скроллов, но зато этот сайт был бы готов на год раньше и я бы на год раньше нашёл новую работу.
Ну ладно. Не устроил меня Биханс. Я пошёл на курсы, хорошее дело ведь. Но почему я не сделал сайт сразу после них? Мне казалось, что я ещё зелёный и не готов, потому опять откладывал. А зря. Все технологии не охватишь, да и незачем. Осваивать и применять новое нужно по мере необходимости.
Истинная причина в другом. Я каждый раз откладывал не сам сайт, а подачи проектов. Не знаю почему, но я ненавижу это делать. Мне нравится моя работа, мне нравятся результаты, но я терпеть не могу ими делиться и показывать их. Это отсрочило сайт на целый год. У нас у каждого есть дела, которые мы не любим делать. Мы оттягиваем их, придумываем себе оправдания, ищем отмазки. На деле, надо просто с ними разделаться. Они пугают нас долгими сроками и большими затратами сил. В реальности, они занимают не так много времени, как кажется. Разбейте одну задачу на много мелких и делайте их постепенно. Когда одно большое ненавистное дело превращается в много мелких — проще «проглатывать».
Я мог минимум три раза сделать себе сайт. Первый раз, когда сел разбираться с Behance Pro Site. Второй раз, после базового курса вёрстки. Ну написал бы я свой первый сайт на простом HTML и CSS, ничего ужасного бы не случилось. Захотел бы, переделал бы потом со временем, но сайт бы уже был. И третий раз был, когда я уже освоил оба курса, но по-прежнему откладывал, просто потому что.
Итого. Благодаря собственно лени, я освоил новые для себя технологии. Благодаря ей, я прокачался. Но почему-то меня всё равно не покидает ощущение, что я оказался в проигрыше, поэтому вот советы тем, кто это дочитал до конца:
- Не ссать. Пока вы ссыте, кто-то не ссыт и делает. Спотыкается, ошибается, но делает и так же учиться. Но он уже делает.
- Не откладывайте ненавистные дела. Разделяйте их на мелкие и вперёд.
- Планируйте. Когда есть план, всё кажется легче. Даже если план рушится и летит в тартарары, это всё равно воспринимается легче, чем если бы его не было вовсе.
Всем спасибо и до связи!
