Пролог
Быть молодым техническим специалистом может быть довольно сложно, особенно когда вы попадаете в пузырь выпускников и начинаете предвидеть, что вы можете иметь и чего вы можете желать. Это кажется бесконечным лабиринтом мыслей, если вы решите рассказать о своих бесконечных возможностях. Однако путь в тысячу шагов начинается с одного.
Я всегда думал о том, чтобы иметь веб-сайт, на котором я мог бы продемонстрировать некоторые из своих работ, но, как уже упоминалось выше, добраться до него всегда было моей слабостью. Кроме того, что не очень помогло, так это то, что когда я решил спуститься в эту кроличью нору о том, как спроектировать свой веб-сайт, я увидел несколько веб-сайтов, которые дали мне некоторые нелепые идеи, которые я не могу ни сфабриковать, ни понять, ни разъяснить. Такими примерами являются это, это и это (ps: это кликабельные ссылки :) ). Это лишь несколько веб-сайтов, с которыми я столкнулся во время этого поиска. Я хотел бы думать, что эти сайты интересны даже наименее технически дружественным людям.
В конце концов, я решил выбросить всю свою экстравагантную идею (все же из-за внешнего влияния) и просто сделать ее простой. Я решил, наконец, сделать свой сайт, и ЭТО ИСТОРИЯ (Ну вроде).
Хотя они ни в малейшей степени не похожи, выбор стека для разработки/работы так же сложен, как и попытка решить, что съесть на обед в день получки. В моей ситуации это была ранняя битва, застрявшая между тем, должен ли я учиться и развиваться на лету, или я должен использовать довольно знакомый стек, закреплять свои знания и продолжать. Я остановился на последнем и решил использовать фреймворк Angular в сочетании с передачей внешнего API для получения электронных писем.
Главный
Angular Framework — это надмножество Javascript. Фреймворк Angular явно использует не Javascript, а Typescript. Однако нередко используется синтаксис Javascript. Его обычно называют ECMAScript. При необходимости он обеспечивает строгую типизацию, и его довольно легко понять (хотя кривая обучения может быть довольно крутой).
Есть несколько функций, таких как его архитектура на основе компонентов, где он может помочь отделить ненужный код, который обычно должен быть вместе на определенной странице. Эта функция позволяет повторно использовать эти созданные компоненты, поскольку все они существуют как отдельные объекты. Огромное сообщество также сделало этот выбор легким, так как я ранее испытал, насколько важным может быть сообщество, особенно после того, как ранее рискнул войти в сообщество Python. Использование этого фреймворка имеет несколько преимуществ, таких как возможность включать несколько библиотек, таких как RxJs, NgRx, ng-bootstrap и т. д. Более подробную информацию о его преимуществах можно найти здесь. Это также помогает тем компаниям, которые находятся в авангарде своих отраслей, использовать его.
Весь код веб-сайта, на мой взгляд, находится в файле app.component.html, что довольно странно. Я решил, что мое приложение будет одностраничным, так как я чувствовал, что это упростит использование. Я решил, что вся страница будет разбита на несколько разделов.
Первая страница оказалась самой сложной, так как мне нужно было понять, как я буду обращаться с изображениями в процессе разработки. В Angular изображения должны находиться в папке с ресурсами, чтобы их можно было использовать. Это только первый шаг, так как должны быть установлены другие свойства, позволяющие взаимодействие, например положение, размер и т. д. Вот выдержка из одного из классов CSS, которые я использовал для обработки изображения.
Само собой разумеется убедиться, что ширина и высота раздела установлены на максимальную ширину и высоту окна просмотра. Изображение также имеет размер, чтобы покрыть весь контейнер (на очень больших экранах изображение может быть обрезано). Текст в середине фотографии находится в контейнере и легко центрируется.
Контейнер раздела about был похож на то, как обрабатывалось первое изображение. Однако для этого изображения нужно было указать background-position, так как изображение было значительно меньше, а для описания требовалось больше текста.
Панель навигации вверху требовала некоторой обработки, как на прозрачной странице, тексты сливались с фоном, и пользователю было трудно ориентироваться. Сначала я пытался изменить цвет при наведении, но это не соответствовало моим потребностям. Затем я решил изменить прозрачность при прокрутке. С этой целью идея заключалась в том, чтобы сначала получить заголовок и просто изменить класс в этом заголовке, когда пользователь прокручивает. Я добавил прослушиватель, когда передается индекс вертикального окна.
Как показано выше, selectHeader — это переменная, используемая для хранения значения полученного заголовка. Если затем он извлекается, мы затем присваиваем логическое значение лямбда-функции, и ее можно вызывать внутри этой конкретной функции. В этом случае, если окно прокрутки пользователя прокручивается более чем на 100 пикселей по вертикали, добавляется заголовок класса CSS scrolled. Этот класс добавляет черный цвет в качестве фона для заголовка, как показано ниже. свойство списка классов используется для добавления и удаления классов CSS, где это необходимо.
Третий раздел — это мое резюме, и в нем просто подчеркивается мой опыт работы в отрасли. Это то же самое, что и первый раздел страницы, но здесь я добавил классы строк и контейнеров для хранения информации в сочетании с тегами «h», «p» и «li» другого типа для хранения задач, которые я выполненный. Я также добавил свое полное резюме, которое постоянно размещено по ссылке Google.
Заключительная часть веб-сайта просто включает в себя несколько моих проектов и несколько моих интересов, о которых я очень хочу узнать / над которыми я работаю. Все они перечислены в порядке, не имеющем особого значения. Тем не менее, я ставлю последний интерес довольно высоко в моем списке, как показано ниже.
Веб-сайт заканчивается тем, что пользователь может просматривать мои социальные ссылки и отправлять электронные письма прямо с веб-сайта. Я был близок к завершению, и конечная цель была уже видна. Изначально я думал о Java Backend. На тот момент я не слишком интересовался этой функцией, и фотография ниже лучше всего описывает мое настроение в то время.
Первоначально я думал, что должен опубликовать файл CSV в Интернете напрямую и передать данные формы с моего веб-сайта непосредственно в CSV, поэтому я получаю электронное письмо, как если бы вы открывали его в Excel, но это оказалось довольно сложно. Я решил использовать FormSpree, который позволяет вам добавлять данные формы к конечной точке отдыха. Эта служба также помогает пересылать электронную почту на вашу рабочую / личную электронную почту. Я не слишком беспокоился о спаме, однако я добавил приманку для предотвращения спама.
Приманки — это поля, которые вы можете добавить в форму, которые пользователь не увидит, но увидит бот, поскольку боты получают доступ ко всей форме и «касаются» каждого поля, где это необходимо. В связке с этим сервис form spree помогает разобрать отправленное сообщение и расшифровать его. Если сообщение непонятно, оно классифицируется как спам. Как я этого добился, можно увидеть ниже.
Пролог
Я на самом деле довольно chuffed с процессом. Сейчас я понимаю, что мне еще предстоит пройти долгий путь в этом мире программирования. Я счастлив, так как это был мой первый опыт разработки интерфейса, и, к счастью, это составляет часть моей текущей работы. Было приятно освоить некоторые дополнительные навыки, которые я нашел полезными, и я могу только продолжать.
Скоро я начну продвигать свои проекты и «постараюсь» выпустить статью / рецензию, объясняющую мыслительный процесс, стоящий за ними всеми. Тем не менее, я написал это в разговорной/полуформальной форме, чтобы даже читатели с малейшими знаниями в области технологий могли понять рубрики веб-сайта и получить от этого удовольствие. Я заинтересован в более технической беседе, если потребуется дополнительная информация о том, как был создан веб-сайт. Я также очень открыт для обратной связи. Пожалуйста, не стесняйтесь обращаться ко мне с этой целью.
Спасибо, что нашли время прочитать эту статью. Это действительно много значит.
