diff --git a/devops/public/Odins.png b/devops/public/Odins.png
new file mode 100644
index 0000000..9198e90
Binary files /dev/null and b/devops/public/Odins.png differ
diff --git a/devops/public/Prompolimer.png b/devops/public/Prompolimer.png
new file mode 100644
index 0000000..959d33b
Binary files /dev/null and b/devops/public/Prompolimer.png differ
diff --git a/devops/public/photoDi.jpg b/devops/public/photoDi.jpg
new file mode 100644
index 0000000..fb08fdd
Binary files /dev/null and b/devops/public/photoDi.jpg differ
diff --git a/devops/src/Components/DiPage.jsx b/devops/src/Components/DiPage.jsx
index 1ab88ce..ebb220e 100644
--- a/devops/src/Components/DiPage.jsx
+++ b/devops/src/Components/DiPage.jsx
@@ -1,7 +1,149 @@
-import React from 'react'
+import React from 'react';
+import '../styles/Di.css';
 
 export default function DiPage() {
     return (
-        <div>Di Page</div>
-    )
-}
+        <div className="di-page">
+
+
+            <header className="hero hero-no-accent">
+                <div className="hero-background">
+                    <img
+                        src="/public/photoDi.jpg"
+
+                        className="hero-portrait"
+                    />
+                </div>
+
+                <div className="hero-content">
+                    <h1 className="name">Динара Тинчурина</h1>
+                    <p className="position">Frontend Developer</p>
+                    <p className="year">2026</p>
+                </div>
+            </header>
+
+
+            <main className="main-content">
+
+
+                <section className="section about">
+                    <h2 className="section-title cursive">Обо мне</h2>
+                    <p className="lead">
+                        Создаю современные, эмоциональные и продуманные интерфейсы.<br />
+                        Обращаю внимание на детали, типографику и производительность.
+                    </p>
+                    <p>
+                        Ответственная, организованная, всегда укладываюсь в дедлайны.<br />
+                        Умею находить общий язык с дизайнерами, менеджерами и разработчиками бэкенда.
+                        Быстро учусь, постоянно совершенствую свои навыки.
+                    </p>
+                </section>
+
+
+                <section className="section skills">
+                    <h2 className="section-title">Технологии</h2>
+                    <div className="skills-grid">
+                        <div className="skill">
+                            <div className="skill-name">React  </div>
+                            <div className="skill-desc">Next.js · Redux · ReactRoute</div>
+                        </div>
+
+                        <div className="skill">
+                            <div className="skill-name">Vue</div>
+                            <div className="skill-desc">Vue 3 · Composition API</div>
+                        </div>
+                        <div className="skill">
+                            <div className="skill-name">TypeScript</div>
+                        </div>
+                        <div className="skill">
+                            <div className="skill-name">JavaScript</div>
+                            <div className="skill-desc">ESNext · Async · Performance</div>
+                        </div>
+                        <div className="skill">
+                            <div className="skill-name">Figma</div>
+                            <div className="skill-desc">Дизайн-системы · Прототипы</div>
+                        </div>
+                        <div className="skill">
+                            <div className="skill-name">HTML / CSS</div>
+                            <div className="skill-desc">SCSS · Анимации  </div>
+                        </div>
+                    </div>
+                </section>
+                <section className="section projects">
+                    <h2 className="section-title cursive">Проекты</h2>
+                    <div className="projects-grid">
+
+                        <div className="project-card">
+                            <img
+                                src="/public/Odins.png"
+
+                                className="project-image"
+                            />
+                            <h3 className="project-title">Odin`s Brew</h3>
+                            <p className="project-desc">
+                                Современный сайт кофейни в скандинавском минималистичном стиле.
+                                Чистый дизайн, акцент на типографику, плавные микроанимации при наведении,
+                                адаптивная вёрстка, тёмная/светлая тема, интеграция с меню онлайн-заказом, новости и блог.
+                            </p>
+                            <div className="project-tech">
+                                React · Tailwind CSS ·  · Figma
+                            </div>
+                            <div className="project-links">
+
+                                <a href="https://github.com/sky1768205/HTML-CSS-TINCHURINA" className="project-link">GitHub</a>
+                            </div>
+                        </div>
+
+                        <div className="project-card">
+                            <img
+                                src="/public/Prompolimer.png"
+                                className="project-image"
+                            />
+                            <h3 className="project-title">Prompolimerexport</h3>
+                            <p className="project-desc">
+                                Корпоративный сайт производственной компании полимерных изделий.
+                                Многостраничный сайт с каталогом продукции.
+                                С разделами «О компании», «Производство», «Сертификаты», адаптивный дизайн.
+
+                            </p>
+                            <div className="project-tech">
+                                Djanjo · Python · HTML/CSS
+                            </div>
+                            <div className="project-links">
+                                <a href="https://prompolimerexport.ru" className="project-link">Live Demo</a>
+                                <a href="https://github.com/RachellGardner/RostTTTv2" className="project-link">GitHub</a>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+
+                <section className="section hobbies-languages">
+                    <h2 className="section-title cursive">Увлечения и языки</h2>
+                    <div className="two-columns">
+                        <div className="column">
+                            <h3>Интересы</h3>
+                            <ul>
+                                <li>История искусства и цивилизаций</li>
+                                <li>Философия (эстетика, этика, смысл)</li>
+                                <li>Современная фотография и визуальное искусство</li>
+                                <li>Поэзия и литература XX–XXI веков</li>
+                            </ul>
+                        </div>
+
+                        <div className="column">
+                            <h3>Языки</h3>
+                            <ul>
+                                <li>Английский — Upper-Intermediate</li>
+                                <li>Французский — в процессе изучения</li>
+                                <li>Русский — родной</li>
+                            </ul>
+                        </div>
+                    </div>
+                </section>
+
+
+            </main>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/devops/src/styles/Di.css b/devops/src/styles/Di.css
new file mode 100644
index 0000000..ab9d6ad
--- /dev/null
+++ b/devops/src/styles/Di.css
@@ -0,0 +1,283 @@
+@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+.di-page {
+    background: #f9f7f4;
+    color: #1a1a1a;
+    font-family: Georgia, 'Times New Roman', serif;
+    line-height: 1.65;
+    min-height: 100vh;
+}
+
+
+.hero {
+    position: relative;
+    height: 80vh;
+    min-height: 520px;
+    background: #0f0f0f;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+}
+
+.hero-images {
+    position: absolute;
+    inset: 0;
+
+    pointer-events: none;
+}
+
+.image-overlay {
+    position: absolute;
+    background: rgba(255, 255, 255, 0.08);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    backdrop-filter: blur(1px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: rgba(255, 255, 255, 0.35);
+    font-size: 1.1rem;
+    font-family: system-ui, sans-serif;
+}
+
+.large {
+    width: 380px;
+    height: 520px;
+    top: 12%;
+    left: 7%;
+    transform: rotate(-3.5deg);
+}
+
+.medium {
+    width: 300px;
+    height: 400px;
+    top: 38%;
+    right: 9%;
+    transform: rotate(5deg);
+}
+
+.small {
+    width: 240px;
+    height: 340px;
+    bottom: 10%;
+    left: 48%;
+    transform: rotate(-7deg);
+}
+
+.hero-content {
+    z-index: 2;
+    text-align: center;
+    padding: 0 20px;
+}
+
+.name {
+    font-family: 'Great Vibes', cursive;
+    font-size: 8.5rem;
+    line-height: 0.88;
+    font-weight: 400;
+    letter-spacing: -1px;
+    margin-bottom: 0.4rem;
+}
+
+.position {
+    font-size: 2.6rem;
+    opacity: 0.92;
+    margin: 1rem 0 0.6rem;
+    letter-spacing: 1px;
+}
+
+.year {
+    font-size: 1.1rem;
+    letter-spacing: 6px;
+    opacity: 0.65;
+    text-transform: uppercase;
+}
+
+.main-content {
+    max-width: 1100px;
+    margin: 0 auto;
+    padding: 80px 30px 120px;
+}
+
+.section {
+    margin-bottom: 140px;
+}
+
+.section-title {
+    font-size: 4.8rem;
+    text-align: center;
+    margin-bottom: 2.2rem;
+    font-weight: 400;
+    letter-spacing: -0.5px;
+}
+
+.cursive {
+    font-family: 'Great Vibes', cursive;
+    font-weight: normal;
+}
+
+.lead {
+    font-size: 1.55rem;
+    text-align: center;
+    max-width: 780px;
+    margin: 0 auto 2.4rem;
+    line-height: 1.7;
+}
+
+.two-columns {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 80px;
+    max-width: 900px;
+    margin: 60px auto 0;
+}
+
+.column h3 {
+    font-size: 1.9rem;
+    margin-bottom: 1.4rem;
+    font-weight: 500;
+}
+
+.column ul {
+    list-style: none;
+    font-size: 1.22rem;
+}
+
+.column li {
+    margin-bottom: 0.9rem;
+}
+
+
+.skills-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 40px 30px;
+    text-align: center;
+}
+
+.skill-name {
+    font-size: 2.4rem;
+    font-weight: 500;
+    margin-bottom: 0.5rem;
+}
+
+.skill-desc {
+    font-size: 1rem;
+    opacity: 0.75;
+    line-height: 1.5;
+}
+
+.signature {
+    text-align: center;
+    margin-top: 100px;
+    padding-top: 60px;
+}
+
+.signature-name {
+    font-family: 'Great Vibes', cursive;
+    font-size: 6.5rem;
+    margin-bottom: 0.4rem;
+}
+
+.signature-year {
+    font-size: 1.15rem;
+    letter-spacing: 5px;
+    opacity: 0.6;
+    text-transform: uppercase;
+}
+
+.hero-portrait {
+    opacity: 0.5;
+
+    filter: grayscale(100%) contrast(1.1) brightness(0.85);
+
+
+    height: auto;
+
+    max-width: 100%;
+
+    display: block;
+    object-fit: cover;
+}
+
+
+
+.projects {
+    margin-bottom: 140px;
+}
+
+.projects-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 60px 40px;
+}
+
+
+
+.project-image {
+    width: 100%;
+    height: 220px;
+    object-fit: cover;
+    object-position: center;
+    border-radius: 8px 8px 0 0;
+    margin-bottom: 24px;
+    display: block;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+.project-card {
+    background: rgba(0, 0, 0, 0.02);
+    border-radius: 12px;
+    overflow: hidden;
+    padding: 10px;
+
+}
+
+.project-title {
+    font-size: 2.1rem;
+    margin-bottom: 16px;
+    font-weight: 500;
+}
+
+.project-desc {
+    font-size: 1.1rem;
+    line-height: 1.7;
+    margin-bottom: 20px;
+    opacity: 0.9;
+}
+
+.project-tech {
+    font-size: 0.95rem;
+    color: #555;
+    margin-bottom: 24px;
+    font-style: italic;
+}
+
+.project-links {
+    display: flex;
+    gap: 24px;
+}
+
+.project-link {
+    color: #000;
+    text-decoration: none;
+    font-weight: 500;
+    position: relative;
+}
+
+.project-link:hover {
+    text-decoration: underline;
+}
+
+@media (min-width: 768px) {
+    .projects-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
\ No newline at end of file