04.06.2024 в 15:20

Многостраничный веб-сайт-портфолио для анализа данных и развертывания на страницах GitHub.

Демонстрация ваших лучших проектов, чтобы дать потенциальным работодателям или клиентам представление о ваших возможностях, — это шаг, который должен сделать каждый аналитик данных. Это включает в себя демонстрацию вашего опыта, включив в свое портфолио свои знания конкретных технологий или языков программирования. В этом проекте мы создадим веб-сайт-портфолио, на котором будут отражены ваши навыки с использованием HTML, CSS и небольшого количества JavaScript, и развернем его на бесплатной странице GitHub для публичного доступа.

GitHub Pages — это служба хостинга статических сайтов, которая принимает файлы HTML, CSS и JavaScript непосредственно из репозитория на GitHub. При необходимости он запускает файлы в процессе сборки и публикует веб-сайт. GitHub Pages бесплатен для всех пользователей GitHub и доступен в общедоступных репозиториях с бесплатной учетной записью GitHub. В ходе этого процесса вы узнаете об основных командах Git, структуре HTML и CSS.

Чтобы начать, войдите в свою учетную запись GitHub и создайте новый репозиторий:

Нажмите значок «+» в правом верхнем углу страницы и выберите «Новый репозиторий».

Назовите свой репозиторий. Для пользовательских страниц репозиторий должен иметь имя в формате username.github.io, где username — это ваше имя пользователя GitHub.

При желании добавьте описание, затем нажмите «Создать репозиторий».

Затем создайте папку для вашего проекта. В моем случае я назвал это joy-portfolio. Добавьте в папку свое резюме, изображение заголовка, логотип и изображения портфолио. В мое портфолио входят такие проекты, как анализ данных с помощью SQL и Python, очистка результатов поиска Google с помощью Python и регрессионный анализ машинного обучения. Также включите изображения навыков, образования, программного обеспечения и языков программирования.

В этом проекте я использовал Visual Studio Code в качестве редактора.

Загрузите его на странице загрузки кода Visual Studio.

Откройте VS Code, нажмите «Файл», перейдите в свою папку, нажмите «Открыть» и доверьтесь авторам.

Наша первая задача — создать шесть файлов: home.html, about-me.html,portfolio.html,home.css, about-me.css и portfolio.css.

Далее мы удаленно добавим нашу папку на GitHub.

Настройка Git и GitHub для удаленного доступа, добавления файлов и фиксации изменений.

Git и GitHub — системы контроля версий. Программное обеспечение для контроля версий облегчает координацию, совместное использование и сотрудничество всей команды разработчиков программного обеспечения. Это позволяет управлять изменениями в коде и файлах с течением времени. Чтобы зафиксировать изменения и добавить файлы в наш репозиторий, вам необходимо скачать Git для Windows. Перейдите к последней версии установщика Git для Windows и загрузите последнюю версию по адресу https://gitforwindows.org/. После запуска установщика следуйте инструкциям мастера установки Git до завершения установки.

Откройте Git Bash, который поставляется вместе с загрузкой. Установите свой адрес электронной почты с помощью следующей команды:

git config --global user.email "your_email@example.com"

Затем установите свое имя пользователя с помощью:

git config --global user.name "your_github_name"

Полное руководство можно найти в этом видео на YouTube.

В VS Code откройте терминал из папки вашего проекта. Добавьте следующие команды:

Инициализируйте пустой репозиторий:

git init

Добавьте все файлы в репозиторий:

git add .

Зафиксируйте файлы:

git commit -m 'adding new files'

Установите ветку на главную:

git branch -M main

Добавьте удаленный репозиторий:

git remote add origin https://github.com/JoyKimaiyo/joy-portfolio.github.io.git

Отправьте файлы в удаленный репозиторий:

git push -u origin main

Создание HTML-страниц

Декларация HTML-документа и метаданные:

Начните с объявления типа документа HTML5, используя <!DOCTYPE html>. Затем откройте документ HTML с помощью <html lang="en">. В <head> документа установите заголовок документа «ваше портфолио». Также важно указать кодировку символов UTF-8 для универсального рендеринга текста. Чтобы обеспечить совместимость с любым браузером, используйте <meta http-equiv="X-UA-Compatible" content="IE=edge">.

Затем опишите страницу и настройте область просмотра для адаптивного дизайна, чтобы ваш сайт хорошо выглядел на всех устройствах. Для стилизации свяжите внешний файл CSS с именами home.css, Aboutme.css и Portugal.css. Кроме того, свяжите CSS-файл Bootstrap Icons. Начнем с home.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Joyce Portfolio</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="Joy is a data analyst">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="home.css">
    <!-- Bootstrap Font Icon CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
</head>
<body>
<div id="header">
        <div class="container">
            <nav>
                <img src="download__4_-removebg-preview.png" class="logo">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="About Me Page.html">About Me</a></li>
                    <li><a href="portfolio.html">Portfolio</a></li> 
                </ul>
                <i class="bi bi-list"></i>
            </nav>
        </div>
    </div>

Добавление значков в проект предполагает подключение Bootstrap CDN. <link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">. Как только это будет сделано, вы сможете применить Bootstrap классы значков в элементах HTML для встраивания значков https://icons.getbootstrap.com/.

Разделы HTML

У нас есть раздел текста заголовка, раздел навигации и раздел контактов.

 <!-- Header Text Section -->
    <div class="header-text-section">
        <div class="container">
            <div class="header-text">
                <h1>Data Analyst</h1>
                <p id="animated-text"></p>
            </div>
        </div>
    </div>

    <!-- Navigation Section -->
    <div id="nav-section" class="container">
        <h2 class="subtitle">Navigation</h2>
        <div class="buttons">
            <a href="https://www.linkedin.com/in/joy-kimaiyo-185684225/" class="btn btn2"><i class="bi bi-linkedin"></i> LinkedIn Profile</a>
            <a href="https://github.com/JoyKimaiyo" class="btn btn2"><i class="bi bi-github"></i> GitHub Profile</a>
            <a href="https://twitter.com/KimaiyoJoy" class="btn btn2"><i class="bi bi-twitter"></i> X Profile</a>
            <a href="Joy  Kimaiyo CV (1).pdf" download class="btn btn2"><i class="bi bi-download"></i> Download CV</a>
            <a href="portfolio.html" class="btn btn2"><i class="bi bi-folder"></i> Portfolio</a>
        </div>
    </div>

Связывание контактной формы с Google Таблицами

Мы хотим, чтобы информация о том, когда человек заполняет форму, сохранялась в Google Sheets. эта форма собирает имя пользователя, адрес электронной почты и сообщение, а затем отправляет эти данные в Google Sheet, когда пользователь нажимает кнопку «Отправить».

<!-- Contact Section -->
    <div id="contact">
        <div class="container">
            <div class="content-left">
                <h1 class="subtitle">Contact Me</h1>
                <p><i class="bi bi-send"></i> at your email@gmail.com</p>
            </div>
            <div class="content-right">
                <form name="submit-to-google-sheet" action="https://script.google.com/macros/s/AKfycbyiBDL7pEc4bsgh9J_iWWEYLv8dC4F8Jvl0Z5s5lvCvuhyFkUlg7Y6yzqTebvX2vVie4Q/exec" method="post" onsubmit="showAlert()">
                    <input type="text" name="Name" placeholder="Your Name" required>
                    <input type="email" name="email" placeholder="Your Email" required>
                    <textarea name="message" placeholder="Your message"></textarea>
                    <button class="btn btn2" type="submit">Submit</button>
                </form>
            </div>

Раздел авторских прав

Уведомление об авторских правах на вашем веб-сайте, в приложении или блоге информирует пользователей о том, что ваш контент защищен авторскими правами. Я добавил авторские права, чтобы чувствовать себя прекрасно😂

<div class="copyright">
            <p>Copyright <i class="bi bi-c-circle"></i> Joy  2023</p>
        </div>
    </div>

Раздел Javascript

Первый скрипт отображает пользователю уведомление «Сообщение успешно отправлено» после заполнения формы. Второй скрипт представляет анимированный абзац, который автоматически пишется каждый раз, когда кто-то посещает страницу.

 <script>
        function showAlert() {
            setTimeout(function() {
                alert('Message sent successfully!');
            }, 5000); 
        }

        document.addEventListener('DOMContentLoaded', function() {
            const textElement = document.getElementById('animated-text');
            const text = "Welcome to my digital portfolio. I'm Joy, a data analyst with a keen interest in exploratory analysis, web scraping, machine learning, and cloud computing. Currently, I'm expanding my knowledge in cloud computing with Azure. ";
            let index = 0;

            function type() {
                if (index < text.length) {
                    textElement.innerHTML += text.charAt(index);
                    index++;
                    setTimeout(type, 50);
                }
            }

            type();
        });
    </script>
</body>
</html>

Медиа-запросы для адаптивного дизайна

Это медиа-запрос CSS в файле home.css. Медиа-запросы — это функция CSS, которая позволяет контенту веб-страницы адаптироваться к различным размерам и разрешениям экрана. Они являются фундаментальной частью адаптивного веб-дизайна.

  @media (max-width: 600px) {
section {
padding: 10px;
}

section p {
font-size: 0.8em;
}
}

Полный код можно найти здесь https://github.com/JoyKimaiyo/JoyKimaiyo.github.io.

Развертывание на страницах GitHub, часть 2

Источник

#CSS #HTML #GitHub #JavaScript

Войти на сайт