skillDevelop.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CS Roadmap — Learn & Earn</title>
    <link rel="icon" type="image/x-icon" href="https://i.ibb.co/Y4LY8pCd/logo.png">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Courier New', monospace;
            cursor: none;
        }

        body {
            background-color: #0a0a0a;
            color: #00ff00;
            min-height: 100vh;
            overflow-x: hidden;
            display: flex;
            flex-direction: column;
        }

        .custom-cursor {
            position: fixed;
            width: 10px;
            height: 10px;
            background-color: #00ff00;
            border-radius: 50%;
            pointer-events: none;
            z-index: 9999;
            mix-blend-mode: difference;
        }

        h1 {
            text-align: center;
            padding: 1.5rem 1rem;
            font-size: 2em;
            text-shadow: 0 0 10px #00ff00;
            margin-bottom: 0.5rem;
        }

        .subtitle {
            text-align: center;
            opacity: 0.8;
            margin-bottom: 1rem;
        }

        main {
            flex: 1;
            padding-bottom: 2rem;
        }

        .container {
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 1rem 3rem;\        }

        .search-container {
            display: flex;
            justify-content: center;
            margin-bottom: 1.5rem;
        }

        .search-box {
            padding: 0.8rem;
            background: #001100;
            border: 1px solid #00ff00;
            color: #00ff00;
            width: 300px;
            margin-right: 1rem;
            outline: none;
            cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="%2300ff88"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>'), pointer;
        }

        .search-btn {
            padding: 0.8rem 1.5rem;
            background: #002200;
            border: 1px solid #00ff00;
            color: #00ff00;
            cursor: pointer;
            transition: all 0.3s;
        }

        .search-btn:hover {
            background: #00ff00;
            color: #000;
            cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%2300ff00" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>'), auto;
        }

        .form-card {
            background: #001100;
            border: 1px solid #00ff00;
            padding: 1rem;
            margin-bottom: 1.5rem;
        }

        label {
            display: block;
            margin-bottom: 0.4rem;
            font-size: 0.9rem;
        }

        input[type="text"], select {
            width: 100%;
            padding: 0.6rem;
            background: #001400;
            border: 1px solid #004400;
            color: #00ff00;
            margin-bottom: 0.8rem;
            outline: none;
        }

        .row {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
        }

        .btn-row {
            display: flex;
            gap: .6rem;
        }

        button.primary {
            background: #002200;
            border: 1px solid #00ff00;
            color: #00ff00;
            padding: 0.6rem 1rem;
            cursor: pointer;
        }

        button.ghost {
            background: transparent;
            border: 1px dashed #00ff00;
            color: #00ff00;
            padding: 0.6rem 1rem;
            cursor: pointer;
        }

        .cards-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
            margin-top: 1rem;\        }

        .card {
            background: #001100;
            border: 1px solid #00ff00;
            padding: 1rem;
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
            min-height: 150px;
        }

        .card h3 {
            margin-bottom: .6rem;
            font-size: 1.1rem;
            text-shadow: 0 0 5px #00ff00;
        }

        .card p { line-height: 1.4; opacity: .9 }

        .tag {
            display: inline-block;
            padding: 0.15rem 0.4rem;
            border: 1px solid #00ff00;
            margin-top: 0.5rem;
            font-size: 0.75rem;
            opacity: .9;
        }

        .accordion {
            margin-top: 1rem;
        }

        .acc-item {
            border: 1px solid #004400;
            margin-bottom: .6rem;
            background: #001000;
        }

        .acc-head {
            padding: 0.8rem;
            cursor: pointer;
        }

        .acc-body {
            padding: 0.8rem;
            display: none;
            border-top: 1px dashed #003300;
        }

        .footer {
            margin-top: auto;
            padding: 20px;
            text-align: center;
            color: #00ff00;
            border-top: 1px solid #00ff00;
            background-color: #001100;
            backdrop-filter: blur(5px);
        }

        .developer-text { font-size: 1rem; color: #00ff00; }

        .github-link { color: #00ff00; text-decoration: none; font-weight: bold; }

        @media (max-width: 900px) {
            .row { grid-template-columns: 1fr }
            .cards-container { grid-template-columns: repeat(2, 1fr) }
        }

        @media (max-width: 480px) {
            .cards-container { grid-template-columns: 1fr }
        }
    </style>
</head>

<body>
    <div class="custom-cursor"></div>

    <h1>CS Roadmap — Learn & Earn</h1>
    <p class="subtitle">A student-friendly step-by-step guide. Use the search and accordion to explore the roadmap.</p>

    <main>
        <div class="container">

            <div class="search-container">
                <input type="text" class="search-box" placeholder="Search roadmap..." id="searchRoadmap">
                <button class="search-btn" id="searchBtn">SEARCH</button>
            </div>

            <!-- Roadmap cards -->
            <div class="cards-container" id="roadmapCards">
                <div class="card" data-keywords="foundations basics python git github">
                    <h3>Stage 1 — Foundations (Month 1–2)</h3>
                    <p>Goal: understand computer basics and programming logic. Start with <strong>Python</strong>, basic OS, and Git.</p>
                    <span class="tag">Easy → Medium</span>
                </div>
                <div class="card" data-keywords="core dsa algorithms oop sql networking">
                    <h3>Stage 2 — Core CS Skills (Month 3–6)</h3>
                    <p>Goal: Data Structures & Algorithms, OOP, SQL, basic Networking. Practice daily, build mini-projects.</p>
                    <span class="tag">Medium → Hard (DSA is hardest)</span>
                </div>
                <div class="card" data-keywords="specialization web mobile ai ds cybersecurity cloud">
                    <h3>Stage 3 — Specialization (Month 7–12)</h3>
                    <p>Choose 1–2 fields: Web, Mobile, Data Science, Cybersecurity, Cloud. Follow project-based learning.</p>
                    <span class="tag">Pick based on interest</span>
                </div>
                <div class="card" data-keywords="earn freelancing internships open-source">
                    <h3>Stage 4 — Earn While Learning (Month 9+)</h3>
                    <p>Start freelancing, create content, apply for internships, contribute to open-source, and take small paid gigs.</p>
                    <span class="tag">Practical & income-focused</span>
                </div>
                <div class="card" data-keywords="advanced system-design competitive programming portfolio">
                    <h3>Stage 5 — Advanced Growth (After 1 year)</h3>
                    <p>System design, OS, competitive programming, portfolio, and networking to get jobs or high-paying freelance work.</p>
                    <span class="tag">Hard (long-term)</span>
                </div>
                <div class="card" data-keywords="tips consistency projects collaborate github">
                    <h3>Extra Tips</h3>
                    <p>Be consistent (2–3 hrs/day), build projects, collaborate with teammates, document on GitHub, and showcase work.</p>
                    <span class="tag">Mindset</span>
                </div>
            </div>

            <!-- Detailed accordion roadmap -->
            <div class="accordion" id="accordion">

                <div class="acc-item" data-keywords="foundations">
                    <div class="acc-head">Stage 1 — Foundations (Click to expand)</div>
                    <div class="acc-body">
                        <h4>Topics</h4>
                        <ol>
                            <li>Computer Basics (Easy)</li>
                            <li>Python — Programming Fundamentals (Easy → Medium)</li>
                            <li>Git & GitHub (Medium)</li>
                        </ol>
                        <h4>Weekly Plan</h4>
                        <p>1–2 hrs video + 1 hr practice daily. Make tiny projects (calculator, to-do list).</p>
                    </div>
                </div>

                <div class="acc-item" data-keywords="core">
                    <div class="acc-head">Stage 2 — Core CS Skills (Click to expand)</div>
                    <div class="acc-body">
                        <h4>Topics</h4>
                        <ul>
                            <li>Data Structures & Algorithms — Arrays, Linked Lists, Stacks, Queues, Trees, Graphs (Hard)</li>
                            <li>OOP — Classes & Design (Medium)</li>
                            <li>Databases (SQL) & Networking Basics (Medium)</li>
                        </ul>
                        <h4>Practice</h4>
                        <p>Daily DSA practice on platforms (LeetCode/GFG), weekly mini projects integrating DB.</p>
                    </div>
                </div>

                <div class="acc-item" data-keywords="specialization">
                    <div class="acc-head">Stage 3 — Specialization (Click to expand)</div>
                    <div class="acc-body">
                        <h4>Common Fields</h4>
                        <p>Web Dev (Easy→Medium), Mobile (Medium), Data Science (Hard), Cybersecurity (Hard), Cloud/DevOps (Hard)</p>
                        <h4>How to pick</h4>
                        <p>Try small tutorials in each area (1 week each). Pick what excites you and where you enjoy building projects.</p>
                    </div>
                </div>

                <div class="acc-item" data-keywords="earn">
                    <div class="acc-head">Stage 4 — Earn While Learning (Click to expand)</div>
                    <div class="acc-body">
                        <h4>Low-friction ways to start earning</h4>
                        <ul>
                            <li>Freelance small websites, landing pages, bug fixes (Fiverr/Upwork)</li>
                            <li>Create tutorials, blogs, or YouTube videos sharing what you learned</li>
                            <li>Micro-internships and part-time remote gigs</li>
                        </ul>
                        <p>Start small: \$10–\$100 gigs build reputation; reinvest earnings into courses/tools if needed.</p>
                    </div>
                </div>

                <div class="acc-item" data-keywords="advanced">
                    <div class="acc-head">Stage 5 — Advanced Growth (Click to expand)</div>
                    <div class="acc-body">
                        <h4>Goals</h4>
                        <p>Prepare for interviews (system design), build scalable projects, contribute to major open-source, and prepare a strong portfolio.</p>
                    </div>
                </div>

            </div>

        </div>
    </main>

    <footer class="footer">
        <p class="developer-text">Developed by <a href="https://github.com/ExploitInject" class="github-link" target="_blank">ExploitInject</a></p>
    </footer>

    <script>
        // Custom cursor
        const cursor = document.querySelector('.custom-cursor');
        document.addEventListener('mousemove', (e) => {
            cursor.style.left = e.clientX + 'px';
            cursor.style.top = e.clientY + 'px';
        });

        // Hover effects
        const interactiveElements = document.querySelectorAll('button, .card, .search-box, .acc-head, input');
        interactiveElements.forEach(element => {
            element.addEventListener('mouseenter', () => cursor.style.transform = 'scale(2)');
            element.addEventListener('mouseleave', () => cursor.style.transform = 'scale(1)');
        });

        // Accordion
        document.querySelectorAll('.acc-head').forEach(head => {
            head.addEventListener('click', () => {
                const body = head.nextElementSibling;
                const isVisible = body.style.display === 'block';
                document.querySelectorAll('.acc-body').forEach(b => b.style.display = 'none');
                body.style.display = isVisible ? 'none' : 'block';
            });
        });

        // Search roadmap
        document.getElementById('searchBtn').addEventListener('click', () => {
            const q = document.getElementById('searchRoadmap').value.toLowerCase().trim();
            if (!q) return alert('Enter a search term (e.g. DSA, Python, Freelance)');
            const cards = document.querySelectorAll('#roadmapCards .card');
            let found = false;
            cards.forEach(card => {
                const keywords = card.dataset.keywords || '';
                if (keywords.includes(q) || card.textContent.toLowerCase().includes(q)) {
                    card.style.display = 'block'; found = true;
                } else card.style.display = 'none';
            });
            if (!found) alert('No matches found. Try shorter keywords like "web" or "dsa"');
        });
        // Small UX: reveal Stage 1 by default
        document.querySelectorAll('.acc-head')[0].click();
    </script>
</body>

</html>