В настоящее время тенденция оценки уровня квалификации в индустрии программного обеспечения смещается в сторону онлайн-присутствия кандидата. Например, посмотрите на профиль LinkedIn ваших друзей и коллег в эти дни. Каждому из них есть чем поделиться.
Но как выделиться?
Создайте свое собственное пространство, показав дополнительную работу, которую вы выполняете.
Напишите блог, загрузите в репозиторий git любой сторонний проект, над которым вы работали, и это не обязательно должен быть код; вы можете задокументировать проблему, с которой вы столкнулись в вашей текущей организации или колледже, если вы студент, и передать ее на GitHub.
Если вы спросите меня, это имеет смысл, и это один из способов выделиться. И поверьте мне, это повысит ваши шансы попасть в шорт-лист команды по привлечению талантов.
В этом блоге объясняется, как я создаю свою личную веб-страницу, и я пытаюсь объяснить процесс, через который я прошел, когда решил начать разработку.
Выбор внешней среды:
Это будет сложно для тех, кто не знаком с фронтенд-разработкой. Я предлагаю вам сначала понять концепции Javascript, а затем перейти к любой из доступных интерфейсных сред. Все они имеют свои плюсы и минусы. Итак, вы решаете
Я использую VueJS, это просто личный выбор, плюс у меня есть опыт работы над крупным проектом. И если вы спросите меня о моем опыте работы с VueJS, я скажу, что он интуитивно понятен и прост для понимания по сравнению с другими интерфейсными фреймворками.
Проблемы проектирования макета веб-сайта:
Я не очень хорош в проектировании чего-либо в своей жизни. Если я создаю что-то, что имеет хороший вес дизайна. В таком случае я просматриваю стратегию другого разработчика и вдохновляюсь 😅
Особая благодарность портфолио Ученна, которое помогло мне спроектировать мою версию.
Нет ничего плохого в том, чтобы взять идею у других дизайнеров, и вы всегда можете обратиться к ним и попросить разрешения на ее использование.
Структура проекта:
Для начала я использовал шаблон Vue CLI и по мере продвижения вперед разбивал приложение на модули.
Статические данные:
- persistentStorage: хранит всю информацию о блогах навыков, ролях и задачах.
- blogDetails: хранит все сведения о блогах.
- rolesChallenges: сохраняет текущие роли и задачи.
- skillDetails: хранит профессиональные навыки.
Все страницы были разделены на отдельные разделы, чтобы можно было легко вносить изменения в один раздел страницы, не затрагивая другой.
Компоненты:
- NavigationMenu.vue: — это компонент для хранения навигационных ссылок на другой раздел веб-страницы.
- AboutMe.vue: содержит раздел обо мне на целевой странице.
- SkillsList.vue: содержит информацию о навыках.
- BlogPost.vue: содержит раздел страницы, в котором отображается информация о блоге, считанная из BlogDetails.js.
- TheList.vue: этот компонент был создан для использования той же структуры макета тега списка, которая используется на всех страницах.
- TheSubheader.vue: этот компонент стандартизирует подзаголовок.
- DarkMode.vue: функция, которую я нашел наиболее распространенной в наши дни, — это переключение между светлой и темной темами.
Создано 3 разные страницыО программе | Портфолио | Связаться; есть еще одна страница для блога, которая связана с другим веб-сайтом блога.
Страницы:
LandingPage.vue: этот компонент является контейнером компонентов About.Vue и Skill.vue.
- Portfolio.vue: содержит профессиональный опыт, роли и обязанности.
- ContactPage.vue: содержит ссылку перенаправления на онлайн-профиль на GitHub| LinkedIn| Переполнение стека | Адрес электронной почты.
- App.vue. Это контейнер для всех компонентов, включая маршрутизатор, который упрощает маршрутизацию между разными страницами.
- main.js: он загружает все ваши компоненты vue, такие как App.vue и маршрутизаторы route.js.
- router.js: создает различные маршруты и пути веб-страницы.
активы: содержит изображения и контакты SVG.
Разделение различных разделов страницы позволяет мне легко изменять такие разделы, как «Роли и задачи», «Навыки» и «Блоги», не касаясь других разделов страницы.
Поддержание их в чистоте.
Есть еще некоторые модули, которые плохо организованы и требуют некоторых структурных изменений. Если вы что-то найдете, пожалуйста, обращайтесь.
Не стесняйтесь использовать это в качестве шаблона в соответствии с вашими потребностями, и отзывы очень ценятся.
Проверить мою версию страницы здесь
Codebase находится на GitHub
Вы можете связаться со мной E-mail или на LinkedIn.
Всегда рад помочь ✋!!
