1. Общая информац...

1. Общая информация: Тематика сайта: Портфолио веб-разработчика. Название сайта: "My Dev Portfolio". Основные разделы: Главная (Hero Section): Приветствие с кратким описанием. О себе (About): Информация о разработчике. Проекты (Projects): Карточки с проектами (с изображением, описанием и ссылкой). Контакты (Contact): Форма обратной связи с полями (имя, email, сообщение). 2. Дизайн: Цветовая палитра: Основной цвет: #4CAF50 (зелёный). Дополнительный цвет: #FFFFFF (белый). Фоновый цвет: #F9F9F9 (светло-серый). Шрифты: Основной: "Roboto", sans-serif. Размеры: заголовки — крупные, текст — стандартный (14–16px). Макет: Адаптивность: сайт должен корректно отображаться на мобильных устройствах (используй медиазапросы). Структура: фиксированный header, разделы в вертикальной прокрутке. 3. Функциональность: JS-анимация: Плавная прокрутка при переходе по ссылкам навигации. Валидация формы: Проверка, чтобы поля не оставались пустыми. Кнопка "Назад наверх", которая появляется при прокрутке вниз. 4. Исходные данные: Для раздела "Проекты" предоставь 3 примера с заглушками: "Weather App" — простое приложение прогноза погоды. "To-Do List" — приложение для управления задачами. "E-commerce Website" — базовый интернет-магазин. Для формы в разделе "Контакты" не требуется серверная обработка, просто реализуй функционал, чтобы введённые данные можно было отправить в консоль. 5. Технологии: Минимум сторонних библиотек, но можно использовать Google Fonts для шрифтов. Используй Flexbox или Grid для макета.

Здравствуйте!

Я рад помочь вам создать веб-сайт портфолио "My Dev Portfolio" согласно вашим требованиям. Давайте пошагово рассмотрим, как реализовать каждый из указанных разделов.

1. Структура проекта

Создайте следующие файлы в вашем проекте:

index.html — основной файл HTML.
styles.css — файл стилей CSS.
script.js — файл JavaScript для функциональности.

2. HTML-разметка (`index.html`)

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>My Dev Portfolio</title>
    <!-- Подключение стилей -->
    <link rel="stylesheet" href="styles.css">
    <!-- Подключение шрифта Roboto из Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
    <!-- Фиксированный header с навигацией -->
    <header id="header">
        <nav>
            <ul>
                <li><a href="#hero">Главная</a></li>
                <li><a href="#about">О себе</a></li>
                <li><a href="#projects">Проекты</a></li>
                <li><a href="#contact">Контакты</a></li>
            </ul>
        </nav>
    </header>

    <!-- Главная секция (Hero Section) -->
    <section id="hero">
        <h1>Здравствуйте!</h1>
        <p>Добро пожаловать в мое портфолио веб-разработчика.</p>
    </section>

    <!-- О себе (About) -->
    <section id="about">
        <h2>О себе</h2>
        <p>Здесь вы можете рассказать о себе, своем опыте и навыках.</p>
    </section>

    <!-- Проекты (Projects) -->
    <section id="projects">
        <h2>Проекты</h2>
        <div class="projects-container">
            <!-- Проект 1 -->
            <div class="project-card">
                <img src="weather-app-placeholder.png" alt="Weather App">
                <h3>Weather App</h3>
                <p>Простое приложение прогноза погоды.</p>
                <a href="#">Подробнее</a>
            </div>
            <!-- Проект 2 -->
            <div class="project-card">
                <img src="todo-list-placeholder.png" alt="To-Do List">
                <h3>To-Do List</h3>
                <p>Приложение для управления задачами.</p>
                <a href="#">Подробнее</a>
            </div>
            <!-- Проект 3 -->
            <div class="project-card">
                <img src="ecommerce-placeholder.png" alt="E-commerce Website">
                <h3>E-commerce Website</h3>
                <p>Базовый интернет-магазин.</p>
                <a href="#">Подробнее</a>
            </div>
        </div>
    </section>

    <!-- Контакты (Contact) -->
    <section id="contact">
        <h2>Контакты</h2>
        <form id="contact-form">
            <label for="name">Имя:</label>
            <input type="text" id="name" name="name" required>

            <label for="email">Email:</label>
            <input type="email" id="email" name="email" required>

            <label for="message">Сообщение:</label>
            <textarea id="message" name="message" required></textarea>

            <button type="submit">Отправить</button>
        </form>
    </section>

    <!-- Кнопка "Назад наверх" -->
    <button id="back-to-top">↑</button>

    <!-- Подключение скриптов -->
    <script src="script.js"></script>
</body>
</html>

3. Стилизация (`styles.css`)

/* Общие стили */
body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    background-color: #F9F9F9;
}

/* Фиксированный header */
header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #4CAF50;
    z-index: 1000;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 1em 0;
}

nav ul li {
    margin: 0 1em;
}

nav ul li a {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 1.2em;
}

/* Главная секция (Hero Section) */
#hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding-top: 60px; /* Высота header */
    background-color: #F9F9F9;
}

#hero h1 {
    font-size: 3em;
    color: #4CAF50;
}

#hero p {
    font-size: 1.5em;
    color: #333;
}

/* О себе (About) */
#about {
    padding: 100px 20px;
    background-color: #FFFFFF;
    text-align: center;
}

#about h2 {
    font-size: 2.5em;
    color: #4CAF50;
}

#about p {
    font-size: 1.1em;
    color: #555;
    max-width: 800px;
    margin: 0 auto;
}

/* Проекты (Projects) */
#projects {
    padding: 100px 20px;
    background-color: #F9F9F9;
}

#projects h2 {
    text-align: center;
    font-size: 2.5em;
    color: #4CAF50;
    margin-bottom: 50px;
}

.projects-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.project-card {
    background-color: #FFFFFF;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin: 15px;
    max-width: 300px;
    text-align: center;
    overflow: hidden;
    transition: transform 0.3s;
}

.project-card:hover {
    transform: scale(1.05);
}

.project-card img {
    width: 100%;
    height: auto;
}

.project-card h3 {
    font-size: 1.5em;
    color: #4CAF50;
    margin: 15px 0;
}

.project-card p {
    padding: 0 15px;
    color: #555;
}

.project-card a {
    display: block;
    padding: 10px;
    background-color: #4CAF50;
    color: #FFFFFF;
    text-decoration: none;
    margin: 15px;
    border-radius: 5px;
}

.project-card a:hover {
    background-color: #45a049;
}

/* Контакты (Contact) */
#contact {
    padding: 100px 20px;
    background-color: #FFFFFF;
}

#contact h2 {
    text-align: center;
    font-size: 2.5em;
    color: #4CAF50;
    margin-bottom: 50px;
}

#contact-form {
    max-width: 500px;
    margin: 0 auto;
}

#contact-form label {
    display: block;
    margin-bottom: 5px;
    color: #555;
}

#contact-form input,
#contact-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#contact-form button {
    width: 100%;
    padding: 10px;
    background-color: #4CAF50;
    color: #FFFFFF;
    border: none;
    border-radius: 5px;
    font-size: 1.2em;
}

#contact-form button:hover {
    background-color: #45a049;
}

/* Кнопка "Назад наверх" */
#back-to-top {
    position: fixed;
    bottom: 40px;
    right: 40px;
    background-color: #4CAF50;
    color: #FFFFFF;
    border: none;
    padding: 15px;
    border-radius: 50%;
    font-size: 1.5em;
    cursor: pointer;
    display: none;
    z-index: 1000;
}

#back-to-top:hover {
    background-color: #45a049;
}

/* Адаптивность */
@media (max-width: 768px) {
    nav ul {
        flex-direction: column;
        background-color: #4CAF50;
    }

    nav ul li {
        margin: 0.5em 0;
    }

    .projects-container {
        flex-direction: column;
        align-items: center;
    }

    #hero h1 {
        font-size: 2.5em;
    }

    #hero p {
        font-size: 1.2em;
    }
}

4. Функциональность (`script.js`)

// Плавная прокрутка при переходе по навигационным ссылкам
document.querySelectorAll('nav a').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        target.scrollIntoView({
            behavior: 'smooth'
        });
    });
});

// Отображение кнопки "Назад наверх" при прокрутке вниз
const backToTopButton = document.getElementById('back-to-top');

window.addEventListener('scroll', () => {
    if (window.pageYOffset > 300) {
        backToTopButton.style.display = 'block';
    } else {
        backToTopButton.style.display = 'none';
    }
});

// Плавная прокрутка наверх при нажатии на кнопку "Назад наверх"
backToTopButton.addEventListener('click', () => {
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
});

// Валидация формы и отправка данных в консоль
const contactForm = document.getElementById('contact-form');

contactForm.addEventListener('submit', function(e) {
    e.preventDefault();

    const name = document.getElementById('name').value.trim();
    const email = document.getElementById('email').value.trim();
    const message = document.getElementById('message').value.trim();

    if (name === '' || email === '' || message === '') {
        alert('Пожалуйста, заполните все поля.');
        return;
    }

    // Вывод данных в консоль
    console.log('Имя: ' + name);
    console.log('Email: ' + email);
    console.log('Сообщение: ' + message);

    // Очистка формы
    contactForm.reset();
    alert('Ваше сообщение отправлено!');
});

5. Подключение шрифтов

В файле index.html уже подключен шрифт Roboto из Google Fonts:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

6. Дополнительные пояснения

Адаптивность: Используются медиазапросы @media для обеспечения корректного отображения на мобильных устройствах.
Flexbox: Применяется для расположения элементов навигации и карточек проектов.
Плавная прокрутка: Реализована с помощью JavaScript, прослушивая события клика на ссылках навигации.
Валидация формы: Проверяется, чтобы поля формы не были пустыми перед отправкой.
Кнопка "Назад наверх": Появляется при прокрутке страницы вниз и позволяет быстро вернуться наверх.
Карточки проектов: Используются заглушки для проектов. Вы можете заменить изображения и ссылки на реальные проекты.

7. Рекомендации по дополнительной настройке

Изображения: Замените *-placeholder.png на реальные изображения ваших проектов.
Ссылки на проекты: В тегах <a href="#">Подробнее</a> замените # на реальные ссылки на страницы ваших проектов.
Контент: Обновите разделы "О себе" и "Проекты" с информацией о себе и ваших реальных работах.

8. Заключение

Теперь у вас есть базовый шаблон для вашего портфолио. Если у вас возникнут вопросы или потребуется помощь с дополнительными функциями, не стесняйтесь обращаться!

Удачи в ваших начинаниях веб-разработки!

Начните работу с AIAcademy