<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap" rel="stylesheet">
    <title>SamoXcZ - Developer Portfolio</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap');
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Montserrat', sans-serif;
            background: #000000;
            color: #fff;
            min-height: 100vh;
            overflow-x: hidden;
        }

        html {
            scroll-behavior: smooth;
        }

        .loading-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #000;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.5s ease;
        }

        .loading-text {
            font-size: 24px;
            font-weight: 400;
            letter-spacing: 2px;
            text-align: center;
            animation: fadeInOut 1.5s ease-in-out infinite;
        }

        @keyframes fadeInOut {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        .snow-container {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            z-index: 1;
        }

        .snowflake {
            position: fixed;
            background: white;
            border-radius: 50%;
            filter: blur(2px);
            pointer-events: none;
            animation: snowfall linear infinite, sway ease-in-out infinite;
            will-change: transform;
            opacity: 0.8;
        }

        @keyframes snowfall {
            0% { transform: translateY(-100vh) rotate(0deg); }
            100% { transform: translateY(100vh) rotate(360deg); }
        }

        @keyframes sway {
            0% { margin-left: 0; }
            25% { margin-left: 50px; }
            50% { margin-left: -50px; }
            75% { margin-left: 50px; }
            100% { margin-left: 0; }
        }

        .content-wrapper {
            position: relative;
            z-index: 2;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .nav-top {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 30px;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            z-index: 1000;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .logo {
            font-size: 18px;
            letter-spacing: 2px;
            font-weight: 500;
            animation: glow 2s ease-in-out infinite alternate;
        }

        @keyframes glow {
            from { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff; }
            to { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff; }
        }

        .language-toggle {
            background: rgba(255, 255, 255, 0.1);
            padding: 6px 12px;
            border-radius: 15px;
            font-size: 12px;
            letter-spacing: 1px;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .language-toggle:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: scale(1.05);
        }

        .section {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 120px 0;
            position: relative;
        }

        .hero-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 80px;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            will-change: transform, opacity;
        }

        @keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .title {
            font-size: 32px;
            font-weight: 300;
            letter-spacing: 4px;
            margin-bottom: 15px;
            text-align: center;
            position: relative;
            z-index: 2;
        }

        .subtitle {
            font-size: 24px;
            font-style: italic;
            font-weight: 300;
            margin-bottom: 30px;
            text-align: center;
            position: relative;
            z-index: 2;
        }

        .social-buttons {
            display: flex;
            flex-direction: column;
            gap: 15px;
            margin-top: 30px;
            align-items: center;
        }

        .social-button {
            padding: 8px 20px;
            border-radius: 15px;
            font-size: 14px;
            letter-spacing: 1px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            width: 150px;
            text-align: center;
        }

        .github-button {
            background: #ffffff;
            color: #000000;
            border-radius: 10px;
        }

        .twitter-button {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(10px);
            color: #ffffff;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .social-button:hover {
            transform: translateY(-2px);
        }

        .projects-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            width: 100%;
            max-width: 1000px;
            margin-top: 100px;
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
            will-change: transform, opacity;
        }

        .projects-container.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .project-card {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 15px;
            padding: 25px;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
            will-change: transform, opacity, background-color;
        }

        .project-card.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .project-card:hover {
            transform: translateY(-5px);
            background: rgba(255, 255, 255, 0.08);
        }

        .project-title {
            font-size: 20px;
            font-weight: 500;
            margin-bottom: 15px;
            color: #fff;
        }

        .project-description {
            font-size: 14px;
            line-height: 1.6;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 20px;
        }

        .project-tags {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .project-tag {
            background: rgba(255, 255, 255, 0.1);
            padding: 5px 10px;
            border-radius: 12px;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.9);
        }
    </style>
</head>
<body>
    <div class="loading-screen" id="loadingScreen">
        <div class="loading-text">Loading Portfolio...</div>
    </div>
    
    <div class="snow" id="snow"></div>
    
    <nav class="nav-top">
        <div class="logo">SAMOXCZ</div>
        <div class="language-toggle">EN</div>
    </nav>

    <div class="content-wrapper">
        <section class="section" id="hero">
            <div class="hero-content">
                <h1 class="title">MY PORTFOLIO</h1>
                <h2 class="subtitle">Collection</h2>
                
                <div class="social-buttons">
                    <a href="https://github.com/SamoXcZ" class="social-button github-button">Visit Github</a>
                    <a href="https://x.com/samoxcz?s=21" class="social-button twitter-button">Follow on Twitter</a>
                </div>
            </div>

            <div class="projects-container">
                <div class="project-card">
                    <h3 class="project-title">CCopy</h3>
                    <p class="project-description">Seamlessly sync, intelligently manage, and securely store your clipboard across all devices with unprecedented ease.</p>
                    
                        <span class="project-tag">SwiftUI</span>
                       
                    </div>
                </div>

                <div class="project-card">
                    <h3 class="project-title">CanYouJB</h3>
                    <p class="project-description">CanYouJB? is a straightforward and user-friendly Jailbreak Finder designed for your mobile device. It helps you determine whether your iOS device can be jailbroken.</p>
                   <div>
                        <span class="project-tag">SwiftUI</span>
                       
                    </div>
                <div>
                </div>
            </div>
        </section>
    </div>

    <script>
        window.addEventListener('load', function () {
            const loadingScreen = document.getElementById('loadingScreen');
            requestAnimationFrame(() => {
                loadingScreen.style.opacity = '0';
                setTimeout(() => {
    loadingScreen.style.display = 'none';
}, 5000);
                   
            });
        });

        class SnowEffect {
            constructor() {
                this.container = document.createElement('div');
                this.container.className = 'snow-container';
                document.body.appendChild(this.container);
                this.createSnowflakes();
            }

            createSnowflakes() {
                const fragment = document.createDocumentFragment();
                const snowflakeCount = window.innerWidth < 768 ? 100 : 200;

                for (let i = 0; i < snowflakeCount; i++) {
                    const snowflake = document.createElement('div');
                    snowflake.className = 'snowflake';
                    
                    // Random starting position
                    snowflake.style.left = `${Math.random() * 100}vw`;
                    
                    // Slower falling speed with whirling effect
                    snowflake.style.animationDuration = `${15 + Math.random() * 20}s, ${7 + Math.random() * 7}s`;
                    
                    // Larger snowflakes
                    const size = 3 + Math.random() * 6;
                    snowflake.style.width = snowflake.style.height = `${size}px`;
                    
                    // Random delay for more natural effect
                    snowflake.style.animationDelay = `-${Math.random() * 20}s, -${Math.random() * 7}s`;
                    
                    fragment.appendChild(snowflake);
                }
                
                this.container.appendChild(fragment);
            }
        }

        const observerOptions = {
            root: null,
            rootMargin: '0px',
            threshold: 0.1
        };

        const projectsObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const projectsContainer = entry.target;
                    projectsContainer.classList.add('visible');
                    
                    const projectCards = projectsContainer.querySelectorAll('.project-card');
                    projectCards.forEach((card, index) => {
                        requestAnimationFrame(() => {
                            setTimeout(() => {
                                card.classList.add('visible');
                            }, 100 * index);
                        });
                    });

                    projectsObserver.unobserve(projectsContainer);
                }
            });
        }, observerOptions);

        const projectsContainer = document.querySelector('.projects-container');
        projectsObserver.observe(projectsContainer);

        document.addEventListener('DOMContentLoaded', () => {
            new SnowEffect();
        });

        const cleanupObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (!entry.isIntersecting) {
                    entry.target.classList.remove('visible');
                }
            });
        }, {
            rootMargin: '-50px'
        });

        document.querySelectorAll('.project-card').forEach(card => {
            cleanupObserver.observe(card);
        });
    </script>
</body>
</html>