<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ish.sln Portfolio</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <audio id="clickSound" src="https://www.soundjay.com/button/button-click-on.mp3" preload="auto"></audio>

    <div class="tab-buttons">
        <button class="tab-btn active" onclick="playClickAndShowTab('skills')">Skills</button>
        <button class="tab-btn" onclick="playClickAndShowTab('projects')">Projects</button>
    </div>
    
    <div class="container">
        <h1>Ish.sln Portfolio</h1>
        <div id="viewCount">Views: 0</div>

        <div id="skills" class="tab-content active">
            <div class="section-title">- My Skills -</div>
            <div class="skills">
                <span onclick="document.getElementById('clickSound').play()">Reverse Engineer
                    <div class="skill-description">Im pretty good at reverse engineering and checking out how games or anti-cheats/anti-tampers work, or checking there insides.</div>
                </span>
                <span onclick="document.getElementById('clickSound').play()">C++
                    <div class="skill-description">I love using c++, i started c++ in 2021 and i still use it today.</div>
                </span>
                <span onclick="document.getElementById('clickSound').play()">Luau
                    <div class="skill-description">I have always made games in roblox which got me better at coding luau and making games.</div>
                </span>
                <span onclick="document.getElementById('clickSound').play()">Python
                    <div class="skill-description">I started learning python in 2024 and im trying to get better at it..</div>
                </span>
            </div>
        </div>

        <div id="projects" class="tab-content">
            <div class="section-title">- My Projects -</div>
            <div class="projects">
                <span onclick="document.getElementById('clickSound').play()">No project yet.
                    <div class="project-description">Soon...</div>
                </span>
            </div>
        </div>
    </div>

    <script>
        // View count functionality
        let views = localStorage.getItem('pageViews') || 0;
        views = parseInt(views) + 1;
        localStorage.setItem('pageViews', views);
        document.getElementById('viewCount').textContent = `Views: currently broken.`;

        function createSnowflake() {
            const snowflake = document.createElement('div');
            snowflake.classList.add('snowflake');
            const symbols = ['ISH.SLN', 'ISH.SLN', '.', '.', '.'];
            snowflake.innerHTML = symbols[Math.floor(Math.random() * symbols.length)];
            snowflake.style.left = Math.random() * 100 + 'vw';
            snowflake.style.animationDuration = Math.random() * 3 + 2 + 's';
            snowflake.style.opacity = Math.random() * 0.5 + 0.3;
            snowflake.style.transform = `scale(${Math.random() * 0.5 + 0.5})`;
            document.body.appendChild(snowflake);

            setTimeout(() => {
                snowflake.remove();
            }, 5000);
        }

        setInterval(createSnowflake, 50);

        function playClickAndShowTab(tabId) {
            document.getElementById('clickSound').play();
            showTab(tabId);
        }

        function showTab(tabId) {
            // Hide all tabs
            document.querySelectorAll('.tab-content').forEach(tab => {
                tab.classList.remove('active');
            });
            document.querySelectorAll('.tab-btn').forEach(btn => {
                btn.classList.remove('active');
            });

            // Show selected tab
            document.getElementById(tabId).classList.add('active');
            document.querySelector(`button[onclick="playClickAndShowTab('${tabId}')"]`).classList.add('active');
        }
    </script>
</body>
</html>
