<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Портфолио Иллариона - DHK TEAM. Сайты и дизайн.">
<meta name="keywords" content="портфолио, Илларион, DHK TEAM, сайты, дизайн">
<meta name="author" content="Илларион">
<meta property="og:title" content="Портфолио Иллариона - DHK TEAM">
<meta property="og:description" content="Сайты и дизайн">
<meta property="og:image" content="https://dahock.su/coinImg/image222.png">
<meta property="og:url" content="https://dahock.su/index/prilozhenija/0-1864">
<meta property="og:type" content="website">
<!-- Тег для Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Портфолио Иллариона - DHK TEAM">
<meta name="twitter:description" content="Сайты и дизайн">
<meta name="twitter:image" content="https://dahock.su/coinImg/image222.png">
<!-- Дополнительные мета-теги -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://dahock.su/css/3800/kazeno/styles3.css" />
<link rel="stylesheet" href="https://dahock.su/css/3800/kazeno/styles2.css" />
<link rel="stylesheet" href="https://dahock.su/css/3800/kazeno/styles1.css" />
<title>Портфолио Иллариона - DHK TEAM</title>
</head>
<div class="header">
<h1 class="fade-in">Приветствую вас в моём портфолио</h1>
<h3 id="animated-text" style="opacity: 0;">© Это логотипы:</h3>
<section class="logo">
<img src="https://dahock.su/coinImg/imag2.png" alt="Логотип 2">
<img src="https://dahock.moy.su/slider/cooltext262032961474463.png" alt="Логотип 1">
<img src="https://dahock.su/coinImg/image222.png" alt="Логотип 2">
</section>
</div>
<div class="bubl">
<div class="bublcontent">
<div class="name">
<h2 class="fade-in">Давайте знакомиться!</h2>
</div>
</div>
<div class="bubl1"></div>
<div class="bubl2"></div>
<div class="bubl3"></div>
</div>
<div class="container">
<h2>Меня зовут Илларион</h2>
<div class="smileys">
<span class="smiley">😊</span>
<span class="smiley">😊</span>
<span class="smiley">😊</span>
</div>
</div>
<div class="container_random1">
<div class="bio-section_random2">
<div class="bio_random3">
<h2>Я люблю Web Дизайн.</h2>
<div>
<button class="tab_random5" data-section="biography_random6">Биография</button>
<button class="tab_random5" data-section="skills_random7">Навыки</button>
<button class="tab_random5" data-section="hobbies_random8">Принципы</button>
<div class="hint" id="about-me-hint">
<h1>Нажмите кнопку, чтобы узнать обо мне</h1>
</div>
</div>
<div class="section_random4" id="biography_random6">
<p>
<div class="gfg">
<h2>Привет, я Илларион!</h2>
<p>Я – творческая душа, заточенная на создание чего-то по-настоящему необычного на сайтах.</p>
<p>После окончания колледжа я обладал особой привязанностью к миру веб-дизайна. В процессе года за годом моё увлечение лишь укреплялось и с каждым новым проектом раскрывало всё больше возможностей.</p>
<p>Я с любовью и детальным вниманием изучаю стиль каждого сайта, словно археолог, исследующий древние руины. В каждом пикселе я вижу глубину работы, постигаю сущность и анализирую эстетику.</p>
<p>Мой глаз обучен улавливать тончайшие детали и секреты веб-дизайна. Я стремлюсь создать уникальные и запоминающиеся веб-ресурсы, которые будут отличаться от всего привычного и стандартного.</p>
<p class="highlight">Моя страсть к веб-дизайну – это не просто хобби, а способ жизни. Я вижу веб-страницы как полотна, на которых можно выразить свою креативность и вдохнуть в них жизнь.</p>
<p class="quote">"Веб-дизайн – это искусство, в котором я нахожу своё вдохновение и смысл."</p>
</div>
</p>
</div>
<div class="section_random4" id="skills_random7">
<p>
<table class="dff">
<tr>
<th>Web креатив:</th>
<th>Моя оценка:</th>
<th>Процент знаний:</th>
</tr>
<tr>
<td><b>Идеи</b></td>
<td><b>Супер чувствую себя художником</b></td>
<td><b>100%</b></td>
</tr>
<tr>
<td>HTML</td>
<td>Отлично</td>
<td>96%</td>
</tr>
<tr>
<td>CSS</td>
<td>Хорошо</td>
<td>72%</td>
</tr>
<tr>
<td>JS</td>
<td>Не плохо</td>
<td>42%</td>
</tr>
<tr>
<td>SEO</td>
<td>Для меня пойдет</td>
<td>30%</td>
</tr>
<tr>
<td>PHP</td>
<td>Не люблю</td>
<td>6%</td>
</tr>
</table>
</p>
</div>
<div class="section_random4" id="hobbies_random8">
<p>
<div class="vfvf">
<h2>Мои принципы.</h2>
<p>Я – человек, который предпочитает непосредственно работать с HTML, а не полагаться на программы для веб-дизайна. Многие другие используют различные инструменты, но я предпочитаю создавать и изменять все в чистом поле, чтобы иметь полный контроль над каждым аспектом моих проектов.</p>
<p>Меня привлекает свобода и гибкость, которую предоставляет HTML. Я наслаждаюсь процессом создания уникальных и оригинальных веб-ресурсов, воплощая свои идеи в коде.</p>
<p class="highlight">CMS (системы управления сайтами) могут быть полезными инструментами, но они могут ограничивать возможности и креативность. Я предпочитаю самостоятельно определять, как должен выглядеть и функционировать каждый элемент моего сайта.</p>
<p>Мои проекты строятся на тщательном анализе и понимании потребностей моих клиентов и пользователей. Я стремлюсь создать интерактивные и привлекательные веб-ресурсы, которые эффективно передают сообщение и предлагают уникальный пользовательский опыт.</p>
<p class="quote">"HTML – это мое творчество, в котором я нахожу свободу и самовыражение."</p>
</div>
</p>
</div>
</div>
</div>
</div>
<div class="demo">
<h2>Демонстрирую пример стиля кнопок для сайтов.</h2>
<div class="content">
<h2>Лента анимационных кнопок:</h2>
<button class="btn example-4">
<span>Перевёртишь (Пример 1)</span>
</button>
<button class="btn example-5">Зуминг (Пример 2)</button>
<button class="btn example-6">Пульсация (Пример 3)</button>
</div>
<div class="content">
<h2>Лента официальных кнопок:</h2>
<button class="new-btn primary">Официальная кнопка 1</button>
<button class="new-btn success">Официальная кнопка 2</button>
<button class="new-btn warning">Официальная кнопка 3</button>
<button class="new-btn danger">Официальная кнопка 4</button>
<button class="new-btn">Простая кнопка</button>
</div>
<h2>Лента плоских кнопок:</h2>
<a class="flat-btn primary">Официальная кнопка 1</a>
<a class="flat-btn success">Официальная кнопка 2</a>
<a class="flat-btn warning">Официальная кнопка 3</a>
<a class="flat-btn danger">Официальная кнопка 4</a>
<button class="flat-btn">Новая кнопка 1</button>
</div>
<script>
window.addEventListener('scroll', checkScroll);
function checkScroll() {
var elementPosition = document.querySelector('.container').getBoundingClientRect().top;
if (elementPosition < window.innerHeight) {
document.querySelector('.container').classList.add('show');
}
}
</script>
<script>
window.addEventListener('scroll', function() {
var section = document.querySelector('.section');
var windowHeight = window.innerHeight;
var scrollPosition = window.scrollY || window.pageYOffset;
if (section.getBoundingClientRect().top < windowHeight) {
section.classList.add('visible');
}
});
function openModal(url) {
var modal = document.getElementById('modal');
var modalContent = document.getElementById('modal-content');
var modalClose = document.getElementById('modal-close');
var iframe = document.createElement('iframe');
iframe.src = url;
modalContent.appendChild(iframe);
modal.style.display = 'block';
modalClose.addEventListener('click', function() {
modal.style.display = 'none';
modalContent.removeChild(iframe);
});
}
</script>
<div class="section">
<div class="gfgfg">
<div class="quote">
<h1>Demo Landing page:</h1>
</div>
</div>
<script>
window.addEventListener('scroll', function() {
var element = document.querySelector('.gfgfg');
var position = element.getBoundingClientRect().top;
var windowHeight = window.innerHeight;
if (position < windowHeight) {
element.classList.add('appear');
}
});
</script>
<script>
window.addEventListener('scroll', function() {
var element = document.querySelector('.gfgfg');
var position = element.getBoundingClientRect().top;
var windowHeight = window.innerHeight;
if (position < windowHeight) {
element.classList.add('appear');
}
});
</script>
<div class="dffdf">
<div class="card" onclick="openModal('https://dahock.moy.su/board/vnimanie/1')">
<h3>Новогодняя страница</h3>
<p>Лендинг дизайн в праздничном стиле.</p>
</div>
<div class="card" onclick="openModal('https://dahock.moy.su/stuff/sadf/1')">
<h3>Нуар</h3>
<p>Лендинг дизайн в темно-красном стиле Нуар.</p>
</div>
<div class="card" onclick="openModal('https://dahock.moy.su/blog/')">
<h3>Мрачный Блог</h3>
<p>Лендинг страница в мрачном стиле.</p>
</div>
<div class="card" onclick="openModal('https://dahock.moy.su/index/kino_stranica/0-1726')">
<h3>Кино</h3>
<p>Лендинг страница с секциями кино.</p>
</div>
<div class="card" onclick="openModal('https://dahock.moy.su/index/multfilmy/0-403')">
<h3>Мультфильмы</h3>
<p>Лендинг страница с секциями мультфильмов</p>
</div>
<div class="card" onclick="openModal('https://dahock.moy.su/index/anime/0-1572')">
<h3>Анимэ</h3>
<p>Лендинг страница с секциями анимэ</p>
</div>
</div>
</div>
<div id="modal">
<div id="modal-content">
<span id="modal-close">×</span>
</div>
</div>
<div class="dad">
<h2>Чувствуется дизайнерский вкус?</h2>
<p>Данная страница <b>полностью</b> написана на чистом <b>HTML</b> без использования конструкторов и специальных приложений как <b>Figma</b> Прошу обротить на это внимание. По скольку уверен что сторонние методы только облегчают задачу и урезают возможности в сайтостроении.</p>
<a href="https://dahock.moy.su/index/siter/0-1548" class="dad-btn">Заказать сайт</a>
<a href="https://dahock.su/index/sales/0-1727" class="dad-btn">Купить решение для сайта</a>
</div>
<blockquote class="rabot">
<p>Уважаемый работодатель,</p>
<p>Приглашаю вас ознакомиться с моим резюме на платформе HeadHunter. Здесь вы можете найти подробную информацию о моем опыте работы, навыках и образовании.</p>
<p><a href="https://almaty.hh.kz/applicant/resumes/view?resume=ac51c5e5ff05de8bff0039ed1f784d54624b6d" target="_blank">Перейти на HH</a></p>
<p>Буду рад ответить на любые вопросы или предоставить дополнительную информацию. Спасибо за ваше время и внимание.</p>
<p>С наилучшими пожеланиями,<br>Илларион admin@dahock.su</p>
</blockquote>
<section class="illuminat">
</section>
<script>
window.addEventListener("scroll", function() {
var section = document.querySelector(".illuminat");
var sectionPosition = section.getBoundingClientRect().top;
var screenHeight = window.innerHeight;
if (sectionPosition < screenHeight) {
section.style.display = "flex";
animateText();
}
});
function animateText() {
var text = "Dahock.su";
var textContainer = document.querySelector(".illuminat");
if (textContainer.textContent.trim() !== text) {
textContainer.textContent = "";
for (var i = 0; i < text.length; i++) {
if (text[i] === " ") {
textContainer.appendChild(document.createTextNode(" "));
} else {
var span = document.createElement("span");
span.textContent = text[i];
span.classList.add("animate-text");
span.style.animationDelay = (i * 0.2) + "s";
textContainer.appendChild(span);
}
}
}
setTimeout(function() {
var extraLetters = textContainer.querySelectorAll("span:not(.animate-text)");
extraLetters.forEach(function(letter) {
letter.classList.add("hide-extra");
});
}, (text.length * 0.2) * 1000); // Исчезновение лишних букв после завершения анимации
}
</script>
<script>
window.addEventListener("DOMContentLoaded", function() {
setTimeout(function() {
var textElement = document.getElementById("animated-text");
textElement.classList.add("fade-in");
}, 3000);
});
</script>
<script>
window.addEventListener('scroll', function() {
var demoSection = document.querySelector('.demo');
var dadSection = document.querySelector('.dad');
var windowHeight = window.innerHeight;
var scrollPosition = window.scrollY || window.pageYOffset;
if (demoSection.getBoundingClientRect().top < windowHeight) {
demoSection.classList.add('visible');
}
if (dadSection.getBoundingClientRect().top < windowHeight) {
dadSection.classList.add('visible');
}
});
</script>
<script>
window.addEventListener('scroll', function() {
var element = document.querySelector('.rabot');
var position = element.getBoundingClientRect().top;
var screenHeight = window.innerHeight;
if (position < screenHeight) {
element.style.opacity = 1;
setTimeout(function() {
element.style.animation = 'none';
}, 3000);
}
});
</script>
<!-- Здесь будет основное содержимое вашего портфолио -->
<div class="footer">
<p>© 2023 Моё портфолио. Илларион, <a href="https://dahock.su/" target="_blank">Dahock.su</a></p> Все права защищены. $POWERED_BY$
</div>
</body>
</html>
!
