{"version":3,"sources":["components/ProjectCard/ProjectCard.js","components/NavigationSidebar/NavigationSidebar.js","components/ImageModal/ImageModal.js","components/Projects/Gamification/GamificationPage.js","App.js","reportWebVitals.js","index.js"],"names":["ProjectCard","_ref","id","imageSrc","hoverImageSrc","imageAlt","title","description","caseLink","isHovered","setIsHovered","useState","React","createElement","className","onMouseEnter","onMouseLeave","src","alt","Link","to","NavigationSidebar","activeSection","setActiveSection","sections","useEffect","handleScroll","scrollPosition","window","scrollY","projectCards","document","querySelectorAll","currentActiveSection","forEach","card","index","cardTop","offsetTop","cardHeight","offsetHeight","addEventListener","removeEventListener","map","section","key","onClick","findIndex","scrollTo","top","behavior","scrollToSection","ImageModal","image","onClose","scale","setScale","position","setPosition","x","y","isDragging","setIsDragging","dragStart","setDragStart","imageRef","useRef","handleMouseMove","e","newX","clientX","newY","clientY","handleMouseUp","stopPropagation","handleZoomIn","prevScale","handleZoomOut","Math","max","handleDownload","link","href","download","body","appendChild","click","removeChild","style","cursor","ref","transform","translate","onMouseDown","draggable","GamificationPage","Portfolio","openModal","Header","App","modalOpen","setModalOpen","modalImage","setModalImage","BrowserRouter","Routes","Route","path","element","Navigate","closeModal","reportWebVitals","onPerfEntry","Function","__webpack_require__","then","bind","getCLS","getFID","getFCP","getLCP","getTTFB","ReactDOM","createRoot","getElementById","render","StrictMode"],"mappings":"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","file":"static/js/main.d46bdc83.chunk.js","sourcesContent":["import React, { useState } from 'react';\nimport { Link } from 'react-router-dom';\nimport './ProjectCard.css'; // предполагаю, что у вас есть стили\n\nconst ProjectCard = ({ id, imageSrc, hoverImageSrc, imageAlt, title, description, caseLink }) => {\n    const [isHovered, setIsHovered] = useState(false);\n\n    return (\n        <div\n            className=\"project-card\"\n            id={id}\n            onMouseEnter={() => setIsHovered(true)}\n            onMouseLeave={() => setIsHovered(false)}\n        >\n            <div className=\"project-image-container\">\n                <img\n                    src={isHovered && hoverImageSrc ? hoverImageSrc : imageSrc}\n                    alt={imageAlt}\n                    className=\"project-image\"\n                />\n            </div>\n            <div className=\"project-info\">\n                <h3 className=\"project-title\">{title}</h3>\n                <p className=\"project-description\">{description}</p>\n                <Link to={caseLink} className=\"nav-button\">\n                    <span>Кейс</span>\n                </Link>\n            </div>\n        </div>\n    );\n};\n\nexport default ProjectCard;\n","// NavigationSidebar.js\nimport React, { useState, useEffect } from 'react';\nimport './NavigationSidebar.css';\n\nconst NavigationSidebar = () => {\n    const [activeSection, setActiveSection] = useState('');\n\n    // Разделы для навигации\n    const sections = [\n        { id: 'gamification', title: 'Геймификация мобильного банка' },\n        { id: 'hobby', title: 'Поиск хобби' },\n        { id: 'salary', title: 'Зарплатный проект' },\n        { id: 'neobank', title: 'Приложение для необанка' }\n    ];\n\n    // Обработка прокрутки для определения активного раздела\n    useEffect(() => {\n        const handleScroll = () => {\n            const scrollPosition = window.scrollY + 100; // Небольшой отступ для лучшего UX\n\n            // Находим текущий активный раздел на основе положения прокрутки\n            const projectCards = document.querySelectorAll('.project-card');\n            let currentActiveSection = '';\n\n            projectCards.forEach((card, index) => {\n                const cardTop = card.offsetTop;\n                const cardHeight = card.offsetHeight;\n\n                if (scrollPosition >= cardTop && scrollPosition < cardTop + cardHeight) {\n                    currentActiveSection = sections[index].id;\n                }\n            });\n\n            setActiveSection(currentActiveSection);\n        };\n\n        window.addEventListener('scroll', handleScroll);\n        // Вызываем один раз при загрузке\n        handleScroll();\n\n        return () => {\n            window.removeEventListener('scroll', handleScroll);\n        };\n    }, []);\n\n    // Обработка клика по пункту меню\n    const scrollToSection = (id) => {\n        const projectCards = document.querySelectorAll('.project-card');\n        const index = sections.findIndex(section => section.id === id);\n\n        if (index !== -1 && projectCards[index]) {\n            window.scrollTo({\n                top: projectCards[index].offsetTop,\n                behavior: 'smooth'\n            });\n        }\n    };\n\n    return (\n        <div className=\"navigation-sidebar\">\n            <div className=\"navigation-container\">\n                <h3>Проекты</h3>\n                <ul className=\"navigation-list\">\n                    {sections.map(section => (\n                        <li\n                            key={section.id}\n                            className={activeSection === section.id ? 'active' : ''}\n                            onClick={() => scrollToSection(section.id)}\n                        >\n                            {section.title}\n                        </li>\n                    ))}\n                </ul>\n            </div>\n        </div>\n    );\n};\n\nexport default NavigationSidebar;","import React, { useState, useRef, useEffect } from 'react';\nimport './ImageModal.css';\n\nconst ImageModal = ({ image, alt, onClose }) => {\n    const [scale, setScale] = useState(1);\n    const [position, setPosition] = useState({ x: 0, y: 0 });\n    const [isDragging, setIsDragging] = useState(false);\n    const [dragStart, setDragStart] = useState({ x: 0, y: 0 });\n    const imageRef = useRef(null);\n\n    // Сброс позиции при изменении масштаба или при первом рендере\n    useEffect(() => {\n        // Сбрасываем позицию только если масштаб уменьшился до 1\n        if (scale <= 1) {\n            setPosition({ x: 0, y: 0 });\n        }\n    }, [scale]);\n\n    const handleZoomIn = () => {\n        setScale(prevScale => prevScale + 0.25);\n    };\n\n    const handleZoomOut = () => {\n        setScale(prevScale => {\n            const newScale = Math.max(0.5, prevScale - 0.25);\n            return newScale;\n        });\n    };\n\n    const handleDownload = () => {\n        const link = document.createElement('a');\n        link.href = image;\n        link.download = alt || 'image';\n        document.body.appendChild(link);\n        link.click();\n        document.body.removeChild(link);\n    };\n\n    const handleMouseDown = (e) => {\n        // Начинаем перетаскивание только если масштаб больше 1\n        if (scale > 1) {\n            setIsDragging(true);\n            setDragStart({\n                x: e.clientX - position.x,\n                y: e.clientY - position.y\n            });\n        }\n    };\n\n    const handleMouseMove = (e) => {\n        if (isDragging && scale > 1) {\n            const newX = e.clientX - dragStart.x;\n            const newY = e.clientY - dragStart.y;\n\n            setPosition({ x: newX, y: newY });\n        }\n    };\n\n    const handleMouseUp = () => {\n        setIsDragging(false);\n    };\n\n    // Добавляем обработчики событий для всего окна, чтобы перехватывать события\n    // даже если курсор выходит за пределы изображения\n    useEffect(() => {\n        if (isDragging) {\n            window.addEventListener('mousemove', handleMouseMove);\n            window.addEventListener('mouseup', handleMouseUp);\n        }\n\n        return () => {\n            window.removeEventListener('mousemove', handleMouseMove);\n            window.removeEventListener('mouseup', handleMouseUp);\n        };\n    }, [isDragging, dragStart]);\n\n    return (\n        <div className=\"image-modal-overlay\" onClick={onClose}>\n            <div className=\"image-modal-content\" onClick={e => e.stopPropagation()}>\n                <div className=\"image-modal-header\">\n                    <div className=\"image-modal-controls\">\n                        <button onClick={handleZoomIn} className=\"modal-button\">\n                            <span>Увеличить</span>\n                        </button>\n                        <button onClick={handleZoomOut} className=\"modal-button\">\n                            <span>Уменьшить</span>\n                        </button>\n                        <button onClick={handleDownload} className=\"modal-button\">\n                            <span>Скачать</span>\n                        </button>\n                    </div>\n                    <button onClick={onClose} className=\"close-button\">\n                        <span>Закрыть</span>\n                    </button>\n                </div>\n                <div className=\"image-modal-body\">\n                    <div className=\"image-container\" style={{ cursor: scale > 1 ? 'move' : 'default' }}>\n                        <img\n                            ref={imageRef}\n                            src={image}\n                            alt={alt}\n                            className=\"modal-image\"\n                            style={{\n                                transform: `scale(${scale})`,\n                                translate: scale > 1 ? `${position.x}px ${position.y}px` : '0 0'\n                            }}\n                            onMouseDown={handleMouseDown}\n                            draggable=\"false\"\n                        />\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default ImageModal;","import React from 'react';\nimport { Link } from 'react-router-dom';\nimport '../ProjectPage.css'\n\nconst GamificationPage = () => {\n    return (\n        <div className=\"project-page\">\n            <div className=\"project-header\">\n                <Link to=\"/\" className=\"back-button\">← Назад</Link>\n                <h1>Геймификация мобильного банка</h1>\n            </div>\n\n            <div className=\"project-content\">\n                <div className=\"project-intro\">\n                    <img\n                        src=\"/pics/Игра%201.png\"\n                        alt=\"Мобильный банк\"\n                        className=\"project-main-image\"\n                    />\n                    <div className=\"project-description\">\n                        <h2>О проекте</h2>\n                        <p>Внедрила игровые механики в приложение ВТБ, чтобы привлечь неактивную аудиторию во взаимодействие с банком.</p>\n\n                        <div className=\"project-details\">\n                            <div className=\"detail-item\">\n                                <h3>Роль</h3>\n                                <p>UX/UI дизайнер</p>\n                            </div>\n                            <div className=\"detail-item\">\n                                <h3>Период</h3>\n                                <p>2023</p>\n                            </div>\n                            <div className=\"detail-item\">\n                                <h3>Инструменты</h3>\n                                <p>Figma, Miro</p>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n                {/* Здесь добавьте остальное содержимое вашего кейса */}\n                <section className=\"project-section\">\n                    <h2>Задача</h2>\n                    <p>Детальное описание задачи проекта...</p>\n                </section>\n\n                <section className=\"project-section\">\n                    <h2>Исследование</h2>\n                    <p>Информация об исследовании...</p>\n                    <div className=\"image-gallery\">\n                        {/* Добавьте изображения исследования */}\n                    </div>\n                </section>\n\n                {/* Добавьте другие разделы вашего кейса */}\n            </div>\n        </div>\n    );\n};\n\nexport default GamificationPage;\n","import './App.css';\nimport React, {useState} from 'react';\nimport {BrowserRouter, Routes, Route, Navigate} from 'react-router-dom';\nimport \"slick-carousel/slick/slick.css\";\nimport \"slick-carousel/slick/slick-theme.css\";\nimport ProjectCard from \"./components/ProjectCard/ProjectCard\";\nimport NavigationSidebar from \"./components/NavigationSidebar/NavigationSidebar\";\nimport ImageModal from \"./components/ImageModal/ImageModal\";\n\n// Импортируем страницы проектов\nimport GamificationPage from './components/Projects/Gamification/GamificationPage';\n// import HobbyPage from './components/ProjectPages/HobbyPage';\n// import SalaryPage from './components/ProjectPages/SalaryPage';\n// import NeobankPage from './components/ProjectPages/NeobankPage';\n\n// Главная страница портфолио\nconst Portfolio = ({openModal}) => {\n    return (<main className=\"portfolio\">\n            <ProjectCard\n                id=\"gamification\"\n                imageSrc=\"/pics/Игра%201.png\"\n                hoverImageSrc=\"/pics/Игра%202.png\"\n                imageAlt=\"Мобильный банк\"\n                title=\"Геймификация мобильного банка\"\n                description=\"Внедрила игровые механики в приложение ВТБ, чтобы привлечь неактивную аудиторию во взаимодействие с банком\"\n                caseLink=\"/projects/gamification\"\n            />\n            <ProjectCard\n                id=\"hobby\"\n                imageSrc=\"/pics/Хобби%201.png\"\n                hoverImageSrc=\"/pics/Хобби%202.png\"\n                imageAlt=\"Поиск хобби\"\n                title=\"Приложение для поиска хобби\"\n                description=\"Провела исследования, интервью, разработала с нуля концепцию, UI-кит и анимированный прототип, подтвердила гипотезы\"\n                caseLink=\"/projects/hobby\"\n            />\n            <ProjectCard\n                id=\"salary\"\n                imageSrc=\"/pics/Зарплата%201.png\"\n                hoverImageSrc=\"/pics/Зарплата%202.png\"\n                imageAlt=\"Зарплатный проект\"\n                title=\"Зарплатный проект\"\n                description=\"Разработала интерфейс веб-сервиса, который упростит опыт пользователей при управлении выплатами зарплат\"\n                caseLink=\"/projects/salary\"\n            />\n            <ProjectCard\n                id=\"neobank\"\n                imageSrc=\"/pics/Банк%201.png\"\n                hoverImageSrc=\"/pics/Банк%202.png\"\n                imageAlt=\"Приложение для необанка\"\n                title=\"Приложение для необанка\"\n                description=\"Провела исследования, интервью, разработала с нуля концепцию, UI-кит и анимированный прототип, подтвердила гипотезы\"\n                caseLink=\"/projects/neobank\"\n            />\n        </main>);\n};\n\n// Компонент хедера\nconst Header = () => {\n    return (<header className=\"header\">\n            <div className=\"profile-container\">\n                <img\n                    src=\"/pics/profile-photo.png\"\n                    alt=\"Profile\"\n                    className=\"profile-image\"\n                />\n                <h1 className=\"name\">Яна Дядченко</h1>\n                <h2 className=\"title\">Продуктовый ux/ui дизайнер,</h2>\n                <p className=\"subtitle\">проектирую веб- и мобильные интерфейсы</p>\n            </div>\n\n            <nav className=\"navigation\">\n                <a href=\"https://drive.google.com/file/d/1a5IhSp_g7Y7u9uuR2EApOL2jfhRVWDkd/view?usp=sharing\"\n                   className=\"nav-button nav-button-light\"><span>Резюме</span></a>\n                <a href=\"https://t.me/Jankel\" className=\"nav-button nav-button-light\"><span>Телеграм</span></a>\n                <a href=\"mailto:diadchenko-yana@yandex.com\"\n                   className=\"nav-button nav-button-light\"><span>Почта</span></a>\n            </nav>\n        </header>);\n};\n\nfunction App() {\n    const [modalOpen, setModalOpen] = useState(false);\n    const [modalImage, setModalImage] = useState('');\n\n    const openModal = (imageSrc) => {\n        setModalImage(imageSrc);\n        setModalOpen(true);\n    };\n\n    const closeModal = () => {\n        setModalOpen(false);\n    };\n\n    return (<BrowserRouter>\n            <div className=\"app\">\n                <Header/>\n\n                <Routes>\n                    <Route path=\"/\" element={<Portfolio openModal={openModal}/>}/>\n                    <Route path=\"/projects/gamification\" element={<GamificationPage/>}/>\n                    {/*<Route path=\"/projects/hobby\" element={<HobbyPage/>}/>*/}\n                    {/*<Route path=\"/projects/salary\" element={<SalaryPage/>}/>*/}\n                    {/*<Route path=\"/projects/neobank\" element={<NeobankPage/>}/>*/}\n                    {/* Перенаправление на главную, если URL не найден */}\n                    <Route path=\"*\" element={<Navigate to=\"/\"/>}/>\n                </Routes>\n\n                <NavigationSidebar/>\n\n                {modalOpen && (<ImageModal\n                        image={modalImage}\n                        alt=\"Проект\"\n                        onClose={closeModal}\n                    />)}\n            </div>\n        </BrowserRouter>);\n}\n\nexport default App;\n","const reportWebVitals = onPerfEntry => {\n  if (onPerfEntry && onPerfEntry instanceof Function) {\n    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n      getCLS(onPerfEntry);\n      getFID(onPerfEntry);\n      getFCP(onPerfEntry);\n      getLCP(onPerfEntry);\n      getTTFB(onPerfEntry);\n    });\n  }\n};\n\nexport default reportWebVitals;\n","import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport reportWebVitals from './reportWebVitals';\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>\n);\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals();\n"],"sourceRoot":""}