diff --git a/static/css/style.css b/static/css/style.css
new file mode 100644
index 0000000..a4f9d83
--- /dev/null
+++ b/static/css/style.css
@@ -0,0 +1,270 @@
+:root {
+    --bg-dark: #0d1117;
+    --bg-card: #161b22;
+    --primary: #f9802d;
+    --primary-light: #ff9a52;
+    --text-primary: #ffffff;
+    --text-secondary: #c9d1d9;
+    --text-muted: #8b949e;
+    --border-color: #30363d;
+    --transition: all 0.3s ease;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Inter', sans-serif;
+    background-color: var(--bg-dark);
+    color: var(--text-primary);
+    line-height: 1.6;
+    padding: 20px;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+a {
+    color: var(--primary);
+    text-decoration: none;
+    transition: var(--transition);
+}
+
+a:hover {
+    color: var(--primary-light);
+    text-decoration: underline;
+}
+
+.container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 30px;
+    margin-top: 30px;
+}
+
+@media (max-width: 900px) {
+    .container {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* Шапка */
+.header {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 30px;
+    padding: 30px;
+    background-color: var(--bg-card);
+    border-radius: 12px;
+    border: 1px solid var(--border-color);
+    margin-bottom: 20px;
+}
+
+.photo-section {
+    flex: 0 0 200px;
+}
+
+.photo-slider {
+    position: relative;
+    width: 200px;
+    height: 250px;
+    overflow: hidden;
+    border-radius: 8px;
+    border: 2px solid var(--primary);
+}
+
+.slider-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    transition: opacity 1s ease-in-out;
+}
+
+.slider-image.active {
+    opacity: 1;
+}
+
+.slider-controls {
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
+    gap: 8px;
+}
+
+.slider-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: var(--text-muted);
+    cursor: pointer;
+    transition: var(--transition);
+}
+
+.slider-dot.active {
+    background-color: var(--primary);
+    transform: scale(1.2);
+}
+
+.info-section {
+    flex: 1;
+    min-width: 300px;
+}
+
+h1 {
+    font-size: 2.5rem;
+    margin-bottom: 5px;
+    color: var(--text-primary);
+}
+
+.subtitle {
+    font-size: 1.2rem;
+    color: var(--primary);
+    margin-bottom: 15px;
+    font-weight: 600;
+}
+
+.contacts {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 15px;
+    margin-top: 20px;
+}
+
+.contact-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.contact-icon {
+    width: 36px;
+    height: 36px;
+    background-color: rgba(249, 128, 45, 0.1);
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--primary);
+}
+
+/* Карточки */
+.card {
+    background-color: var(--bg-card);
+    border-radius: 12px;
+    padding: 25px;
+    border: 1px solid var(--border-color);
+    margin-bottom: 20px;
+    transition: var(--transition);
+}
+
+.card:hover {
+    border-color: var(--primary);
+    box-shadow: 0 0 15px rgba(249, 128, 45, 0.1);
+}
+
+.card-title {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 20px;
+    color: var(--primary);
+    font-size: 1.4rem;
+}
+
+.card-title i {
+    font-size: 1.2rem;
+}
+
+/* Навыки */
+.skill-item {
+    margin-bottom: 15px;
+}
+
+.skill-header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 5px;
+}
+
+.skill-bar {
+    height: 10px;
+    background-color: #30363d;
+    border-radius: 5px;
+    overflow: hidden;
+}
+
+.skill-level {
+    height: 100%;
+    background-color: var(--primary);
+    border-radius: 5px;
+}
+
+/* Список */
+.list {
+    list-style-type: none;
+}
+
+.list li {
+    padding: 8px 0;
+    position: relative;
+    padding-left: 25px;
+}
+
+.list li:before {
+    content: "•";
+    color: var(--primary);
+    position: absolute;
+    left: 0;
+    font-size: 1.5rem;
+    line-height: 1;
+}
+
+.two-column-list {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 10px;
+}
+
+@media (max-width: 600px) {
+    .two-column-list {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* Футер */
+.footer {
+    text-align: center;
+    margin-top: 40px;
+    padding: 20px;
+    color: var(--text-muted);
+    border-top: 1px solid var(--border-color);
+    font-size: 0.9rem;
+}
+
+.repo-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    background-color: rgba(249, 128, 45, 0.1);
+    padding: 10px 20px;
+    border-radius: 6px;
+    margin-top: 15px;
+    font-weight: 500;
+}
+
+.repo-link:hover {
+    background-color: rgba(249, 128, 45, 0.2);
+    text-decoration: none;
+}
+
+.section-divider {
+    height: 1px;
+    background-color: var(--border-color);
+    margin: 25px 0;
+}
diff --git a/static/images/image1.jpg b/static/images/image1.jpg
new file mode 100644
index 0000000..5c94c63
Binary files /dev/null and b/static/images/image1.jpg differ
diff --git a/static/images/image2.jpg b/static/images/image2.jpg
new file mode 100644
index 0000000..58cb37c
Binary files /dev/null and b/static/images/image2.jpg differ
diff --git a/static/js/script.js b/static/js/script.js
new file mode 100644
index 0000000..fa4ca8e
--- /dev/null
+++ b/static/js/script.js
@@ -0,0 +1,85 @@
+// Устанавливаем текущую дату
+const currentDate = new Date();
+const options = { year: 'numeric', month: 'long', day: 'numeric' };
+document.getElementById('currentDate').textContent = currentDate.toLocaleDateString('ru-RU', options);
+
+// Массив с путями к фотографиям (локальные файлы)
+const photos = [
+    "/static/images/image1.jpg",
+    "/static/images/image2.jpg"
+];
+
+// Создаем слайдер
+const sliderContainer = document.getElementById('photoSlider');
+const sliderControls = document.getElementById('sliderControls');
+let currentSlide = 0;
+
+// Создаем изображения и точки управления
+photos.forEach((photo, index) => {
+    // Создаем изображение
+    const img = document.createElement('img');
+    img.src = photo;
+    img.alt = `Фото Кирилла Ремизова ${index + 1}`;
+    img.classList.add('slider-image');
+    if (index === 0) img.classList.add('active');
+    sliderContainer.appendChild(img);
+    
+    // Создаем точку управления
+    const dot = document.createElement('div');
+    dot.classList.add('slider-dot');
+    if (index === 0) dot.classList.add('active');
+    dot.dataset.index = index;
+    dot.addEventListener('click', () => {
+        goToSlide(index);
+    });
+    sliderControls.appendChild(dot);
+});
+
+// Функция переключения слайда
+function goToSlide(index) {
+    // Скрываем текущий слайд
+    document.querySelectorAll('.slider-image').forEach(img => {
+        img.classList.remove('active');
+    });
+    
+    // Убираем активный класс у точек
+    document.querySelectorAll('.slider-dot').forEach(dot => {
+        dot.classList.remove('active');
+    });
+    
+    // Показываем выбранный слайд
+    const slides = document.querySelectorAll('.slider-image');
+    const dots = document.querySelectorAll('.slider-dot');
+    if (slides[index]) slides[index].classList.add('active');
+    if (dots[index]) dots[index].classList.add('active');
+    currentSlide = index;
+}
+
+// Автоматическое переключение слайдов каждые 30 секунд
+let slideInterval = setInterval(() => {
+    currentSlide = (currentSlide + 1) % photos.length;
+    goToSlide(currentSlide);
+}, 30000);
+
+// Пауза при наведении на слайдер
+sliderContainer.addEventListener('mouseenter', () => {
+    clearInterval(slideInterval);
+});
+
+// Возобновление при уходе курсора
+sliderContainer.addEventListener('mouseleave', () => {
+    slideInterval = setInterval(() => {
+        currentSlide = (currentSlide + 1) % photos.length;
+        goToSlide(currentSlide);
+    }, 30000);
+});
+
+// Добавляем небольшую анимацию при загрузке страницы
+document.addEventListener('DOMContentLoaded', () => {
+    document.body.style.opacity = '0';
+    document.body.style.transition = 'opacity 0.5s ease';
+    
+    setTimeout(() => {
+        document.body.style.opacity = '1';
+    }, 100);
+});