Simka
Пользователь
- Сообщения
- 3
- Реакции
- 0
Создаю стильный и эффектный 3D сайт-визитку для веб-разработчика, выполненную в красивых и ярких цветах в авто-стили SIMKA. Дизайн сочетает современные 3D-элементы, плавные анимации и динамичные графические детали, подчёркивающие креативность и профессионализм. В центре — аватарка или логотип разработчика, дополненная кратким описанием навыков и услуг. Интерфейс украшен кастомным курсором в виде авто-иконки, создающим ощущение скорости и динамики. Вкладка браузера содержит изображение или логотип, гармонирующий с авто-стилем. В итоге — яркий, современный и привлекательный сайт, который выделяется своей красотой и оригинальностью.
HTML:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
<title>Alex WebFlow | разработчик</title>
<!-- Уникальная иконка для вкладки (SVG-логотип с буквой A и курсором) -->
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' fill='%236c5ce7' /%3E%3Cpath d='M30 30 L70 70 M70 30 L30 70' stroke='white' stroke-width='8' stroke-linecap='round' /%3E%3Ccircle cx='50' cy='50' r='12' fill='%23ffd966' /%3E%3C/svg%3E">
<style>
/* СБРОС И БАЗОВЫЕ ПЕРЕМЕННЫЕ */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
cursor: none; /* Прячем стандартный курсор */
}
body {
font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
background: linear-gradient(145deg, #0f0c1f 0%, #1a1b2f 50%, #14112b 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow-x: hidden;
color: #fff;
line-height: 1.5;
}
/* ПОДГРУЗКА ШРИФТОВ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;500;700;800&display=swap');
/* КАСТОМНЫЙ КУРСОР — стильный анимированный кристалл / указатель */
.custom-cursor {
position: fixed;
width: 52px;
height: 52px;
pointer-events: none;
z-index: 9999;
transform: translate(-50%, -50%);
transition: transform 0.08s linear, filter 0.2s;
filter: drop-shadow(0 0 15px #a688ff);
will-change: left, top;
}
.cursor-svg {
width: 100%;
height: 100%;
animation: cursorRotate 4s infinite alternate ease-in-out;
}
@keyframes cursorRotate {
0% { transform: rotate(-15deg) scale(1); }
100% { transform: rotate(15deg) scale(1.2); }
}
/* ОСНОВНОЙ КОНТЕЙНЕР */
.container {
position: relative;
z-index: 10;
width: 100%;
max-width: 1300px;
margin: 2rem auto;
padding: 1rem;
}
/* ГЛАВНАЯ КАРТОЧКА С ПЛЕКСИ-ЭФФЕКТОМ */
.glass-card {
background: rgba(20, 15, 45, 0.4);
backdrop-filter: blur(15px) saturate(180%);
-webkit-backdrop-filter: blur(15px) saturate(180%);
border: 1px solid rgba(150, 130, 255, 0.25);
border-radius: 60px 60px 60px 60px / 40px 40px 40px 40px;
box-shadow: 0 35px 80px -15px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(200, 180, 255, 0.15) inset;
padding: 3rem 2.5rem;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 2.5rem;
transition: transform 0.3s, box-shadow 0.4s;
transform-style: preserve-3d;
perspective: 1200px;
}
.glass-card:hover {
box-shadow: 0 45px 100px -15px #4b3c9c, 0 0 0 2px rgba(180, 160, 255, 0.5) inset;
}
/* ЛЕВАЯ ЧАСТЬ: АВАТАР И ПРИВЕТСТВИЕ */
.profile-section {
flex: 1 1 300px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transform: translateZ(25px);
}
.avatar-wrapper {
width: 220px;
height: 220px;
border-radius: 50%;
background: linear-gradient(135deg, #a88bff, #6246ea);
padding: 5px;
margin-bottom: 20px;
box-shadow: 0 20px 35px #321f77, 0 0 50px #9b87ff;
animation: avatarFloat 5s infinite alternate;
}
@keyframes avatarFloat {
0% { transform: translateY(0) scale(1); box-shadow: 0 20px 35px #321f77; }
100% { transform: translateY(-12px) scale(1.02); box-shadow: 0 35px 55px #523ea0; }
}
.avatar {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
border: 3px solid white;
background: #2f296b;
display: flex;
align-items: center;
justify-content: center;
font-size: 5rem;
font-weight: 800;
color: white;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="45" r="30" fill="%23f1e9ff"/><circle cx="35" cy="40" r="5" fill="%23322e5e"/><circle cx="65" cy="40" r="5" fill="%23322e5e"/><path d="M35 60 Q50 75 65 60" stroke="%23322e5e" stroke-width="4" fill="none"/></svg>');
background-size: cover;
}
/* ИМЯ С ГРАДИЕНТОМ */
.dev-name {
font-size: 3.2rem;
font-weight: 800;
letter-spacing: 2px;
background: linear-gradient(120deg, #ffe784, #b1a0ff, #9bc9ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 30px #7857ff;
margin: 5px 0;
}
.dev-title {
font-size: 1.4rem;
font-weight: 300;
background: rgba(255,255,255,0.1);
padding: 8px 25px;
border-radius: 50px;
backdrop-filter: blur(5px);
border: 1px solid rgba(255,255,255,0.2);
}
/* ПРАВАЯ ЧАСТЬ: СКИЛЛЫ И ИНФО */
.info-section {
flex: 2 1 500px;
transform: translateZ(35px);
}
.greeting {
font-size: 2rem;
font-weight: 700;
margin-bottom: 20px;
}
.greeting span {
background: linear-gradient(145deg, #ffd966, #b688ff);
padding: 5px 18px;
border-radius: 100px;
display: inline-block;
margin-right: 10px;
}
.description {
font-size: 1.2rem;
opacity: 0.9;
margin-bottom: 40px;
max-width: 600px;
border-left: 4px solid #9b87ff;
padding-left: 25px;
}
/* СЕТКА НАВЫКОВ */
.skills-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin: 40px 0 30px;
}
.skill-item {
background: rgba(40, 30, 70, 0.6);
border: 1px solid #5f4db9;
border-radius: 100px;
padding: 12px 30px;
font-weight: 600;
font-size: 1.2rem;
display: flex;
align-items: center;
gap: 12px;
backdrop-filter: blur(8px);
transition: 0.2s;
box-shadow: 0 10px 20px -5px #0b082b;
}
.skill-item:hover {
transform: scale(1.07) translateY(-5px);
background: #433c7c;
border-color: #d9b6ff;
box-shadow: 0 20px 30px -5px #4f35b3;
}
.skill-item svg {
width: 28px;
height: 28px;
fill: #ffea9f;
}
/* КНОПКА-ССЫЛКА */
.cta-button {
background: linear-gradient(145deg, #7857f0, #4d33b0);
border: none;
color: white;
font-size: 1.5rem;
font-weight: 700;
padding: 18px 50px;
border-radius: 70px;
box-shadow: 0 20px 35px #2b1d63, 0 2px 0 0 #b9a4ff inset;
display: inline-flex;
align-items: center;
gap: 20px;
transition: all 0.3s;
margin-top: 30px;
border: 1px solid #b395ff;
}
.cta-button:hover {
transform: scale(1.05) translateY(-6px);
box-shadow: 0 30px 45px #3e2a91, 0 0 20px #ccb5ff;
background: linear-gradient(145deg, #8c71ff, #6246ea);
}
/* СОЦИАЛЬНЫЕ ИКОНКИ (SVG) */
.social-row {
display: flex;
gap: 25px;
margin-top: 45px;
justify-content: flex-start;
}
.social-icon {
width: 48px;
height: 48px;
display: block;
transition: 0.2s;
filter: drop-shadow(0 5px 10px #170e3a);
}
.social-icon:hover {
transform: translateY(-10px) scale(1.15);
filter: drop-shadow(0 0 15px #b69dff);
}
.social-icon svg {
width: 100%;
height: 100%;
fill: white;
}
/* ДЕКОРАТИВНЫЕ ЭЛЕМЕНТЫ НА ФОНЕ (SVG стилизованные) */
.bg-decor {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
}
.decor-circle {
position: absolute;
width: 50vmax;
height: 50vmax;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #6d51ff, #251b4b 80%);
opacity: 0.15;
filter: blur(90px);
animation: moveBg 25s infinite alternate;
}
@keyframes moveBg {
0% { transform: translate(-20%, -20%) scale(1); }
100% { transform: translate(10%, 15%) scale(1.4); }
}
.decor-2 {
bottom: 0;
right: 0;
background: radial-gradient(circle at 70% 70%, #ffb86b, #451b6b);
width: 70vmin;
height: 70vmin;
filter: blur(100px);
opacity: 0.2;
animation: moveBg2 30s infinite alternate;
}
@keyframes moveBg2 {
0% { transform: translate(10%, 10%) scale(1); }
100% { transform: translate(-20%, -30%) scale(1.5); }
}
/* АДАПТАЦИЯ ДЛЯ МОБИЛЬНЫХ */
@media (max-width: 850px) {
.glass-card {
flex-direction: column;
padding: 2rem 1.5rem;
border-radius: 40px;
}
.profile-section {
width: 100%;
}
.info-section {
width: 100%;
text-align: center;
}
.description {
border-left: none;
border-top: 4px solid #9b87ff;
padding-left: 0;
padding-top: 20px;
}
.skills-grid {
justify-content: center;
}
.social-row {
justify-content: center;
}
.dev-name {
font-size: 2.7rem;
}
}
@media (max-width: 500px) {
.avatar-wrapper {
width: 160px;
height: 160px;
}
.dev-name {
font-size: 2rem;
}
.cta-button {
font-size: 1.2rem;
padding: 15px 30px;
}
}
/* Для устройств с тачпадом отключаем кастомный курсор */
@media (hover: none) and (pointer: coarse) {
* {
cursor: auto;
}
.custom-cursor {
display: none;
}
}
</style>
</head>
<body>
<!-- КАСТОМНЫЙ КУРСОР (анимированный) -->
<div class="custom-cursor" id="magicCursor">
<svg class="cursor-svg" viewBox="0 0 120 120" fill="none">
<circle cx="60" cy="60" r="28" stroke="#d6b0ff" stroke-width="4" fill="url(#cursorGrad)" />
<path d="M60 30 L70 55 L95 60 L70 65 L60 90 L50 65 L25 60 L50 55 L60 30Z" fill="#ffffffcc" stroke="white" stroke-width="2" />
<defs>
<radialGradient id="cursorGrad" cx="60" cy="60" r="50">
<stop stop-color="#b48aff" offset="0%" />
<stop stop-color="#4b21b0" offset="100%" />
</radialGradient>
</defs>
</svg>
</div>
<!-- ФОНОВЫЙ ДЕКОР (абстракции) -->
<div class="bg-decor">
<div class="decor-circle" style="top: -10%; left: -5%;"></div>
<div class="decor-circle decor-2"></div>
</div>
<!-- ОСНОВНОЙ КОНТЕНТ -->
<div class="container">
<div class="glass-card">
<!-- ЛЕВАЯ ЧАСТЬ: АВАТАР -->
<div class="profile-section">
<div class="avatar-wrapper">
<div class="avatar" aria-label="Аватар разработчика"></div>
</div>
<h1 class="dev-name">Alex WebFlow</h1>
<div class="dev-title">Fullstack & UI/3D Enthusiast</div>
</div>
<!-- ПРАВАЯ ЧАСТЬ: ОПИСАНИЕ И НАВЫКИ -->
<div class="info-section">
<div class="greeting">
<span>👋</span> Привет, я Алекс
</div>
<p class="description">
Создаю современные, интерактивные и быстрые веб-интерфейсы.
Фокус на анимации, микро-взаимодействиях и нестандартных решениях.
Превращаю идеи в цифровой продукт с душой.
</p>
<!-- СКИЛЛЫ С ИКОНКАМИ SVG -->
<div class="skills-grid">
<div class="skill-item">
<svg viewBox="0 0 24 24" width="28" height="28">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14H9V8h2v8zm4 0h-2V8h2v8z"/>
</svg>
React / Next
</div>
<div class="skill-item">
<svg viewBox="0 0 24 24" width="28" height="28">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
</svg>
TS / JS
</div>
<div class="skill-item">
<svg viewBox="0 0 24 24" width="28" height="28">
<circle cx="12" cy="12" r="10" stroke="white" stroke-width="1.5" fill="none"/>
<path d="M12 6v6l4 2" stroke="white" stroke-width="2" fill="none"/>
</svg>
Three.js
</div>
<div class="skill-item">
<svg viewBox="0 0 24 24" width="28" height="28">
<path d="M3 3h18v18H3V3zm16 16V5H5v14h14zM9 7h2v10H9V7zm4 4h2v6h-2v-6z"/>
</svg>
UI/UX дизайн
</div>
</div>
<!-- ПРИЗЫВ (КНОПКА) -->
<button class="cta-button" id="contactBtn">
<span>✨</span> Обсудить проект <span>✨</span>
</button>
<!-- СОЦИАЛЬНЫЕ СЕТИ -->
<div class="social-row">
<a href="#" class="social-icon" aria-label="GitHub">
<svg viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12c0 4.42 2.87 8.17 6.84 9.49.5.09.68-.22.68-.48 0-.24-.01-.9-.01-1.74-2.78.61-3.37-1.34-3.37-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.61.07-.61 1.01.07 1.54 1.03 1.54 1.03.9 1.54 2.37 1.1 2.95.84.09-.65.35-1.1.64-1.36-2.22-.25-4.56-1.11-4.56-4.94 0-1.09.39-1.98 1.03-2.68-.1-.26-.45-1.28.1-2.66 0 0 .84-.27 2.75 1.02.8-.22 1.66-.33 2.5-.33s1.7.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02.55 1.38.2 2.4.1 2.66.64.7 1.03 1.59 1.03 2.68 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.86 0 1.34-.01 2.42-.01 2.75 0 .27.18.58.69.48C19.14 20.16 22 16.42 22 12c0-5.52-4.48-10-10-10z"/>
</svg>
</a>
<a href="#" class="social-icon" aria-label="LinkedIn">
<svg viewBox="0 0 24 24">
<path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14zm-.5 15.5v-5.3c0-2.6-1.4-3.8-3.3-3.8-1.5 0-2.2.8-2.6 1.4v-1.2h-2.9v8.9h2.9v-4.9c0-1.3.9-2.5 2.2-2.5s1.9.9 1.9 2.5v4.9h2.8zM7 8.5c1 0 1.8-.8 1.8-1.8S8 5 7 5s-1.8.8-1.8 1.8.8 1.8 1.8 1.8zm1.5 10v-8.9H5.5v8.9H8.5z"/>
</svg>
</a>
<a href="#" class="social-icon" aria-label="Telegram">
<svg viewBox="0 0 24 24">
<path d="M20.7 3.3L2.8 12.5c-1 .4-1 1-.2 1.2l4.8 1.5L17 7c.6-.4 1.1-.2.7.3l-7.9 7.1.3 4.2c.3.9.8.9 1.3.4l2.6-2.5 4.8 3.6c.9.5 1.5.2 1.7-.8l3-14c.3-1.2-.4-1.8-1.5-1.4z"/>
</svg>
</a>
</div>
</div>
</div>
</div>
<script>
(function() {
// 1. КАСТОМНЫЙ КУРСОР
const cursor = document.getElementById('magicCursor');
if (cursor) {
document.addEventListener('mousemove', (e) => {
cursor.style.left = e.clientX + 'px';
cursor.style.top = e.clientY + 'px';
});
document.addEventListener('mouseleave', () => {
cursor.style.opacity = '0';
});
document.addEventListener('mouseenter', () => {
cursor.style.opacity = '1';
});
}
// 2. ИНТЕРАКТИВНОСТЬ КАРТОЧКИ 3D ЭФФЕКТ (движение за мышью)
const card = document.querySelector('.glass-card');
if (card) {
document.addEventListener('mousemove', (e) => {
const x = (window.innerWidth / 2 - e.pageX) / 35;
const y = (window.innerHeight / 2 - e.pageY) / 40;
card.style.transform = `rotateY(${-x}deg) rotateX(${y}deg) translateZ(10px)`;
});
document.addEventListener('mouseleave', () => {
card.style.transform = 'rotateY(0deg) rotateX(0deg) translateZ(0px)';
});
}
// 3. КНОПКА - небольшое взаимодействие
const btn = document.getElementById('contactBtn');
if (btn) {
btn.addEventListener('click', () => {
alert('📬 Свяжитесь со мной: alex.webflow@example.dev\n(Это демо-версия сайта-визитки)');
});
}
// 4. ПЛАВНАЯ ПОДСВЕТКА АВАТАРА (доп. анимация при наведении - необязательно)
})();
</script>
</body>
</html>
