В детстве, когда я рос в девяностых, меня воспитывали на строгой диете из боевиков конца 80-х — начала 90-х, особенно тех, которые имеют привкус научной фантастики. Ешьте мою зелень? Передайте мне Шварценеггера. Ложиться спать без ужина из-за того, что не съел упомянутую зелень? Ладно, я уже съел свою огромную порцию Сталлоне. Из Чужих, Робокоп, Хищник, Бегущий человек, Полицейский или Разрушитель Я мог поддерживать себя только высокооктановой научной фантастикой. Это было настолько важной частью моего существа, что моя мать постоянно говорила мне, что моим любимым фильмом с двухлетнего возраста был и всегда будет Терминатор 2: Судный день, и я если честно, она, наверное, права.
Однако эти фильмы служили не только для того, чтобы мои синапсы работали на полную катушку, а адреналин — до тех пор, пока мои колени не подвели. Они привили мне глубокое увлечение технологиями, граничащее с одержимостью, которое сохраняется и по сей день. Современные зрители могут смотреть любой из этих фильмов и насмехаться над громоздкой технологией, демонстрируемой как футуристическая по сравнению с устройствами, которые мы используем в настоящее время, но для подрастающего ребенка это было не чем иным, как чистой магией. Я действительно не думаю, что какая-либо настоящая технология, которую я держал в своих руках, взволновала или вдохновила меня так сильно, как Т-800 в движении в его бесконечной погоне за Сарой Коннор или экзокостюм-погрузчик Эллен Рипли. отбиваясь от королевы ксеноморфов, пока Ньют безнадежно кричит вдалеке.
При этом неудивительно, что эстетика той эпохи и моя одержимость ретрофутуризмом повлияли на мой подход к дизайну. Когда мне до сих пор ставили задачу разрабатывать различные приложения, моими самыми увлеченными проектами были попытки воссоздать магию, которая в первую очередь привлекла мое внимание к технологиям. Впервые это можно увидеть в моем приложении Pokédex, в котором я смог точно воспроизвести часть вымышленной технологии из еще одного основного продукта моего детства. Хотя я разработал бесчисленное количество приложений после этого, именно к нему я возвращался снова и снова для рефакторинга и совершенствования. Излишне говорить, что я чувствовал себя несколько опустошенным, когда наконец завершил этот проект.
То есть, пока мне не пришлось создавать свое портфолио. Хотя на то, чтобы придумать идею для каждого проекта после моего Pokédex, ушла целая вечность, я сразу понял, что хочу сделать для своего портфолио. Я собирался воссоздать ретро ЭЛТ-терминал прямо из научно-фантастических фильмов, которые я бесконечно поглощал в детстве и продолжаю наедаться сегодня.
Как и в случае с моим Pokédex, я поставил перед собой задачу воссоздать свой старомодный терминал, используя только HTML, CSS и jQuery для управления DOM. Я хотел, чтобы этот проект максимально продемонстрировал мои способности, оставаясь при этом верным концепции, что привело к некоторым интересным решениям. Таким образом, я бы не стал использовать один файл изображения при сборке этого проекта. Я даже зашел так далеко, что использовал свою фотографию, преобразованную в ASCII, для раздела биографии моей домашней страницы.
Я использовал различные эталонные фотографии из реальной жизни, фильмов и видеоигр (а именно Pip Boy из франшизы Fallout), чтобы запечатлеть ретро-эстетику моего терминала. Таким образом, терминал включает в себя экран, который загорается и излучает слабое зеленое свечение, и он даже мерцает и имеет анимированные строки сканирования в соответствии с экранами электронно-лучевой трубки той эпохи.
Для моей домашней страницы и биографии я создал пространство с макетом рабочего стола со значком, где пользователь может «запустить терминал». Отсюда пользователь попадает в мое портфолио и встречает эффект пишущей машинки, который запрашивает его ввод. Затем пользователь может либо щелкнуть любую ссылку в моем портфолио, либо ввести соответствующую команду, чтобы перейти на этот проект или страницу в социальной сети. Для этого я использовал jQuery, направляя пользователя на соответствующую страницу с помощью условного оператора IF/THEN. Ради простоты использования я использовал операторы ИЛИ с моей логикой IF/THEN, чтобы пользователь мог вводить команды с символами подчеркивания, как они появляются на экране, с пробелами или тире.
Использование эффекта пишущей машинки в сочетании с элементом формы оказалось сложной задачей. Поскольку у эффекта пишущей машинки в конце есть мигающий курсор, пользователь увидит два мигающих курсора, когда щелкнет мое невидимое поле ввода. Я смог использовать jQuery, чтобы исправить это, приостановив анимацию курсора на соседнем тексте при нажатии на поле ввода, а затем возобновив ее, если они щелкнут.
Вспоминая мой Pokédex, если бы я хотел расширить этот сайт в будущем, я бы определенно хотел продолжить изучение включения анимации CSS. Я был доволен анимацией включения/выключения, которую я создал для этого приложения, и чувствую, что что-то подобное может очень хорошо работать с темой этого сайта. Помимо анимации, я также хотел бы улучшить отзывчивость сайта. Несмотря на то, что сайт полностью адаптивен в его нынешнем виде, я изо всех сил пытался добиться, чтобы текст имел разумный размер на мобильном устройстве и в то же время не выглядел комично большим в сжатом окне браузера.
Хотя я особенно гордился своим Pokédex, до такой степени, что я определенно играл в фавориты, я чувствую, что этот личный веб-сайт / портфолио стал лебединой песней моего времени, проведенного в Генеральной Ассамблее. Проект действительно зажил своей собственной жизнью, и я горжусь конечным результатом. И хотя мой инструктор сказал мне, что я должен сделать все возможное со своим портфолио сейчас, потому что, вероятно, я больше не буду прикасаться к нему в будущем…
Не стесняйтесь проверить мой сайт здесь: chrisbellaro.com
