соедини код из 3 файлов просто в html чтобы на тильде можно было в html блок вставить:
1:
Max Fry - FrontEnd Design Developer
2. * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--bg-dark: #0a0a0a;
--bg-darker: #000000;
--text-white: #ffffff;
--text-yellow: #ffd700;
--text-green: #00ff00;
--text-green-glow: #00ff00;
--accent-orange: #ff6b35;
--card-bg: #1a1a1a;
--border-glow: rgba(255, 215, 0, 0.5);
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: var(--bg-dark);
color: var(--text-white);
line-height: 1.6;
overflow-x: hidden;
}
/* Hero Section */
.hero {
min-height: 100vh;
display: flex;
flex-direction: column;
padding: 2rem;
position: relative;
background: linear-gradient(135deg, var(--bg-darker) 0%, var(--bg-dark) 100%);
}
.hero-icons {
display: flex;
justify-content: space-between;
margin-bottom: 4rem;
}
.icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--text-white);
font-size: 1.5rem;
transition: all 0.3s ease;
}
.icon:hover {
color: var(--text-yellow);
text-shadow: 0 0 10px var(--text-yellow);
}
.hero-content {
display: flex;
justify-content: space-between;
align-items: center;
flex: 1;
gap: 4rem;
}
.hero-text {
flex: 1;
z-index: 2;
}
.name-small {
font-size: 1.5rem;
color: var(--text-white);
margin-bottom: 1rem;
opacity: 0.8;
}
.title-main {
font-size: 4rem;
font-weight: bold;
color: var(--text-white);
margin-bottom: 0.5rem;
text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}
.title-sub {
font-size: 2rem;
color: var(--text-yellow);
font-weight: 300;
}
.cursor-blink {
animation: blink 1s infinite;
color: var(--text-yellow);
}
@keyframes blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
.hero-image {
flex: 1;
max-width: 400px;
position: relative;
}
.hero-image img {
width: 100%;
height: auto;
border-radius: 10px;
filter: blur(3px) brightness(0.6);
box-shadow: 0 0 40px rgba(255, 215, 0, 0.4);
transition: filter 0.3s ease;
}
.hero-image:hover img {
filter: blur(2px) brightness(0.7);
}
.scroll-indicator {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
gap: 0.5rem;
color: var(--text-green);
animation: bounce 2s infinite;
cursor: pointer;
}
.scroll-indicator i {
font-size: 1.5rem;
text-shadow: 0 0 15px var(--text-green), 0 0 30px var(--text-green);
filter: drop-shadow(0 0 5px var(--text-green));
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
40% { transform: translateX(-50%) translateY(-10px); }
60% { transform: translateX(-50%) translateY(-5px); }
}
/* Sections */
.section {
padding: 6rem 4rem;
max-width: 1400px;
margin: 0 auto;
}
.section-header {
margin-bottom: 4rem;
text-align: left;
}
.section-title {
font-size: 3rem;
font-weight: bold;
color: var(--text-white);
margin-bottom: 1rem;
text-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}
.section-subtitle {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.6);
margin-top: 0.5rem;
}
/* Facts Section */
.facts-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.fact-card {
background: var(--card-bg);
border-radius: 15px;
padding: 2rem;
display: flex;
gap: 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.fact-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(255, 215, 0, 0.3);
border-color: var(--border-glow);
}
.fact-number {
font-size: 3rem;
font-weight: bold;
color: var(--text-yellow);
text-shadow: 0 0 10px var(--text-yellow);
}
.fact-text h3 {
font-size: 1.5rem;
margin-bottom: 0.5rem;
color: var(--text-white);
}
.fact-text p {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.7);
}
/* Software Section */
.software-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
}
.software-card {
background: var(--card-bg);
border-radius: 15px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.software-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(255, 215, 0, 0.3);
}
.software-icon {
position: absolute;
top: 1rem;
left: 1rem;
background: rgba(0, 0, 0, 0.7);
padding: 0.5rem 1rem;
border-radius: 5px;
font-weight: bold;
color: var(--text-white);
z-index: 2;
}
.software-preview {
position: relative;
width: 100%;
height: 250px;
overflow: hidden;
}
.software-preview img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.8);
}
.software-info {
padding: 1.5rem;
}
.software-info h3 {
font-size: 1.5rem;
margin-bottom: 0.5rem;
color: var(--text-white);
}
.software-info p {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.7);
}
/* Experience Section */
.timeline {
display: flex;
flex-direction: column;
gap: 3rem;
position: relative;
padding-left: 3rem;
}
.timeline::before {
content: '';
position: absolute;
left: 1rem;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(180deg, var(--text-yellow), transparent);
}
.timeline-item {
display: flex;
gap: 2rem;
position: relative;
}
.timeline-number {
position: absolute;
left: -3rem;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background: var(--text-yellow);
color: var(--bg-dark);
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
box-shadow: 0 0 15px var(--text-yellow);
z-index: 2;
}
.timeline-content {
flex: 1;
background: var(--card-bg);
padding: 2rem;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.timeline-content h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
color: var(--text-white);
}
.timeline-content p {
color: rgba(255, 255, 255, 0.7);
line-height: 1.8;
}
/* Tech Stack Section */
.techstack-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: start;
}
.skills-list {
display: flex;
flex-direction: column;
gap: 2rem;
}
.skill-item {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.skill-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.skill-name {
font-size: 1.2rem;
color: var(--text-white);
}
.skill-percent {
font-size: 1rem;
color: var(--text-yellow);
}
.skill-bar {
width: 100%;
height: 10px;
background: rgba(255, 255, 255, 0.1);
border-radius: 5px;
overflow: hidden;
position: relative;
}
.skill-progress {
height: 100%;
background: linear-gradient(90deg, var(--text-yellow), var(--text-green));
border-radius: 5px;
box-shadow: 0 0 10px var(--text-yellow);
animation: fillBar 1.5s ease-out;
}
@keyframes fillBar {
from { width: 0; }
}
.techstack-code {
background: var(--card-bg);
border: 2px solid var(--text-yellow);
border-radius: 10px;
padding: 2rem;
position: relative;
}
.code-closing {
position: absolute;
top: 1rem;
right: 1rem;
font-size: 1.5rem;
color: var(--text-yellow);
font-family: 'Courier New', monospace;
}
.code-content {
padding-top: 2rem;
color: rgba(255, 255, 255, 0.8);
line-height: 1.8;
}
/* Languages Section */
.languages-list {
display: flex;
flex-direction: column;
gap: 2rem;
max-width: 600px;
}
.language-item {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.language-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.language-name {
font-size: 1.2rem;
color: var(--text-white);
}
.language-level {
font-size: 1rem;
color: var(--text-yellow);
}
.language-bar {
width: 100%;
height: 10px;
background: rgba(255, 255, 255, 0.1);
border-radius: 5px;
overflow: hidden;
}
.language-progress {
height: 100%;
background: linear-gradient(90deg, var(--text-yellow), var(--text-green));
border-radius: 5px;
box-shadow: 0 0 10px var(--text-yellow);
animation: fillBar 1.5s ease-out;
}
/* Projects Section */
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 2rem;
}
.project-card {
background: var(--card-bg);
border-radius: 15px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.project-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(255, 215, 0, 0.3);
}
.project-image {
width: 100%;
height: 400px;
overflow: hidden;
}
.project-image img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.8);
transition: transform 0.3s ease;
}
.project-card:hover .project-image img {
transform: scale(1.1);
}
.project-info {
padding: 1.5rem;
}
.project-info h3 {
font-size: 1.5rem;
margin-bottom: 0.5rem;
color: var(--text-white);
}
.project-info p {
font-size: 1rem;
color: rgba(255, 255, 255, 0.7);
}
/* Contact Section */
.contact-form {
max-width: 600px;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.contact-form input {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 5px;
padding: 1rem;
color: var(--text-white);
font-size: 1rem;
transition: all 0.3s ease;
}
.contact-form input::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.contact-form input:focus {
outline: none;
border-color: var(--text-yellow);
box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
background: rgba(255, 255, 255, 0.15);
}
.btn-submit {
background: var(--accent-orange);
color: var(--text-white);
border: none;
border-radius: 5px;
padding: 1rem 2rem;
font-size: 1.1rem;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-submit:hover {
background: #ff8555;
box-shadow: 0 0 20px rgba(255, 107, 53, 0.5);
transform: translateY(-2px);
}
.form-terms {
text-align: center;
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.6);
margin-top: -0.5rem;
}
/* Footer */
.footer {
padding: 4rem 2rem;
text-align: center;
background: var(--bg-darker);
}
.footer-shield {
font-size: 5rem;
color: var(--text-white);
margin-bottom: 2rem;
opacity: 0.5;
border: 2px solid var(--text-white);
width: 150px;
height: 150px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 2rem;
position: relative;
}
.footer-shield i {
font-size: 3rem;
z-index: 1;
position: relative;
}
.footer-text {
color: rgba(255, 255, 255, 0.6);
font-size: 0.9rem;
}
.footer-text p {
margin: 0.5rem 0;
}
/* Responsive Design */
@media (max-width: 768px) {
.hero-content {
flex-direction: column;
gap: 2rem;
}
.title-main {
font-size: 2.5rem;
}
.section {
padding: 4rem 2rem;
}
.section-title {
font-size: 2rem;
}
.techstack-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.facts-grid,
.software-grid,
.projects-grid {
grid-template-columns: 1fr;
}
.timeline {
padding-left: 2rem;
}
.timeline-number {
left: -2rem;
}
}
/* Scroll animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.section {
animation: fadeInUp 0.6s ease-out;
}
3. // Smooth scrolling for scroll indicator
document.querySelectorAll('.scroll-indicator').forEach(indicator => {
indicator.addEventListener('click', () => {
window.scrollTo({
top: window.innerHeight,
behavior: 'smooth'
});
});
});
// Icon interactions
document.querySelector('.icon-close')?.addEventListener('click', () => {
// Close action - could navigate or show modal
console.log('Close clicked');
});
document.querySelector('.icon-refresh')?.addEventListener('click', () => {
// Refresh action
window.location.reload();
});
// Intersection Observer for scroll animations
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
// Observe all sections and cards
document.querySelectorAll('.section, .fact-card, .software-card, .project-card, .timeline-item').forEach(el => {
el.style.opacity = '0';
el.style.transform = 'translateY(30px)';
el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
observer.observe(el);
});
// Skill bars animation on scroll
const skillBars = document.querySelectorAll('.skill-progress, .language-progress');
const skillObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const progressBar = entry.target;
const width = progressBar.style.width;
progressBar.style.width = '0';
setTimeout(() => {
progressBar.style.width = width;
}, 100);
skillObserver.unobserve(progressBar);
}
});
}, { threshold: 0.5 });
skillBars.forEach(bar => {
skillObserver.observe(bar);
});
// Parallax effect for hero section
window.addEventListener('scroll', () => {
const scrolled = window.pageYOffset;
const heroContent = document.querySelector('.hero-content');
if (heroContent && scrolled < window.innerHeight) {
heroContent.style.transform = `translateY(${scrolled * 0.3}px)`;
heroContent.style.opacity = 1 - (scrolled / window.innerHeight) * 0.5;
}
});
// Form submission
document.querySelector('.contact-form')?.addEventListener('submit', (e) => {
e.preventDefault();
// Form submission logic here
alert('Спасибо за ваше сообщение! Мы свяжемся с вами в ближайшее время.');
// Reset form
e.target.reset();
});
// Cursor glow effect on hover for interactive elements
document.querySelectorAll('.fact-card, .software-card, .project-card, .btn-submit').forEach(element => {
element.addEventListener('mouseenter', function() {
this.style.boxShadow = '0 8px 30px rgba(255, 215, 0, 0.4)';
});
element.addEventListener('mouseleave', function() {
this.style.boxShadow = '';
});
});
// Title is already in HTML with cursor, no typing effect needed
// Keeping the cursor blink animation from CSS
// Smooth reveal for timeline items
const timelineItems = document.querySelectorAll('.timeline-item');
const timelineObserver = new IntersectionObserver((entries) => {
entries.forEach((entry, index) => {
if (entry.isIntersecting) {
setTimeout(() => {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateX(0)';
}, index * 200);
timelineObserver.unobserve(entry.target);
}
});
}, { threshold: 0.2 });
timelineItems.forEach(item => {
item.style.opacity = '0';
item.style.transform = 'translateX(-30px)';
item.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
timelineObserver.observe(item);
});
// Add glow effect to scroll indicator on hover
const scrollIndicator = document.querySelector('.scroll-indicator');
if (scrollIndicator) {
scrollIndicator.addEventListener('mouseenter', () => {
scrollIndicator.style.filter = 'drop-shadow(0 0 10px #00ff00)';
});
scrollIndicator.addEventListener('mouseleave', () => {
scrollIndicator.style.filter = '';
});
}
Max Fry
FrontEnd Dezign
developer|
Мои факты|()
то, чем я горжусь
1
33 проект успешно
Завершенных проектов различной сложности
2
3 пр пешно
Опыт работы с крупными клиентами
3
333 проекта завершено успешно
Годы опыта в разработке и дизайне
Мой софт ()|
то, что я использую
Adobe Photoshop
Профессиональная обработка изображений и создание графических элементов
Adobe Illustrator
Создание векторной графики и иллюстраций
Figma
UI/UX дизайн и прототипирование интерфейсов
Опыт
1
Институт
We are the leading firm by delivering quality and value to our clients. All our professionals have more than 5 years of legal experience. We like what we do.
2
Второй институт
Our managers are always ready to answer your questions. You can call us at the weekend and at night. Also, you can visit our office for personal consultation.
3
Стажировка Junior
The company works according to the principle of individual approach to every client. This is what helps us to get success in projects of all levels.
4
Senior
Our managers are always ready to answer your questions. You can call us at the weekend and at night. Also, you can visit our office for personal consultation.
Техностек()
HTML / CSS
100%
Javascript
98%
Reactor
70%
Singular
55%
</>
Опыт в веб-разработке, front-end, HTML, CSS, JavaScript, PHP, базы данных. Создание сайтов, управление проектами и командами. Интерес к новым технологиям и творческим задачам.
Языки ()
English
B1
Belarus
A2
Мои ра|
то, что я создал
UI/UX Design
The Company
LANDING PAGE
GEOMETRIC BACKGROUND
Обратная связь
Заказать разработку или предложить сотрудничество