AIAcademy
1. Общая информац...
18 апреля 2025 г.
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