index.html - master - peling-dev/Portfolio

index.html
179 строк8 KB
peling-dev
Добавил новый текст и проект
13 июн 2026, 14:39
13 июн 2026, 14:39af23959
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Павел «Пелинг» — Верстальщик, SCSS, БЭМ</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

        :root {
            --bg-color: #0D1B2A;
            --text-color: #E0E1DD;
            --accent: #00B4D8;
            --accent-hover: #0096C7;
            --accent-yellow: #FFD700;
            --accent-purple: #CC66FF;
            --card-bg: rgba(13, 27, 42, 0.8);
            --border-color: rgba(0, 180, 216, 0.2);
            --font-main: 'Inter', system-ui, -apple-system, sans-serif;
        }

        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            font-family: var(--font-main);
            border: 2px solid var(--accent-purple);
            box-shadow: 0 0 15px rgba(204, 102, 255, 0.3), inset 0 0 15px rgba(204, 102, 255, 0.1);
            margin: 0;
            min-height: 100vh;
        }

        header {
            text-align: center;
            padding: 3rem 1rem 2rem;
        }
        header h1 {
            color: var(--accent);
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }
        header p {
            color: var(--text-color);
            font-size: 1.1rem;
            opacity: 0.85;
            max-width: 600px;
            margin: 0 auto;
        }

        article {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            transition: border-color 0.3s;
        }
        article:hover {
            border-color: var(--accent-purple);
        }
        article h3 {
            color: var(--accent);
            margin-bottom: 0.5rem;
        }
        article .tech {
            color: var(--accent-purple);
            opacity: 0.8;
            font-size: 0.9rem;
            font-weight: 500;
        }

        .portfolio-link {
            color: var(--accent) !important;
            text-decoration: none;
            transition: opacity 0.2s ease, transform 0.2s ease, text-shadow 0.2s ease;
        }
        .portfolio-link:hover {
            opacity: 0.8;
            transform: translateY(-2px);
            text-shadow: 0 0 8px var(--accent);
        }

        a[role="button"] {
            background-color: var(--accent);
            border: none;
            color: #0D1B2A;
            font-weight: 600;
            transition: background-color 0.3s, transform 0.2s;
        }
        a[role="button"]:hover {
            background-color: var(--accent-hover);
            transform: scale(1.02);
        }

        h2 {
            color: var(--accent);
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 0.5rem;
            margin-top: 2rem;
        }

        footer {
            text-align: center;
            padding: 2rem 1rem;
            opacity: 0.6;
            font-size: 0.9rem;
        }
    </style>
</head>
<body>
    <main class="container">
        <header>
            <h1>Павел «Пелинг»</h1>
            <p>Верстальщик | HTML5, CSS3, SCSS, БЭМ, адаптивная вёрстка</p>
            <p>Создаю чистый код, красивые интерфейсы и нестандартные карточки товаров. Член Гильдии Архитекторов.</p>
            <a href="#contacts" role="button">Связаться</a>
        </header>

        <section id="about">
            <h2>О себе</h2>
            <p>Здравствуйте! Я верстальщик лендингов и сложных компонентов. Работаю с HTML5, CSS3, SCSS (переменные, миксины, партиалы), методологией БЭМ и адаптивной сеткой. Мои страницы корректно отображаются на компьютерах, планшетах и телефонах.</p>
            <p>В своей работе я придерживаюсь трёх принципов: чистая структура кода, соответствие макету заказчика и соблюдение сроков. Моя задача — сделать так, чтобы вы получили именно тот результат, который ожидали.</p>
            <p>Постоянно учусь: недавно освоил SCSS, научился собирать проекты на Gulp и создавать карточки с асимметричным радиусом в стиле «стекло + изумруд».</p>
        </section>

        <section id="portfolio">
            <h2>Портфолио</h2>

            <article>
                <h3><a href="https://peling-dev.gitverse.site/guild_of_architects/" target="_blank" class="portfolio-link">Страница Гильдии Архитекторов</a></h3>
                <p>Чистый HTML. Семантическая структура, заголовки, списки. Без CSS — только правильная разметка.</p>
                <p class="tech">HTML5</p>
            </article>

            <article>
                <h3><a href="https://peling-dev.gitverse.site/guild_knowledge_base/" target="_blank" class="portfolio-link">База знаний Гильдии</a></h3>
                <p>Семантическая работа с текстом: заголовки, акценты, цитаты, индексы, правки. Без CSS — только чистый HTML.</p>
                <p class="tech">HTML5</p>
            </article>

            <article>
                <h3><a href="https://peling-dev.gitverse.site/sferium/" target="_blank" class="portfolio-link">Презентация «Сфериум»</a></h3>
                <p>Концепция цифровой среды для взаимодействия AI и пользователя. Проект Гильдии Архитекторов.</p>
                <p class="tech">HTML5 • CSS3</p>
            </article>

            <article>
                <h3><a href="https://peling-dev.gitverse.site/cyber_cafe_nero" target="_blank" class="portfolio-link">Кибер-кафе "Нейро"</a></h3>
                <p>Лендинг для киберпанк-кафе. HTML5, CSS3, SCSS, адаптивная вёрстка, неоновые эффекты.</p>
                <p class="tech">HTML5 • CSS3 • SCSS</p>
            </article>

            <article>
                <h3><a href="https://peling-dev.gitverse.site/diesel_locomotive_fleet/" target="_blank" class="portfolio-link">Тепловоз ДВ</a></h3>
                <p>Лендинг для продажи локомотивов. HTML5, SCSS (переменные, миксины, партиалы), БЭМ, адаптивная сетка, JS (кнопка «Наверх»).</p>
                <p class="tech">HTML5 • SCSS • БЭМ • JavaScript</p>
            </article>

            <article>
                <h3><a href="https://peling-dev.gitverse.site/cards" target="_blank" class="portfolio-link">Коллекция карточек пауэрбанка</a></h3>
                <p>Семь типов карточек товара с асимметричным радиусом в стиле «стекло + изумруд + золотисто-медовый». Полностью адаптивны, БЭМ, интерактивное переключение ёмкости.</p>
                <p class="tech">HTML5 • SCSS • БЭМ • JavaScript</p>
            </article>
        </section>

        <section id="contacts">
            <h2>Контакты</h2>
            <p>Email: <a href="mailto:frilancesfre@mail.ru">frilancesfre@mail.ru</a></p>
            <p>GitVerse: <a href="https://gitverse.ru/peling-dev" target="_blank">gitverse.ru/peling-dev</a></p>
            <p>MAX: <a href="https://max.ru/join/8jqV9peRmYjMVEQcoS_Xl4d9CFPkZrt8CZH0k5nKXzk" target="_blank">@peling</a></p>
        </section>
    </main>

    <footer>
        <p>© Павел Пелинг, 2026. Член Гильдии Архитекторов.</p>
    </footer>
</body>
</html>