├── .vscode
    └── settings.json
├── images
    ├── PR-LOGO.png
    ├── favicon.png
    └── PR_white_elements.png
├── .GITHUB
    ├── ISSUE_TEMPLATE
    │   ├── config.yml
    │   └── issue_template.md
    └── pull_request_template.md
├── LICENSE
├── CODE_OF_CONDUCT.MD
├── README.md
├── contributing.md
├── contact.html
├── contribute.html
├── resume.html
├── interviewprep.html
├── dsa.html
├── career-roadmaps.html
├── open.html
├── roadmap.html
└── index.html


/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "livePreview.defaultPreviewPath": "/index.html"
3 | }


--------------------------------------------------------------------------------
/images/PR-LOGO.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Varshitha713/first-contrib-placement/HEAD/images/PR-LOGO.png


--------------------------------------------------------------------------------
/images/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Varshitha713/first-contrib-placement/HEAD/images/favicon.png


--------------------------------------------------------------------------------
/images/PR_white_elements.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Varshitha713/first-contrib-placement/HEAD/images/PR_white_elements.png


--------------------------------------------------------------------------------
/.GITHUB/ISSUE_TEMPLATE/config.yml:
--------------------------------------------------------------------------------
1 | blank_issues_enabled: false
2 | contact_links:
3 |   - name: Ask a question
4 |     url: https://github.com/Varshitha713/first-contrib-placement/discussions
5 |     about: Please ask and answer questions here.
6 | 


--------------------------------------------------------------------------------
/.GITHUB/pull_request_template.md:
--------------------------------------------------------------------------------
 1 | ## 🧑‍💻 Contributor Details  
 2 | **Name:**  
 3 | 
 4 | ---
 5 | 
 6 | ## 🔍 Issue Link  
 7 | Related to: #<issue-number>  
 8 | 
 9 | ---
10 | 
11 | ## 📝 What’s Changed?  
12 | Give a short, clear summary of what you did and why.  
13 | Example: `"Added a new resource card for DSA category"`, or `"Improved mobile layout for resource cards."`  
14 | 
15 | ---
16 | 
17 | ## 📸 Visual Changes (if any)  
18 | Attach before & after screenshots or short videos for UI updates.  
19 | 
20 | ---
21 | 
22 | ## ✅ Pre-Merge Checklist  
23 | - [ ] I’ve linked this PR to a valid, assigned issue.  
24 | - [ ] I created a dedicated branch (not `main`) for these changes.  
25 | - [ ] Changes were tested locally and work as expected.  
26 | - [ ] Code follows the style guidelines in the project.  
27 | - [ ] No merge conflicts exist.  
28 | - [ ] Confirmed that the feature fits well with the latest updated version of the website.
29 | - [ ] Layout is responsive on desktop & mobile devices.  
30 | 
31 | ---
32 | 
33 | ## 💡 Notes for Reviewers (optional)  
34 | Add any extra details, considerations, or special instructions for testing.  
35 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2025 [Macha Varshitha]
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/.GITHUB/ISSUE_TEMPLATE/issue_template.md:
--------------------------------------------------------------------------------
 1 | ## 📝 Issue Title
 2 | <!-- Write a short and clear title for your issue -->
 3 |  Example: "Add new resource card for Aptitude section" or "Fix mobile layout for navbar" 
 4 | 
 5 | ---
 6 | 
 7 | ## 📌 Issue Type
 8 | <!-- Select the type of issue -->
 9 | - [ ] 🐞 Bug Report
10 | - [ ] ✨ Feature Request
11 | - [ ] 🛠 Improvement
12 | - [ ] 📚 Documentation Update
13 | 
14 | ---
15 | 
16 | ## 📋 Description
17 | <!-- Clearly describe the problem or suggestion -->
18 |  Example: "The FAQ section does not expand on click in mobile view" or "I want to add a new DSA resource card."
19 | 
20 | ---
21 | 
22 | ## 🎯 Expected Outcome
23 | <!-- What should happen after the fix or feature is implemented? -->
24 | Example: "Clicking a FAQ item should smoothly reveal the answer."
25 | 
26 | ---
27 | 
28 | ## 🔍 Steps to Reproduce (for bugs only)
29 | 1. Go to '...'
30 | 2. Click on '...'
31 | 3. See the issue
32 | 
33 | ---
34 | 
35 | ## 📸 Screenshots / Videos (if applicable)
36 |  Add screenshots or short videos to explain the issue better 
37 | 
38 | ---
39 | 
40 | ## 💡 Additional Context
41 | <!-- Any extra information, references, or related issues -->
42 | 


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.MD:
--------------------------------------------------------------------------------
 1 | ✨ Contributor Covenant Code of Conduct
 2 | 👋 Our Pledge
 3 | We as members, contributors, and maintainers of this project pledge to make participation in our community a harassment-free experience for everyone — regardless of age, body size, visible or invisible disability, ethnicity, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation.
 4 | 
 5 | We are committed to creating a friendly, welcoming, and respectful environment for all.
 6 | 
 7 | 🙌 Our Standards
 8 | Examples of behavior that contributes to a positive environment include:
 9 | 
10 | ✅ Using welcoming and inclusive language
11 | 
12 | ✅ Being respectful of differing viewpoints and experiences
13 | 
14 | ✅ Gracefully accepting constructive feedback
15 | 
16 | ✅ Focusing on what is best for the community
17 | 
18 | ✅ Showing empathy and kindness to others
19 | 
20 | Unacceptable behaviors include:
21 | 
22 | ❌ Discrimination, insults, or derogatory comments
23 | 
24 | ❌ Trolling or intentionally disruptive behavior
25 | 
26 | ❌ Unwanted sexual attention or advances
27 | 
28 | ❌ Publishing others' private information without consent
29 | 
30 | ❌ Any form of harassment
31 | 
32 | 💬 Our Responsibilities
33 | Project maintainers (that's me — Varshitha! 😄) are responsible for:
34 | 
35 | Clarifying standards of acceptable behavior
36 | 
37 | Reviewing, editing, or rejecting contributions that violate this Code
38 | 
39 | Temporarily or permanently banning contributors for abusive behavior
40 | 
41 | 🛡 Enforcement
42 | If you experience or witness unacceptable behavior:
43 | 
44 | 📩 Please contact the maintainer directly via GitHub Discussions  
45 | or  
46 | 💬 Join our Discord and DM @Varshitha713 or post in #moderation-help: [https://discord.gg/eZUc6NA4Np]
47 | 
48 | All complaints will be reviewed and responded to in a fair and respectful manner.
49 | 
50 | 🌏 Scope
51 | This Code of Conduct applies to:
52 | 
53 | All project spaces (GitHub issues, pull requests, discussions, etc.)
54 | 
55 | Public channels like Discord
56 | 
57 | Any interaction under the project umbrella (collaboration, review, communication)


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <div align="center">
  2 | # 📚 Placement Resources
  3 | 
  4 | [![GitHub stars](https://img.shields.io/github/stars/Varshitha713/first-contrib-placement.svg?style=for-the-badge)](https://github.com/Varshitha713/first-contrib-placement/stargazers)
  5 | [![GitHub forks](https://img.shields.io/github/forks/Varshitha713/first-contrib-placement.svg?style=for-the-badge)](https://github.com/Varshitha713/first-contrib-placement/network/members)
  6 | [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=for-the-badge)](./LICENSE)
  7 | [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=for-the-badge)](http://makeapullrequest.com)
  8 | [![GSSoC 2025](https://img.shields.io/badge/GSSoC-2025-orange?style=for-the-badge)](#)
  9 | 
 10 | </div>
 11 | 
 12 | ---
 13 | 
 14 | ## 👋 Welcome to Placement Resources
 15 | 
 16 | This is a **simple, open-source website** dedicated to providing **useful study and interview preparation resources** for students and job seekers.  
 17 | Our goal is to create a **centralized place** where anyone can find materials to help them succeed in their placements and career journeys.
 18 | 
 19 | ---
 20 | 
 21 | ## ✨ Features
 22 | 
 23 | - 📑 **Curated Resource Cards** – Easy-to-browse cards with links, descriptions, and categories for various topics.  
 24 | - 🤝 **Community-Driven** – Resources are added and improved by contributors like you!  
 25 | - 🎨 **Clean & Simple UI** – Minimal design for quick navigation and accessibility.  
 26 | 
 27 | ---
 28 | 
 29 | ## 🚀 Live Preview
 30 | 
 31 | Check out the live version of the website here:  
 32 | 🔗 **[first-contrib-placement.netlify.app](https://first-contrib-placement.netlify.app/)**
 33 | 
 34 | ---
 35 | 
 36 | ## 💻 Technologies Used
 37 | 
 38 | - ⚡ **HTML**  
 39 | - 🎨 **CSS**  
 40 | - 🧠 **JavaScript**
 41 | 
 42 | ---
 43 | 
 44 | ## 🤝 Contributing
 45 | 
 46 | We welcome contributions from **everyone**, whether you're a seasoned developer or just starting out!  
 47 | This project is particularly friendly for those participating in **GSSoC’25** or learning front-end development.
 48 | 
 49 | ### You can contribute by:
 50 | 
 51 | - ➕ Adding new resource cards: Share valuable links, titles, descriptions, and categories.  
 52 | - 🛠 Improving UI/UX: Enhance look, feel, responsiveness, or add features like dark mode.  
 53 | - 🐛 Fixing bugs: Help squash any issues.  
 54 | - 📄 Improving documentation: Make the project easier to understand.
 55 | 
 56 | 📜 **[Read our CONTRIBUTING.md](https://github.com/Varshitha713/first-contrib-placement/blob/master/contributing.md)** for detailed steps.
 57 | 
 58 | ---
 59 | 
 60 | ## 🛠 Getting Started with Your First Contribution
 61 | 
 62 | 1. **Fork** this repository.  
 63 | 2. **Clone** your forked repository:
 64 |     ```bash
 65 |     git clone https://github.com/Varshitha713/first-contrib-placement
 66 |     ```
 67 | 3. **Create a new branch**:
 68 |     ```bash
 69 |     git checkout -b your-contribution-branch-name
 70 |     ```
 71 | 4. **Make your changes** — if you're adding a resource, open `index.html` and follow the existing format.  
 72 | 5. **Commit your changes**:
 73 |     ```bash
 74 |     git commit -m "feat: Added [Resource Name] to [Category]"
 75 |     ```
 76 | 6. **Push your changes**:
 77 |     ```bash
 78 |     git push origin your-contribution-branch-name
 79 |     ```
 80 | 7. **Open a Pull Request (PR)** to the `main` branch with a descriptive title and details.
 81 | 
 82 | ---
 83 | 
 84 | ## 💬 Support & Community
 85 | 
 86 | - 📢 **[Join our Discord server](https://discord.gg/eZUc6NA4Np)** for discussions and questions.  
 87 | - 💡 Open a **GitHub Discussion** to share ideas.
 88 | 
 89 | ---
 90 | 
 91 | ## ⭐ Show Your Support
 92 | 
 93 | If you find this project helpful, **please give it a star** ⭐ — it encourages us to keep improving.
 94 | 
 95 | ---
 96 | 
 97 | ## 🙌 Credits
 98 | 
 99 | Made with ❤️ by **Macha Varshitha**  
100 | Open to contributions, feedback, and suggestions 🚀
101 | 
102 | ---
103 | 
104 | ## 👥 Contributors
105 | 
106 | Thanks to these amazing people who have contributed to this project 💖
107 | 
108 | <a href="https://github.com/Varshitha713/first-contrib-placement/graphs/contributors">
109 |   <img src="https://contrib.rocks/image?repo=Varshitha713/first-contrib-placement" />
110 | </a>
111 | 
112 | ## 📝 License
113 | 
114 | This project is licensed under the **[MIT License](./LICENSE)**.
115 | 


--------------------------------------------------------------------------------
/contributing.md:
--------------------------------------------------------------------------------
  1 | # 🤝 Contributing to Placement Resources
  2 | 
  3 | Welcome to the community! 🎉
  4 | 
  5 | Thank you for your interest in contributing to Placement Resources — a centralized platform to share study and interview preparation materials for students and job seekers. This guide will help you contribute confidently, especially if you're new to open source.
  6 | 
  7 | This guide will help you contribute confidently, especially if you're new to open source.
  8 | 
  9 | ---
 10 | 
 11 | ## 📌 Project Overview
 12 | 
 13 | **Placement Resources** is a simple website that displays useful study and interview prep resources. Contributors add their own resource cards and/or help improve the website's UI/UX.
 14 | 
 15 | Live Preview: [first-contrib-placement.netlify.app](https://first-contrib-placement.netlify.app/)
 16 | 
 17 | ---
 18 | 
 19 | ## ⭐ Show Your Support
 20 | 
 21 | If you find this project helpful, consider ⭐ starring the repo — it motivates us to keep improving!
 22 | 
 23 | ---
 24 | 
 25 | ## 📌 Before You Begin
 26 | 
 27 | - Please read the [README.md](./README.md) to understand the project's purpose, setup instructions, and goals.
 28 | - Join our community and get involved:
 29 |   - 💬 [GitHub Discussions](https://github.com/Varshitha713/first-contrib-placement/discussions)
 30 |   - 💬 [Discord Server](https://discord.gg/eZUc6NA4Np)
 31 | - Ensure you're working on the latest `main` branch before starting any work.
 32 | 
 33 | ---
 34 | 
 35 | ## 🧠 Contribution Guidelines
 36 | 
 37 | Please follow these to ensure smooth collaboration and maintain quality.
 38 | 
 39 | ### ✅ DOs
 40 | 
 41 | - Check if an issue already exists before creating a new one.
 42 | - Ask to be assigned before starting work.
 43 | - Mention the issue number in your PR (`Fixes #<number>` or `Closes #<number>`).
 44 | - Test your changes locally before submitting a PR.
 45 | - Keep PRs focused — one feature or fix per PR.
 46 | - Submit **one pull request per issue** to keep the review process clean and focused.
 47 | - Use screenshots for any visual/UI updates.
 48 | 
 49 | ### ❌ DON’Ts
 50 | 
 51 | - Don’t comment **"I want to work"** on issues already assigned to someone else.  
 52 | - Don’t open PRs **without linking them to an issue**.  
 53 | - Don’t spam with duplicate or irrelevant issues.
 54 | 
 55 | ---
 56 | 
 57 | ## 🧠 Contributor Assignment Policy
 58 | 
 59 | To maintain fairness, transparency, and active contribution in our open-source community, we follow these simple rules regarding issue assignments:
 60 | 
 61 | ### 🔢 Issue Assignment Limit
 62 | 
 63 | - ✅ A contributor can be assigned up to **2 open issues** at a time.
 64 | - 🚫 You **cannot be assigned new issues** until you've submitted a **pull request (PR)** for at least **one** of your current assignments.
 65 | - 🕐 This ensures fair opportunity for everyone and avoids issue hoarding or inactivity.
 66 | 
 67 | ### ✅ Tip for Contributors
 68 | 
 69 | Once your pull request is created and linked to an assigned issue, feel free to request another!  
 70 | 
 71 | We're always happy to see active and consistent contributors. 😊
 72 | 
 73 | ---
 74 | 
 75 | ## 🚀 What You Can Contribute
 76 | 
 77 | - 🆕 Add new **resource cards** (title, link, description, and category).  
 78 | - 🛠️ Improve **UI/UX** — layout, responsiveness, or animations.  
 79 | - 🐞 Fix **bugs** — check the Issues tab.  
 80 | - 📝 Improve **documentation** — fix typos, clarify instructions, or reformat content.
 81 | 
 82 | ---
 83 | 
 84 | ## 🔍 Find or Create an Issue
 85 | 
 86 | - Check the [Issues tab](https://github.com/Varshitha713/first-contrib-placement/issues) for available tasks.
 87 | - ✅ **Only work on issues assigned to you.** If you're interested in an unassigned issue, comment:
 88 |   > "Can I work on this?"
 89 |   and wait for a maintainer to assign it.
 90 | - ❌ Avoid commenting on someone else's issue unless you're offering help or feedback.
 91 | - 🧠 Before creating a new issue:
 92 |   - Search both open and closed issues to avoid duplicates.
 93 | 
 94 | ---
 95 | 
 96 | ## 🧾 Steps to Add a Resource or Make Changes
 97 | 
 98 | ### 1. Fork and Clone
 99 | 
100 | ```bash
101 | # Fork the repository on GitHub
102 | git clone https://github.com/Varshitha713/first-contrib-placement.git
103 | cd first-contrib-placement
104 | ```
105 | 
106 | ### 2. Create a Branch
107 | 
108 | ```bash
109 | git checkout -b fix/issue-<number>-short-description
110 | ```
111 | 
112 | ### 3. Make Your Changes
113 | 
114 | * Open `index.html`
115 | * Locate the appropriate category (e.g., DSA, Aptitude)
116 | * Add your resource following the existing card format
117 | 
118 | Ensure your card includes:
119 | 
120 | ✅ A working link
121 | 
122 | ✅ A short and clear description
123 | 
124 | ✅ A valid category tag
125 | 
126 | ### 4. Test Your Changes
127 | 
128 | * Check responsiveness on different screen sizes
129 | * Verify that your changes don’t break any existing functionality
130 | * Review in both light and dark mode (if applicable)
131 | 
132 | ### 5. Commit Your Changes
133 | 
134 | ```bash
135 | git commit -m "feat: added [Resource Name] to [Category] (#issue-number)"
136 | ```
137 | 
138 | ### 6. Push to Your Fork
139 | 
140 | ```bash
141 | git push origin fix/issue-<number>-short-description
142 | ```
143 | 
144 | ### 7. Open a Pull Request
145 | 
146 | * Open a PR from your branch to the `main` branch
147 | * Mention the issue like this:
148 | 
149 | ```md
150 | Fixes #issue-number
151 | ```
152 | 
153 | * Provide a short summary of your changes
154 | * Add before/after screenshots if the UI was affected
155 | * Mark the PR as **“Ready for Review”**
156 | 
157 | ---
158 | 
159 | ## ✅ Commit & PR Guidelines
160 | 
161 | ### ✅ Commit Messages
162 | 
163 | Use clear, descriptive messages. Example:
164 | 
165 | ```bash
166 | fix: resolved button alignment issue (#34)
167 | feat: added sorting algorithm card to DSA category (#18)
168 | docs: updated README with project setup instructions
169 | ```
170 | 
171 | ### ✅ Pull Requests
172 | * Reference the relevant issue. Link the issue using :
173 |   
174 |   ```bash
175 |   Fixes #34
176 |   Resolves #12
177 |   ```
178 |   
179 | * Keep PRs focused and minimal, and use labels like bug, enhancement, or documentation.
180 | * For UI changes, include before/after screenshots and ensure it works in both light and dark mode.
181 | * Only work on assigned issues, and reference the issue in your PR (e.g., Fixes #10).
182 | * For new features, open an issue first, and mark your PR as Ready for Review when done.
183 | 
184 | 
185 | ## 🛠️ Code Style Guide
186 | 
187 | * Follow consistent indentation and formatting
188 | * Keep all custom styles in `styles/style.css`
189 | * Reuse components where possible
190 | * Use comments for clarity where needed
191 | 
192 | ---
193 | 
194 | ## 🧪 Testing Your Changes
195 | 
196 | Make sure your updates:
197 | 
198 | * Work as expected without breaking other features
199 | * Are responsive across screen sizes
200 | * Include test cases, if applicable
201 | 
202 | ---
203 | 
204 | ## 📜 Code of Conduct
205 | 
206 | We aim to foster a respectful, inclusive, and welcoming environment for everyone.
207 | 
208 | * Be respectful and constructive
209 | * Use inclusive and professional language
210 | * Accept feedback gracefully
211 | 
212 | 📄 [Read our full Code of Conduct](./CODE_OF_CONDUCT.MD)
213 | 
214 | ---
215 | 
216 | ## 💬 Support & Community
217 | 
218 | Need help or want to brainstorm ideas?
219 | 
220 | * Ask in our [GitHub Discussions](https://github.com/Varshitha713/first-contrib-placement/discussions)
221 | * Join our [Discord Server](https://discord.gg/eZUc6NA4Np) 
222 | 
223 | We're here to help you grow and contribute successfully! 💪
224 | 
225 | ---
226 | 
227 | ## 🙌 Credits
228 | 
229 | Made with ❤️ by **Macha Varshitha**
230 | 
231 | Open to feedback, contributions, and suggestions! 🚀
232 | 


--------------------------------------------------------------------------------
/contact.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Contact Us</title>
  8 |     <link href="https://fonts.googleapis.com/css2?family=Fira+Code&display=swap" rel="stylesheet">
  9 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
 10 |         integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2LdF1/Jz7A81rYf5nU5I5jE5Vf9I7p9B9qD4B3K8H6E5Q6yG1fW4Q0fB8D7G5B1"
 11 |         crossorigin="anonymous" referrerpolicy="no-referrer" />
 12 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
 13 |     <link rel="stylesheet" href="./styles/style.css">
 14 |     <style>
 15 |         body {
 16 |             font-family: 'Fira Code', monospace;
 17 |             background: #f9f9f9;
 18 |             color: #333;
 19 |             margin: 0;
 20 |             padding: 0px;
 21 |         }
 22 | 
 23 |         .contact-section {
 24 |             background-color: #ffffff;
 25 |             padding: 40px;
 26 |             border-radius: 12px;
 27 |             max-width: 1000px;
 28 |             margin: auto;
 29 |             box-shadow: 0 0 20px rgba(40, 166, 199, 0.1);
 30 |             border: 1px solid rgba(40, 166, 199, 0.15);
 31 |         }
 32 | 
 33 |         .contact-container {
 34 |             display: flex;
 35 |             align-items: center;
 36 |             justify-content: space-between;
 37 |             gap: 40px;
 38 |             flex-wrap: wrap;
 39 |         }
 40 | 
 41 |         .contact-form {
 42 |             flex: 1 1 400px;
 43 |         }
 44 | 
 45 |         .contact-form h2 {
 46 |             font-size: 2rem;
 47 |             margin-bottom: 20px;
 48 |             color: #28A6C7;
 49 |             border-left: 5px solid #28A6C7;
 50 |             padding-left: 10px;
 51 |             animation: fadeIn 1s ease forwards;
 52 |         }
 53 | 
 54 |         .input-group {
 55 |             display: flex;
 56 |             align-items: center;
 57 |             background: #f0f8fa;
 58 |             border: 1px solid #cce9ef;
 59 |             border-radius: 8px;
 60 |             padding: 12px;
 61 |             margin-bottom: 15px;
 62 |             transition: border-color 0.3s ease, box-shadow 0.3s ease;
 63 |         }
 64 | 
 65 |         .input-group:focus-within {
 66 |             border-color: #28A6C7;
 67 |             box-shadow: 0 0 8px rgba(40, 166, 199, 0.2);
 68 |         }
 69 | 
 70 |         .icon {
 71 |             margin-right: 10px;
 72 |             font-size: 1.2rem;
 73 |             color: #28A6C7;
 74 |         }
 75 | 
 76 |         .input-group input,
 77 |         .input-group textarea {
 78 |             border: none;
 79 |             outline: none;
 80 |             background: transparent;
 81 |             flex: 1;
 82 |             font-size: 1rem;
 83 |             color: #333;
 84 |             font-family: 'Fira Code', monospace;
 85 |         }
 86 | 
 87 |         .input-group textarea {
 88 |             resize: none;
 89 |             height: 120px;
 90 |         }
 91 | 
 92 |         .btn-submit {
 93 |             background: linear-gradient(90deg, #28A6C7, #1d7a8a);
 94 |             color: #fff;
 95 |             border: none;
 96 |             padding: 12px 25px;
 97 |             border-radius: 6px;
 98 |             font-weight: bold;
 99 |             font-size: 1rem;
100 |             cursor: pointer;
101 |             transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.3s ease;
102 |         }
103 | 
104 |         .btn-submit:hover {
105 |             transform: translateY(-2px);
106 |             opacity: 0.9;
107 |             box-shadow: 0 0 10px rgba(40, 166, 199, 0.4);
108 |         }
109 | 
110 |         .contact-image {
111 |             flex: 1 1 300px;
112 |             text-align: center;
113 |         }
114 | 
115 |         .contact-image img {
116 |             max-width: 100%;
117 |             border-radius: 8px;
118 |             box-shadow: 0 0 10px rgba(40, 166, 199, 0.2);
119 |         }
120 | 
121 |         @keyframes fadeIn {
122 |             from {
123 |                 opacity: 0;
124 |                 transform: translateY(-10px);
125 |             }
126 | 
127 |             to {
128 |                 opacity: 1;
129 |                 transform: translateY(0);
130 |             }
131 |         }
132 |     </style>
133 | </head>
134 | 
135 | <body>
136 |     <nav class="navbar">
137 |         <div class="navbar-container">
138 |             <div class="logo">
139 |                 <img src="/images/PR-LOGO.png" width="140" height="120" id="logo">
140 |             </div>
141 | 
142 | 
143 |             <!-- Navigation Links -->
144 | 
145 |             <ul class="navbar-menu">
146 |                 <li><a href="index.html"><i class="fa-solid fa-house-chimney"></i>Home</a></li>
147 |                 <li><a href="contribute.html"><i class="fa-solid fa-handshake-angle"></i>Contribute</a></li>
148 | 
149 |                 <li class="dropdown">
150 |                     <a href="#" class="dropdown-toggle" id="resources-dropdown-toggle">
151 |                         <i class="fa-solid fa-book"></i>Resources <i class="fa-solid fa-caret-down"></i>
152 |                     </a>
153 |                     <ul class="dropdown-menu">
154 |                         <li><a href="./interviewprep.html">Interview Prep</a></li>
155 |                         <li><a href="./dsa.html">DSA Practice</a></li>
156 |                         <li><a href="./resume.html">Resume Tips</a></li>
157 |                         <li><a href="./open.html">Open Source</a></li>
158 |                         <li><a href="./roadmap.html">Roadmaps</a></li>
159 |                     </ul>
160 |                 </li>
161 | 
162 | 
163 |                 <li><a href="roadmap.html"><i class="fa-solid fa-map"></i>Roadmap</a></li>
164 |                 <li><a href="contact.html"><i class="fa-solid fa-address-card"></i>Contact</a></li>
165 |                 <li><a href="https://github.com/Varshitha713/first-contrib-placement" target="_blank"
166 |                         rel="noopener noreferrer">
167 |                         <i class="fa-brands fa-github"></i>Github</a>
168 |                 </li>
169 |             </ul>
170 | 
171 | 
172 |             <div class="navbar-icons">
173 |                 <!-- Hamburger icon -->
174 |                 <button class="navbar-toggle">
175 |                     <span class="bar"></span>
176 |                     <span class="bar"></span>
177 |                     <span class="bar"></span>
178 |                 </button>
179 | 
180 | 
181 |                 <!-- Dark/Light Mode Toggle -->
182 |                 <button id="toggle-mode"></button>
183 |             </div>
184 |         </div>
185 |     </nav>
186 |     <section class="contact-section">
187 |         <div class="contact-container">
188 |             <!-- Left Form -->
189 |             <div class="contact-form">
190 |                 <h2>Contact Us</h2>
191 |                 <form id="contactForm" novalidate>
192 |                     <div class="input-group">
193 |                         <input type="text" id="name" name="name" placeholder="Name" required minlength="3">
194 |                     </div>
195 |                     <div class="input-group">
196 |                         <input type="email" id="email" name="email" placeholder="Email" required>
197 |                     </div>
198 |                     <div class="input-group">
199 |                         <textarea id="message" name="message" placeholder="Message" required minlength="10"></textarea>
200 |                     </div>
201 |                     <button type="submit" class="btn-submit">Send Message</button>
202 |                 </form>
203 |             </div>
204 | 
205 |             <!-- Right GIF -->
206 |             <div class="contact-image">
207 |                 <img src="https://media.giphy.com/media/qgQUggAC3Pfv687qPC/giphy.gif" alt="Light-themed coding GIF">
208 |             </div>
209 |         </div>
210 |     </section>
211 |     <footer>
212 |         <div class="footer-container">
213 |             <!-- Branding -->
214 |             <div class="footer-section">
215 |                 <h2>first-contrib-placement</h2>
216 |                 <p>
217 |                     A community-driven project to share the best placement and learning resources for BTech students.
218 |                 </p>
219 |                 <div class="social-icons">
220 |                     <a href="https://www.linkedin.com/in/varshitha-macha/" target="blank" rel="noopener noreferrer"><i
221 |                             class="fab fa-linkedin-in"></i></a>
222 |                     <a href="https://github.com/Varshitha713/first-contrib-placement" target="_blank"
223 |                         rel="noopener noreferrer"><i class="fab fa-github"></i></a>
224 |                 </div>
225 |             </div>
226 | 
227 |             <!-- Quick Links -->
228 |             <div class="footer-section">
229 |                 <h3>Quick Links</h3>
230 |                 <ul>
231 |                     <li><a href="./index.html">Home</a></li>
232 |                     <li><a href="#">Contribute</a></li>
233 |                     <li><a href="#">Resources</a></li>
234 |                     <li><a href="./roadmap.html">Roadmap</a></li>
235 |                     <li><a href="./contact.html">Contact</a></li>
236 |                 </ul>
237 |             </div>
238 | 
239 |             <!-- Top Categories -->
240 |             <div class="footer-section">
241 |                 <h3>Top Categories</h3>
242 |                 <ul>
243 |                     <li><a href="./dsa.html">DSA Practice</a></li>
244 |                     <li><a href="./resume.html">Resume Tips</a></li>
245 |                     <li><a href="./interviewprep.html">Interview Prep</a></li>
246 |                     <li><a href="./open.html">Open Source</a></li>
247 |                     <li><a href="./roadmap.html">Roadmaps</a></li>
248 |                 </ul>
249 |             </div>
250 | 
251 |             <!-- Contact Info -->
252 |             <div class="footer-section">
253 |                 <h3>Get in Touch</h3>
254 |                 <p><strong>Location:</strong> India</p>
255 |                 <p><strong>Email:</strong> contact@firstcontrib.com</p>
256 |             </div>
257 |         </div>
258 | 
259 | 
260 |         <div class="footer-bottom">
261 |             © 2025 All Rights Reserved | Built with ❤️ by the FCP Community
262 |         </div>
263 |     </footer>
264 |     <script>
265 |         const navbarToggle = document.querySelector('.navbar-toggle');
266 |         const navbarMenu = document.querySelector('.navbar-menu');
267 |         const toggleBtn = document.getElementById("toggle-mode");
268 | 
269 |         navbarToggle.addEventListener('click', () => {
270 |             navbarToggle.classList.toggle('active');
271 |             navbarMenu.classList.toggle('active');
272 |         });
273 | 
274 |         // Dropdown functionality
275 |         const dropdownToggle = document.getElementById('resources-dropdown-toggle');
276 |         const dropdownMenu = document.querySelector('.dropdown-menu');
277 | 
278 |         // Toggle dropdown on click
279 |         dropdownToggle.addEventListener('click', (e) => {
280 |             e.preventDefault();
281 |             e.stopPropagation();
282 |             dropdownMenu.classList.toggle('active');
283 |         });
284 | 
285 |         // Close dropdown when clicking outside
286 |         document.addEventListener('click', (e) => {
287 |             if (!dropdownMenu.contains(e.target) && !dropdownToggle.contains(e.target)) {
288 |                 dropdownMenu.classList.remove('active');
289 |             }
290 |         });
291 | 
292 |         // Dark/Light mode functionality
293 |         window.addEventListener("DOMContentLoaded", () => {
294 |             const savedMode = localStorage.getItem("mode");
295 | 
296 |             if (savedMode === "dark") {
297 |                 document.body.classList.add("dark-mode");
298 |                 toggleBtn.textContent = "☀️";
299 |             } else {
300 |                 document.body.classList.remove("dark-mode");
301 |                 toggleBtn.textContent = "🌙";
302 |             }
303 |         });
304 | 
305 |         // Toggle and Save Mode
306 |         toggleBtn.addEventListener("click", () => {
307 |             document.body.classList.toggle("dark-mode");
308 | 
309 |             if (document.body.classList.contains("dark-mode")) {
310 |                 toggleBtn.textContent = "☀️";
311 |                 localStorage.setItem("mode", "dark");
312 |             } else {
313 |                 toggleBtn.textContent = "🌙";
314 |                 localStorage.setItem("mode", "light");
315 |             }
316 |         });
317 | 
318 |     </script>
319 |     <script>
320 |         document.getElementById('contactForm').addEventListener('submit', function (e) {
321 |             e.preventDefault();
322 | 
323 |             let name = document.getElementById('name');
324 |             let email = document.getElementById('email');
325 |             let message = document.getElementById('message');
326 | 
327 |             if (name.value.trim().length < 3) {
328 |                 alert("Name must be at least 3 characters long.");
329 |                 name.focus();
330 |                 return;
331 |             }
332 | 
333 |             let emailPattern = /^[^ ]+@[^ ]+\.[a-z]{2,}$/;
334 |             if (!email.value.match(emailPattern)) {
335 |                 alert("Please enter a valid email address.");
336 |                 email.focus();
337 |                 return;
338 |             }
339 | 
340 |             if (message.value.trim().length < 10) {
341 |                 alert("Message must be at least 10 characters long.");
342 |                 message.focus();
343 |                 return;
344 |             }
345 | 
346 |             alert("Form submitted successfully!");
347 |             window.location.href = "./index.html"; // Redirect after success
348 |         });
349 |     </script>
350 | 
351 | 
352 | </body>
353 | 
354 | </html>


--------------------------------------------------------------------------------
/contribute.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <title>Contribute - Placement Resources</title>
  8 |   <link rel="icon" type="image/png" href="./images/favicon.png">
  9 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
 10 |   <link rel="stylesheet" href="./styles/style.css">
 11 |   <style>
 12 |     /* ---------- Basic Body & Flex Layout ---------- */
 13 |     body {
 14 |       font-family: 'Roboto', sans-serif;
 15 |       margin: 0;
 16 |       display: flex;
 17 |       flex-direction: column;
 18 |       min-height: 100vh;
 19 |       background-color: #f0fef5;
 20 |       color: #2e3d32;
 21 |       transition: background 0.3s, color 0.3s;
 22 |     }
 23 | .navbar{
 24 |   display: flex;
 25 |   align-items:center;
 26 |   justify-content: flex-end;
 27 |   height: 80px;
 28 |   width: 100%;
 29 |   position: sticky;
 30 |   top: 0;
 31 |   background-color: #004E64;
 32 |   box-shadow: 0 4px 6px rgba(0,0,0,0.1);
 33 |   backdrop-filter: blur(10px);
 34 |   z-index: 1000;
 35 | }
 36 | 
 37 | .navbar-container{
 38 |   display: flex;
 39 |   align-items: center;
 40 |   justify-content: space-between;
 41 |   width: 100%;
 42 |   padding: 0 2rem;
 43 |   max-width: 1600px;
 44 | }
 45 | 
 46 | .navbar-icons{
 47 |   display: flex;
 48 |   align-items: center;
 49 |   gap: 1.5rem;
 50 | }
 51 | 
 52 | .logo img {
 53 |   height: 90px;
 54 |   width: auto;
 55 | }
 56 | 
 57 | .navbar-container .navbar-menu{
 58 |   display: flex;
 59 |   text-align: center;
 60 |   gap: 1.5rem;
 61 |   list-style: none;
 62 |   transform: all 0.3s ease;
 63 | }
 64 | 
 65 | /* --- Dropdown Menu Styling --- */
 66 | .navbar-menu .dropdown {
 67 |   position: relative;
 68 | }
 69 | 
 70 | .navbar-menu .dropdown-toggle {
 71 |   display: flex;
 72 |   align-items: center;
 73 |   gap: 8px;
 74 |   cursor: pointer;
 75 |   padding: 3px 20px;
 76 |   border-radius: 20px;
 77 |   border: 2px solid transparent;
 78 |   transition: all 0.7s ease;
 79 |   white-space: nowrap;
 80 | }
 81 | 
 82 | .navbar-menu .dropdown-toggle:hover {
 83 |   color: #28A6C7;
 84 |   background: white;
 85 | }
 86 | 
 87 | .dropdown-menu {
 88 |   display: none;
 89 |   position: absolute;
 90 |   top: 100%;
 91 |   left: 0;
 92 |   min-width: 200px;
 93 |   background-color: #00818d;
 94 |   box-shadow: 0 8px 16px rgba(0,0,0,0.2);
 95 |   border-radius: 8px;
 96 |   padding: 10px 0;
 97 |   list-style: none;
 98 |   z-index: 1001;
 99 |   animation: fadeIn 0.3s ease-in-out;
100 | }
101 | 
102 | .dropdown-menu.active {
103 |   display: block;
104 | }
105 | 
106 | .dropdown-menu li a {
107 |   color: white;
108 |   padding: 12px 16px;
109 |   text-decoration: none;
110 |   display: block;
111 |   text-align: left;
112 |   font-size: 1rem;
113 | }
114 | 
115 | .dropdown-menu li a:hover {
116 |   background-color: #006D77;
117 |   color: white;
118 | }
119 | 
120 | /* Ensure dropdown works on mobile view */
121 | @media(max-width: 880px) {
122 |   .navbar-menu .dropdown-menu {
123 |     position: static;
124 |     display: none;
125 |     background-color: transparent;
126 |     box-shadow: none;
127 |     padding: 0 0 0 1rem;
128 |     min-width: auto;
129 |   }
130 | 
131 |   .navbar-menu .dropdown-menu.active {
132 |     display: block;
133 |   }
134 | 
135 |   .navbar-menu .dropdown-menu li a {
136 |     padding: 8px 12px;
137 |     font-size: 1.2rem;
138 |   }
139 | 
140 |   .navbar-menu .dropdown-menu li a:hover {
141 |     background-color: transparent;
142 |     color: #28A6C7;
143 |   }
144 | }
145 | 
146 | /* Animations */
147 | @keyframes fadeIn {
148 |   from { opacity: 0; transform: translateY(-10px); }
149 |   to { opacity: 1; transform: translateY(0); }
150 | }
151 | 
152 | 
153 | .navbar-container .navbar-menu li a{
154 |   text-decoration: none;
155 |   color: #fff;
156 |   font-size: 1.3rem;
157 |   font-weight: 500;
158 |   padding: 3px 20px;
159 |   border-radius: 20px;
160 |   border: 2px solid transparent;
161 |   transition: all 0.7s ease;
162 |   white-space: nowrap;
163 | }
164 | 
165 | .navbar-container .navbar-menu li a:hover{
166 |   color: #28A6C7;
167 |   background: white;
168 | }
169 | 
170 | .navbar-menu li a i{
171 |   margin-right: 8px;
172 | }
173 | 
174 | .navbar-toggle{
175 |   display: none;
176 |   background: transparent;
177 |   padding: 10px;
178 |   border: none;
179 |   cursor: pointer;
180 | }
181 | 
182 | .bar{
183 |   display: block;
184 |   width: 25px;
185 |   height: 3px;
186 |   margin: 5px auto;
187 |   background: #fff;
188 |   transition: all 0.3s ease-in-out;
189 | }
190 | 
191 | #toggle-mode {
192 |   background: none;
193 |   border: none;
194 |   cursor: pointer;
195 |   font-size: 1.5rem;
196 |   color: white;
197 | }
198 | 
199 | @media(max-width:880px){
200 |   .navbar{
201 |     backdrop-filter: none;
202 |   }
203 | 
204 |   .navbar-container .navbar-menu{
205 |     display: none;
206 |     flex-direction: column;
207 |     align-items: flex-start;
208 |     gap: 1.7rem !important;
209 |     position: absolute;
210 |     height: 100vh;
211 |     width: 250px;
212 |     top: 0;
213 |     right: 0;
214 |     padding: 5rem 1.5rem;
215 |     box-shadow: 0 10px 10px #219EBC;
216 |     backdrop-filter: blur(10px);
217 |   }
218 | 
219 |   .navbar-container .navbar-menu.active{
220 |     display: flex;
221 |   }
222 | 
223 |   .navbar-toggle{
224 |     display: block;
225 |     z-index: 999;
226 |   }
227 | 
228 |   #toggle-mode{
229 |     display: block;
230 |   }
231 | 
232 |   .navbar-toggle.active .bar:nth-child(2){
233 |     opacity: 0;
234 |   }
235 | 
236 |   .navbar-toggle.active .bar:nth-child(1){
237 |     transform: translateY(8px) rotate(45deg);
238 |   }
239 | 
240 |   .navbar-toggle.active .bar:nth-child(3){
241 |     transform: translateY(-8px) rotate(-45deg);
242 |   }
243 | }
244 | 
245 | @media(max-width:480px){
246 |   .navbar-container{
247 |     padding: 0 1rem;
248 |   }
249 | 
250 |   .navbar-container .navbar-menu li a{
251 |     font-size: 1.2rem;
252 |     padding: 3px 15px;
253 |     filter: brightness(1) invert(0);
254 |   }
255 | }
256 | 
257 |     body.dark-mode {
258 |       background-color: #0b1e12;
259 |       color: #a4ffc1;
260 |     }
261 | 
262 |     main {
263 |       flex: 1;
264 |     }
265 | 
266 | 
267 |     body.dark-mode #toggle-mode {
268 |       background-color: #00818d;
269 |       color: black;
270 |     }
271 | 
272 |     /* ---------- Flash Card ---------- */
273 |     /* ---------- Flash Card Styling ---------- */
274 | .flash-card-container {
275 |   display: flex;
276 |   justify-content: center;
277 |   gap: 1.5rem;
278 |   flex-wrap: wrap; /* wrap on small screens */
279 |   margin: 2.5rem auto;
280 |   max-width: 1200px;
281 |   padding: 0 1rem;
282 | }
283 | 
284 | .flash-card {
285 |   background-color: #e4f7e7;
286 |   border-radius: 16px;
287 |   padding: 2rem 1rem;
288 |   width: 200px;
289 |   min-width: 200px;
290 |   text-align: center;
291 |   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
292 |   transition: transform 0.4s ease, box-shadow 0.4s ease, background 0.3s, color 0.3s;
293 |   cursor: pointer;
294 |   position: relative;
295 |   overflow: hidden;
296 | }
297 | 
298 | .flash-card .icon {
299 |   font-size: 2.5rem;
300 |   color: #00818d;
301 |   margin-bottom: 0.8rem;
302 |   transition: color 0.3s ease;
303 | }
304 | 
305 | body.dark-mode .flash-card {
306 |   background-color: #144327;
307 |   color: #00b4c1;
308 | }
309 | 
310 | body.dark-mode .flash-card .icon {
311 |   color: #00b4c1;
312 | }
313 | 
314 | .flash-card h3 {
315 |   margin-bottom: 0.6rem;
316 |   font-size: 1.2rem;
317 | }
318 | 
319 | .flash-card p {
320 |   font-size: 0.9rem;
321 |   line-height: 1.4;
322 |   color: #2e3d32;
323 | }
324 | 
325 | body.dark-mode .flash-card p {
326 |   color: #a4ffc1;
327 | }
328 | 
329 | .flash-card:hover {
330 |   transform: translateY(-10px) scale(1.1);
331 |   box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
332 | }
333 | 
334 | .flash-card::before {
335 |   content: "";
336 |   position: absolute;
337 |   top: -50%;
338 |   left: -50%;
339 |   width: 200%;
340 |   height: 200%;
341 |   background: linear-gradient(120deg, rgba(0,129,141,0.15), rgba(0,129,141,0.05), rgba(0,129,141,0.15));
342 |   transform: rotate(0deg);
343 |   transition: transform 0.6s ease;
344 |   pointer-events: none;
345 | }
346 | 
347 | .flash-card:hover::before {
348 |   transform: rotate(45deg);
349 | }
350 | 
351 | /* Responsive adjustments */
352 | @media(max-width: 880px) {
353 |   .flash-card-container {
354 |     gap: 1rem;
355 |     justify-content: center;
356 |   }
357 | }
358 | 
359 | @media(max-width: 480px) {
360 |   .flash-card {
361 |     width: 150px;
362 |     min-width: 150px;
363 |     padding: 1.5rem 1rem;
364 |   }
365 | 
366 |   .flash-card h3 {
367 |     font-size: 1rem;
368 |   }
369 | 
370 |   .flash-card p {
371 |     font-size: 0.8rem;
372 |   }
373 | 
374 |   .flash-card .icon {
375 |     font-size: 2rem;
376 |   }
377 | }
378 | 
379 | 
380 | 
381 |     /* ---------- Contributors ---------- */
382 |     .contributors-container {
383 |       display: grid;
384 |       grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
385 |       gap: 1.5rem;
386 |       padding: 2rem 1rem;
387 |       max-width: 1200px;
388 |       margin: auto;
389 |     }
390 | 
391 |     .contributor-card {
392 |       background: #e4f7e7;
393 |       border-radius: 20px;
394 |       text-align: center;
395 |       padding: 1rem;
396 |       box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
397 |       transition: transform 0.4s, box-shadow 0.4s, background 0.3s, color 0.3s;
398 |       opacity: 0;
399 |       transform: translateY(20px);
400 |     }
401 | 
402 | 
403 | /* Show on hover */
404 | .dropdown:hover .dropdown-menu {
405 |   display: block;
406 | }
407 | 
408 | .dropdown-menu li {
409 |   margin: 0.5rem 0;
410 | }
411 | 
412 | .dropdown-menu a {
413 |   color: #2e3d32;
414 |   text-decoration: none;
415 |   display: block;
416 | }
417 | 
418 | .dropdown-menu a:hover {
419 |   color: #28A6C7;
420 | }
421 | 
422 |     body.dark-mode .contributor-card {
423 |       background: #144327;
424 |       color: #00818d;
425 |     }
426 | 
427 |     .contributor-card:hover {
428 |       transform: translateY(-10px) scale(1.05);
429 |       box-shadow: 0 14px 35px rgba(0, 0, 0, 0.25);
430 |     }
431 | 
432 |     .contributor-card img {
433 |       width: 90px;
434 |       height: 90px;
435 |       border-radius: 50%;
436 |       object-fit: cover;
437 |       margin-bottom: 0.5rem;
438 |       border: 3px solid #00818d;
439 |       transition: transform 0.3s, border-color 0.3s;
440 |     }
441 | 
442 |     body.dark-mode .contributor-card img {
443 |       border-color: #00818d;
444 |     }
445 | 
446 |     .contributor-card img:hover {
447 |       transform: scale(1.1) rotate(5deg);
448 |     }
449 | 
450 |     .contributor-card h3 {
451 |       margin: 0.3rem 0;
452 |       font-size: 1rem;
453 |     }
454 | 
455 |     .contributor-card p {
456 |       font-size: 0.85rem;
457 |       margin: 0.2rem 0 0.5rem 0;
458 |     }
459 | 
460 |     .contributor-card a {
461 |       color: #00818d;
462 |       text-decoration: none;
463 |       font-size: 0.9rem;
464 |       transition: color 0.3s;
465 |     }
466 | 
467 |     body.dark-mode .contributor-card a {
468 |       color: #00818d;
469 |     }
470 | 
471 |     .contributor-card a:hover {
472 |       text-decoration: underline;
473 |     }
474 | 
475 |     /* ---------- Loader ---------- */
476 |     .loader {
477 |       text-align: center;
478 |       margin: 2rem 0;
479 |       font-size: 1.2rem;
480 |       color: #00818d;
481 |     }
482 | 
483 |     body.dark-mode .loader {
484 |       color: #00818d;
485 |     }
486 | 
487 |     /* ---------- Footer ---------- */
488 |     footer {
489 |       background-color: #28A6C7;
490 |       color: white;
491 |       padding: 50px 20px 30px;
492 |       font-family: Arial, sans-serif;
493 |     }
494 | 
495 |     body.dark-mode footer {
496 |       background-color: #144327;
497 |       color: #a4ffc1;
498 |     }
499 | 
500 |     .footer-container {
501 |       display: flex;
502 |       flex-wrap: wrap;
503 |       justify-content: space-around;
504 |       gap: 40px;
505 |       max-width: 1200px;
506 |       margin: auto;
507 |     }
508 | 
509 |     .footer-section {
510 |       flex: 1 1 220px;
511 |       text-align: center;
512 |     }
513 | 
514 |     .footer-section h2,
515 |     .footer-section h3 {
516 |       margin-bottom: 10px;
517 |     }
518 | 
519 |     .footer-section a {
520 |       color: white;
521 |       text-decoration: none;
522 |       transition: 0.3s ease;
523 |     }
524 | 
525 |     .footer-section a:hover {
526 |       color: #000000;
527 |     }
528 | 
529 |     .social-icons {
530 |       margin-top: 15px;
531 |       display: flex;
532 |       justify-content: center;
533 |       gap: 15px;
534 |     }
535 | 
536 |     .footer-bottom {
537 |       margin-top: 40px;
538 |       text-align: center;
539 |       font-size: 15px;
540 |       border-top: 1px solid rgba(0, 0, 0, 0.2);
541 |       padding-top: 15px;
542 |     }
543 |   </style>
544 | </head>
545 | 
546 | <body>
547 |   <nav class="navbar">
548 |     <div class="navbar-container">
549 |       <div class="logo">
550 |         <img src="/images/PR-LOGO.png" width="140" height="120" id="logo">
551 |       </div>
552 | 
553 | 
554 |       <!-- Navigation Links -->
555 | 
556 |       <ul class="navbar-menu">
557 |         <li><a href="index.html"><i class="fa-solid fa-house-chimney"></i>Home</a></li>
558 |         <li><a href="contribute.html"><i class="fa-solid fa-handshake-angle"></i>Contribute</a></li>
559 | 
560 |         <li class="dropdown">
561 |           <a href="#" class="dropdown-toggle" id="resources-dropdown-toggle">
562 |             <i class="fa-solid fa-book"></i>Resources <i class="fa-solid fa-caret-down"></i>
563 |           </a>
564 |           <ul class="dropdown-menu">
565 |             <li><a href="./interviewprep.html">Interview Prep</a></li>
566 |             <li><a href="./dsa.html">DSA Practice</a></li>
567 |             <li><a href="./resume.html">Resume Tips</a></li>
568 |             <li><a href="./open.html">Open Source</a></li>
569 |             <li><a href="./roadmap.html">Roadmaps</a></li>
570 |           </ul>
571 |         </li>
572 | 
573 |         <li><a href="roadmap.html"><i class="fa-solid fa-map"></i>Roadmap</a></li>
574 |         <li><a href="contact.html"><i class="fa-solid fa-address-card"></i>Contact</a></li>
575 |         <li><a href="https://github.com/Varshitha713/first-contrib-placement" target="_blank" rel="noopener noreferrer">
576 |             <i class="fa-brands fa-github"></i>Github</a>
577 |         </li>
578 |       </ul>
579 | 
580 | 
581 |       <div class="navbar-icons">
582 |         <!-- Hamburger icon -->
583 |         <button class="navbar-toggle">
584 |           <span class="bar"></span>
585 |           <span class="bar"></span>
586 |           <span class="bar"></span>
587 |         </button>
588 | 
589 | 
590 |         <!-- Dark/Light Mode Toggle -->
591 |         <button id="toggle-mode"></button>
592 |       </div>
593 |     </div>
594 |   </nav>
595 | <header>
596 |   <h1>Welcome to Our Open Source Community!</h1>
597 |   <h3>Explore, contribute, and collaborate on projects to grow together as developers</h3>
598 | </header>
599 | 
600 | 
601 |   <main>
602 |     <!-- Flash Cards -->
603 |     <div class="flash-card-container">
604 |       <div class="flash-card">
605 |         <i class="fas fa-code-branch"></i>
606 |         <h3>Fork Repo</h3>
607 |         <p>Create your copy of the repository on GitHub.</p>
608 |       </div>
609 |       <div class="flash-card">
610 |         <i class="fas fa-pencil-alt"></i>
611 |         <h3>Create Branch</h3>
612 |         <p>Start a new branch for your feature or fix.</p>
613 |       </div>
614 |       <div class="flash-card">
615 |         <i class="fas fa-edit"></i>
616 |         <h3>Make Changes</h3>
617 |         <p>Add resources, improve docs, or fix issues.</p>
618 |       </div>
619 |       <div class="flash-card">
620 |         <i class="fas fa-paper-plane"></i>
621 |         <h3>Pull Request</h3>
622 |         <p>Push your branch and open a Pull Request.</p>
623 |       </div>
624 |     </div>
625 | 
626 |     <!-- Contributors -->
627 |     <div class="loader" id="loader">Loading contributors...</div>
628 |     <div class="contributors-container" id="contributors"></div>
629 |   </main>
630 | <script>
631 |   window.addEventListener("DOMContentLoaded", () => {
632 |     const toggleBtn = document.getElementById("toggle-mode");
633 | 
634 |     // Dark/Light Mode Setup
635 |     const savedMode = localStorage.getItem("mode");
636 |     if (savedMode === "dark") {
637 |       document.body.classList.add("dark-mode");
638 |       toggleBtn.textContent = "☀️";
639 |     } else {
640 |       toggleBtn.textContent = "🌙";
641 |     }
642 | 
643 |     // Toggle Mode
644 |     toggleBtn.addEventListener("click", () => {
645 |       document.body.classList.toggle("dark-mode");
646 |       if (document.body.classList.contains("dark-mode")) {
647 |         toggleBtn.textContent = "☀️";
648 |         localStorage.setItem("mode", "dark");
649 |       } else {
650 |         toggleBtn.textContent = "🌙";
651 |         localStorage.setItem("mode", "light");
652 |       }
653 |     });
654 | 
655 |     // Fetch Contributors
656 |     const contributorsContainer = document.getElementById('contributors');
657 |     const loader = document.getElementById('loader');
658 |     const githubUser = 'Varshitha713';
659 |     const githubRepo = 'first-contrib-placement';
660 |     const apiUrl = `https://api.github.com/repos/${githubUser}/${githubRepo}/contributors`;
661 | 
662 |     async function fetchContributors() {
663 |       try {
664 |         const response = await fetch(apiUrl);
665 |         if (!response.ok) throw new Error('GitHub API error');
666 |         const contributors = await response.json();
667 | 
668 |         loader.style.display = 'none';
669 | 
670 |         contributors.forEach(contributor => {
671 |           const card = document.createElement('div');
672 |           card.classList.add('contributor-card');
673 |           card.innerHTML = `
674 |             <img src="${contributor.avatar_url}" alt="${contributor.login}">
675 |             <h3>${contributor.login}</h3>
676 |             <p>Contributions: ${contributor.contributions}</p>
677 |             <a href="${contributor.html_url}" target="_blank"><i class="fab fa-github"></i> GitHub</a>
678 |           `;
679 |           contributorsContainer.appendChild(card);
680 |         });
681 | 
682 |         // Animate cards
683 |         const cards = document.querySelectorAll('.contributor-card');
684 |         cards.forEach((c, i) => setTimeout(() => c.style.opacity = 1, i * 100));
685 | 
686 |       } catch (err) {
687 |         loader.textContent = 'Failed to load contributors.';
688 |         console.error(err);
689 |       }
690 |     }
691 | 
692 |     fetchContributors();
693 |   });
694 | </script>
695 | 
696 |   
697 |   <!-- Footer -->
698 |   <footer>
699 |     <div class="footer-container">
700 |       <div class="footer-section">
701 |         <h2>first-contrib-placement</h2>
702 |         <p>A community-driven project to share the best placement and learning resources for BTech students.</p>
703 |         <div class="social-icons">
704 |           <a href="https://www.linkedin.com/in/varshitha-macha/" target="_blank"><i class="fab fa-linkedin-in"></i></a>
705 |           <a href="https://github.com/Varshitha713/first-contrib-placement" target="_blank"><i class="fab fa-github"></i></a>
706 |         </div>
707 |       </div>
708 |       <div class="footer-section">
709 |         <h3>Quick Links</h3>
710 |         <ul>
711 |           <li><a href="./index.html">Home</a></li>
712 |           <li><a href="./contribute.html">Contribute</a></li>
713 |           <li><a href="#">Resources</a></li>
714 |           <li><a href="./roadmap.html">Roadmap</a></li>
715 |           <li><a href="./contact.html">Contact</a></li>
716 |         </ul>
717 |       </div>
718 |       <div class="footer-section">
719 |         <h3>Top Categories</h3>
720 |         <ul>
721 |           <li><a href="./dsa.html">DSA Practice</a></li>
722 |           <li><a href="./resume.html">Resume Tips</a></li>
723 |           <li><a href="./interviewprep.html">Interview Prep</a></li>
724 |           <li><a href="./open.html">Open Source</a></li>
725 |           <li><a href="./roadmap.html">Roadmaps</a></li>
726 |         </ul>
727 |       </div>
728 |       <div class="footer-section">
729 |         <h3>Get in Touch</h3>
730 |         <p><strong>Location:</strong> India</p>
731 |         <p><strong>Email:</strong> contact@firstcontrib.com</p>
732 |       </div>
733 |     </div>
734 |     <div class="footer-bottom">
735 |       © 2025 All Rights Reserved | Built with ❤️ by the FCP Community
736 |     </div>
737 |   </footer>
738 | 
739 | </body>
740 | 
741 | </html>
742 | 


--------------------------------------------------------------------------------
/resume.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <title>Resume Tips</title>
  8 |   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  9 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
 10 |     integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2LdF1/Jz7A81rYf5nU5I5jE5Vf9I7p9B9qD4B3K8H6E5Q6yG1fW4Q0fB8D7G5B1"
 11 |     crossorigin="anonymous" referrerpolicy="no-referrer" />
 12 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
 13 |   <link rel="stylesheet" href="./styles/style.css">
 14 |   <style>
 15 |     body {
 16 |       font-family: 'Roboto', sans-serif;
 17 |       margin: 0;
 18 |       background: linear-gradient(to right, #e0f7fa, #b2dfdb);
 19 |     }
 20 | 
 21 |     header {
 22 |       background: linear-gradient(135deg, #28A6C7, #004d40);
 23 |       color: white;
 24 |       padding: 2rem;
 25 |       text-align: center;
 26 |       box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
 27 |     }
 28 | 
 29 |     .container {
 30 |       padding: 2rem;
 31 |       display: grid;
 32 |       grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 33 |       gap: 2rem;
 34 |     }
 35 | 
 36 |     .tip-card {
 37 |       background: white;
 38 |       padding: 1.5rem;
 39 |       border-radius: 12px;
 40 |       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 41 |       transition: transform 0.3s ease, background 0.3s ease;
 42 |       overflow: hidden;
 43 |       position: relative;
 44 |       animation: slideIn 1s ease forwards;
 45 |       opacity: 0;
 46 |     }
 47 | 
 48 |     .tip-card:nth-child(1) {
 49 |       animation-delay: 0.2s;
 50 |     }
 51 | 
 52 |     .tip-card:nth-child(2) {
 53 |       animation-delay: 0.4s;
 54 |     }
 55 | 
 56 |     .tip-card:nth-child(3) {
 57 |       animation-delay: 0.6s;
 58 |     }
 59 | 
 60 |     .tip-card:nth-child(4) {
 61 |       animation-delay: 0.8s;
 62 |     }
 63 | 
 64 |     @keyframes slideIn {
 65 |       0% {
 66 |         transform: translateY(20px);
 67 |         opacity: 0;
 68 |       }
 69 | 
 70 |       100% {
 71 |         transform: translateY(0);
 72 |         opacity: 1;
 73 |       }
 74 |     }
 75 | 
 76 |     .tip-card:hover {
 77 |       transform: scale(1.05);
 78 |       background: linear-gradient(145deg, #e0f2f1, #ffffff);
 79 |     }
 80 | 
 81 |     h2 {
 82 |       margin-top: 0;
 83 |       color: #007c91;
 84 |     }
 85 | 
 86 |     a {
 87 |       display: inline-block;
 88 |       margin-top: 10px;
 89 |       color: #007c91;
 90 |       font-weight: bold;
 91 |       text-decoration: none;
 92 |     }
 93 | 
 94 |     .read-more {
 95 |       color: #007c91;
 96 |       cursor: pointer;
 97 |       font-weight: bold;
 98 |     }
 99 | 
100 |     .more-content {
101 |       display: none;
102 |       margin-top: 0.5rem;
103 |       color: #444;
104 |     }
105 | 
106 |     /* Resume Favorites Styles */
107 |     .resume-favorites-controls {
108 |       text-align: center;
109 |       margin: 30px auto;
110 |       max-width: 1200px;
111 |       padding: 0 20px;
112 |     }
113 | 
114 |     .resume-favorite-icon {
115 |       cursor: pointer;
116 |       font-size: 1.3rem;
117 |       color: #ccc;
118 |       transition: all 0.3s ease;
119 |       padding: 8px;
120 |       border-radius: 50%;
121 |       position: absolute;
122 |       top: 15px;
123 |       right: 15px;
124 |       z-index: 2;
125 |       background: rgba(255, 255, 255, 0.9);
126 |       backdrop-filter: blur(10px);
127 |     }
128 | 
129 |     .resume-favorite-icon:hover {
130 |       color: #ff6b6b;
131 |       background: rgba(255, 107, 107, 0.1);
132 |       transform: scale(1.1);
133 |     }
134 | 
135 |     .resume-favorite-icon.active {
136 |       color: #ff6b6b;
137 |     }
138 | 
139 |     .resume-favorite-icon.active i {
140 |       font-weight: 900;
141 |     }
142 | 
143 |     /* Hidden state for filtered cards */
144 |     .tip-card.hidden {
145 |       display: none;
146 |     }
147 | 
148 |     /* No Favorites Message */
149 |     .no-resume-favorites-message {
150 |       text-align: center;
151 |       padding: 60px 20px;
152 |       background: linear-gradient(145deg, #fff8f8, #ffeaea);
153 |       border-radius: 16px;
154 |       margin: 30px auto;
155 |       max-width: 900px;
156 |       border-left: 8px solid #ff6b6b;
157 |       animation: fadeInUp 0.5s ease-in-out;
158 |     }
159 | 
160 |     .dark-mode .no-resume-favorites-message {
161 |       background: linear-gradient(145deg, #2a1a1a, #3a2a2a);
162 |       color: #ffb4b4;
163 |     }
164 | 
165 |     .no-resume-favorites-message h3 {
166 |       color: #ff6b6b;
167 |       margin-bottom: 15px;
168 |       font-size: 1.5rem;
169 |     }
170 | 
171 |     .no-resume-favorites-message p {
172 |       color: #666;
173 |       margin-bottom: 20px;
174 |       font-size: 1.1rem;
175 |     }
176 | 
177 |     .dark-mode .no-resume-favorites-message p {
178 |       color: #e0e0e0;
179 |     }
180 | 
181 |     .no-resume-favorites-message button {
182 |       background: #ff6b6b;
183 |       color: white;
184 |       border: none;
185 |       padding: 12px 24px;
186 |       border-radius: 8px;
187 |       cursor: pointer;
188 |       font-weight: 600;
189 |       transition: all 0.3s ease;
190 |     }
191 | 
192 |     .no-resume-favorites-message button:hover {
193 |       background: #ff5252;
194 |       transform: translateY(-2px);
195 |     }
196 | 
197 |     /* Dark mode adjustments */
198 |     .dark-mode .tip-card {
199 |       background: #1E2A30;
200 |       color: #E0F7FA;
201 |     }
202 | 
203 |     .dark-mode .tip-card:hover {
204 |       background: linear-gradient(145deg, #2d3748, #1E2A30);
205 |     }
206 | 
207 |     .dark-mode h2 {
208 |       color: #81e6d9;
209 |     }
210 | 
211 |     .dark-mode a {
212 |       color: #7FDBFF;
213 |     }
214 | 
215 |     .dark-mode .read-more {
216 |       color: #7FDBFF;
217 |     }
218 | 
219 |     .dark-mode .more-content {
220 |       color: #B0BEC5;
221 |     }
222 | 
223 |     .dark-mode .resume-favorite-icon {
224 |       background: rgba(30, 42, 48, 0.9);
225 |     }
226 | 
227 |     /* Animation for fadeInUp */
228 |     @keyframes fadeInUp {
229 |       0% {
230 |         opacity: 0;
231 |         transform: translateY(40px);
232 |       }
233 |       100% {
234 |         opacity: 1;
235 |         transform: translateY(0);
236 |       }
237 |     }
238 |   </style>
239 | </head>
240 | 
241 | <body>
242 |   <nav class="navbar">
243 |     <div class="navbar-container">
244 |       <div class="logo">
245 |         <img src="/images/PR-LOGO.png" width="140" height="120" id="logo">
246 |       </div>
247 | 
248 |       <!-- Navigation Links -->
249 |       <ul class="navbar-menu">
250 |         <li><a href="index.html"><i class="fa-solid fa-house-chimney"></i>Home</a></li>
251 |         <li><a href="contribute.html"><i class="fa-solid fa-handshake-angle"></i>Contribute</a></li>
252 | 
253 |         <li class="dropdown">
254 |           <a href="#" class="dropdown-toggle" id="resources-dropdown-toggle">
255 |             <i class="fa-solid fa-book"></i>Resources <i class="fa-solid fa-caret-down"></i>
256 |           </a>
257 |           <ul class="dropdown-menu">
258 |             <li><a href="./interviewprep.html">Interview Prep</a></li>
259 |             <li><a href="./dsa.html">DSA Practice</a></li>
260 |             <li><a href="./resume.html">Resume Tips</a></li>
261 |             <li><a href="./open.html">Open Source</a></li>
262 |             <li><a href="./roadmap.html">Roadmaps</a></li>
263 |           </ul>
264 |         </li>
265 | 
266 |         <li><a href="roadmap.html"><i class="fa-solid fa-map"></i>Roadmap</a></li>
267 |         <li><a href="contact.html"><i class="fa-solid fa-address-card"></i>Contact</a></li>
268 |         <li><a href="https://github.com/Varshitha713/first-contrib-placement" target="_blank" rel="noopener noreferrer">
269 |             <i class="fa-brands fa-github"></i>Github</a>
270 |         </li>
271 |       </ul>
272 | 
273 |       <div class="navbar-icons">
274 |         <!-- Hamburger icon -->
275 |         <button class="navbar-toggle">
276 |           <span class="bar"></span>
277 |           <span class="bar"></span>
278 |           <span class="bar"></span>
279 |         </button>
280 | 
281 |         <!-- Dark/Light Mode Toggle -->
282 |         <button id="toggle-mode"></button>
283 |       </div>
284 |     </div>
285 |   </nav>
286 |   
287 |   <header>
288 |     <h1>Resume Tips Hub</h1>
289 |     <p>Boost your resume with expert tips and free resources</p>
290 |   </header>
291 | 
292 |   <!-- Favorites Controls -->
293 |   <div class="resume-favorites-controls">
294 |     <button id="resumeFavoritesBtn" class="favorites-toggle-btn">
295 |       <i class="far fa-star"></i> Show Favorite Tips Only
296 |     </button>
297 |     <div class="favorites-stats">
298 |       <span id="resumeFavoritesCount">0</span> favorite tips
299 |     </div>
300 |   </div>
301 | 
302 |   <div class="container">
303 |     <div class="tip-card" data-tip="interactive">
304 |       <span class="resume-favorite-icon" onclick="toggleResumeFavorite('interactive')">
305 |         <i class="far fa-heart"></i>
306 |       </span>
307 |       <h2>Interactive Tips</h2>
308 |       <p>
309 |         Understand how recruiters view resumes and how ATS (Applicant Tracking Systems) work.
310 |         <span class="read-more" onclick="toggleMore(this)">Read more...</span>
311 |       </p>
312 |       <div class="more-content">
313 |         Use tools like Jobscan to test how well your resume matches a job description. Include keywords from the posting
314 |         and format your resume in clean sections: summary, education, experience, and skills.
315 |       </div>
316 |       <a href="https://novoresume.com/resume-tips" target="_blank">See Resume Tips</a>
317 |     </div>
318 |     
319 |     <div class="tip-card" data-tip="role-specific">
320 |       <span class="resume-favorite-icon" onclick="toggleResumeFavorite('role-specific')">
321 |         <i class="far fa-heart"></i>
322 |       </span>
323 |       <h2>Role-specific Advice</h2>
324 |       <p>
325 |         Customize your resume by showing relevant projects, tools, and achievements.
326 |         <span class="read-more" onclick="toggleMore(this)">Read more...</span>
327 |       </p>
328 |       <div class="more-content">
329 |         Include GitHub links, portfolio URLs, or LinkedIn. Use action verbs like "Developed", "Built", "Led". Focus on
330 |         relevant tools (e.g., Python, TensorFlow for ML, or MongoDB for full stack).
331 |       </div>
332 |       <a href="https://enhancv.com/resume-examples/" target="_blank">Explore Role-based Samples</a>
333 |     </div>
334 |     
335 |     <div class="tip-card" data-tip="company-samples">
336 |       <span class="resume-favorite-icon" onclick="toggleResumeFavorite('company-samples')">
337 |         <i class="far fa-heart"></i>
338 |       </span>
339 |       <h2>Company Sample Resumes</h2>
340 |       <p>
341 |         Study formats used by successful applicants at Google, Amazon, etc.
342 |         <span class="read-more" onclick="toggleMore(this)">Read more...</span>
343 |       </p>
344 |       <div class="more-content">
345 |         Top resumes use the STAR method: Situation, Task, Action, Result. Always quantify: "Increased API speed by 30%"
346 |         is more impactful than "Optimized backend code".
347 |       </div>
348 |       <a href="https://www.cakeresume.com/resources/top-resume-examples" target="_blank">Company Resumes</a>
349 |     </div>
350 |     
351 |     <div class="tip-card" data-tip="templates">
352 |       <span class="resume-favorite-icon" onclick="toggleResumeFavorite('templates')">
353 |         <i class="far fa-heart"></i>
354 |       </span>
355 |       <h2>Free Templates & Tools</h2>
356 |       <p>
357 |         Use online tools like Canva, Zety, or Overleaf for LaTeX-style resumes.
358 |         <span class="read-more" onclick="toggleMore(this)">Read more...</span>
359 |       </p>
360 |       <div class="more-content">
361 |         Templates help with layout. Resume checkers help with keyword optimization. Follow YouTube creators who do live
362 |         resume reviews for better insight.
363 |       </div>
364 |       <a href="https://www.canva.com/resumes/" target="_blank">Download Templates</a>
365 |     </div>
366 |   </div>
367 |   
368 |   <footer>
369 |     <div class="footer-container">
370 |       <!-- Branding -->
371 |       <div class="footer-section">
372 |         <h2>first-contrib-placement</h2>
373 |         <p>
374 |           A community-driven project to share the best placement and learning resources for BTech students.
375 |         </p>
376 |         <div class="social-icons">
377 |           <a href="https://www.linkedin.com/in/varshitha-macha/" target="blank" rel="noopener noreferrer"><i
378 |               class="fab fa-linkedin-in"></i></a>
379 |           <a href="https://github.com/Varshitha713/first-contrib-placement" target="_blank" rel="noopener noreferrer"><i
380 |               class="fab fa-github"></i></a>
381 |         </div>
382 |       </div>
383 | 
384 |       <!-- Quick Links -->
385 |       <div class="footer-section">
386 |         <h3>Quick Links</h3>
387 |         <ul>
388 |           <li><a href="./index.html">Home</a></li>
389 |           <li><a href="#">Contribute</a></li>
390 |           <li><a href="#">Resources</a></li>
391 |           <li><a href="./roadmap.html">Roadmap</a></li>
392 |           <li><a href="./contact.html">Contact</a></li>
393 |         </ul>
394 |       </div>
395 | 
396 |       <!-- Top Categories -->
397 |       <div class="footer-section">
398 |         <h3>Top Categories</h3>
399 |         <ul>
400 |           <li><a href="./dsa.html">DSA Practice</a></li>
401 |           <li><a href="./resume.html">Resume Tips</a></li>
402 |           <li><a href="./interviewprep.html">Interview Prep</a></li>
403 |           <li><a href="./open.html">Open Source</a></li>
404 |           <li><a href="./roadmap.html">Roadmaps</a></li>
405 |         </ul>
406 |       </div>
407 | 
408 |       <!-- Contact Info -->
409 |       <div class="footer-section">
410 |         <h3>Get in Touch</h3>
411 |         <p><strong>Location:</strong> India</p>
412 |         <p><strong>Email:</strong> contact@firstcontrib.com</p>
413 |       </div>
414 |     </div>
415 | 
416 |     <div class="footer-bottom">
417 |       © 2025 All Rights Reserved | Built with ❤️ by the FCP Community
418 |     </div>
419 |   </footer>
420 | 
421 |   <script>
422 |     // Resume Tips Favorites Functionality
423 |     let showResumeFavoritesOnly = false;
424 |     let resumeFavorites = JSON.parse(localStorage.getItem('resumeFavorites')) || [];
425 | 
426 |     function toggleResumeFavorite(tipId) {
427 |       const index = resumeFavorites.indexOf(tipId);
428 |       const icon = event.currentTarget.querySelector('i');
429 |       
430 |       if (index === -1) {
431 |         // Add to favorites
432 |         resumeFavorites.push(tipId);
433 |         icon.classList.remove('far', 'fa-heart');
434 |         icon.classList.add('fas', 'fa-heart');
435 |         event.currentTarget.classList.add('active');
436 |       } else {
437 |         // Remove from favorites
438 |         resumeFavorites.splice(index, 1);
439 |         icon.classList.remove('fas', 'fa-heart');
440 |         icon.classList.add('far', 'fa-heart');
441 |         event.currentTarget.classList.remove('active');
442 |       }
443 |       
444 |       localStorage.setItem('resumeFavorites', JSON.stringify(resumeFavorites));
445 |       updateResumeFavoritesCount();
446 |       
447 |       if (showResumeFavoritesOnly) {
448 |         filterResumeTips();
449 |       }
450 |     }
451 | 
452 |     function filterResumeTips() {
453 |       const cards = document.querySelectorAll('.tip-card');
454 |       let visibleCount = 0;
455 |       
456 |       cards.forEach(card => {
457 |         const tipId = card.getAttribute('data-tip');
458 |         const isFavorite = resumeFavorites.includes(tipId);
459 |         
460 |         if (showResumeFavoritesOnly) {
461 |           if (isFavorite) {
462 |             card.classList.remove('hidden');
463 |             visibleCount++;
464 |           } else {
465 |             card.classList.add('hidden');
466 |           }
467 |         } else {
468 |           card.classList.remove('hidden');
469 |           visibleCount++;
470 |         }
471 |       });
472 |       
473 |       // Show message if no favorites in filter mode
474 |       if (showResumeFavoritesOnly && visibleCount === 0) {
475 |         showNoResumeFavoritesMessage();
476 |       } else {
477 |         hideNoResumeFavoritesMessage();
478 |       }
479 |     }
480 | 
481 |     function showNoResumeFavoritesMessage() {
482 |       let message = document.getElementById('noResumeFavoritesMessage');
483 |       if (!message) {
484 |         message = document.createElement('div');
485 |         message.id = 'noResumeFavoritesMessage';
486 |         message.className = 'no-resume-favorites-message';
487 |         message.innerHTML = `
488 |           <h3>⭐ No Favorite Resume Tips Yet</h3>
489 |           <p>Click the heart icons on resume tips to add them to your favorites!</p>
490 |           <button onclick="hideNoResumeFavoritesMessage()">Got it!</button>
491 |         `;
492 |         const container = document.querySelector('.container');
493 |         container.parentNode.insertBefore(message, container);
494 |       }
495 |     }
496 | 
497 |     function hideNoResumeFavoritesMessage() {
498 |       const message = document.getElementById('noResumeFavoritesMessage');
499 |       if (message) {
500 |         message.remove();
501 |       }
502 |     }
503 | 
504 |     function updateResumeFavoritesCount() {
505 |       const countElement = document.getElementById('resumeFavoritesCount');
506 |       if (countElement) {
507 |         countElement.textContent = resumeFavorites.length;
508 |       }
509 |     }
510 | 
511 |     function initializeResumeFavorites() {
512 |       // Set initial favorite states
513 |       resumeFavorites.forEach(tipId => {
514 |         const icon = document.querySelector(`[data-tip="${tipId}"] .resume-favorite-icon i`);
515 |         if (icon) {
516 |           icon.classList.remove('far', 'fa-heart');
517 |           icon.classList.add('fas', 'fa-heart');
518 |           icon.parentElement.classList.add('active');
519 |         }
520 |       });
521 |       updateResumeFavoritesCount();
522 |     }
523 | 
524 |     // Toggle resume favorites view
525 |     document.addEventListener('DOMContentLoaded', function() {
526 |       initializeResumeFavorites();
527 |       
528 |       const resumeFavoritesBtn = document.getElementById('resumeFavoritesBtn');
529 |       if (resumeFavoritesBtn) {
530 |         resumeFavoritesBtn.addEventListener('click', function() {
531 |           showResumeFavoritesOnly = !showResumeFavoritesOnly;
532 |           this.innerHTML = showResumeFavoritesOnly ? 
533 |             '<i class="far fa-star"></i> Show All Tips' : 
534 |             '<i class="far fa-star"></i> Show Favorite Tips Only';
535 |           
536 |           filterResumeTips();
537 |         });
538 |       }
539 | 
540 |       // Navbar functionality
541 |       const navbarToggle = document.querySelector('.navbar-toggle');
542 |       const navbarMenu = document.querySelector('.navbar-menu');
543 |       const toggleBtn = document.getElementById("toggle-mode");
544 | 
545 |       navbarToggle.addEventListener('click', () => {
546 |         navbarToggle.classList.toggle('active');
547 |         navbarMenu.classList.toggle('active');
548 |       });
549 | 
550 |       // Dropdown functionality
551 |       const dropdownToggle = document.getElementById('resources-dropdown-toggle');
552 |       const dropdownMenu = document.querySelector('.dropdown-menu');
553 | 
554 |       dropdownToggle.addEventListener('click', (e) => {
555 |         e.preventDefault();
556 |         e.stopPropagation();
557 |         dropdownMenu.classList.toggle('active');
558 |       });
559 | 
560 |       document.addEventListener('click', (e) => {
561 |         if (!dropdownMenu.contains(e.target) && !dropdownToggle.contains(e.target)) {
562 |           dropdownMenu.classList.remove('active');
563 |         }
564 |       });
565 | 
566 |       // Dark/Light mode functionality
567 |       const savedMode = localStorage.getItem("mode");
568 |       if (savedMode === "dark") {
569 |         document.body.classList.add("dark-mode");
570 |         toggleBtn.textContent = "☀️";
571 |       } else {
572 |         document.body.classList.remove("dark-mode");
573 |         toggleBtn.textContent = "🌙";
574 |       }
575 | 
576 |       toggleBtn.addEventListener("click", () => {
577 |         document.body.classList.toggle("dark-mode");
578 |         if (document.body.classList.contains("dark-mode")) {
579 |           toggleBtn.textContent = "☀️";
580 |           localStorage.setItem("mode", "dark");
581 |         } else {
582 |           toggleBtn.textContent = "🌙";
583 |           localStorage.setItem("mode", "light");
584 |         }
585 |       });
586 |     });
587 | 
588 |     // Read more functionality
589 |     function toggleMore(element) {
590 |       const more = element.parentElement.nextElementSibling;
591 |       const isVisible = more.style.display === 'block';
592 |       more.style.display = isVisible ? 'none' : 'block';
593 |       element.textContent = isVisible ? 'Read more...' : 'Show less';
594 |     }
595 |   </script>
596 | </body>
597 | 
598 | </html>


--------------------------------------------------------------------------------
/interviewprep.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8" />
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |   <title>Interview Preparation</title>
  8 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
  9 |   <link rel="stylesheet" href="./styles/style.css" />
 10 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" />
 11 |   <style>
 12 |     body {
 13 |       font-family: 'Segoe UI', sans-serif;
 14 |       margin: 0;
 15 |       background: linear-gradient(to bottom right, #f7f9fc, #e0f2f1);
 16 |     }
 17 | 
 18 |     header {
 19 |       background: #006D77;
 20 |       color: white;
 21 |       text-align: center;
 22 |       padding: 40px 20px;
 23 |     }
 24 | 
 25 |     section {
 26 |       max-width: 900px;
 27 |       margin: 40px auto;
 28 |       padding: 20px;
 29 |       background: #ffffff;
 30 |       border-radius: 12px;
 31 |       box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
 32 |       transition: transform 0.3s ease, box-shadow 0.3s ease;
 33 |       position: relative;
 34 |     }
 35 | 
 36 |     section:hover {
 37 |       transform: scale(1.02);
 38 |       box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15);
 39 |     }
 40 | 
 41 |     h2 {
 42 |       color: #006D77;
 43 |     }
 44 | 
 45 |     ul {
 46 |       margin-left: 20px;
 47 |       line-height: 1.8;
 48 |     }
 49 | 
 50 |     a {
 51 |       color: #007c91;
 52 |       text-decoration: none;
 53 |     }
 54 | 
 55 |     a:hover {
 56 |       text-decoration: underline;
 57 |     }
 58 | 
 59 |     /* Favorites Controls for Interview Prep */
 60 |     .interview-favorites-controls {
 61 |       text-align: center;
 62 |       margin: 30px auto;
 63 |       max-width: 900px;
 64 |       padding: 0 20px;
 65 |     }
 66 | 
 67 |     /* Favorite Icon for Interview Sections */
 68 |     .interview-favorite-icon {
 69 |       cursor: pointer;
 70 |       font-size: 1.3rem;
 71 |       color: #ccc;
 72 |       transition: all 0.3s ease;
 73 |       padding: 8px;
 74 |       border-radius: 50%;
 75 |       position: absolute;
 76 |       top: 20px;
 77 |       right: 20px;
 78 |       z-index: 2;
 79 |       background: rgba(255, 255, 255, 0.9);
 80 |       backdrop-filter: blur(10px);
 81 |     }
 82 | 
 83 |     .interview-favorite-icon:hover {
 84 |       color: #ff6b6b;
 85 |       background: rgba(255, 107, 107, 0.1);
 86 |       transform: scale(1.1);
 87 |     }
 88 | 
 89 |     .interview-favorite-icon.active {
 90 |       color: #ff6b6b;
 91 |     }
 92 | 
 93 |     .interview-favorite-icon.active i {
 94 |       font-weight: 900;
 95 |     }
 96 | 
 97 |     /* Hidden state for filtered sections */
 98 |     section.hidden {
 99 |       display: none;
100 |     }
101 | 
102 |     /* No Favorites Message */
103 |     .no-interview-favorites-message {
104 |       text-align: center;
105 |       padding: 60px 20px;
106 |       background: linear-gradient(145deg, #fff8f8, #ffeaea);
107 |       border-radius: 16px;
108 |       margin: 30px auto;
109 |       max-width: 900px;
110 |       border-left: 8px solid #ff6b6b;
111 |       animation: fadeInUp 0.5s ease-in-out;
112 |     }
113 | 
114 |     .dark-mode .no-interview-favorites-message {
115 |       background: linear-gradient(145deg, #2a1a1a, #3a2a2a);
116 |       color: #ffb4b4;
117 |     }
118 | 
119 |     .no-interview-favorites-message h3 {
120 |       color: #ff6b6b;
121 |       margin-bottom: 15px;
122 |       font-size: 1.5rem;
123 |     }
124 | 
125 |     .no-interview-favorites-message p {
126 |       color: #666;
127 |       margin-bottom: 20px;
128 |       font-size: 1.1rem;
129 |     }
130 | 
131 |     .dark-mode .no-interview-favorites-message p {
132 |       color: #e0e0e0;
133 |     }
134 | 
135 |     .no-interview-favorites-message button {
136 |       background: #ff6b6b;
137 |       color: white;
138 |       border: none;
139 |       padding: 12px 24px;
140 |       border-radius: 8px;
141 |       cursor: pointer;
142 |       font-weight: 600;
143 |       transition: all 0.3s ease;
144 |     }
145 | 
146 |     .no-interview-favorites-message button:hover {
147 |       background: #ff5252;
148 |       transform: translateY(-2px);
149 |     }
150 | 
151 |     /* Dark mode adjustments */
152 |     .dark-mode section {
153 |       background: #1E2A30;
154 |       color: #E0F7FA;
155 |     }
156 | 
157 |     .dark-mode h2 {
158 |       color: #81e6d9;
159 |     }
160 | 
161 |     .dark-mode a {
162 |       color: #7FDBFF;
163 |     }
164 | 
165 |     .dark-mode .interview-favorite-icon {
166 |       background: rgba(30, 42, 48, 0.9);
167 |     }
168 |   </style>
169 | </head>
170 | 
171 | <body>
172 |   <nav class="navbar">
173 |     <div class="navbar-container">
174 |       <div class="logo">
175 |         <img src="images/PR-LOGO.png" width="140" height="120" id="logo">
176 |       </div>
177 | 
178 |       <!-- Navigation Links -->
179 |       <ul class="navbar-menu">
180 |         <li><a href="index.html"><i class="fa-solid fa-house-chimney"></i>Home</a></li>
181 |         <li><a href="contribute.html"><i class="fa-solid fa-handshake-angle"></i>Contribute</a></li>
182 | 
183 |         <li class="dropdown">
184 |           <a href="#" class="dropdown-toggle" id="resources-dropdown-toggle">
185 |             <i class="fa-solid fa-book"></i>Resources <i class="fa-solid fa-caret-down"></i>
186 |           </a>
187 |           <ul class="dropdown-menu">
188 |             <li><a href="./interviewprep.html">Interview Prep</a></li>
189 |             <li><a href="./dsa.html">DSA Practice</a></li>
190 |             <li><a href="./resume.html">Resume Tips</a></li>
191 |             <li><a href="./open.html">Open Source</a></li>
192 |             <li><a href="./roadmap.html">Roadmaps</a></li>
193 |           </ul>
194 |         </li>
195 | 
196 |         <li><a href="roadmap.html"><i class="fa-solid fa-map"></i>Roadmap</a></li>
197 |         <li><a href="contact.html"><i class="fa-solid fa-address-card"></i>Contact</a></li>
198 |         <li><a href="https://github.com/Varshitha713/first-contrib-placement" target="_blank" rel="noopener noreferrer">
199 |             <i class="fa-brands fa-github"></i>Github</a>
200 |         </li>
201 |       </ul>
202 | 
203 |       <div class="navbar-icons">
204 |         <!-- Hamburger icon -->
205 |         <button class="navbar-toggle">
206 |           <span class="bar"></span>
207 |           <span class="bar"></span>
208 |           <span class="bar"></span>
209 |         </button>
210 | 
211 |         <!-- Dark/Light Mode Toggle -->
212 |         <button id="toggle-mode"></button>
213 |       </div>
214 |     </div>
215 |   </nav>
216 | 
217 |   <header data-aos="fade-down">
218 |     <h1>💼 Interview Preparation Central</h1>
219 |     <p>Everything you need to ace coding & HR interviews!</p>
220 |   </header>
221 | 
222 |   <!-- Favorites Controls -->
223 |   <div class="interview-favorites-controls">
224 |     <button id="interviewFavoritesBtn" class="favorites-toggle-btn">
225 |       <i class="far fa-star"></i> Show Favorite Sections Only
226 |     </button>
227 |     <div class="favorites-stats">
228 |       <span id="interviewFavoritesCount">0</span> favorite sections
229 |     </div>
230 |   </div>
231 | 
232 |   <section data-aos="zoom-in-up" data-section="technical">
233 |     <span class="interview-favorite-icon" onclick="toggleInterviewFavorite('technical')">
234 |       <i class="far fa-heart"></i>
235 |     </span>
236 |     <h2>🔧 Technical Interview Practice</h2>
237 |     <ul>
238 |       <li><a href="https://leetcode.com" target="_blank">LeetCode</a> – Practice with real coding interview questions.
239 |       </li>
240 |       <li><a href="https://www.geeksforgeeks.org/tag/technical-interview-questions/" target="_blank">GeeksforGeeks –
241 |           Technical Q&A</a></li>
242 |       <li><a href="https://interviewbit.com" target="_blank">InterviewBit</a> – Guided practice with mock interview
243 |         flow.</li>
244 |     </ul>
245 |   </section>
246 | 
247 |   <section data-aos="zoom-in-up" data-aos-delay="100" data-section="behavioral">
248 |     <span class="interview-favorite-icon" onclick="toggleInterviewFavorite('behavioral')">
249 |       <i class="far fa-heart"></i>
250 |     </span>
251 |     <h2>🗣️ HR/Behavioral Interview Tips</h2>
252 |     <ul>
253 |       <li><a href="https://www.indeed.com/career-advice/interviewing/top-interview-questions-and-answers"
254 |           target="_blank">Common HR Questions – Indeed</a></li>
255 |       <li><a href="https://www.youtube.com/playlist?list=PLV8vIYTIdSnYBZQXaDgJrOnl7tOX0fgUe" target="_blank">YouTube
256 |           Playlist: HR Mock Interviews</a></li>
257 |       <li><a href="https://www.linkedin.com/pulse/mastering-behavioral-interviews-star-method-guide-jennifer-chen"
258 |           target="_blank">Using STAR Method for Behavioral Questions</a></li>
259 |     </ul>
260 |   </section>
261 | 
262 |   <section data-aos="zoom-in-up" data-aos-delay="200" data-section="video">
263 |     <span class="interview-favorite-icon" onclick="toggleInterviewFavorite('video')">
264 |       <i class="far fa-heart"></i>
265 |     </span>
266 |     <h2>🎥 Video-Based Learning</h2>
267 |     <ul>
268 |       <li><a href="https://www.youtube.com/c/ClémentMihailescu" target="_blank">Clément Mihailescu – Former Google
269 |           Engineer</a></li>
270 |       <li><a href="https://www.youtube.com/@ApnaCollegeOfficial" target="_blank">Apna College – Placement Prep
271 |           Series</a></li>
272 |       <li><a href="https://www.youtube.com/@codebasics" target="_blank">Codebasics – System Design + HR</a></li>
273 |     </ul>
274 |   </section>
275 | 
276 |   <section data-aos="zoom-in-up" data-aos-delay="300" data-section="mock">
277 |     <span class="interview-favorite-icon" onclick="toggleInterviewFavorite('mock')">
278 |       <i class="far fa-heart"></i>
279 |     </span>
280 |     <h2>🧠 Mock Interview Platforms</h2>
281 |     <ul>
282 |       <li><a href="https://pramp.com" target="_blank">Pramp – Free peer-to-peer mock interviews</a></li>
283 |       <li><a href="https://interviewing.io" target="_blank">Interviewing.io – Anonymous real interviews</a></li>
284 |     </ul>
285 |   </section>
286 | 
287 |   <section data-aos="zoom-in-up" data-aos-delay="400" data-section="resume">
288 |     <span class="interview-favorite-icon" onclick="toggleInterviewFavorite('resume')">
289 |       <i class="far fa-heart"></i>
290 |     </span>
291 |     <h2>📄 Resume Review & Feedback</h2>
292 |     <ul>
293 |       <li><a href="https://resumeworded.com" target="_blank">ResumeWorded – Instant feedback & score</a></li>
294 |       <li><a href="https://enhancv.com" target="_blank">Enhancv – AI resume builder</a></li>
295 |       <li><a href="https://overleaf.com" target="_blank">Overleaf – LaTeX templates for CS resumes</a></li>
296 |     </ul>
297 |   </section>
298 | 
299 |   <section data-aos="flip-up" data-aos-delay="500" data-section="cheatsheet">
300 |     <span class="interview-favorite-icon" onclick="toggleInterviewFavorite('cheatsheet')">
301 |       <i class="far fa-heart"></i>
302 |     </span>
303 |     <h2>📚 Bonus: Behavioral Interview Cheat Sheet</h2>
304 |     <ul>
305 |       <li><a href="https://hbr.org/2020/01/what-really-makes-a-good-interview-question" target="_blank">What Makes a
306 |           Good Interview Question – HBR</a></li>
307 |       <li><a href="https://www.themuse.com/advice/30-behavioral-interview-questions-you-should-be-ready-to-answer"
308 |           target="_blank">30 Behavioral Questions – The Muse</a></li>
309 |     </ul>
310 |   </section>
311 | 
312 |   <footer>
313 |     <div class="footer-container">
314 |       <!-- Branding -->
315 |       <div class="footer-section">
316 |         <h2>first-contrib-placement</h2>
317 |         <p>
318 |           A community-driven project to share the best placement and learning resources for BTech students.
319 |         </p>
320 |         <div class="social-icons">
321 |           <a href="https://www.linkedin.com/in/varshitha-macha/" target="blank" rel="noopener noreferrer"><i
322 |               class="fab fa-linkedin-in"></i></a>
323 |           <a href="https://github.com/Varshitha713/first-contrib-placement" target="_blank" rel="noopener noreferrer"><i
324 |               class="fab fa-github"></i></a>
325 |         </div>
326 |       </div>
327 | 
328 |       <!-- Quick Links -->
329 |       <div class="footer-section">
330 |         <h3>Quick Links</h3>
331 |         <ul>
332 |           <li><a href="./index.html">Home</a></li>
333 |           <li><a href="#">Contribute</a></li>
334 |           <li><a href="#">Resources</a></li>
335 |           <li><a href="./roadmap.html">Roadmap</a></li>
336 |           <li><a href="./contact.html">Contact</a></li>
337 |         </ul>
338 |       </div>
339 | 
340 |       <!-- Top Categories -->
341 |       <div class="footer-section">
342 |         <h3>Top Categories</h3>
343 |         <ul>
344 |           <li><a href="./dsa.html">DSA Practice</a></li>
345 |           <li><a href="./resume.html">Resume Tips</a></li>
346 |           <li><a href="./interviewprep.html">Interview Prep</a></li>
347 |           <li><a href="./open.html">Open Source</a></li>
348 |           <li><a href="./roadmap.html">Roadmaps</a></li>
349 |         </ul>
350 |       </div>
351 | 
352 |       <!-- Contact Info -->
353 |       <div class="footer-section">
354 |         <h3>Get in Touch</h3>
355 |         <p><strong>Location:</strong> India</p>
356 |         <p><strong>Email:</strong> contact@firstcontrib.com</p>
357 |       </div>
358 |     </div>
359 | 
360 |     <div class="footer-bottom">
361 |       © 2025 All Rights Reserved | Built with ❤️ by the FCP Community
362 |     </div>
363 |   </footer>
364 | 
365 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
366 |   <script>
367 |     AOS.init({ once: true, duration: 1000 });
368 | 
369 |     // Interview Prep Favorites Functionality
370 |     let showInterviewFavoritesOnly = false;
371 |     let interviewFavorites = JSON.parse(localStorage.getItem('interviewFavorites')) || [];
372 | 
373 |     function toggleInterviewFavorite(sectionId) {
374 |       const index = interviewFavorites.indexOf(sectionId);
375 |       const icon = event.currentTarget.querySelector('i');
376 |       
377 |       if (index === -1) {
378 |         // Add to favorites
379 |         interviewFavorites.push(sectionId);
380 |         icon.classList.remove('far', 'fa-heart');
381 |         icon.classList.add('fas', 'fa-heart');
382 |         event.currentTarget.classList.add('active');
383 |       } else {
384 |         // Remove from favorites
385 |         interviewFavorites.splice(index, 1);
386 |         icon.classList.remove('fas', 'fa-heart');
387 |         icon.classList.add('far', 'fa-heart');
388 |         event.currentTarget.classList.remove('active');
389 |       }
390 |       
391 |       localStorage.setItem('interviewFavorites', JSON.stringify(interviewFavorites));
392 |       updateInterviewFavoritesCount();
393 |       
394 |       if (showInterviewFavoritesOnly) {
395 |         filterInterviewSections();
396 |       }
397 |     }
398 | 
399 |     function filterInterviewSections() {
400 |       const sections = document.querySelectorAll('section[data-section]');
401 |       let visibleCount = 0;
402 |       
403 |       sections.forEach(section => {
404 |         const sectionId = section.getAttribute('data-section');
405 |         const isFavorite = interviewFavorites.includes(sectionId);
406 |         
407 |         if (showInterviewFavoritesOnly) {
408 |           if (isFavorite) {
409 |             section.classList.remove('hidden');
410 |             visibleCount++;
411 |           } else {
412 |             section.classList.add('hidden');
413 |           }
414 |         } else {
415 |           section.classList.remove('hidden');
416 |           visibleCount++;
417 |         }
418 |       });
419 |       
420 |       // Show message if no favorites in filter mode
421 |       if (showInterviewFavoritesOnly && visibleCount === 0) {
422 |         showNoInterviewFavoritesMessage();
423 |       } else {
424 |         hideNoInterviewFavoritesMessage();
425 |       }
426 |     }
427 | 
428 |     function showNoInterviewFavoritesMessage() {
429 |       let message = document.getElementById('noInterviewFavoritesMessage');
430 |       if (!message) {
431 |         message = document.createElement('div');
432 |         message.id = 'noInterviewFavoritesMessage';
433 |         message.className = 'no-interview-favorites-message';
434 |         message.innerHTML = `
435 |           <h3>⭐ No Favorite Interview Sections Yet</h3>
436 |           <p>Click the heart icons on interview preparation sections to add them to your favorites!</p>
437 |           <button onclick="hideNoInterviewFavoritesMessage()">Got it!</button>
438 |         `;
439 |         const header = document.querySelector('header');
440 |         header.parentNode.insertBefore(message, header.nextSibling.nextSibling);
441 |       }
442 |     }
443 | 
444 |     function hideNoInterviewFavoritesMessage() {
445 |       const message = document.getElementById('noInterviewFavoritesMessage');
446 |       if (message) {
447 |         message.remove();
448 |       }
449 |     }
450 | 
451 |     function updateInterviewFavoritesCount() {
452 |       const countElement = document.getElementById('interviewFavoritesCount');
453 |       if (countElement) {
454 |         countElement.textContent = interviewFavorites.length;
455 |       }
456 |     }
457 | 
458 |     function initializeInterviewFavorites() {
459 |       // Set initial favorite states
460 |       interviewFavorites.forEach(sectionId => {
461 |         const icon = document.querySelector(`[data-section="${sectionId}"] .interview-favorite-icon i`);
462 |         if (icon) {
463 |           icon.classList.remove('far', 'fa-heart');
464 |           icon.classList.add('fas', 'fa-heart');
465 |           icon.parentElement.classList.add('active');
466 |         }
467 |       });
468 |       updateInterviewFavoritesCount();
469 |     }
470 | 
471 |     // Toggle interview favorites view
472 |     document.addEventListener('DOMContentLoaded', function() {
473 |       initializeInterviewFavorites();
474 |       
475 |       const interviewFavoritesBtn = document.getElementById('interviewFavoritesBtn');
476 |       if (interviewFavoritesBtn) {
477 |         interviewFavoritesBtn.addEventListener('click', function() {
478 |           showInterviewFavoritesOnly = !showInterviewFavoritesOnly;
479 |           this.innerHTML = showInterviewFavoritesOnly ? 
480 |             '<i class="far fa-star"></i> Show All Sections' : 
481 |             '<i class="far fa-star"></i> Show Favorite Sections Only';
482 |           
483 |           filterInterviewSections();
484 |         });
485 |       }
486 | 
487 |       // Navbar toggle functionality
488 |       const navbarToggle = document.querySelector('.navbar-toggle');
489 |       const navbarMenu = document.querySelector('.navbar-menu');
490 |       const toggleBtn = document.getElementById("toggle-mode");
491 | 
492 |       // Hamburger menu toggle
493 |       navbarToggle.addEventListener('click', () => {
494 |         navbarToggle.classList.toggle('active');
495 |         navbarMenu.classList.toggle('active');
496 |       });
497 | 
498 |       // Dropdown functionality
499 |       const dropdownToggle = document.getElementById('resources-dropdown-toggle');
500 |       const dropdownMenu = document.querySelector('.dropdown-menu');
501 | 
502 |       // Toggle dropdown on click
503 |       dropdownToggle.addEventListener('click', (e) => {
504 |         e.preventDefault();
505 |         e.stopPropagation(); // Prevents the document click listener from firing
506 |         dropdownMenu.classList.toggle('active');
507 |       });
508 | 
509 |       // Close dropdown when clicking outside
510 |       document.addEventListener('click', (e) => {
511 |         if (!dropdownMenu.contains(e.target) && !dropdownToggle.contains(e.target)) {
512 |           dropdownMenu.classList.remove('active');
513 |         }
514 |       });
515 | 
516 |       // Close menu when clicking on a link (for mobile)
517 |       const menuLinks = navbarMenu.querySelectorAll('a');
518 |       menuLinks.forEach(link => {
519 |         link.addEventListener('click', () => {
520 |           navbarToggle.classList.remove('active');
521 |           navbarMenu.classList.remove('active');
522 |         });
523 |       });
524 | 
525 |       // Close menu when clicking outside
526 |       document.addEventListener('click', function (event) {
527 |         if (!navbarToggle.contains(event.target) && !navbarMenu.contains(event.target)) {
528 |           navbarToggle.classList.remove('active');
529 |           navbarMenu.classList.remove('active');
530 |         }
531 |       });
532 | 
533 |       // Dark/Light mode functionality
534 |       const savedMode = localStorage.getItem("mode");
535 |       if (savedMode === "dark") {
536 |         document.body.classList.add("dark-mode");
537 |         toggleBtn.textContent = "☀️";
538 |       } else {
539 |         document.body.classList.remove("dark-mode");
540 |         toggleBtn.textContent = "🌙";
541 |       }
542 | 
543 |       // Toggle and Save Mode
544 |       toggleBtn.addEventListener("click", () => {
545 |         document.body.classList.toggle("dark-mode");
546 |         if (document.body.classList.contains("dark-mode")) {
547 |           toggleBtn.textContent = "☀️";
548 |           localStorage.setItem("mode", "dark");
549 |         } else {
550 |           toggleBtn.textContent = "🌙";
551 |           localStorage.setItem("mode", "light");
552 |         }
553 |       });
554 | 
555 |       // Handle window resize
556 |       window.addEventListener('resize', function () {
557 |         if (window.innerWidth > 880) {
558 |           // Reset mobile menu on desktop
559 |           navbarToggle.classList.remove('active');
560 |           navbarMenu.classList.remove('active');
561 |         }
562 |       });
563 |     });
564 |   </script>
565 | </body>
566 | 
567 | </html>


--------------------------------------------------------------------------------
/dsa.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>DSA Practice - First Contrib Placement</title>
  7 |     <link rel="stylesheet" href="./styles/style.css">
  8 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
  9 | </head>
 10 | <body>
 11 |     <nav class="navbar">
 12 |         <div class="navbar-container">
 13 |             <div class="logo">
 14 |                 <img src="/images/PR-LOGO.png" width="140" height="120" id="logo">
 15 |             </div>
 16 |             <ul class="navbar-menu">
 17 |                 <li><a href="index.html"><i class="fa-solid fa-house-chimney"></i>Home</a></li>
 18 |                 <li><a href="contribute.html"><i class="fa-solid fa-handshake-angle"></i>Contribute</a></li>
 19 |                 <li class="dropdown">
 20 |                     <a href="#" class="dropdown-toggle" id="resources-dropdown-toggle">
 21 |                         <i class="fa-solid fa-book"></i>Resources <i class="fa-solid fa-caret-down"></i>
 22 |                     </a>
 23 |                     <ul class="dropdown-menu">
 24 |                         <li><a href="./interviewprep.html">Interview Prep</a></li>
 25 |                         <li><a href="./dsa.html">DSA Practice</a></li>
 26 |                         <li><a href="./resume.html">Resume Tips</a></li>
 27 |                         <li><a href="./open.html">Open Source</a></li>
 28 |                         <li><a href="./roadmap.html">Roadmaps</a></li>
 29 |                     </ul>
 30 |                 </li>
 31 |                 <li><a href="roadmap.html"><i class="fa-solid fa-map"></i>Roadmap</a></li>
 32 |                 <li><a href="contact.html"><i class="fa-solid fa-address-card"></i>Contact</a></li>
 33 |                 <li>
 34 |                     <a href="https://github.com/Varshitha713/first-contrib-placement" target="_blank" rel="noopener noreferrer">
 35 |                         <i class="fa-brands fa-github"></i>Github
 36 |                     </a>
 37 |                 </li>
 38 |             </ul>
 39 |             <div class="navbar-icons">
 40 |                 <button class="navbar-toggle">
 41 |                     <span class="bar"></span>
 42 |                     <span class="bar"></span>
 43 |                     <span class="bar"></span>
 44 |                 </button>
 45 |                 <button id="toggle-mode"></button>
 46 |             </div>
 47 |         </div>
 48 |     </nav>
 49 | 
 50 |     <header>
 51 |         <h1>📚 Data Structures & Algorithms Practice</h1>
 52 |         <p>Master DSA with curated resources, practice platforms, and learning paths</p>
 53 |     </header>
 54 | 
 55 |     <!-- Favorites Controls -->
 56 |     <div class="resources-favorites-controls">
 57 |         <button id="dsaFavoritesBtn" class="favorites-toggle-btn">
 58 |             <i class="far fa-star"></i> Show Favorite Resources Only
 59 |         </button>
 60 |         <div class="favorites-stats">
 61 |             <span id="dsaFavoritesCount">0</span> favorite resources
 62 |         </div>
 63 |     </div>
 64 | 
 65 |     <div class="container">
 66 |         <div class="search-bar">
 67 |             <input type="text" id="searchInput" placeholder="Search DSA resources...">
 68 |             <select id="categoryFilter">
 69 |                 <option value="all">All Categories</option>
 70 |                 <option value="platform">Practice Platforms</option>
 71 |                 <option value="tutorial">Tutorials & Courses</option>
 72 |                 <option value="sheet">DSA Sheets</option>
 73 |                 <option value="book">Books</option>
 74 |                 <option value="video">Video Resources</option>
 75 |             </select>
 76 |         </div>
 77 | 
 78 |         <div id="resourcesContainer">
 79 |             <!-- Practice Platforms -->
 80 |             <div class="card" data-category="platform" data-resource="leetcode">
 81 |                 <span class="resource-favorite-icon" onclick="toggleResourceFavorite('dsa', 'leetcode')">
 82 |                     <i class="far fa-heart"></i>
 83 |                 </span>
 84 |                 <h4>LeetCode</h4>
 85 |                 <p>Comprehensive platform with 2000+ coding problems, company-specific questions, and weekly contests. Essential for technical interview preparation.</p>
 86 |                 <a href="https://leetcode.com" target="_blank" rel="noopener noreferrer">
 87 |                     Visit LeetCode <i class="fas fa-external-link-alt"></i>
 88 |                 </a>
 89 |             </div>
 90 | 
 91 |             <div class="card" data-category="platform" data-resource="geeksforgeeks">
 92 |                 <span class="resource-favorite-icon" onclick="toggleResourceFavorite('dsa', 'geeksforgeeks')">
 93 |                     <i class="far fa-heart"></i>
 94 |                 </span>
 95 |                 <h4>GeeksforGeeks</h4>
 96 |                 <p>Extensive tutorials, practice problems, company preparation kits, and competitive programming challenges.</p>
 97 |                 <a href="https://geeksforgeeks.org" target="_blank" rel="noopener noreferrer">
 98 |                     Visit GFG <i class="fas fa-external-link-alt"></i>
 99 |                 </a>
100 |             </div>
101 | 
102 |             <div class="card" data-category="platform" data-resource="hackerrank">
103 |                 <span class="resource-favorite-icon" onclick="toggleResourceFavorite('dsa', 'hackerrank')">
104 |                     <i class="far fa-heart"></i>
105 |                 </span>
106 |                 <h4>HackerRank</h4>
107 |                 <p>Practice coding skills with domains specifically for algorithms, data structures, and 30-day challenges.</p>
108 |                 <a href="https://hackerrank.com" target="_blank" rel="noopener noreferrer">
109 |                     Visit HackerRank <i class="fas fa-external-link-alt"></i>
110 |                 </a>
111 |             </div>
112 | 
113 |             <div class="card" data-category="platform" data-resource="codeforces">
114 |                 <span class="resource-favorite-icon" onclick="toggleResourceFavorite('dsa', 'codeforces')">
115 |                     <i class="far fa-heart"></i>
116 |                 </span>
117 |                 <h4>Codeforces</h4>
118 |                 <p>Competitive programming platform with regular contests and a vast problem set for advanced DSA practice.</p>
119 |                 <a href="https://codeforces.com" target="_blank" rel="noopener noreferrer">
120 |                     Visit Codeforces <i class="fas fa-external-link-alt"></i>
121 |                 </a>
122 |             </div>
123 | 
124 |             <!-- DSA Sheets -->
125 |             <div class="card" data-category="sheet" data-resource="striver-sde-sheet">
126 |                 <span class="resource-favorite-icon" onclick="toggleResourceFavorite('dsa', 'striver-sde-sheet')">
127 |                     <i class="far fa-heart"></i>
128 |                 </span>
129 |                 <h4>Striver's SDE Sheet</h4>
130 |                 <p>Curated list of 180+ most important DSA problems for software development engineer roles.</p>
131 |                 <a href="https://takeuforward.org/interviews/strivers-sde-sheet-top-coding-interview-problems/" target="_blank" rel="noopener noreferrer">
132 |                     View Sheet <i class="fas fa-external-link-alt"></i>
133 |                 </a>
134 |             </div>
135 | 
136 |             <div class="card" data-category="sheet" data-resource="love-babbar-450">
137 |                 <span class="resource-favorite-icon" onclick="toggleResourceFavorite('dsa', 'love-babbar-450')">
138 |                     <i class="far fa-heart"></i>
139 |                 </span>
140 |                 <h4>Love Babbar 450 Questions</h4>
141 |                 <p>Comprehensive DSA sheet with 450 curated problems covering all important topics.</p>
142 |                 <a href="https://450dsa.com" target="_blank" rel="noopener noreferrer">
143 |                     View Sheet <i class="fas fa-external-link-alt"></i>
144 |                 </a>
145 |             </div>
146 | 
147 |             <!-- Tutorials & Courses -->
148 |             <div class="card" data-category="tutorial" data-resource="neetcode">
149 |                 <span class="resource-favorite-icon" onclick="toggleResourceFavorite('dsa', 'neetcode')">
150 |                     <i class="far fa-heart"></i>
151 |                 </span>
152 |                 <h4>NeetCode</h4>
153 |                 <p>Well-organized DSA problems with video explanations and optimal solutions.</p>
154 |                 <a href="https://neetcode.io" target="_blank" rel="noopener noreferrer">
155 |                     Visit NeetCode <i class="fas fa-external-link-alt"></i>
156 |                 </a>
157 |             </div>
158 | 
159 |             <div class="card" data-category="tutorial" data-resource="algoexpert">
160 |                 <span class="resource-favorite-icon" onclick="toggleResourceFavorite('dsa', 'algoexpert')">
161 |                     <i class="far fa-heart"></i>
162 |                 </span>
163 |                 <h4>AlgoExpert</h4>
164 |                 <p>Curated collection of 160+ coding questions with detailed video explanations.</p>
165 |                 <a href="https://www.algoexpert.io" target="_blank" rel="noopener noreferrer">
166 |                     Visit AlgoExpert <i class="fas fa-external-link-alt"></i>
167 |                 </a>
168 |             </div>
169 | 
170 |             <!-- Books -->
171 |             <div class="card" data-category="book" data-resource="clrs-book">
172 |                 <span class="resource-favorite-icon" onclick="toggleResourceFavorite('dsa', 'clrs-book')">
173 |                     <i class="far fa-heart"></i>
174 |                 </span>
175 |                 <h4>CLRS - Introduction to Algorithms</h4>
176 |                 <p>The classic algorithms textbook covering fundamental concepts and advanced topics.</p>
177 |                 <a href="https://mitpress.mit.edu/books/introduction-algorithms-third-edition" target="_blank" rel="noopener noreferrer">
178 |                     View Book <i class="fas fa-external-link-alt"></i>
179 |                 </a>
180 |             </div>
181 | 
182 |             <!-- Video Resources -->
183 |             <div class="card" data-category="video" data-resource="abdul-bari">
184 |                 <span class="resource-favorite-icon" onclick="toggleResourceFavorite('dsa', 'abdul-bari')">
185 |                     <i class="far fa-heart"></i>
186 |                 </span>
187 |                 <h4>Abdul Bari Algorithms</h4>
188 |                 <p>Comprehensive algorithm tutorials with clear explanations and visualizations.</p>
189 |                 <a href="https://www.udemy.com/user/abdul-bari/" target="_blank" rel="noopener noreferrer">
190 |                     View Courses <i class="fas fa-external-link-alt"></i>
191 |                 </a>
192 |             </div>
193 | 
194 |             <!-- Add more DSA resources as needed -->
195 |         </div>
196 |     </div>
197 | 
198 |     <footer>
199 |         <div class="footer-container">
200 |             <div class="footer-section">
201 |                 <h2>first-contrib-placement</h2>
202 |                 <p>A community-driven project to share the best placement and learning resources for BTech students.</p>
203 |                 <div class="social-icons">
204 |                     <a href="https://www.linkedin.com/in/varshitha-macha/" target="blank" rel="noopener noreferrer"><i class="fab fa-linkedin-in"></i></a>
205 |                     <a href="https://github.com/Varshitha713/first-contrib-placement" target="_blank" rel="noopener noreferrer"><i class="fab fa-github"></i></a>
206 |                 </div>
207 |             </div>
208 |             <div class="footer-section">
209 |                 <h3>Quick Links</h3>
210 |                 <ul>
211 |                     <li><a href="./index.html">Home</a></li>
212 |                     <li><a href="#">Contribute</a></li>
213 |                     <li><a href="#">Resources</a></li>
214 |                     <li><a href="./roadmap.html">Roadmap</a></li>
215 |                     <li><a href="./contact.html">Contact</a></li>
216 |                 </ul>
217 |             </div>
218 |             <div class="footer-section">
219 |                 <h3>Top Categories</h3>
220 |                 <ul>
221 |                     <li><a href="./dsa.html">DSA Practice</a></li>
222 |                     <li><a href="./resume.html">Resume Tips</a></li>
223 |                     <li><a href="./interviewprep.html">Interview Prep</a></li>
224 |                     <li><a href="./open.html">Open Source</a></li>
225 |                     <li><a href="./roadmap.html">Roadmaps</a></li>
226 |                 </ul>
227 |             </div>
228 |             <div class="footer-section">
229 |                 <h3>Get in Touch</h3>
230 |                 <p><strong>Location:</strong> India</p>
231 |                 <p><strong>Email:</strong> contact@firstcontrib.com</p>
232 |             </div>
233 |         </div>
234 |         <div class="footer-bottom">
235 |             © 2025 All Rights Reserved | Built with ❤️ by the FCP Community
236 |         </div>
237 |     </footer>
238 | 
239 |     <script>
240 |         // Resource Favorites Functionality
241 |         let showDSAFavoritesOnly = false;
242 |         let dsaFavorites = JSON.parse(localStorage.getItem('dsaFavorites')) || [];
243 | 
244 |         function toggleResourceFavorite(page, resourceId) {
245 |             const fullId = `${page}-${resourceId}`;
246 |             const index = dsaFavorites.indexOf(fullId);
247 |             const icon = event.currentTarget.querySelector('i');
248 |             
249 |             if (index === -1) {
250 |                 // Add to favorites
251 |                 dsaFavorites.push(fullId);
252 |                 icon.classList.remove('far', 'fa-heart');
253 |                 icon.classList.add('fas', 'fa-heart');
254 |                 event.currentTarget.classList.add('active');
255 |             } else {
256 |                 // Remove from favorites
257 |                 dsaFavorites.splice(index, 1);
258 |                 icon.classList.remove('fas', 'fa-heart');
259 |                 icon.classList.add('far', 'fa-heart');
260 |                 event.currentTarget.classList.remove('active');
261 |             }
262 |             
263 |             localStorage.setItem('dsaFavorites', JSON.stringify(dsaFavorites));
264 |             updateDSAFavoritesCount();
265 |             
266 |             if (showDSAFavoritesOnly) {
267 |                 filterDSAResources();
268 |             }
269 |         }
270 | 
271 |         function filterDSAResources() {
272 |             const cards = document.querySelectorAll('#resourcesContainer .card');
273 |             let visibleCount = 0;
274 |             
275 |             cards.forEach(card => {
276 |                 const resourceId = card.getAttribute('data-resource');
277 |                 const fullId = `dsa-${resourceId}`;
278 |                 const isFavorite = dsaFavorites.includes(fullId);
279 |                 
280 |                 if (showDSAFavoritesOnly) {
281 |                     if (isFavorite) {
282 |                         card.classList.remove('hidden');
283 |                         visibleCount++;
284 |                     } else {
285 |                         card.classList.add('hidden');
286 |                     }
287 |                 } else {
288 |                     card.classList.remove('hidden');
289 |                     visibleCount++;
290 |                 }
291 |             });
292 |             
293 |             // Show message if no favorites in filter mode
294 |             if (showDSAFavoritesOnly && visibleCount === 0) {
295 |                 showNoDSAFavoritesMessage();
296 |             } else {
297 |                 hideNoDSAFavoritesMessage();
298 |             }
299 |         }
300 | 
301 |         function showNoDSAFavoritesMessage() {
302 |             let message = document.getElementById('noDSAFavoritesMessage');
303 |             if (!message) {
304 |                 message = document.createElement('div');
305 |                 message.id = 'noDSAFavoritesMessage';
306 |                 message.className = 'no-resource-favorites-message';
307 |                 message.innerHTML = `
308 |                     <h3>⭐ No Favorite DSA Resources Yet</h3>
309 |                     <p>Click the heart icons on DSA resources to add them to your favorites!</p>
310 |                     <button onclick="hideNoDSAFavoritesMessage()">Got it!</button>
311 |                 `;
312 |                 const container = document.getElementById('resourcesContainer');
313 |                 container.appendChild(message);
314 |             }
315 |         }
316 | 
317 |         function hideNoDSAFavoritesMessage() {
318 |             const message = document.getElementById('noDSAFavoritesMessage');
319 |             if (message) {
320 |                 message.remove();
321 |             }
322 |         }
323 | 
324 |         function updateDSAFavoritesCount() {
325 |             const countElement = document.getElementById('dsaFavoritesCount');
326 |             if (countElement) {
327 |                 countElement.textContent = dsaFavorites.length;
328 |             }
329 |         }
330 | 
331 |         function initializeDSAFavorites() {
332 |             // Set initial favorite states
333 |             dsaFavorites.forEach(fullId => {
334 |                 const [page, resourceId] = fullId.split('-');
335 |                 if (page === 'dsa') {
336 |                     const icon = document.querySelector(`[data-resource="${resourceId}"] .resource-favorite-icon i`);
337 |                     if (icon) {
338 |                         icon.classList.remove('far', 'fa-heart');
339 |                         icon.classList.add('fas', 'fa-heart');
340 |                         icon.parentElement.classList.add('active');
341 |                     }
342 |                 }
343 |             });
344 |             updateDSAFavoritesCount();
345 |         }
346 | 
347 |         // Toggle DSA favorites view
348 |         document.addEventListener('DOMContentLoaded', function() {
349 |             initializeDSAFavorites();
350 |             
351 |             const dsaFavoritesBtn = document.getElementById('dsaFavoritesBtn');
352 |             if (dsaFavoritesBtn) {
353 |                 dsaFavoritesBtn.addEventListener('click', function() {
354 |                     showDSAFavoritesOnly = !showDSAFavoritesOnly;
355 |                     this.innerHTML = showDSAFavoritesOnly ? 
356 |                         '<i class="far fa-star"></i> Show All Resources' : 
357 |                         '<i class="far fa-star"></i> Show Favorite Resources Only';
358 |                     
359 |                     filterDSAResources();
360 |                 });
361 |             }
362 | 
363 |             // Existing navbar functionality
364 |             const navbarToggle = document.querySelector(".navbar-toggle");
365 |             const navbarMenu = document.querySelector(".navbar-menu");
366 |             const toggleBtn = document.getElementById("toggle-mode");
367 | 
368 |             navbarToggle.addEventListener("click", () => {
369 |                 navbarToggle.classList.toggle("active");
370 |                 navbarMenu.classList.toggle("active");
371 |             });
372 | 
373 |             // Dropdown functionality
374 |             const dropdownToggle = document.getElementById("resources-dropdown-toggle");
375 |             const dropdownMenu = document.querySelector(".dropdown-menu");
376 | 
377 |             dropdownToggle.addEventListener("click", (e) => {
378 |                 e.preventDefault();
379 |                 e.stopPropagation();
380 |                 dropdownMenu.classList.toggle("active");
381 |             });
382 | 
383 |             document.addEventListener("click", (e) => {
384 |                 if (!dropdownMenu.contains(e.target) && !dropdownToggle.contains(e.target)) {
385 |                     dropdownMenu.classList.remove("active");
386 |                 }
387 |             });
388 | 
389 |             // Dark/Light mode functionality
390 |             const savedMode = localStorage.getItem("mode");
391 |             if (savedMode === "dark") {
392 |                 document.body.classList.add("dark-mode");
393 |                 toggleBtn.textContent = "☀️";
394 |             } else {
395 |                 document.body.classList.remove("dark-mode");
396 |                 toggleBtn.textContent = "🌙";
397 |             }
398 | 
399 |             toggleBtn.addEventListener("click", () => {
400 |                 document.body.classList.toggle("dark-mode");
401 |                 if (document.body.classList.contains("dark-mode")) {
402 |                     toggleBtn.textContent = "☀️";
403 |                     localStorage.setItem("mode", "dark");
404 |                 } else {
405 |                     toggleBtn.textContent = "🌙";
406 |                     localStorage.setItem("mode", "light");
407 |                 }
408 |             });
409 | 
410 |             // Search functionality
411 |             const searchInput = document.getElementById('searchInput');
412 |             const categoryFilter = document.getElementById('categoryFilter');
413 |             
414 |             function filterResources() {
415 |                 const searchTerm = searchInput.value.toLowerCase();
416 |                 const selectedCategory = categoryFilter.value;
417 |                 const cards = document.querySelectorAll('#resourcesContainer .card');
418 |                 
419 |                 cards.forEach(card => {
420 |                     const title = card.querySelector('h4').textContent.toLowerCase();
421 |                     const description = card.querySelector('p').textContent.toLowerCase();
422 |                     const category = card.getAttribute('data-category');
423 |                     
424 |                     const matchesSearch = title.includes(searchTerm) || description.includes(searchTerm);
425 |                     const matchesCategory = selectedCategory === 'all' || category === selectedCategory;
426 |                     
427 |                     if (matchesSearch && matchesCategory) {
428 |                         card.classList.remove('hidden');
429 |                     } else {
430 |                         card.classList.add('hidden');
431 |                     }
432 |                 });
433 |             }
434 |             
435 |             searchInput.addEventListener('input', filterResources);
436 |             categoryFilter.addEventListener('change', filterResources);
437 |         });
438 |     </script>
439 | </body>
440 | </html>


--------------------------------------------------------------------------------
/career-roadmaps.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8" />
  5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  6 |   <title>Career Roadmaps</title>
  7 |   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Lucida+Sans&display=swap" rel="stylesheet">
  8 |   <style>
  9 |   html {
 10 |     scroll-behavior: smooth;
 11 |   }
 12 |   body {
 13 |     margin: 0;
 14 |     font-family: 'Roboto', sans-serif;
 15 |     background-color: #ccd6e2;
 16 |     color: #03171f;
 17 |     transition: background-color 0.3s, color 0.3s;
 18 |   }
 19 |   .container {
 20 |     max-width: 1500px;
 21 |     margin: 20px auto;
 22 |     padding: 20px;
 23 |   }
 24 |   header {
 25 |     display: flex;
 26 |     flex-direction: column;
 27 |     justify-content: center;
 28 |     align-items: center;
 29 |     text-align: center;
 30 |     background: linear-gradient(135deg, #006D77 0%, #219EBC 100%);
 31 |     font-family: 'Lucida Sans', sans-serif;
 32 |     color: #FFFFFF;
 33 |     padding: 24px 20px;
 34 |     font-size: 1.5rem;
 35 |     letter-spacing: 1px;
 36 |     border-radius: 0 0 16px 16px;
 37 |     margin-bottom: 40px;
 38 |     box-shadow: 0 4px 12px rgba(0,0,0,0.2);
 39 |   }
 40 |   header h1 {
 41 |     margin: 12px 0 8px;
 42 |     font-size: 2.5rem;
 43 |     color: #fff;
 44 |     letter-spacing: 1.2px;
 45 |   }
 46 |   header p {
 47 |     font-size: 1.2rem;
 48 |     color: #e0f7fa;
 49 |     margin-bottom: 0;
 50 |     font-weight: 400;
 51 |   }
 52 |   .roadmap-grid {
 53 |     display: grid;
 54 |     grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
 55 |     gap: 2rem;
 56 |   }
 57 |   .roadmap-card {
 58 |     background: linear-gradient(145deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
 59 |     backdrop-filter: blur(8px);
 60 |     -webkit-backdrop-filter: blur(8px);
 61 |     border: 1px solid rgba(255, 255, 255, 0.2);
 62 |     padding: 24px;
 63 |     border-radius: 16px;
 64 |     box-shadow: 0 6px 16px rgba(0,0,0,0.15);
 65 |     transition: transform 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
 66 |     color: #03171f;
 67 |     font-family: 'Roboto', sans-serif;
 68 |     position: relative;
 69 |     cursor: pointer;
 70 |     overflow: hidden;
 71 |   }
 72 |   .roadmap-card:hover {
 73 |     transform: translateY(-10px) scale(1.03);
 74 |     background: linear-gradient(145deg, rgba(224, 247, 250, 0.95), rgba(222, 230, 233, 0.9));
 75 |     box-shadow: 0 12px 24px rgba(0,0,0,0.25);
 76 |   }
 77 |   .roadmap-card h2 {
 78 |     margin: 0 0 12px;
 79 |     font-size: 1.6rem;
 80 |     color: #219EBC;
 81 |     font-family: 'Lucida Sans', sans-serif;
 82 |     display: flex;
 83 |     align-items: center;
 84 |     gap: 10px;
 85 |     transition: color 0.3s ease;
 86 |   }
 87 |   .roadmap-card:hover h2 {
 88 |     color: #006D77;
 89 |   }
 90 |   .roadmap-card h2::before {
 91 |     content: '🚀';
 92 |     font-size: 1.4rem;
 93 |   }
 94 |   .roadmap-card p.description {
 95 |     color: #333;
 96 |     font-size: 1rem;
 97 |     line-height: 1.5;
 98 |     margin-bottom: 16px;
 99 |   }
100 |   .roadmap-card ul {
101 |     list-style-type: none;
102 |     padding: 0;
103 |     margin-bottom: 16px;
104 |     font-size: 0.95rem;
105 |     color: #555;
106 |   }
107 |   .roadmap-card ul li {
108 |     margin-bottom: 8px;
109 |     display: flex;
110 |     align-items: center;
111 |     gap: 8px;
112 |   }
113 |   .roadmap-card ul li::before {
114 |     content: '✔';
115 |     color: #219EBC;
116 |     font-size: 1rem;
117 |   }
118 |   .roadmap-card a {
119 |     color: #fff;
120 |     font-weight: 500;
121 |     text-decoration: none;
122 |     background-color: #219EBC;
123 |     padding: 12px 20px;
124 |     border-radius: 10px;
125 |     font-size: 1rem;
126 |     display: inline-block;
127 |     transition: background-color 0.3s ease, transform 0.2s ease;
128 |   }
129 |   .roadmap-card a:hover {
130 |     background-color: #006D77;
131 |     transform: scale(1.05);
132 |   }
133 |   .modal {
134 |     display: none;
135 |     position: fixed;
136 |     top: 0;
137 |     left: 0;
138 |     width: 100%;
139 |     height: 100%;
140 |     background: rgba(0,0,0,0.65);
141 |     z-index: 1000;
142 |     justify-content: center;
143 |     align-items: center;
144 |     opacity: 0;
145 |     transition: opacity 0.4s ease;
146 |   }
147 |   .modal.show {
148 |     display: flex;
149 |     opacity: 1;
150 |   }
151 |   .modal-content {
152 |     background: #fff;
153 |     border-radius: 16px;
154 |     padding: 24px;
155 |     max-width: 550px;
156 |     width: 90%;
157 |     box-shadow: 0 12px 24px rgba(0,0,0,0.3);
158 |     transform: scale(0.7);
159 |     transition: transform 0.4s ease;
160 |   }
161 |   .modal.show .modal-content {
162 |     transform: scale(1);
163 |   }
164 |   .modal-content h3 {
165 |     margin: 0 0 16px;
166 |     color: #006D77;
167 |     font-family: 'Lucida Sans', sans-serif;
168 |     font-size: 1.8rem;
169 |     display: flex;
170 |     align-items: center;
171 |     gap: 10px;
172 |   }
173 |   .modal-content h3::before {
174 |     content: '🚀';
175 |     font-size: 1.4rem;
176 |   }
177 |   .modal-content p {
178 |     color: #333;
179 |     font-size: 1rem;
180 |     line-height: 1.6;
181 |     margin-bottom: 16px;
182 |   }
183 |   .modal-content ul {
184 |     list-style-type: none;
185 |     padding: 0;
186 |     color: #555;
187 |     font-size: 0.95rem;
188 |   }
189 |   .modal-content ul li {
190 |     margin-bottom: 8px;
191 |     display: flex;
192 |     align-items: center;
193 |     gap: 8px;
194 |   }
195 |   .modal-content ul li::before {
196 |     content: '✔';
197 |     color: #219EBC;
198 |     font-size: 1rem;
199 |   }
200 |   .modal-content .close-btn {
201 |     background: #219EBC;
202 |     color: #fff;
203 |     border: none;
204 |     padding: 12px 24px;
205 |     border-radius: 10px;
206 |     cursor: pointer;
207 |     transition: background 0.3s ease, transform 0.2s ease;
208 |     display: block;
209 |     margin: 20px auto 0;
210 |     font-size: 1rem;
211 |     font-weight: 500;
212 |   }
213 |   .modal-content .close-btn:hover {
214 |     background: #006D77;
215 |     transform: scale(1.05);
216 |   }
217 |   footer {
218 |     background: linear-gradient(135deg, #28A6C7 0%, #006D77 100%);
219 |     color: #fff;
220 |     font-family: Arial, sans-serif;
221 |     padding: 40px 20px 20px;
222 |     margin-top: 60px;
223 |     border-radius: 0 0 16px 16px;
224 |     text-align: center;
225 |     font-size: 1rem;
226 |     width: 100%;
227 |     box-sizing: border-box;
228 |     box-shadow: 0 -4px 12px rgba(0,0,0,0.2);
229 |   }
230 |   footer a {
231 |     color: #e0f7fa;
232 |     text-decoration: none;
233 |     font-size: 15px;
234 |     font-weight: 500;
235 |     transition: color 0.2s;
236 |   }
237 |   footer a:hover {
238 |     color: #fff;
239 |     text-decoration: underline;
240 |   }
241 |   @media (max-width: 480px) {
242 |     header h1 {
243 |       font-size: 2rem;
244 |     }
245 |     .container {
246 |       padding: 12px;
247 |     }
248 |     .roadmap-card {
249 |       padding: 20px;
250 |     }
251 |     .roadmap-card h2 {
252 |       font-size: 1.4rem;
253 |     }
254 |     .modal-content {
255 |       width: 95%;
256 |       padding: 16px;
257 |     }
258 |     .modal-content h3 {
259 |       font-size: 1.5rem;
260 |     }
261 |     footer {
262 |       padding: 30px 10px 15px;
263 |       font-size: 0.95rem;
264 |     }
265 |   }
266 |   </style>
267 | </head>
268 | <body>
269 |   <header>
270 |     <h1>📚 Career Roadmaps</h1>
271 |     <p>Explore structured learning paths to kickstart your tech career journey.</p>
272 |   </header>
273 | 
274 |   <div class="container">
275 |     <div class="roadmap-grid">
276 |       <div class="roadmap-card" onclick="openModal('frontend')">
277 |         <h2>Frontend Developer</h2>
278 |         <p class="description">Master the art of crafting responsive and interactive user interfaces for web applications, ensuring seamless user experiences across devices.</p>
279 |         <ul>
280 |           <li>Core Skills: HTML, CSS, JavaScript</li>
281 |           <li>Frameworks: React, Vue, Angular</li>
282 |           <li>Tools: Webpack, Vite, Git</li>
283 |         </ul>
284 |         <a href="https://roadmap.sh/frontend" target="_blank">View Roadmap →</a>
285 |       </div>
286 |       <div class="roadmap-card" onclick="openModal('backend')">
287 |         <h2>Backend Developer</h2>
288 |         <p class="description">Build robust server-side applications and manage data flow to power seamless and scalable web functionalities.</p>
289 |         <ul>
290 |           <li>Core Skills: Node.js, Express, REST APIs</li>
291 |           <li>Databases: MongoDB, PostgreSQL</li>
292 |           <li>Concepts: Authentication, Scalability</li>
293 |         </ul>
294 |         <a href="https://roadmap.sh/backend" target="_blank">View Roadmap →</a>
295 |       </div>
296 |       <div class="roadmap-card" onclick="openModal('devops')">
297 |         <h2>DevOps Engineer</h2>
298 |         <p class="description">Streamline development and deployment with automation, managing infrastructure for reliable and efficient systems.</p>
299 |         <ul>
300 |           <li>Core Skills: CI/CD, Docker, Kubernetes</li>
301 |           <li>Cloud: AWS, Azure, GCP</li>
302 |           <li>Monitoring: Prometheus, Grafana</li>
303 |         </ul>
304 |         <a href="https://roadmap.sh/devops" target="_blank">View Roadmap →</a>
305 |       </div>
306 |       <div class="roadmap-card" onclick="openModal('android')">
307 |         <h2>Android Developer</h2>
308 |         <p class="description">Create powerful and user-friendly mobile applications for the Android ecosystem, leveraging modern tools and frameworks.</p>
309 |         <ul>
310 |           <li>Core Skills: Java, Kotlin</li>
311 |           <li>Tools: Android Studio, Jetpack</li>
312 |           <li>Services: Firebase, Google APIs</li>
313 |         </ul>
314 |         <a href="https://roadmap.sh/android" target="_blank">View Roadmap →</a>
315 |       </div>
316 |       <div class="roadmap-card" onclick="openModal('ai-data')">
317 |         <h2>AI & Data Scientist</h2>
318 |         <p class="description">Harness data and algorithms to build intelligent systems, uncovering insights that drive innovation.</p>
319 |         <ul>
320 |           <li>Core Skills: Python, TensorFlow, Pandas</li>
321 |           <li>Concepts: Machine Learning, NLP</li>
322 |           <li>Tools: Jupyter, Scikit-learn</li>
323 |         </ul>
324 |         <a href="https://roadmap.sh/ai-data-scientist" target="_blank">View Roadmap →</a>
325 |       </div>
326 |       <div class="roadmap-card" onclick="openModal('cybersecurity')">
327 |         <h2>Cybersecurity Expert</h2>
328 |         <p class="description">Protect systems and data from threats, mastering security practices to ensure safety in a connected world.</p>
329 |         <ul>
330 |           <li>Core Skills: Ethical Hacking, Cryptography</li>
331 |           <li>Tools: Wireshark, Metasploit</li>
332 |           <li>Concepts: Network Security, Penetration Testing</li>
333 |         </ul>
334 |         <a href="https://roadmap.sh/cyber-security" target="_blank">View Roadmap →</a>
335 |       </div>
336 |       <div class="roadmap-card" onclick="openModal('blockchain')">
337 |         <h2>Blockchain Developer</h2>
338 |         <p class="description">Develop decentralized applications and smart contracts, shaping secure and trustless transaction systems.</p>
339 |         <ul>
340 |           <li>Core Skills: Solidity, Ethereum</li>
341 |           <li>Tools: Truffle, Hardhat</li>
342 |           <li>Concepts: DApps, Cryptography</li>
343 |         </ul>
344 |         <a href="https://roadmap.sh/blockchain" target="_blank">View Roadmap →</a>
345 |       </div>
346 |       <div class="roadmap-card" onclick="openModal('data-analyst')">
347 |         <h2>Data Analyst</h2>
348 |         <p class="description">Transform raw data into actionable insights through analysis and visualization, empowering data-driven decisions.</p>
349 |         <ul>
350 |           <li>Core Skills: SQL, Excel, Python</li>
351 |           <li>Tools: Tableau, Power BI</li>
352 |           <li>Concepts: Data Cleaning, Visualization</li>
353 |         </ul>
354 |         <a href="https://roadmap.sh/data-analyst" target="_blank">View Roadmap →</a>
355 |       </div>
356 |       <div class="roadmap-card" onclick="openModal('product-manager')">
357 |         <h2>Product Manager</h2>
358 |         <p class="description">Lead product development from ideation to launch, bridging technical and business needs with a user-centric focus.</p>
359 |         <ul>
360 |           <li>Core Skills: Agile, Market Research</li>
361 |           <li>Tools: Jira, Trello</li>
362 |           <li>Concepts: Product Lifecycle, Stakeholder Management</li>
363 |         </ul>
364 |         <a href="https://roadmap.sh/product-manager" target="_blank">View Roadmap →</a>
365 |       </div>
366 |       <div class="roadmap-card" onclick="openModal('ux-designer')">
367 |         <h2>UX Designer</h2>
368 |         <p class="description">Design intuitive and engaging user experiences through research, wireframing, and prototyping for optimal usability.</p>
369 |         <ul>
370 |           <li>Core Skills: Wireframing, Prototyping</li>
371 |           <li>Tools: Figma, Adobe XD</li>
372 |           <li>Concepts: User Research, Usability Testing</li>
373 |         </ul>
374 |         <a href="https://roadmap.sh/ux-designer" target="_blank">View Roadmap →</a>
375 |       </div>
376 |       <div class="roadmap-card" onclick="openModal('game-developer')">
377 |         <h2>Game Developer</h2>
378 |         <p class="description">Create immersive gaming experiences using cutting-edge tools, bringing interactive worlds to life.</p>
379 |         <ul>
380 |           <li>Core Skills: C#, C++</li>
381 |           <li>Tools: Unity, Unreal Engine</li>
382 |           <li>Concepts: Game Design, Physics Simulation</li>
383 |         </ul>
384 |         <a href="https://roadmap.sh/game-developer" target="_blank">View Roadmap →</a>
385 |       </div>
386 |       <div class="roadmap-card" onclick="openModal('technical-writer')">
387 |         <h2>Technical Writer</h2>
388 |         <p class="description">Craft clear and concise documentation, simplifying complex technical concepts for diverse audiences.</p>
389 |         <ul>
390 |           <li>Core Skills: Technical Writing, Markdown</li>
391 |           <li>Tools: MadCap Flare, Doxygen</li>
392 |           <li>Concepts: API Documentation, User Guides</li>
393 |         </ul>
394 |         <a href="https://roadmap.sh/technical-writer" target="_blank">View Roadmap →</a>
395 |       </div>
396 |     </div>
397 |   </div>
398 | 
399 |   <!-- Modal Structure -->
400 |   <div id="frontend-modal" class="modal">
401 |     <div class="modal-content">
402 |       <h3>Frontend Developer</h3>
403 |       <p>Master the art of crafting responsive and interactive user interfaces for web applications, ensuring seamless user experiences across devices. Learn to optimize performance and accessibility.</p>
404 |       <ul>
405 |         <li>Core Skills: HTML, CSS, JavaScript</li>
406 |         <li>Frameworks: React, Vue, Angular</li>
407 |         <li>Tools: Webpack, Vite, Git</li>
408 |         <li>Advanced: TypeScript, Accessibility, Performance Optimization</li>
409 |       </ul>
410 |       <button class="close-btn" onclick="closeModal('frontend')">Close</button>
411 |     </div>
412 |   </div>
413 |   <div id="backend-modal" class="modal">
414 |     <div class="modal-content">
415 |       <h3>Backend Developer</h3>
416 |       <p>Build robust server-side applications and manage data flow to power seamless and scalable web functionalities. Focus on secure and efficient systems.</p>
417 |       <ul>
418 |         <li>Core Skills: Node.js, Express, REST APIs</li>
419 |         <li>Databases: MongoDB, PostgreSQL</li>
420 |         <li>Concepts: Authentication, Scalability</li>
421 |         <li>Advanced: Microservices, GraphQL</li>
422 |       </ul>
423 |       <button class="close-btn" onclick="closeModal('backend')">Close</button>
424 |     </div>
425 |   </div>
426 |   <div id="devops-modal" class="modal">
427 |     <div class="modal-content">
428 |       <h3>DevOps Engineer</h3>
429 |       <p>Streamline development and deployment with automation, managing infrastructure for reliable and efficient systems. Master cloud and monitoring tools.</p>
430 |       <ul>
431 |         <li>Core Skills: CI/CD, Docker, Kubernetes</li>
432 |         <li>Cloud: AWS, Azure, GCP</li>
433 |         <li>Monitoring: Prometheus, Grafana</li>
434 |         <li>Advanced: Infrastructure as Code, Serverless</li>
435 |       </ul>
436 |       <button class="close-btn" onclick="closeModal('devops')">Close</button>
437 |     </div>
438 |   </div>
439 |   <div id="android-modal" class="modal">
440 |     <div class="modal-content">
441 |       <h3>Android Developer</h3>
442 |       <p>Create powerful and user-friendly mobile applications for the Android ecosystem, leveraging modern tools and frameworks for performance.</p>
443 |       <ul>
444 |         <li>Core Skills: Java, Kotlin</li>
445 |         <li>Tools: Android Studio, Jetpack</li>
446 |         <li>Services: Firebase, Google APIs</li>
447 |         <li>Advanced: Coroutines, Room Database</li>
448 |       </ul>
449 |       <button class="close-btn" onclick="closeModal('android')">Close</button>
450 |     </div>
451 |   </div>
452 |   <div id="ai-data-modal" class="modal">
453 |     <div class="modal-content">
454 |       <h3>AI & Data Scientist</h3>
455 |       <p>Harness data and algorithms to build intelligent systems, uncovering insights that drive innovation and solve complex problems.</p>
456 |       <ul>
457 |         <li>Core Skills: Python, TensorFlow, Pandas</li>
458 |         <li>Concepts: Machine Learning, NLP</li>
459 |         <li>Tools: Jupyter, Scikit-learn</li>
460 |         <li>Advanced: Deep Learning, Big Data</li>
461 |       </ul>
462 |       <button class="close-btn" onclick="closeModal('ai-data')">Close</button>
463 |     </div>
464 |   </div>
465 |   <div id="cybersecurity-modal" class="modal">
466 |     <div class="modal-content">
467 |       <h3>Cybersecurity Expert</h3>
468 |       <p>Protect systems and data from threats, mastering security practices to ensure safety in an interconnected digital world.</p>
469 |       <ul>
470 |         <li>Core Skills: Ethical Hacking, Cryptography</li>
471 |         <li>Tools: Wireshark, Metasploit</li>
472 |         <li>Concepts: Network Security, Penetration Testing</li>
473 |         <li>Advanced: Incident Response, Forensics</li>
474 |       </ul>
475 |       <button class="close-btn" onclick="closeModal('cybersecurity')">Close</button>
476 |     </div>
477 |   </div>
478 |   <div id="blockchain-modal" class="modal">
479 |     <div class="modal-content">
480 |       <h3>Blockchain Developer</h3>
481 |       <p>Develop decentralized applications and smart contracts, shaping secure and trustless transaction systems for the future.</p>
482 |       <ul>
483 |         <li>Core Skills: Solidity, Ethereum</li>
484 |         <li>Tools: Truffle, Hardhat</li>
485 |         <li>Concepts: DApps, Cryptography</li>
486 |         <li>Advanced: Layer 2 Solutions, DeFi</li>
487 |       </ul>
488 |       <button class="close-btn" onclick="closeModal('blockchain')">Close</button>
489 |     </div>
490 |   </div>
491 |   <div id="data-analyst-modal" class="modal">
492 |     <div class="modal-content">
493 |       <h3>Data Analyst</h3>
494 |       <p>Transform raw data into actionable insights through analysis and visualization, empowering data-driven decision-making.</p>
495 |       <ul>
496 |         <li>Core Skills: SQL, Excel, Python</li>
497 |         <li>Tools: Tableau, Power BI</li>
498 |         <li>Concepts: Data Cleaning, Visualization</li>
499 |         <li>Advanced: Statistical Modeling, R</li>
500 |       </ul>
501 |       <button class="close-btn" onclick="closeModal('data-analyst')">Close</button>
502 |     </div>
503 |   </div>
504 |   <div id="product-manager-modal" class="modal">
505 |     <div class="modal-content">
506 |       <h3>Product Manager</h3>
507 |       <p>Lead product development from ideation to launch, bridging technical and business needs with a user-centric focus.</p>
508 |       <ul>
509 |         <li>Core Skills: Agile, Market Research</li>
510 |         <li>Tools: Jira, Trello</li>
511 |         <li>Concepts: Product Lifecycle, Stakeholder Management</li>
512 |         <li>Advanced: Roadmapping, Analytics</li>
513 |       </ul>
514 |       <button class="close-btn" onclick="closeModal('product-manager')">Close</button>
515 |     </div>
516 |   </div>
517 |   <div id="ux-designer-modal" class="modal">
518 |     <div class="modal-content">
519 |       <h3>UX Designer</h3>
520 |       <p>Design intuitive and engaging user experiences through research, wireframing, and prototyping for optimal usability.</p>
521 |       <ul>
522 |         <li>Core Skills: Wireframing, Prototyping</li>
523 |         <li>Tools: Figma, Adobe XD</li>
524 |         <li>Concepts: User Research, Usability Testing</li>
525 |         <li>Advanced: Interaction Design, UI Patterns</li>
526 |       </ul>
527 |       <button class="close-btn" onclick="closeModal('ux-designer')">Close</button>
528 |     </div>
529 |   </div>
530 |   <div id="game-developer-modal" class="modal">
531 |     <div class="modal-content">
532 |       <h3>Game Developer</h3>
533 |       <p>Create immersive gaming experiences using cutting-edge tools, bringing interactive worlds to life with creativity.</p>
534 |       <ul>
535 |         <li>Core Skills: C#, C++</li>
536 |         <li>Tools: Unity, Unreal Engine</li>
537 |         <li>Concepts: Game Design, Physics Simulation</li>
538 |         <li>Advanced: Multiplayer Systems, VR/AR</li>
539 |       </ul>
540 |       <button class="close-btn" onclick="closeModal('game-developer')">Close</button>
541 |     </div>
542 |   </div>
543 |   <div id="technical-writer-modal" class="modal">
544 |     <div class="modal-content">
545 |       <h3>Technical Writer</h3>
546 |       <p>Craft clear and concise documentation, simplifying complex technical concepts for diverse audiences.</p>
547 |       <ul>
548 |         <li>Core Skills: Technical Writing, Markdown</li>
549 |         <li>Tools: MadCap Flare, Doxygen</li>
550 |         <li>Concepts: API Documentation, User Guides</li>
551 |         <li>Advanced: Structured Authoring, Localization</li>
552 |       </ul>
553 |       <button class="close-btn" onclick="closeModal('technical-writer')">Close</button>
554 |     </div>
555 |   </div>
556 | 
557 |   <footer>
558 |     Made with ❤️ by a GSSoC'25 Contributor | <a href="https://first-contrib-placement.netlify.app" target="_blank">Back to Home</a>
559 |   </footer>
560 | 
561 |   <script>
562 |     function openModal(id) {
563 |       const modal = document.getElementById(`${id}-modal`);
564 |       modal.classList.add('show');
565 |       document.body.style.overflow = 'hidden';
566 |     }
567 | 
568 |     function closeModal(id) {
569 |       const modal = document.getElementById(`${id}-modal`);
570 |       modal.classList.remove('show');
571 |       document.body.style.overflow = 'auto';
572 |     }
573 | 
574 |     // Close modal when clicking outside
575 |     document.querySelectorAll('.modal').forEach(modal => {
576 |       modal.addEventListener('click', (e) => {
577 |         if (e.target === modal) {
578 |           modal.classList.remove('show');
579 |           document.body.style.overflow = 'auto';
580 |         }
581 |       });
582 |     });
583 |   </script>
584 | </body>
585 | </html>


--------------------------------------------------------------------------------
/open.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="utf-8" />
  6 |   <meta name="viewport" content="width=device-width,initial-scale=1" />
  7 |   <title>Open Source Hub</title>
  8 |   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
  9 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
 10 |     integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2LdF1/Jz7A81rYf5nU5I5jE5Vf9I7p9B9qD4B3K8H6E5Q6yG1fW4Q0fB8D7G5B1"
 11 |     crossorigin="anonymous" referrerpolicy="no-referrer" />
 12 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
 13 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 14 |   <link rel="stylesheet" href="./styles/style.css">
 15 |   <style>
 16 |     :root {
 17 |       --bg1: #eaf7f8;
 18 |       --bg2: #d9f0ef;
 19 |       --accent: #007c91;
 20 |       --accent-dark: #004d40;
 21 |       --card: #ffffff;
 22 |     }
 23 | 
 24 |     * {
 25 |       box-sizing: border-box
 26 |     }
 27 | 
 28 |     body {
 29 |       font-family: Inter, system-ui, Segoe UI, Roboto, -apple-system, "Helvetica Neue", Arial;
 30 |       margin: 0;
 31 |       background: linear-gradient(90deg, var(--bg1), var(--bg2));
 32 |       color: #053033
 33 |     }
 34 | 
 35 |     header {
 36 |       background: linear-gradient(135deg, var(--accent), var(--accent-dark));
 37 |       color: #fff;
 38 |       padding: 28px 20px;
 39 |       text-align: center
 40 |     }
 41 | 
 42 |     header h1 {
 43 |       margin: 0;
 44 |       font-size: 26px
 45 |     }
 46 | 
 47 |     header p {
 48 |       margin: 6px 0 0;
 49 |       opacity: .95
 50 |     }
 51 | 
 52 |     .wrap {
 53 |       max-width: 1150px;
 54 |       margin: 28px auto;
 55 |       padding: 0 20px
 56 |     }
 57 | 
 58 |     .topbar {
 59 |       display: flex;
 60 |       gap: 12px;
 61 |       align-items: center;
 62 |       justify-content: space-between;
 63 |       margin-bottom: 18px
 64 |     }
 65 | 
 66 |     .search input {
 67 |       width: 100%;
 68 |       padding: 10px 12px;
 69 |       border-radius: 10px;
 70 |       border: 1px solid rgba(5, 48, 51, 0.06)
 71 |     }
 72 | 
 73 |     .actions {
 74 |       display: flex;
 75 |       gap: 8px
 76 |     }
 77 | 
 78 |     .button {
 79 |       padding: 10px 14px;
 80 |       border-radius: 10px;
 81 |       border: none;
 82 |       background: linear-gradient(90deg, var(--accent), var(--accent-dark));
 83 |       color: #fff;
 84 |       font-weight: 700;
 85 |       cursor: pointer;
 86 |       transition: transform 0.2s ease, background 0.3s ease;
 87 |     }
 88 | 
 89 |     .button:hover {
 90 |       transform: scale(1.05);
 91 |       background: linear-gradient(90deg, var(--accent-dark), var(--accent));
 92 |     }
 93 | 
 94 |     .ghost {
 95 |       background: #fff;
 96 |       border: 1px solid rgba(5, 48, 51, 0.08);
 97 |       color: var(--accent);
 98 |       font-weight: 700;
 99 |       padding: 10px 12px;
100 |       border-radius: 10px;
101 |       text-decoration: none
102 |     }
103 | 
104 |     .repo-container {
105 |       display: grid;
106 |       grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
107 |       gap: 15px;
108 |       padding: 20px;
109 |     }
110 | 
111 |     .filters {
112 |       display: flex;
113 |       gap: 8px;
114 |       flex-wrap: wrap;
115 |       margin-bottom: 18px
116 |     }
117 | 
118 |     .card {
119 |       background: white;
120 |       border-radius: 8px;
121 |       padding: 15px;
122 |       box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
123 |       transition: transform 0.3s, opacity 0.3s;
124 |       opacity: 0;
125 |       transform: translateY(20px);
126 |       position: relative;
127 |     }
128 | 
129 |     .card.show {
130 |       opacity: 1;
131 |       transform: translateY(0);
132 |     }
133 | 
134 |     .card h3 {
135 |       margin: 0 0 10px;
136 |       font-size: 1.2rem;
137 |       color: #007c91;
138 |     }
139 | 
140 |     .card p {
141 |       font-size: 0.9rem;
142 |       color: #555;
143 |     }
144 | 
145 |     .card a {
146 |       display: inline-block;
147 |       margin-top: 10px;
148 |       color: #0097a7;
149 |       text-decoration: none;
150 |       font-weight: bold
151 |     }
152 | 
153 |     .contribute {
154 |       margin-top: 22px;
155 |       background: linear-gradient(90deg, rgba(0, 124, 145, 0.06), rgba(0, 77, 64, 0.03));
156 |       padding: 16px;
157 |       border-radius: 10px
158 |     }
159 | 
160 |     .steps {
161 |       display: grid;
162 |       grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
163 |       gap: 12px;
164 |       margin-top: 12px
165 |     }
166 | 
167 |     .step {
168 |       background: #fff;
169 |       padding: 12px;
170 |       border-radius: 10px;
171 |       box-shadow: 0 6px 18px rgba(3, 30, 30, 0.04)
172 |     }
173 | 
174 |     /* Open Source Favorites Styles */
175 |     .open-favorites-controls {
176 |       text-align: center;
177 |       margin: 30px auto;
178 |       max-width: 1150px;
179 |       padding: 0 20px;
180 |     }
181 | 
182 |     .repo-favorite-icon {
183 |       cursor: pointer;
184 |       font-size: 1.2rem;
185 |       color: #ccc;
186 |       transition: all 0.3s ease;
187 |       padding: 6px;
188 |       border-radius: 50%;
189 |       position: absolute;
190 |       top: 10px;
191 |       right: 10px;
192 |       z-index: 2;
193 |       background: rgba(255, 255, 255, 0.9);
194 |       backdrop-filter: blur(10px);
195 |     }
196 | 
197 |     .repo-favorite-icon:hover {
198 |       color: #ff6b6b;
199 |       background: rgba(255, 107, 107, 0.1);
200 |       transform: scale(1.1);
201 |     }
202 | 
203 |     .repo-favorite-icon.active {
204 |       color: #ff6b6b;
205 |     }
206 | 
207 |     .repo-favorite-icon.active i {
208 |       font-weight: 900;
209 |     }
210 | 
211 |     /* Hidden state for filtered repos */
212 |     .card.hidden {
213 |       display: none;
214 |     }
215 | 
216 |     /* No Favorites Message */
217 |     .no-repo-favorites-message {
218 |       text-align: center;
219 |       padding: 60px 20px;
220 |       background: linear-gradient(145deg, #fff8f8, #ffeaea);
221 |       border-radius: 16px;
222 |       margin: 30px auto;
223 |       max-width: 900px;
224 |       border-left: 8px solid #ff6b6b;
225 |       animation: fadeInUp 0.5s ease-in-out;
226 |     }
227 | 
228 |     .dark-mode .no-repo-favorites-message {
229 |       background: linear-gradient(145deg, #2a1a1a, #3a2a2a);
230 |       color: #ffb4b4;
231 |     }
232 | 
233 |     .no-repo-favorites-message h3 {
234 |       color: #ff6b6b;
235 |       margin-bottom: 15px;
236 |       font-size: 1.5rem;
237 |     }
238 | 
239 |     .no-repo-favorites-message p {
240 |       color: #666;
241 |       margin-bottom: 20px;
242 |       font-size: 1.1rem;
243 |     }
244 | 
245 |     .dark-mode .no-repo-favorites-message p {
246 |       color: #e0e0e0;
247 |     }
248 | 
249 |     .no-repo-favorites-message button {
250 |       background: #ff6b6b;
251 |       color: white;
252 |       border: none;
253 |       padding: 12px 24px;
254 |       border-radius: 8px;
255 |       cursor: pointer;
256 |       font-weight: 600;
257 |       transition: all 0.3s ease;
258 |     }
259 | 
260 |     .no-repo-favorites-message button:hover {
261 |       background: #ff5252;
262 |       transform: translateY(-2px);
263 |     }
264 | 
265 |     /* Dark mode adjustments */
266 |     .dark-mode .card {
267 |       background: #1E2A30;
268 |       color: #E0F7FA;
269 |     }
270 | 
271 |     .dark-mode .card h3 {
272 |       color: #81e6d9;
273 |     }
274 | 
275 |     .dark-mode .card p {
276 |       color: #B0BEC5;
277 |     }
278 | 
279 |     .dark-mode .card a {
280 |       color: #7FDBFF;
281 |     }
282 | 
283 |     .dark-mode .repo-favorite-icon {
284 |       background: rgba(30, 42, 48, 0.9);
285 |     }
286 | 
287 |     .dark-mode .step {
288 |       background: #2d3748;
289 |       color: #E0F7FA;
290 |     }
291 | 
292 |     .dark-mode .contribute {
293 |       background: linear-gradient(90deg, rgba(129, 230, 217, 0.06), rgba(127, 219, 255, 0.03));
294 |     }
295 | 
296 |     /* Animation for fadeInUp */
297 |     @keyframes fadeInUp {
298 |       0% {
299 |         opacity: 0;
300 |         transform: translateY(40px);
301 |       }
302 |       100% {
303 |         opacity: 1;
304 |         transform: translateY(0);
305 |       }
306 |     }
307 |   </style>
308 | </head>
309 | 
310 | <body>
311 |   <nav class="navbar">
312 |     <div class="navbar-container">
313 |       <div class="logo">
314 |         <img src="/images/PR-LOGO.png" width="140" height="120" id="logo">
315 |       </div>
316 | 
317 |       <!-- Navigation Links -->
318 |       <ul class="navbar-menu">
319 |         <li><a href="index.html"><i class="fa-solid fa-house-chimney"></i>Home</a></li>
320 |         <li><a href="contribute.html"><i class="fa-solid fa-handshake-angle"></i>Contribute</a></li>
321 | 
322 |         <li class="dropdown">
323 |           <a href="#" class="dropdown-toggle" id="resources-dropdown-toggle">
324 |             <i class="fa-solid fa-book"></i>Resources <i class="fa-solid fa-caret-down"></i>
325 |           </a>
326 |           <ul class="dropdown-menu">
327 |             <li><a href="./interviewprep.html">Interview Prep</a></li>
328 |             <li><a href="./dsa.html">DSA Practice</a></li>
329 |             <li><a href="./resume.html">Resume Tips</a></li>
330 |             <li><a href="./open.html">Open Source</a></li>
331 |             <li><a href="./roadmap.html">Roadmaps</a></li>
332 |           </ul>
333 |         </li>
334 | 
335 |         <li><a href="roadmap.html"><i class="fa-solid fa-map"></i>Roadmap</a></li>
336 |         <li><a href="contact.html"><i class="fa-solid fa-address-card"></i>Contact</a></li>
337 |         <li><a href="https://github.com/Varshitha713/first-contrib-placement" target="_blank" rel="noopener noreferrer">
338 |             <i class="fa-brands fa-github"></i>Github</a>
339 |         </li>
340 |       </ul>
341 | 
342 |       <div class="navbar-icons">
343 |         <!-- Hamburger icon -->
344 |         <button class="navbar-toggle">
345 |           <span class="bar"></span>
346 |           <span class="bar"></span>
347 |           <span class="bar"></span>
348 |         </button>
349 | 
350 |         <!-- Dark/Light Mode Toggle -->
351 |         <button id="toggle-mode"></button>
352 |       </div>
353 |     </div>
354 |   </nav>
355 |   
356 |   <header>
357 |     <h1>Open Source Hub</h1>
358 |     <p>Discover beginner-friendly projects, contribute guides, and live GitHub links.</p>
359 |   </header>
360 | 
361 |   <main class="wrap">
362 |     <!-- Favorites Controls -->
363 |     <div class="open-favorites-controls">
364 |       <button id="repoFavoritesBtn" class="favorites-toggle-btn">
365 |         <i class="far fa-star"></i> Show Favorite Repositories Only
366 |       </button>
367 |       <div class="favorites-stats">
368 |         <span id="repoFavoritesCount">0</span> favorite repositories
369 |       </div>
370 |     </div>
371 | 
372 |     <div class="topbar">
373 |       <div class="search" style="flex:1;max-width:640px">
374 |         <input id="q" placeholder="Search projects, languages or topics (e.g. react, api, beginner)" />
375 |       </div>
376 |       <div class="actions">
377 |         <button class="button" id="newIssueBtn">Create Issue Template</button>
378 |         <a class="ghost" href="#contribute">How to Contribute</a>
379 |       </div>
380 |     </div>
381 | 
382 |     <div class="filters">
383 |       <button class="button" onclick="fetchRepos('javascript')">JavaScript</button>
384 |       <button class="button" onclick="fetchRepos('python')">Python</button>
385 |       <button class="button" onclick="fetchRepos('java')">Java</button>
386 |       <button class="button" onclick="fetchRepos('html')">HTML/CSS</button>
387 |       <button class="button" onclick="fetchRepos('machine-learning')">Machine Learning</button>
388 |       <button class="button" onclick="fetchRepos('web')">Web</button>
389 |     </div>
390 | 
391 |     <div class="repo-container" id="repoContainer">
392 |       <p style="text-align:center;">Click a filter or search to load repositories...</p>
393 |     </div>
394 | 
395 |     <section class="contribute" id="contribute">
396 |       <h3 style="margin:0;color:var(--accent-dark)">How to Contribute — Quick Guide</h3>
397 |       <div class="steps">
398 |         <div class="step"><strong>1. Find an Issue</strong>
399 |           <div style="margin-top:8px">Look for labels: <em>good first issue</em>, <em>help wanted</em> or
400 |             <em>beginner</em>.
401 |           </div>
402 |         </div>
403 |         <div class="step"><strong>2. Fork & Clone</strong>
404 |           <div style="margin-top:8px">Fork the repo, clone locally, and create a topic branch for your work.</div>
405 |         </div>
406 |         <div class="step"><strong>3. Run Tests</strong>
407 |           <div style="margin-top:8px">Run the project tests or linters. Add tests for your changes when possible.</div>
408 |         </div>
409 |         <div class="step"><strong>4. Make PR</strong>
410 |           <div style="margin-top:8px">Open a pull request with a clear title and description referencing the issue
411 |             number.</div>
412 |         </div>
413 |       </div>
414 |     </section>
415 |   </main>
416 |   
417 |   <footer>
418 |     <div class="footer-container">
419 |       <!-- Branding -->
420 |       <div class="footer-section">
421 |         <h2>first-contrib-placement</h2>
422 |         <p>
423 |           A community-driven project to share the best placement and learning resources for BTech students.
424 |         </p>
425 |         <div class="social-icons">
426 |           <a href="https://www.linkedin.com/in/varshitha-macha/" target="blank" rel="noopener noreferrer"><i
427 |               class="fab fa-linkedin-in"></i></a>
428 |           <a href="https://github.com/Varshitha713/first-contrib-placement" target="_blank" rel="noopener noreferrer"><i
429 |               class="fab fa-github"></i></a>
430 |         </div>
431 |       </div>
432 | 
433 |       <!-- Quick Links -->
434 |       <div class="footer-section">
435 |         <h3>Quick Links</h3>
436 |         <ul>
437 |           <li><a href="./index.html">Home</a></li>
438 |           <li><a href="#">Contribute</a></li>
439 |           <li><a href="#">Resources</a></li>
440 |           <li><a href="./roadmap.html">Roadmap</a></li>
441 |           <li><a href="./contact.html">Contact</a></li>
442 |         </ul>
443 |       </div>
444 | 
445 |       <!-- Top Categories -->
446 |       <div class="footer-section">
447 |         <h3>Top Categories</h3>
448 |         <ul>
449 |           <li><a href="./dsa.html">DSA Practice</a></li>
450 |           <li><a href="./resume.html">Resume Tips</a></li>
451 |           <li><a href="./interviewprep.html">Interview Prep</a></li>
452 |           <li><a href="./open.html">Open Source</a></li>
453 |           <li><a href="./roadmap.html">Roadmaps</a></li>
454 |         </ul>
455 |       </div>
456 | 
457 |       <!-- Contact Info -->
458 |       <div class="footer-section">
459 |         <h3>Get in Touch</h3>
460 |         <p><strong>Location:</strong> India</p>
461 |         <p><strong>Email:</strong> contact@firstcontrib.com</p>
462 |       </div>
463 |     </div>
464 | 
465 |     <div class="footer-bottom">
466 |       © 2025 All Rights Reserved | Built with ❤️ by the FCP Community
467 |     </div>
468 |   </footer>
469 | 
470 |   <script>
471 |     // Open Source Favorites Functionality
472 |     let showRepoFavoritesOnly = false;
473 |     let repoFavorites = JSON.parse(localStorage.getItem('repoFavorites')) || [];
474 | 
475 |     function toggleRepoFavorite(repoId, repoName, repoUrl, repoDescription) {
476 |       const index = repoFavorites.findIndex(fav => fav.id === repoId);
477 |       const icon = event.currentTarget.querySelector('i');
478 |       
479 |       if (index === -1) {
480 |         // Add to favorites
481 |         repoFavorites.push({
482 |           id: repoId,
483 |           name: repoName,
484 |           url: repoUrl,
485 |           description: repoDescription,
486 |           stars: 0,
487 |           forks: 0
488 |         });
489 |         icon.classList.remove('far', 'fa-heart');
490 |         icon.classList.add('fas', 'fa-heart');
491 |         event.currentTarget.classList.add('active');
492 |       } else {
493 |         // Remove from favorites
494 |         repoFavorites.splice(index, 1);
495 |         icon.classList.remove('fas', 'fa-heart');
496 |         icon.classList.add('far', 'fa-heart');
497 |         event.currentTarget.classList.remove('active');
498 |       }
499 |       
500 |       localStorage.setItem('repoFavorites', JSON.stringify(repoFavorites));
501 |       updateRepoFavoritesCount();
502 |       
503 |       if (showRepoFavoritesOnly) {
504 |         filterRepoFavorites();
505 |       }
506 |     }
507 | 
508 |     function filterRepoFavorites() {
509 |       const cards = document.querySelectorAll('#repoContainer .card');
510 |       let visibleCount = 0;
511 |       
512 |       cards.forEach(card => {
513 |         const repoId = card.getAttribute('data-repo-id');
514 |         const isFavorite = repoFavorites.some(fav => fav.id === repoId);
515 |         
516 |         if (showRepoFavoritesOnly) {
517 |           if (isFavorite) {
518 |             card.classList.remove('hidden');
519 |             visibleCount++;
520 |           } else {
521 |             card.classList.add('hidden');
522 |           }
523 |         } else {
524 |           card.classList.remove('hidden');
525 |           visibleCount++;
526 |         }
527 |       });
528 |       
529 |       // Show message if no favorites in filter mode
530 |       if (showRepoFavoritesOnly && visibleCount === 0) {
531 |         showNoRepoFavoritesMessage();
532 |       } else {
533 |         hideNoRepoFavoritesMessage();
534 |       }
535 |     }
536 | 
537 |     function showNoRepoFavoritesMessage() {
538 |       let message = document.getElementById('noRepoFavoritesMessage');
539 |       if (!message) {
540 |         message = document.createElement('div');
541 |         message.id = 'noRepoFavoritesMessage';
542 |         message.className = 'no-repo-favorites-message';
543 |         message.innerHTML = `
544 |           <h3>⭐ No Favorite Repositories Yet</h3>
545 |           <p>Click the heart icons on GitHub repositories to add them to your favorites!</p>
546 |           <button onclick="hideNoRepoFavoritesMessage()">Got it!</button>
547 |         `;
548 |         const repoContainer = document.getElementById('repoContainer');
549 |         repoContainer.appendChild(message);
550 |       }
551 |     }
552 | 
553 |     function hideNoRepoFavoritesMessage() {
554 |       const message = document.getElementById('noRepoFavoritesMessage');
555 |       if (message) {
556 |         message.remove();
557 |       }
558 |     }
559 | 
560 |     function updateRepoFavoritesCount() {
561 |       const countElement = document.getElementById('repoFavoritesCount');
562 |       if (countElement) {
563 |         countElement.textContent = repoFavorites.length;
564 |       }
565 |     }
566 | 
567 |     function initializeRepoFavorites() {
568 |       updateRepoFavoritesCount();
569 |     }
570 | 
571 |     // Toggle repo favorites view
572 |     document.addEventListener('DOMContentLoaded', function() {
573 |       initializeRepoFavorites();
574 |       
575 |       const repoFavoritesBtn = document.getElementById('repoFavoritesBtn');
576 |       if (repoFavoritesBtn) {
577 |         repoFavoritesBtn.addEventListener('click', function() {
578 |           showRepoFavoritesOnly = !showRepoFavoritesOnly;
579 |           this.innerHTML = showRepoFavoritesOnly ? 
580 |             '<i class="far fa-star"></i> Show All Repositories' : 
581 |             '<i class="far fa-star"></i> Show Favorite Repositories Only';
582 |           
583 |           filterRepoFavorites();
584 |         });
585 |       }
586 | 
587 |       // Navbar functionality
588 |       const navbarToggle = document.querySelector('.navbar-toggle');
589 |       const navbarMenu = document.querySelector('.navbar-menu');
590 |       const toggleBtn = document.getElementById("toggle-mode");
591 | 
592 |       navbarToggle.addEventListener('click', () => {
593 |         navbarToggle.classList.toggle('active');
594 |         navbarMenu.classList.toggle('active');
595 |       });
596 | 
597 |       // Dropdown functionality
598 |       const dropdownToggle = document.getElementById('resources-dropdown-toggle');
599 |       const dropdownMenu = document.querySelector('.dropdown-menu');
600 | 
601 |       dropdownToggle.addEventListener('click', (e) => {
602 |         e.preventDefault();
603 |         e.stopPropagation();
604 |         dropdownMenu.classList.toggle('active');
605 |       });
606 | 
607 |       document.addEventListener('click', (e) => {
608 |         if (!dropdownMenu.contains(e.target) && !dropdownToggle.contains(e.target)) {
609 |           dropdownMenu.classList.remove('active');
610 |         }
611 |       });
612 | 
613 |       // Dark/Light mode functionality
614 |       const savedMode = localStorage.getItem("mode");
615 |       if (savedMode === "dark") {
616 |         document.body.classList.add("dark-mode");
617 |         toggleBtn.textContent = "☀️";
618 |       } else {
619 |         document.body.classList.remove("dark-mode");
620 |         toggleBtn.textContent = "🌙";
621 |       }
622 | 
623 |       toggleBtn.addEventListener("click", () => {
624 |         document.body.classList.toggle("dark-mode");
625 |         if (document.body.classList.contains("dark-mode")) {
626 |           toggleBtn.textContent = "☀️";
627 |           localStorage.setItem("mode", "dark");
628 |         } else {
629 |           toggleBtn.textContent = "🌙";
630 |           localStorage.setItem("mode", "light");
631 |         }
632 |       });
633 |     });
634 | 
635 |     // GitHub API functionality
636 |     async function fetchRepos(query) {
637 |       const container = document.getElementById("repoContainer");
638 |       container.innerHTML = "<p style='text-align:center;'>Loading...</p>";
639 | 
640 |       try {
641 |         const res = await fetch(`https://api.github.com/search/repositories?q=${encodeURIComponent(query)}&sort=stars&order=desc&per_page=50`);
642 |         const data = await res.json();
643 | 
644 |         if (!data.items || data.items.length === 0) {
645 |           container.innerHTML = `<p style="text-align:center;">No repositories found for "${query}"</p>`;
646 |           return;
647 |         }
648 | 
649 |         // Random 9 repos
650 |         const shuffled = data.items.sort(() => 0.5 - Math.random()).slice(0, 9);
651 | 
652 |         container.innerHTML = "";
653 |         shuffled.forEach((repo, index) => {
654 |           const card = document.createElement("div");
655 |           card.className = "card";
656 |           card.setAttribute('data-repo-id', repo.id);
657 |           
658 |           // Check if repo is already favorited
659 |           const isFavorited = repoFavorites.some(fav => fav.id === repo.id);
660 |           const heartIcon = isFavorited ? 'fas fa-heart' : 'far fa-heart';
661 |           const activeClass = isFavorited ? 'active' : '';
662 |           
663 |           card.innerHTML = `
664 |             <span class="repo-favorite-icon ${activeClass}" onclick="toggleRepoFavorite(${repo.id}, '${repo.name.replace(/'/g, "\\'")}', '${repo.html_url}', '${repo.description ? repo.description.replace(/'/g, "\\'") : "No description"}')">
665 |               <i class="${heartIcon}"></i>
666 |             </span>
667 |             <h3>${repo.name}</h3>
668 |             <p>${repo.description ? repo.description.substring(0, 100) + "..." : "No description"}</p>
669 |             <p>⭐ ${repo.stargazers_count} | 🍴 ${repo.forks_count}</p>
670 |             <a href="${repo.html_url}" target="_blank">View Repo</a>
671 |           `;
672 |           container.appendChild(card);
673 |           setTimeout(() => card.classList.add("show"), index * 200);
674 |         });
675 | 
676 |         // Apply filter if favorites only is active
677 |         if (showRepoFavoritesOnly) {
678 |           filterRepoFavorites();
679 |         }
680 |       } catch (error) {
681 |         container.innerHTML = `<p style="text-align:center; color:red;">Error loading repositories</p>`;
682 |         console.error(error);
683 |       }
684 |     }
685 | 
686 |     // Search listener
687 |     document.getElementById("q").addEventListener("keypress", function (e) {
688 |       if (e.key === "Enter") {
689 |         fetchRepos(this.value.trim());
690 |       }
691 |     });
692 | 
693 |     // Download template
694 |     function download(filename, content) {
695 |       const el = document.createElement('a');
696 |       el.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(content));
697 |       el.setAttribute('download', filename);
698 |       document.body.appendChild(el);
699 |       el.click();
700 |       el.remove();
701 |     }
702 |     
703 |     document.getElementById('newIssueBtn').addEventListener('click', () => {
704 |       const tpl = `<!-- ISSUE TEMPLATE -->\n### Summary\nProvide a short description of the issue.\n\n### Steps To Reproduce\n1. \n2. \n3.\n\n### Expected behavior\nDescribe the expected behavior.\n\n### Environment\n- OS: \n- Node: \n\n### Additional context\nAdd any other context about the problem here.`;
705 |       download('ISSUE_TEMPLATE.md', tpl);
706 |       alert('ISSUE_TEMPLATE.md downloaded — add it to .github/ISSUE_TEMPLATE/ in your repo.');
707 |     });
708 |   </script>
709 | </body>
710 | 
711 | </html>


--------------------------------------------------------------------------------
/roadmap.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <title>Ultimate Placement Roadmap</title>
  7 |     <link rel="stylesheet" href="./styles/style.css" />
  8 |     <link
  9 |       rel="stylesheet"
 10 |       href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css"
 11 |     />
 12 |     <link
 13 |       rel="stylesheet"
 14 |       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
 15 |       integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2LdF1/Jz7A81rYf5nU5I5jE5Vf9I7p9B9qD4B3K8H6E5Q6yG1fW4Q0fB8D7G5B1"
 16 |       crossorigin="anonymous"
 17 |       referrerpolicy="no-referrer"
 18 |     />
 19 |     <link
 20 |       rel="stylesheet"
 21 |       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
 22 |     />
 23 |     <link
 24 |       rel="stylesheet"
 25 |       href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
 26 |     />
 27 | 
 28 |     <style>
 29 |       body {
 30 |         font-family: "Segoe UI", sans-serif;
 31 |         margin: 0;
 32 |       }
 33 | 
 34 |       header {
 35 |         background: #006d77;
 36 |         color: white;
 37 |         text-align: center;
 38 |         padding: 40px 20px;
 39 |         box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
 40 |       }
 41 | 
 42 |       .timeline {
 43 |         max-width: 900px;
 44 |         margin: 50px auto;
 45 |         position: relative;
 46 |       }
 47 | 
 48 |       .step {
 49 |         background: linear-gradient(145deg, #ffffff, #e0f7fa);
 50 |         margin: 30px 0;
 51 |         border-radius: 16px;
 52 |         padding: 30px;
 53 |         box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
 54 |         position: relative;
 55 |         border-left: 8px solid #006d77;
 56 |         transition: transform 0.4s ease, box-shadow 0.4s ease,
 57 |           background-color 0.4s ease;
 58 |         animation: fadeInUp 1s ease-in-out both;
 59 |       }
 60 | 
 61 |       .step:hover {
 62 |         transform: translateY(-8px);
 63 |         box-shadow: 0 20px 36px rgba(0, 0, 0, 0.25);
 64 |         background: linear-gradient(135deg, #d1f0e3, #ffffff);
 65 |       }
 66 | 
 67 |       @keyframes fadeInUp {
 68 |         0% {
 69 |           opacity: 0;
 70 |           transform: translateY(40px);
 71 |         }
 72 | 
 73 |         100% {
 74 |           opacity: 1;
 75 |           transform: translateY(0);
 76 |         }
 77 |       }
 78 | 
 79 |       .step h2 {
 80 |         color: #006d77;
 81 |         margin-bottom: 12px;
 82 |         font-size: 1.5rem;
 83 |         transition: color 0.4s ease;
 84 |       }
 85 | 
 86 |       .step:hover h2 {
 87 |         color: #004e56;
 88 |       }
 89 | 
 90 |       .step p {
 91 |         line-height: 1.7;
 92 |         color: #333;
 93 |         margin-bottom: 10px;
 94 |         transition: color 0.4s ease;
 95 |       }
 96 | 
 97 |       .step:hover p {
 98 |         color: #222;
 99 |       }
100 | 
101 |       .intro-wrapper {
102 |         overflow-x: auto;
103 |         scroll-snap-type: x mandatory;
104 |         -webkit-overflow-scrolling: touch;
105 |         display: flex;
106 |         gap: 20px;
107 |         padding: 40px 20px;
108 |       }
109 | 
110 |       .intro {
111 |         flex: 0 0 90%;
112 |         scroll-snap-align: center;
113 |         background: linear-gradient(135deg, #f8ffff, #e0f7fa);
114 |         border-radius: 16px;
115 |         box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
116 |         padding: 30px;
117 |         color: #333;
118 |         animation: fadeIn 1s ease-in-out;
119 |         transition: transform 0.3s ease;
120 |       }
121 | 
122 |       .intro:hover {
123 |         transform: scale(1.02);
124 |       }
125 | 
126 |       .intro h2 {
127 |         font-size: 2rem;
128 |         margin-bottom: 10px;
129 |         color: #006d77;
130 |       }
131 | 
132 |       .intro p {
133 |         font-size: 1.1rem;
134 |         line-height: 1.8;
135 |       }
136 | 
137 |       .highlight {
138 |         color: #ff6f61;
139 |         font-weight: bold;
140 |       }
141 | 
142 |       .steps-list {
143 |         margin: 10px 0;
144 |         padding-left: 20px;
145 |       }
146 |       .steps-list li {
147 |         margin-bottom: 8px;
148 |       }
149 |       .dark-mode .steps-list li {
150 |         color: #f8ffff;
151 |       }
152 |       .dark-mode .step:hover .steps-list li {
153 |         color: #333;
154 |       }
155 | 
156 |       .steps-list li::marker {
157 |         color: #006d77;
158 |       }
159 | 
160 |       /* Favorites Controls */
161 |       .favorites-controls {
162 |         text-align: center;
163 |         margin: 20px auto;
164 |         max-width: 900px;
165 |         padding: 15px 20px;
166 |         background: linear-gradient(145deg, #ffffff, #f0f7ff);
167 |         border-radius: 12px;
168 |         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
169 |         position: relative;
170 |         z-index: 10;
171 |       }
172 | 
173 |       .dark-mode .favorites-controls {
174 |         background: linear-gradient(145deg, #2d3748, #4a5568);
175 |       }
176 | 
177 |       .favorites-btn {
178 |         background: linear-gradient(145deg, #006d77, #004e56);
179 |         color: white;
180 |         border: none;
181 |         padding: 12px 24px;
182 |         border-radius: 8px;
183 |         cursor: pointer;
184 |         font-size: 1rem;
185 |         transition: all 0.3s ease;
186 |         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
187 |         font-weight: 600;
188 |       }
189 | 
190 |       .favorites-btn:hover {
191 |         transform: translateY(-2px);
192 |         box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
193 |         background: linear-gradient(145deg, #004e56, #006d77);
194 |       }
195 | 
196 |       .favorites-count {
197 |         margin-left: 15px;
198 |         color: #006d77;
199 |         font-weight: 600;
200 |         font-size: 1rem;
201 |       }
202 | 
203 |       .dark-mode .favorites-count {
204 |         color: #81e6d9;
205 |       }
206 | 
207 |       /* Step Header with Favorite Icon */
208 |       .step-header {
209 |         display: flex;
210 |         justify-content: space-between;
211 |         align-items: flex-start;
212 |         margin-bottom: 15px;
213 |       }
214 | 
215 |       .favorite-icon {
216 |         cursor: pointer;
217 |         font-size: 1.5rem;
218 |         color: #ccc;
219 |         transition: all 0.3s ease;
220 |         padding: 5px;
221 |         border-radius: 50%;
222 |         margin-left: 15px;
223 |         flex-shrink: 0;
224 |       }
225 | 
226 |       .favorite-icon:hover {
227 |         color: #ff6b6b;
228 |         background: rgba(255, 107, 107, 0.1);
229 |         transform: scale(1.1);
230 |       }
231 | 
232 |       .favorite-icon.active {
233 |         color: #ff6b6b;
234 |       }
235 | 
236 |       .favorite-icon.active i {
237 |         font-weight: 900;
238 |       }
239 | 
240 |       /* Hidden state for filtered steps */
241 |       .step.hidden {
242 |         display: none;
243 |       }
244 | 
245 |       .dark-mode .step {
246 |         background: linear-gradient(145deg, #2d3748, #4a5568);
247 |         color: #f8ffff;
248 |       }
249 | 
250 |       .dark-mode .step:hover {
251 |         background: linear-gradient(135deg, #4a5568, #2d3748);
252 |       }
253 | 
254 |       .dark-mode .step h2 {
255 |         color: #81e6d9;
256 |       }
257 | 
258 |       .dark-mode .step p {
259 |         color: #e2e8f0;
260 |       }
261 | 
262 |       /* No Favorites Message */
263 |       .no-favorites-message {
264 |         animation: fadeInUp 0.5s ease-in-out;
265 |       }
266 | 
267 |       .dark-mode .no-favorites-message div {
268 |         background: linear-gradient(145deg, #2a1a1a, #3a2a2a) !important;
269 |         color: #ffb4b4 !important;
270 |       }
271 | 
272 |       .dark-mode .no-favorites-message h3 {
273 |         color: #ff6b6b !important;
274 |       }
275 | 
276 |       .dark-mode .no-favorites-message p {
277 |         color: #e0e0e0 !important;
278 |       }
279 | 
280 |       .dark-mode .no-favorites-message button {
281 |         background: #ff6b6b !important;
282 |         color: white !important;
283 |       }
284 |     </style>
285 |   </head>
286 | 
287 |   <body>
288 |     <nav class="navbar">
289 |       <div class="navbar-container">
290 |         <div class="logo">
291 |           <img src="/images/PR-LOGO.png" width="140" height="120" id="logo" />
292 |         </div>
293 | 
294 |         <!-- Navigation Links -->
295 |         <ul class="navbar-menu">
296 |           <li>
297 |             <a href="index.html"
298 |               ><i class="fa-solid fa-house-chimney"></i>Home</a
299 |             >
300 |           </li>
301 |           <li>
302 |             <a href="contribute.html"
303 |               ><i class="fa-solid fa-handshake-angle"></i>Contribute</a
304 |             >
305 |           </li>
306 | 
307 |           <li class="dropdown">
308 |             <a href="#" class="dropdown-toggle" id="resources-dropdown-toggle">
309 |               <i class="fa-solid fa-book"></i>Resources
310 |               <i class="fa-solid fa-caret-down"></i>
311 |             </a>
312 |             <ul class="dropdown-menu">
313 |               <li><a href="./interviewprep.html">Interview Prep</a></li>
314 |               <li><a href="./dsa.html">DSA Practice</a></li>
315 |               <li><a href="./resume.html">Resume Tips</a></li>
316 |               <li><a href="./open.html">Open Source</a></li>
317 |               <li><a href="./roadmap.html">Roadmaps</a></li>
318 |             </ul>
319 |           </li>
320 | 
321 |           <li>
322 |             <a href="roadmap.html"><i class="fa-solid fa-map"></i>Roadmap</a>
323 |           </li>
324 |           <li>
325 |             <a href="contact.html"
326 |               ><i class="fa-solid fa-address-card"></i>Contact</a
327 |             >
328 |           </li>
329 |           <li>
330 |             <a
331 |               href="https://github.com/Varshitha713/first-contrib-placement"
332 |               target="_blank"
333 |               rel="noopener noreferrer"
334 |             >
335 |               <i class="fa-brands fa-github"></i>Github</a
336 |             >
337 |           </li>
338 |         </ul>
339 | 
340 |         <div class="navbar-icons">
341 |           <!-- Hamburger icon -->
342 |           <button class="navbar-toggle">
343 |             <span class="bar"></span>
344 |             <span class="bar"></span>
345 |             <span class="bar"></span>
346 |           </button>
347 | 
348 |           <!-- Dark/Light Mode Toggle -->
349 |           <button id="toggle-mode"></button>
350 |         </div>
351 |       </div>
352 |     </nav>
353 |     <header class="animate__animated animate__fadeInDown">
354 |       <h1>🚀 Placement Preparation Roadmap for Students</h1>
355 |     </header>
356 | 
357 |     <!-- Favorites Controls -->
358 |     <div class="favorites-controls" data-aos="fade-up">
359 |       <button id="showFavoritesBtn" class="favorites-btn">
360 |         <i class="far fa-star"></i> Show Favorites Only
361 |       </button>
362 |       <span id="favoritesCount" class="favorites-count">0 favorites</span>
363 |     </div>
364 | 
365 |     <div class="intro-sections" data-aos="fade-up">
366 |       <div class="section-header">
367 |         <h2 class="section-title">Start Your Placement Journey</h2>
368 |         <p class="section-subtitle">
369 |           Your path to success in tech placements starts here
370 |         </p>
371 |       </div>
372 | 
373 |       <div class="intro-container">
374 |         <section
375 |           class="intro-card journey-card"
376 |           data-aos="fade-right"
377 |           data-aos-delay="100"
378 |         >
379 |           <div class="card-header">
380 |             <div class="icon-wrapper journey-icon">
381 |               <span class="intro-icon">✨</span>
382 |             </div>
383 |             <h2 class="card-title animate__animated animate__fadeInDown">
384 |               Your Journey Begins Here
385 |             </h2>
386 |           </div>
387 |           <div class="card-content">
388 |             <p>
389 |               Welcome to the ultimate roadmap for cracking tech placements! 🎯
390 |               Whether you're just getting started or already deep into
391 |               preparation, this guide will help you
392 |               <span class="highlight"
393 |                 >plan smart, build projects, master interviews, and land your
394 |                 dream job</span
395 |               >. Think of it as your personal GPS to navigate the world of
396 |               placements 🚗💼.
397 |             </p>
398 |           </div>
399 |         </section>
400 | 
401 |         <section
402 |           class="intro-card roadmap-card"
403 |           data-aos="fade-left"
404 |           data-aos-delay="200"
405 |         >
406 |           <div class="card-header">
407 |             <div class="icon-wrapper roadmap-icon">
408 |               <span class="intro-icon">🧭</span>
409 |             </div>
410 |             <h2 class="card-title animate__animated animate__fadeInDown">
411 |               Why Follow This Roadmap?
412 |             </h2>
413 |           </div>
414 |           <div class="card-content">
415 |             <p>
416 |               Because random learning leads to confusion! This roadmap gives you
417 |               a <span class="highlight">clear path with milestones</span>, the
418 |               right resources, and tips that actually work—designed by students
419 |               who've been through it.
420 |             </p>
421 |           </div>
422 |         </section>
423 |       </div>
424 |     </div>
425 | 
426 |     <div class="timeline" data-aos="fade-up" data-aos-delay="200">
427 |       <div class="step" data-aos="fade-right" data-step="step0">
428 |         <div class="step-header">
429 |           <h2>🔰 Step 0: Explore and Set a Goal</h2>
430 |           <span class="favorite-icon" onclick="toggleFavorite('step0')">
431 |             <i class="far fa-heart"></i>
432 |           </span>
433 |         </div>
434 |         <p>
435 |           Before you begin, understand what roles you want to pursue: Software
436 |           Engineer, Data Analyst, Backend Developer, Frontend Developer, AI
437 |           Engineer, etc. Research job descriptions on LinkedIn and Glassdoor to
438 |           understand expectations.
439 |         </p>
440 |         <p>
441 |           <strong>Step 0:</strong> Not sure what to become? Start by exploring
442 |           <a href="/career-roadmaps.html">Career Roadmaps →</a>
443 |         </p>
444 |         <p>
445 |           Get inspired by real-world career paths and see what aligns with your
446 |           interests.
447 |         </p>
448 |         <p>
449 |           Before you begin, understand what roles you want to pursue: Software
450 |           Engineer, Data Analyst, Backend Developer, Frontend Developer, AI
451 |           Engineer, etc. Research job descriptions on LinkedIn and Glassdoor to
452 |           understand expectations.
453 |         </p>
454 |         <ul class="steps-list">
455 |           <li>
456 |             Watch YouTube career roadmap videos (e.g., "Software Engineering
457 |             Roadmap").
458 |           </li>
459 |           <li>Read blogs on job trends and skills in demand.</li>
460 |           <li>Join tech forums and LinkedIn communities.</li>
461 |         </ul>
462 |       </div>
463 | 
464 |       <div class="step" data-aos="fade-left" data-step="step1">
465 |         <div class="step-header">
466 |           <h2>🛠 Step 1: Learn a Programming Language</h2>
467 |           <span class="favorite-icon" onclick="toggleFavorite('step1')">
468 |             <i class="far fa-heart"></i>
469 |           </span>
470 |         </div>
471 |         <p>
472 |           Start with a language used in interviews like
473 |           <span class="highlight">C++, Java, or Python</span>. Learn syntax,
474 |           functions, control structures, OOP, and basic problem solving.
475 |         </p>
476 |         <ul class="steps-list">
477 |           <li>
478 |             Recommended resources: Programming with Mosh, Apna College DSA
479 |             playlist, freeCodeCamp.
480 |           </li>
481 |           <li>Practice basic problems on HackerRank and CodeChef.</li>
482 |         </ul>
483 |       </div>
484 | 
485 |       <div class="step" data-aos="fade-right" data-step="step2">
486 |         <div class="step-header">
487 |           <h2>📚 Step 2: Data Structures & Algorithms</h2>
488 |           <span class="favorite-icon" onclick="toggleFavorite('step2')">
489 |             <i class="far fa-heart"></i>
490 |           </span>
491 |         </div>
492 |         <p>
493 |           DSA is the most important skill for tech placements. Build strong
494 |           fundamentals.
495 |         </p>
496 |         <ul class="steps-list">
497 |           <li>
498 |             Start with arrays, strings, recursion → move to stacks, queues,
499 |             linked lists, trees, heaps, graphs.
500 |           </li>
501 |           <li>
502 |             Follow a structured sheet like
503 |             <span class="highlight">Striver's SDE Sheet</span> or
504 |             <span class="highlight">Love Babbar 450</span>.
505 |           </li>
506 |           <li>Use LeetCode, GFG, and Codeforces for practice.</li>
507 |           <li>Time-bound daily practice: 2-3 problems/day for 4-6 months.</li>
508 |         </ul>
509 |       </div>
510 | 
511 |       <div class="step" data-aos="fade-left" data-step="step3">
512 |         <div class="step-header">
513 |           <h2>💻 Step 3: Build Projects</h2>
514 |           <span class="favorite-icon" onclick="toggleFavorite('step3')">
515 |             <i class="far fa-heart"></i>
516 |           </span>
517 |         </div>
518 |         <p>
519 |           Hands-on projects show your practical skills. Choose domain-aligned
520 |           projects (web, ML, app dev, etc.).
521 |         </p>
522 |         <ul class="steps-list">
523 |           <li>Web dev stack: HTML, CSS, JS, React, Node.js, MongoDB (MERN).</li>
524 |           <li>AI/ML: Python, Pandas, Scikit-learn, TensorFlow.</li>
525 |           <li>Host on GitHub with README and deploy using Netlify/Vercel.</li>
526 |           <li>Build minimum 2 major and 2 minor projects.</li>
527 |         </ul>
528 |       </div>
529 | 
530 |       <div class="step" data-aos="fade-right" data-step="step4">
531 |         <div class="step-header">
532 |           <h2>📄 Step 4: Resume Building</h2>
533 |           <span class="favorite-icon" onclick="toggleFavorite('step4')">
534 |             <i class="far fa-heart"></i>
535 |           </span>
536 |         </div>
537 |         <p>Create a clean, one-page resume highlighting:</p>
538 |         <ul class="steps-list">
539 |           <li>
540 |             Key skills, projects (with GitHub links), internships, coding
541 |             profiles, achievements.
542 |           </li>
543 |           <li>Use action verbs and measurable impact.</li>
544 |           <li>Tools: Canva, Overleaf (LaTeX), Novoresume.</li>
545 |           <li>Get reviews from seniors or use free resume review platforms.</li>
546 |         </ul>
547 |       </div>
548 | 
549 |       <div class="step" data-aos="fade-left" data-step="step5">
550 |         <div class="step-header">
551 |           <h2>🤝 Step 5: Interview Preparation</h2>
552 |           <span class="favorite-icon" onclick="toggleFavorite('step5')">
553 |             <i class="far fa-heart"></i>
554 |           </span>
555 |         </div>
556 |         <p>Prepare for technical + behavioral + HR rounds.</p>
557 |         <ul class="steps-list">
558 |           <li>Mock interviews: InterviewBit, Pramp, peers.</li>
559 |           <li>Prepare CS fundamentals: OS, DBMS, CN, OOPs.</li>
560 |           <li>
561 |             Behavioral: STAR method, common HR questions, project explanation.
562 |           </li>
563 |           <li>Record yourself to improve speaking clarity and confidence.</li>
564 |         </ul>
565 |       </div>
566 | 
567 |       <div class="step" data-aos="fade-right" data-step="step6">
568 |         <div class="step-header">
569 |           <h2>🎯 Step 6: Apply and Track</h2>
570 |           <span class="favorite-icon" onclick="toggleFavorite('step6')">
571 |             <i class="far fa-heart"></i>
572 |           </span>
573 |         </div>
574 |         <p>
575 |           Start applying 3-6 months before graduation. Apply smartly and track
576 |           progress.
577 |         </p>
578 |         <ul class="steps-list">
579 |           <li>Use LinkedIn Jobs, Internshala, TNP portal, company websites.</li>
580 |           <li>Tailor your resume for each role.</li>
581 |           <li>
582 |             Keep a spreadsheet to track applications, status, and feedback.
583 |           </li>
584 |           <li>Network with alumni and attend career fairs.</li>
585 |         </ul>
586 |       </div>
587 | 
588 |       <div class="step" data-aos="fade-up" data-step="step7">
589 |         <div class="step-header">
590 |           <h2>🌟 Bonus: Portfolio & Personal Branding</h2>
591 |           <span class="favorite-icon" onclick="toggleFavorite('step7')">
592 |             <i class="far fa-heart"></i>
593 |           </span>
594 |         </div>
595 |         <p>Establish a strong online presence.</p>
596 |         <ul class="steps-list">
597 |           <li>LinkedIn: Consistent posts, projects, certifications.</li>
598 |           <li>
599 |             GitHub: Starred repos, pinned projects, green contribution graph.
600 |           </li>
601 |           <li>Blog: Medium or Hashnode for writing about tech learnings.</li>
602 |           <li>
603 |             Portfolio site: Include about, skills, projects, contact form.
604 |           </li>
605 |         </ul>
606 |       </div>
607 |     </div>
608 | 
609 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
610 |     <script>
611 |       AOS.init({ once: true, duration: 1000 });
612 | 
613 |       // Favorites functionality
614 |       let showFavoritesOnly = false;
615 |       let favorites = JSON.parse(localStorage.getItem('roadmapFavorites')) || [];
616 | 
617 |       function toggleFavorite(stepId) {
618 |         const index = favorites.indexOf(stepId);
619 |         const icon = document.querySelector(`[data-step="${stepId}"] .favorite-icon i`);
620 |         
621 |         if (index === -1) {
622 |           // Add to favorites
623 |           favorites.push(stepId);
624 |           if (icon) {
625 |             icon.classList.remove('far', 'fa-heart');
626 |             icon.classList.add('fas', 'fa-heart');
627 |             icon.parentElement.classList.add('active');
628 |           }
629 |         } else {
630 |           // Remove from favorites
631 |           favorites.splice(index, 1);
632 |           if (icon) {
633 |             icon.classList.remove('fas', 'fa-heart');
634 |             icon.classList.add('far', 'fa-heart');
635 |             icon.parentElement.classList.remove('active');
636 |           }
637 |         }
638 |         
639 |         localStorage.setItem('roadmapFavorites', JSON.stringify(favorites));
640 |         updateFavoritesCount();
641 |         
642 |         if (showFavoritesOnly) {
643 |           filterSteps();
644 |         }
645 |       }
646 | 
647 |       function filterSteps() {
648 |         const steps = document.querySelectorAll('.step');
649 |         let visibleCount = 0;
650 |         
651 |         steps.forEach(step => {
652 |           const stepId = step.getAttribute('data-step');
653 |           const isFavorite = favorites.includes(stepId);
654 |           
655 |           if (showFavoritesOnly) {
656 |             if (isFavorite) {
657 |               step.classList.remove('hidden');
658 |               visibleCount++;
659 |             } else {
660 |               step.classList.add('hidden');
661 |             }
662 |           } else {
663 |             step.classList.remove('hidden');
664 |             visibleCount++;
665 |           }
666 |         });
667 |         
668 |         // Show message if no favorites in filter mode
669 |         if (showFavoritesOnly && visibleCount === 0) {
670 |           showNoFavoritesMessage();
671 |         } else {
672 |           hideNoFavoritesMessage();
673 |         }
674 |       }
675 | 
676 |       function showNoFavoritesMessage() {
677 |         let message = document.getElementById('noFavoritesMessage');
678 |         if (!message) {
679 |           message = document.createElement('div');
680 |           message.id = 'noFavoritesMessage';
681 |           message.className = 'no-favorites-message';
682 |           message.innerHTML = `
683 |             <div style="text-align: center; padding: 40px; background: linear-gradient(145deg, #fff8f8, #ffeaea); 
684 |                         border-radius: 16px; margin: 20px 0; border-left: 8px solid #ff6b6b;">
685 |               <h3 style="color: #ff6b6b; margin-bottom: 10px;">⭐ No Favorite Steps Yet</h3>
686 |               <p style="color: #666; margin-bottom: 15px;">Click the heart icons on roadmap steps to add them to your favorites!</p>
687 |               <button onclick="hideNoFavoritesMessage()" style="background: #ff6b6b; color: white; border: none; 
688 |                       padding: 10px 20px; border-radius: 8px; cursor: pointer;">Got it!</button>
689 |             </div>
690 |           `;
691 |           const timeline = document.querySelector('.timeline');
692 |           timeline.appendChild(message);
693 |         }
694 |       }
695 | 
696 |       function hideNoFavoritesMessage() {
697 |         const message = document.getElementById('noFavoritesMessage');
698 |         if (message) {
699 |           message.remove();
700 |         }
701 |       }
702 | 
703 |       function updateFavoritesCount() {
704 |         const countElement = document.getElementById('favoritesCount');
705 |         if (countElement) {
706 |           countElement.textContent = `${favorites.length} ${favorites.length === 1 ? 'favorite' : 'favorites'}`;
707 |         }
708 |       }
709 | 
710 |       function initializeFavorites() {
711 |         // Set initial favorite states
712 |         favorites.forEach(stepId => {
713 |           const icon = document.querySelector(`[data-step="${stepId}"] .favorite-icon i`);
714 |           if (icon) {
715 |             icon.classList.remove('far', 'fa-heart');
716 |             icon.classList.add('fas', 'fa-heart');
717 |             icon.parentElement.classList.add('active');
718 |           }
719 |         });
720 |         updateFavoritesCount();
721 |       }
722 | 
723 |       // Toggle favorites view
724 |       document.addEventListener('DOMContentLoaded', function() {
725 |         initializeFavorites();
726 |         
727 |         const favoritesBtn = document.getElementById('showFavoritesBtn');
728 |         if (favoritesBtn) {
729 |           favoritesBtn.addEventListener('click', function() {
730 |             showFavoritesOnly = !showFavoritesOnly;
731 |             this.innerHTML = showFavoritesOnly ? 
732 |               '<i class="far fa-star"></i> Show All Steps' : 
733 |               '<i class="far fa-star"></i> Show Favorites Only';
734 |             
735 |             filterSteps();
736 |           });
737 |         }
738 |       });
739 | 
740 |       // Existing navbar functionality
741 |       const navbarToggle = document.querySelector(".navbar-toggle");
742 |       const navbarMenu = document.querySelector(".navbar-menu");
743 |       const toggleBtn = document.getElementById("toggle-mode");
744 | 
745 |       navbarToggle.addEventListener("click", () => {
746 |         navbarToggle.classList.toggle("active");
747 |         navbarMenu.classList.toggle("active");
748 |       });
749 | 
750 |       // Dropdown functionality
751 |       const dropdownToggle = document.getElementById(
752 |         "resources-dropdown-toggle"
753 |       );
754 |       const dropdownMenu = document.querySelector(".dropdown-menu");
755 | 
756 |       // Toggle dropdown on click
757 |       dropdownToggle.addEventListener("click", (e) => {
758 |         e.preventDefault();
759 |         e.stopPropagation();
760 |         dropdownMenu.classList.toggle("active");
761 |       });
762 | 
763 |       // Close dropdown when clicking outside
764 |       document.addEventListener("click", (e) => {
765 |         if (
766 |           !dropdownMenu.contains(e.target) &&
767 |           !dropdownToggle.contains(e.target)
768 |         ) {
769 |           dropdownMenu.classList.remove("active");
770 |         }
771 |       });
772 | 
773 |       // Dark/Light mode functionality
774 |       window.addEventListener("DOMContentLoaded", () => {
775 |         const savedMode = localStorage.getItem("mode");
776 | 
777 |         if (savedMode === "dark") {
778 |           document.body.classList.add("dark-mode");
779 |           toggleBtn.textContent = "☀️";
780 |         } else {
781 |           document.body.classList.remove("dark-mode");
782 |           toggleBtn.textContent = "🌙";
783 |         }
784 |       });
785 | 
786 |       // Toggle and Save Mode
787 |       toggleBtn.addEventListener("click", () => {
788 |         document.body.classList.toggle("dark-mode");
789 | 
790 |         if (document.body.classList.contains("dark-mode")) {
791 |           toggleBtn.textContent = "☀️";
792 |           localStorage.setItem("mode", "dark");
793 |         } else {
794 |           toggleBtn.textContent = "🌙";
795 |           localStorage.setItem("mode", "light");
796 |         }
797 |       });
798 |     </script>
799 |     <footer>
800 |       <div class="footer-container">
801 |         <!-- Branding -->
802 |         <div class="footer-section">
803 |           <h2>first-contrib-placement</h2>
804 |           <p>
805 |             A community-driven project to share the best placement and learning
806 |             resources for BTech students.
807 |           </p>
808 |           <div class="social-icons">
809 |             <a
810 |               href="https://www.linkedin.com/in/varshitha-macha/"
811 |               target="blank"
812 |               rel="noopener noreferrer"
813 |               ><i class="fab fa-linkedin-in"></i
814 |             ></a>
815 |             <a
816 |               href="https://github.com/Varshitha713/first-contrib-placement"
817 |               target="_blank"
818 |               rel="noopener noreferrer"
819 |               ><i class="fab fa-github"></i
820 |             ></a>
821 |           </div>
822 |         </div>
823 | 
824 |         <!-- Quick Links -->
825 |         <div class="footer-section">
826 |           <h3>Quick Links</h3>
827 |           <ul>
828 |             <li><a href="./index.html">Home</a></li>
829 |             <li><a href="#">Contribute</a></li>
830 |             <li><a href="#">Resources</a></li>
831 |             <li><a href="./roadmap.html">Roadmap</a></li>
832 |             <li><a href="./contact.html">Contact</a></li>
833 |           </ul>
834 |         </div>
835 | 
836 |         <!-- Top Categories -->
837 |         <div class="footer-section">
838 |           <h3>Top Categories</h3>
839 |           <ul>
840 |             <li><a href="./dsa.html">DSA Practice</a></li>
841 |             <li><a href="./resume.html">Resume Tips</a></li>
842 |             <li><a href="./interviewprep.html">Interview Prep</a></li>
843 |             <li><a href="./open.html">Open Source</a></li>
844 |             <li><a href="./roadmap.html">Roadmaps</a></li>
845 |           </ul>
846 |         </div>
847 | 
848 |         <!-- Contact Info -->
849 |         <div class="footer-section">
850 |           <h3>Get in Touch</h3>
851 |           <p><strong>Location:</strong> India</p>
852 |           <p><strong>Email:</strong> contact@firstcontrib.com</p>
853 |         </div>
854 |       </div>
855 | 
856 |       <div class="footer-bottom">
857 |         © 2025 All Rights Reserved | Built with ❤️ by the FCP Community
858 |       </div>
859 |     </footer>
860 |   </body>
861 | </html>


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
  8 |     integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2LdF1/Jz7A81rYf5nU5I5jE5Vf9I7p9B9qD4B3K8H6E5Q6yG1fW4Q0fB8D7G5B1"
  9 |     crossorigin="anonymous" referrerpolicy="no-referrer" />
 10 |   <link rel="preconnect" href="https://fonts.googleapis.com">
 11 |   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 12 |   <link
 13 |     href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
 14 |     rel="stylesheet">
 15 |   <title>Placement Resources</title>
 16 |   <link rel="icon" type="image/png" href="./images/favicon.png">
 17 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
 18 |   <link href="styles/style.css" rel="stylesheet">
 19 | </head>
 20 | 
 21 | <body>
 22 | 
 23 |   <nav class="navbar">
 24 |     <div class="navbar-container">
 25 |       <div class="logo">
 26 |         <img src="/images/PR-LOGO.png" width="140" height="120" id="logo">
 27 |       </div>
 28 | 
 29 | 
 30 |       <!-- Navigation Links -->
 31 | 
 32 |       <ul class="navbar-menu">
 33 |         <li><a href="index.html"><i class="fa-solid fa-house-chimney"></i>Home</a></li>
 34 |         <li><a href="contribute.html"><i class="fa-solid fa-handshake-angle"></i>Contribute</a></li>
 35 | 
 36 |         <li class="dropdown">
 37 |           <a href="#" class="dropdown-toggle" id="resources-dropdown-toggle">
 38 |             <i class="fa-solid fa-book"></i>Resources <i class="fa-solid fa-caret-down"></i>
 39 |           </a>
 40 |           <ul class="dropdown-menu">
 41 |             <li><a href="./interviewprep.html">Interview Prep</a></li>
 42 |             <li><a href="./dsa.html">DSA Practice</a></li>
 43 |             <li><a href="./resume.html">Resume Tips</a></li>
 44 |             <li><a href="./open.html">Open Source</a></li>
 45 |             <li><a href="./roadmap.html">Roadmaps</a></li>
 46 |           </ul>
 47 | 
 48 | 
 49 |         <li><a href="roadmap.html"><i class="fa-solid fa-map"></i>Roadmap</a></li>
 50 |         <li><a href="contact.html"><i class="fa-solid fa-address-card"></i>Contact</a></li>
 51 |         <li><a href="https://github.com/Varshitha713/first-contrib-placement" target="_blank" rel="noopener noreferrer">
 52 |             <i class="fa-brands fa-github"></i>Github</a>
 53 |         </li>
 54 |       </ul>
 55 | 
 56 | 
 57 |       <div class="navbar-icons">
 58 |         <!-- Hamburger icon -->
 59 |         <button class="navbar-toggle">
 60 |           <span class="bar"></span>
 61 |           <span class="bar"></span>
 62 |           <span class="bar"></span>
 63 |         </button>
 64 | 
 65 | 
 66 |         <!-- Dark/Light Mode Toggle -->
 67 |         <button id="toggle-mode"></button>
 68 |       </div>
 69 |     </div>
 70 |   </nav>
 71 | <header>
 72 |     <h1>Welcome to Placement Resources!</h1>
 73 |     <h3>Find and share the best resources to help students prepare for the placements</h3>
 74 |   </header>  
 75 |   <div class="container">
 76 |     <h3 class="fade-in">Recommended Resources</h3>
 77 | 
 78 |     <div class="search-bar">
 79 |       <div class="filter">
 80 |         <div class="filter-dropdown">
 81 |           <button id="filterToggle" class="dropdown-btn">🎯 Categories ▾</button>
 82 |           <div id="checkboxContainer" class="checkbox-dropdown">
 83 |             <label><input type="checkbox" value="coding" checked> Coding</label>
 84 |             <label><input type="checkbox" value="sql" checked> SQL</label>
 85 |             <label><input type="checkbox" value="learning" checked> Learning</label>
 86 |             <label><input type="checkbox" value="documentation" checked> Documentation</label>
 87 |             <label><input type="checkbox" value="mock" checked> Mock Tests</label>
 88 |             <label><input type="checkbox" value="interview" checked> Interview Prep</label>
 89 |             <label><input type="checkbox" value="CTFs" checked> CTFs</label>
 90 |           </div>
 91 |         </div>
 92 |       </div>
 93 |      <div class="autocomplete" style="width:100%;">
 94 |       <input type="text" id="searchInput" placeholder="Search for resources..." />
 95 |       <div id="autocomplete-list" class="autocomplete-items"></div>
 96 |     </div>
 97 |        <div class="search-icon-container">
 98 |     <svg class="search-icon" viewBox="0 0 24 24">
 99 |       <path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 0 0-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-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"/>
100 |     </svg>
101 |   </div>
102 |       
103 |       
104 |     </div>
105 | 
106 | 
107 | 
108 |     <div class="card fade-in" category="coding">
109 |       <h4>Coding Practice(mainly for DSA):Leetcode</h4>
110 |       <p>LeetCode offers a wide range of problems to practice coding skills for technical interviews.</p>
111 |       <a href="https://leetcode.com" target="_blank"> Visit leetcode </a>
112 |       <p></p>
113 |     </div>
114 | 
115 |     <!-- New Card: ML Interview Prep -->
116 |     <div class="card fade-in" category="interview">
117 |       <h4>Machine Learning Interview Prep: Vikas Joshi's Guide</h4>
118 |       <p>A complete resource for ML-focused interviews including system design, coding, and case studies.</p>
119 |       <a href="https://github.com/avinashkranjan/Amazing-Interview-Resources">Visit ML Prep Guide</a>
120 |     </div>
121 | 
122 |     <!-- New Card: Resume Builder -->
123 |     <div class="card fade-in" category="documentation">
124 |       <h4>Resume Builder: FlowCV</h4>
125 |       <p>Free and easy resume builder with modern templates tailored for tech and design roles.</p>
126 |       <a href="https://flowcv.com/" target="_blank">Visit FlowCV</a>
127 |     </div>
128 | 
129 |     <div class="card fade-in" category="coding">
130 |       <h4>Competitive Programming Platform: CodeChef</h4>
131 |       <p>CodeChef helps programmers enhance their algorithmic thinking and problem-solving skills through a wide variety
132 |         of time-bound challenges and practice problems.</p>
133 |       <a href="https://www.codechef.com" target="_blank">Visit CodeChef</a>
134 |       <p></p>
135 |     </div>
136 | 
137 |     <div class="card fade-in" category="learning">
138 |       <h4>Online learning platform: edX</h4>
139 |       <p>edX is an online learning platform offering free and paid courses, certificates, and degrees from top
140 |         universities like Harvard and MIT to help you gain skills and advance your career.</p>
141 |       <a href="https://www.edx.org/" target="_blank">Visit edX</a>
142 |       <p></p>
143 |     </div>
144 | 
145 |     <div class="card fade-in" category="coding">
146 |       <h4>Competitive coding platform: Codeforces</h4>
147 |       <p>Codeforces is a competitive programming platform known for regular contests and a vast problem archive to
148 |         improve algorithmic skills.</p>
149 |       <a href="https://codeforces.com/" target="_blank">Visit codeforces</a>
150 |       <p></p>
151 |     </div>
152 | 
153 |     <div class="card fade-in" category="coding">
154 |       <h4>Competitive Coding Contests platform: AtCoder</h4>
155 |       <p>AtCoder is a popular online competitive programming platform.It is known for its well-structured problems,
156 |         clear constraints, and strong emphasis on logical thinking.</p>
157 |       <a href="https://atcoder.jp/" target="_blank">Visit AtCoder</a>
158 |       <p></p>
159 |     </div>
160 | 
161 |     <div class="card fade-in" category="learning">
162 | 
163 |       <h4>Learning Git: Git Immersion</h4>
164 |       <p>Git Immersion is a guided tour that helps you learn Git through hands-on labs and practical examples.</p>
165 |       <a href="https://gitimmersion.com" target="_blank">visit gitimmersion</a>
166 |     </div>
167 | 
168 |     <div class="card fade-in" category="coding">
169 |       <h4>Coding Practice: Frontend Mentor</h4>
170 |       <p>Frontend Mentor offers real-world frontend challenges to improve your HTML, CSS, and JavaScript skills.</p>
171 |       <a href="https://www.frontendmentor.io/" target="_blank">Visit frontend mentor</a>
172 |       <p></p>
173 |     </div>
174 | 
175 |     <div class="card fade-in" category="documentation">
176 |       <h4>Online Documentation: DevDocs</h4>
177 |       <p>Combines multiple developer documentations in one fast, searchable interface.</p>
178 |       <a href="https://devdocs.io" target="_blank">Visit devdocs</a>
179 |       <p></p>
180 | 
181 |     </div>
182 | 
183 |     <div class="card fade-in" category="sql">
184 |       <h4>Practice SQL: SQLZoo</h4>
185 |       <p>platform for practing SQL with projects</p>
186 |       <a href="https://www.sqlzoo.net/wiki/SQL_Tutorial" target="_blank">Visit sqlzoo</a>
187 |       <p></p>
188 | 
189 |     </div>
190 | 
191 |     <div class="card fade-in" category="coding">
192 |       <h4>Coding Challenge: Code wars</h4>
193 |       <p>Coding practice for all programming levels</p>
194 |       <a href="https://www.codewars.com/" target="_blank">Visit Code wars</a>
195 |       <p></p>
196 |     </div>
197 | 
198 |     <div class="card fade-in" category="coding">
199 |       <h4>Coding Test: HackerRank</h4>
200 |       <p>Coding Test & Interview Solution</p>
201 |       <a href="https://www.hackerrank.com/" target="_blank">Visit HackerRank</a>
202 |       <p></p>
203 |     </div>
204 | 
205 |     <div class="card fade-in" category="learning">
206 |       <h4>Courses and Certifications: Great Learning</h4>
207 |       <p>Online courses with Certifications</p>
208 |       <a href="https://www.mygreatlearning.com/" target="_blank">Visit Great Learning</a>
209 |       <p></p>
210 |     </div>
211 | 
212 |     <div class="card fade-in" category="learning">
213 |       <h4>Practice and Courses: GeeksForGeeks</h4>
214 |       <p>Practice coding, learn DSA, and explore computer science topics with tutorials and challenges.</p>
215 |       <a href="https://www.geeksforgeeks.org" target="_blank">Visit GeeksForGeeks</a>
216 |     </div>
217 | 
218 |     <div class="card fade-in" category="coding">
219 |       <h4>Algorithm Learning: Data Structure Visualization</h4>
220 |       <p>An interactive resource for visualizing various Data Structures and Algorithms. Perfect for understanding
221 |         complex concepts through dynamic illustrations.</p>
222 |       <a href="https://www.cs.usfca.edu/~galles/visualization/Algorithms.html" target="_blank">Visit Data Structures
223 |         Visualization</a>
224 |     </div>
225 | 
226 |     <div class="card fade-in" category="learning">
227 |       <h4>Documentation: Placement ready in 3 months</h4>
228 |       <p>A comprehensive guide outlining strategies and essential tips to prepare for your placements in just three
229 |         months.</p>
230 |       <a href="https://medium.com/@varshini_vijay/placement-ready-in-3-months-bfba2512bee2" target="_blank">Visit
231 |         Medium</a>
232 |     </div>
233 | 
234 |     <div class="card fade-in" category="learning">
235 |       <h4>Learning: Aptitude Questions and Answers</h4>
236 |       <p>Curated resources and practice materials to sharpen your quantitative, logical, and verbal aptitude skills for
237 |         competitive exams and placements.</p>
238 |       <a href="https://www.indiabix.com/" target="_blank">Visit indiabix</a>
239 |     </div>
240 | 
241 |     <div class="card fade-in" category="interview">
242 |       <h4>Technical Interviews: InterviewBit</h4>
243 |       <p>Structured interview preparation with company-specific questions and mock interviews.</p>
244 |       <a href="https://www.interviewbit.com/" target="_blank">Visit Technical Interviews</a>
245 |     </div>
246 | 
247 |     <div class="card fade-in" category="interview">
248 |       <h4>Coding Interviews: AlgoExpert</h4>
249 |       <p>Master coding interviews with curated questions, video explanations, and mock assessments.</p>
250 |       <a href="https://www.algoexpert.io/" target="_blank">Visit Coding Interviews</a>
251 |     </div>
252 | 
253 |     <div class="card fade-in" category="interview">
254 |       <h4>SQL Interview Questions: SQLBolt</h4>
255 |       <p>Interactive SQL tutorial and interview questions for database-related roles.</p>
256 |       <a href="https://sqlbolt.com/" target="_blank">Visit SQL Interview Questions</a>
257 |     </div>
258 | 
259 |     <div class="card fade-in" category="interview">
260 |       <h4>Mock Interviews: Interviewing.io</h4>
261 |       <p>Practice technical interviews anonymously with engineers from top companies.</p>
262 |       <a href="https://interviewing.io/" target="_blank">Visit Mock Interviews</a>
263 |     </div>
264 | 
265 |     <div class="card fade-in" category="interview">
266 |       <h4>Programming Mock Tests: Coding Ninjas</h4>
267 |       <p>Mock interview questions and coding assessments for placement preparation.</p>
268 |       <a href="https://www.codingninjas.com/" target="_blank">Visit Programming Mock Tests</a>
269 |     </div>
270 | 
271 |     <div class="card fade-in" category="interview">
272 |       <h4>System Design Interviews: Grokking</h4>
273 |       <p>Learn system design concepts and practice with real interview questions from top tech companies.</p>
274 |       <a href="https://www.educative.io/courses/grokking-the-system-design-interview" target="_blank">Visit System
275 |         Design Interviews</a>
276 |     </div>
277 | 
278 |     <div class="card fade-in" category="interview">
279 |       <h4>Behavioral Interviews: Pramp</h4>
280 |       <p>Practice behavioral and technical interviews with peers in a realistic interview setting.</p>
281 |       <a href="https://www.pramp.com/" target="_blank">Visit Behavioral Interviews</a>
282 |     </div>
283 | 
284 |     <!-- Mock Test Section -->
285 |     <div class="card fade-in" category="mock">
286 |       <h4>Coding Mock Tests: TestDome</h4>
287 |       <p>Programming skill assessments and coding tests used by companies for hiring.</p>
288 |       <a href="https://www.testdome.com/" target="_blank">Visit Coding Mock Tests</a>
289 |     </div>
290 | 
291 |     <div class="card fade-in" category="mock">
292 |       <h4>Technical Mock Tests: HackerEarth</h4>
293 |       <p>Practice technical assessments with timed coding challenges and algorithmic problems.</p>
294 |       <a href="https://www.hackerearth.com/" target="_blank">Visit Technical Mock Tests</a>
295 |     </div>
296 | 
297 |     <div class="card fade-in" category="mock">
298 |       <h4>SQL Mock Tests: W3Schools SQL Quiz</h4>
299 |       <p>Test your SQL knowledge with interactive quizzes and practice tests.</p>
300 |       <a href="https://www.w3schools.com/quiztest/quiztest.asp?qtest=SQL" target="_blank">Visit SQL Mock Tests</a>
301 |     </div>
302 | 
303 |     <div class="card fade-in" category="mock">
304 |       <h4>Aptitude Mock Tests: Youth4work</h4>
305 |       <p>Comprehensive mock tests for quantitative, logical reasoning, and verbal ability.</p>
306 |       <a href="https://www.youth4work.com/" target="_blank">Visit Aptitude Mock Tests</a>
307 |     </div>
308 | 
309 |     <div class="card fade-in" category="learning">
310 |       <h4>Courses for programming: UDEMY </h4>
311 |       <p>Online learning platform offering a vast range of beginner to advanced programming courses across various
312 |         languages and technologies, taught by industry professionals.</p>
313 |       <a href="https://www.udemy.com/" target="_blank">Visit Udemy</a>
314 |     </div>
315 | 
316 |     <div class="card fade-in" category="learning">
317 |       <h4>Learning technologies from professionals: Coursera </h4>
318 |       <p> Global online learning platform that offers university level programming courses and professional certificates
319 |         from top institutions like Stanford, MIT, and Google, often with hands on projects and peer-reviewed
320 |         assignments.</p>
321 |       <a href="https://www.coursera.org/" target="_blank">Visit Coursera</a>
322 |     </div>
323 | 
324 |     <div class="card fade-in" category="CTFs">
325 |       <h4> CTF Challenges by PicoCTF </h4>
326 |       <p> A free, beginner friendly cybersecurity competition and learning platform, featuring capture the flag (CTF)
327 |         challenges that teach hacking, reverse engineering, cryptography, forensics, and more through interactive
328 |         problem solving</p>
329 |       <a href="https://picoctf.org/" target="_blank">Visit PicoCTF </a>
330 |     </div>
331 |     <div class="card fade-in" category="CTFs">
332 |       <h4> Cybersecurity by TryHackMe </h4>
333 |       <p> A gamified platform for learning ethical hacking and cybersecurity through hands on labs and guided paths.</p>
334 |       <a href="https://tryhackme.com/" target="_blank">Visit TryHackMe </a>
335 |     </div>
336 | 
337 |     <div class="card fade-in" category="coding">
338 |       <h4>DSA Mastery: Take U Forward (Striver’s Sheet)</h4>
339 |       <p>Take U Forward offers a curated A2Z DSA Sheet, system design roadmap, and coding tutorials perfect for
340 |         placement prep. Striver’s approach is structured and widely recommended.</p>
341 |       <a href="https://takeuforward.org/" target="_blank">Visit Take U Forward</a>
342 |     </div>
343 | 
344 |     <div class="card fade-in" category="learning">
345 |       <h4>Web Dev Tutorials: W3Schools</h4>
346 |       <p>W3Schools offers beginner-friendly tutorials and interactive examples for HTML, CSS, JavaScript, Python, SQL,
347 |         and more. Great for quick learning and reference.</p>
348 |       <a href="https://www.w3schools.com/" target="_blank">Explore W3Schools</a>
349 |     </div>
350 | 
351 |     <div class="card fade-in" category="learning">
352 |       <h4>Interactive Learning: freeCodeCamp</h4>
353 |       <p>Offers hands-on coding lessons, certifications, and projects in web development, data science, and more—all for
354 |         free.</p>
355 |       <a href="https://www.freecodecamp.org/" target="_blank">Explore freeCodeCamp</a>
356 |     </div>
357 | 
358 |     <div id="noResultsMessage" class="hidden">
359 |       No matching resources found.
360 |       <dl>Try:</dl>
361 |       <ul>
362 |         <li>Changing search terms</li>
363 |         <li>Selecting different categories</li>
364 |       </ul>
365 |     </div>
366 | 
367 |     <!-- Testimonials Section -->
368 | <section id="testimonials" style="padding: 40px 20px; background: #26aeca; color: white; max-width: 1200px; margin: 0 auto; font-family: Arial, sans-serif;">
369 |   <h2 style="text-align: center; font-size: 32px; margin-bottom: 24px;">Success Stories</h2>
370 |   <div style="display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;">
371 |     
372 |     <!-- Testimonial Card -->
373 |     <div style="background: rgba(255, 255, 255, 0.15); border-radius: 12px; box-shadow: none; padding: 20px; max-width: 320px; flex: 1 1 280px; display: flex; flex-direction: column; align-items: center; text-align: center; color: white; backdrop-filter: blur(5px);">
374 |       <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar of Jane Doe" style="width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin-bottom: 12px; border: 2px solid white;" />
375 |       <p style="font-style: italic;">“This platform helped me land my dream job as a software engineer. The curated resources are amazing!”</p>
376 |       <h3 style="margin: 10px 0 4px;">Jane Doe</h3>
377 |       <p style="font-weight: bold; margin: 0;">Software Engineer @ Google</p>
378 |     </div>
379 |     
380 |     <!-- Testimonial Card -->
381 |     <div style="background: rgba(255, 255, 255, 0.15); border-radius: 12px; box-shadow: none; padding: 20px; max-width: 320px; flex: 1 1 280px; display: flex; flex-direction: column; align-items: center; text-align: center; color: white; backdrop-filter: blur(5px);">
382 |       <img src="https://randomuser.me/api/portraits/men/34.jpg" alt="Avatar of John Smith" style="width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin-bottom: 12px; border: 2px solid white;" />
383 |       <p style="font-style: italic;">“Thanks to the step-by-step guidance here, I cleared my interviews with confidence.”</p>
384 |       <h3 style="margin: 10px 0 4px;">John Smith</h3>
385 |       <p style="font-weight: bold; margin: 0;">Backend Developer @ Amazon</p>
386 |     </div>
387 | 
388 |     <!-- Testimonial Card -->
389 |     <div style="background: rgba(255, 255, 255, 0.15); border-radius: 12px; box-shadow: none; padding: 20px; max-width: 320px; flex: 1 1 280px; display: flex; flex-direction: column; align-items: center; text-align: center; color: white; backdrop-filter: blur(5px);">
390 |       <img src="https://randomuser.me/api/portraits/women/55.jpg" alt="Avatar of Mary Lee" style="width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin-bottom: 12px; border: 2px solid white;" />
391 |       <p style="font-style: italic;">“The mock tests and resume tips gave me the extra edge I needed.”</p>
392 |       <h3 style="margin: 10px 0 4px;">Mary Lee</h3>
393 |       <p style="font-weight: bold; margin: 0;">Frontend Developer @ Microsoft</p>
394 |     </div>
395 | 
396 |    
397 |   </div>
398 | </section>
399 | 
400 |     <!-- Back to Top Button -->
401 | 
402 |     <button id="backToTop" title="Go to top">↑</button>
403 |     <button id="scrollToBottom" title="Go to bottom">↓</button>
404 | 
405 |   </div>
406 |   <footer class="fade-in">
407 |     <div class="footer-container ">
408 | 
409 |       <!-- Branding -->
410 |       <div class="footer-section">
411 |         <h2>first-contrib-placement</h2>
412 |         <p>
413 |           A community-driven project to share the best placement and learning resources for BTech students.
414 |         </p>
415 |         <div class="social-icons">
416 |          <!-- <a href="https://www.linkedin.com/in/varshitha-macha/" target="blank" rel="noopener noreferrer" style="margin-left: 12px;"><i
417 |               class="fab fa-linkedin-in" style= "font-size:32px;"></i></a>
418 |           <a href="https://github.com/Varshitha713/first-contrib-placement" target="_blank" rel="noopener noreferrer" style="margin-left: 12px;"><i
419 |               class="fab fa-github" style="font-size:32px;"></i></a>   -->
420 | 
421 |             <!-- Social Icons Row: Equal Spacing, White Icons -->
422 | <div style="display: flex; align-items: center; gap: 16px;">
423 |   <a href="https://www.linkedin.com/in/varshitha-macha/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
424 |     <i class="fab fa-linkedin-in" style="font-size:32px; color:#fff;"></i>
425 |   </a>
426 |   <a href="https://github.com/Varshitha713/first-contrib-placement" target="_blank" rel="noopener noreferrer" aria-label="GitHub">
427 |     <i class="fab fa-github" style="font-size:32px; color:#fff;"></i>
428 |   </a>
429 | </div>
430 | 
431 | 
432 | 
433 |       <!--Added more sharing options like whatsapp, twitter and facebook-->
434 |           <a href="https://api.whatsapp.com/send?...">
435 |            <i class="fab fa-whatsapp" style="font-size:32px; color:#fff;"></i>
436 |           </a>
437 |           <a href="https://twitter.com/intent/tweet?...">
438 |            <i class="fab fa-x-twitter" style="font-size:32px; color:#fff;"></i>
439 |           </a>
440 |           <a href="https://www.facebook.com/sharer/sharer.php?...">
441 |            <i class="fab fa-facebook-f" style="font-size:32px; color:#fff;"></i>
442 |           </a>
443 | 
444 | 
445 | 
446 | 
447 | 
448 |         </div>
449 |       </div>
450 |       <!-- Quick Links -->
451 |       <div class="footer-section">
452 |         <h3>Quick Links</h3>
453 |         <ul>
454 |           <li><a href="./index.html">Home</a></li>
455 |           <li><a href="#">Contribute</a></li>
456 |           <li><a href="#">Resources</a></li>
457 |           <li><a href="./roadmap.html">Roadmap</a></li>
458 |           <li><a href="./contact.html">Contact</a></li>
459 |         </ul>
460 | 
461 |       </div>
462 |   </footer>
463 | 
464 |   <!-- Top Categories -->
465 |   <footer>
466 |     <div class="footer-section">
467 |       <h3>Top Categories</h3>
468 |       <ul>
469 |         <li><a href="./dsa.html">DSA Practice</a></li>
470 |         <li><a href="./resume.html">Resume Tips</a></li>
471 |         <li><a href="./interviewprep.html">Interview Prep</a></li>
472 |         <li><a href="./open.html">Open Source</a></li>
473 |         <li><a href="./roadmap.html">Roadmaps</a></li>
474 |       </ul>
475 |     </div>
476 | 
477 | 
478 |     <!-- Contact Info -->
479 |     <div class="footer-section">
480 |       <h3>Get in Touch</h3>
481 |       <p><strong>Location:</strong> India</p>
482 |       <p><strong>Email:</strong> contact@firstcontrib.com</p>
483 |     </div>
484 |     </div>
485 | 
486 | 
487 |     <div class="footer-bottom">
488 |       © 2025 All Rights Reserved | Built with ❤️ by the FCP Community
489 |     </div>
490 |   </footer>
491 | 
492 |   <script>
493 |     const navbarToggle = document.querySelector('.navbar-toggle');
494 |     const navbarMenu = document.querySelector('.navbar-menu');
495 | 
496 |     navbarToggle.addEventListener('click', () => {
497 |       navbarToggle.classList.toggle('active');
498 |       navbarMenu.classList.toggle('active');
499 |     });
500 | 
501 |     // Dropdown functionality
502 |     const dropdownToggle = document.getElementById('resources-dropdown-toggle');
503 |     const dropdownMenu = document.querySelector('.dropdown-menu');
504 | 
505 |     // Toggle dropdown on click
506 |     dropdownToggle.addEventListener('click', (e) => {
507 |       e.preventDefault();
508 |       e.stopPropagation(); // Prevents the document click listener from firing
509 |       dropdownMenu.classList.toggle('active');
510 |     });
511 | 
512 |     // Close dropdown when clicking outside
513 |     document.addEventListener('click', (e) => {
514 |       if (!dropdownMenu.contains(e.target) && !dropdownToggle.contains(e.target)) {
515 |         dropdownMenu.classList.remove('active');
516 |       }
517 |     });
518 | 
519 |   </script>
520 | 
521 | 
522 |   
523 | 
524 | 
525 |   <script>
526 | 
527 |     const searchInput = document.getElementById('searchInput');
528 |     const categoryCheckboxes = document.querySelectorAll('#checkboxContainer input[type="checkbox"]');
529 |     const cards = document.querySelectorAll('.card');
530 |     const toggleBtn = document.getElementById("toggle-mode");
531 |     const backToTopButton = document.getElementById("backToTop");
532 | 
533 |   
534 |   function generateSuggestions() {
535 |     const suggestions = new Set();
536 |     
537 |     cards.forEach(card => {
538 |       const title = card.querySelector('h4').textContent;
539 |       const description = card.querySelector('p').textContent;
540 |       const category = card.getAttribute('category');
541 |       
542 |       // Extract words from title and description
543 |       const titleWords = title.split(/[:\s]+/).filter(word => word.length > 2);
544 |       const descWords = description.split(/\s+/).filter(word => word.length > 3);
545 |       
546 |       // Add title words (normalize case and remove punctuation)
547 |       titleWords.forEach(word => {
548 |         const cleanWord = word.toLowerCase().replace(/[^a-z0-9]/g, '');
549 |         if (cleanWord.length > 2) suggestions.add(cleanWord);
550 |       });
551 |       
552 |       // Add key description words (first few meaningful words, normalize case and remove punctuation)
553 |       descWords.slice(0, 3).forEach(word => {
554 |         const cleanWord = word.toLowerCase().replace(/[^a-z0-9]/g, '');
555 |         if (cleanWord.length > 3) suggestions.add(cleanWord);
556 |       });
557 |       
558 |       // Add category (normalize case)
559 |       suggestions.add(category.toLowerCase());
560 |     });
561 |     
562 |     return Array.from(suggestions).sort();
563 |   }
564 |   
565 |   const suggestions = generateSuggestions();
566 |   const searchBox = document.getElementById('searchInput');
567 | 
568 | searchBox.addEventListener('input', function() {
569 |   const input = this.value.toLowerCase();
570 |   const filtered = suggestions.filter(item => item.toLowerCase().startsWith(input));
571 |   showSuggestions(filtered);
572 | });
573 | 
574 | function showSuggestions(arr) {
575 |   let oldList = document.getElementById('autocomplete-list');
576 |   if (oldList) oldList.parentNode.removeChild(oldList);
577 | 
578 |   if (arr.length === 0 || searchBox.value === "") return;
579 | 
580 |   let list = document.createElement('div');
581 |   list.setAttribute('id', 'autocomplete-list');
582 |   list.setAttribute('class', 'autocomplete-items');
583 |   searchBox.parentNode.appendChild(list);
584 | 
585 |   arr.forEach(item => {
586 |     let option = document.createElement('div');
587 |     option.innerHTML = "<strong>" + item.substr(0, searchBox.value.length) + "</strong>";
588 |     option.innerHTML += item.substr(searchBox.value.length);
589 |     option.addEventListener('click', function() {
590 |       searchBox.value = item;
591 |       list.parentNode.removeChild(list);
592 |     });
593 |     list.appendChild(option);
594 |   });
595 | }
596 | 
597 | // Optional: close suggestions if clicking outside the autocomplete
598 | document.addEventListener('click', function(e) {
599 |   let autocompleteList = document.getElementById('autocomplete-list');
600 |   if (autocompleteList && !autocompleteList.contains(e.target) && e.target !== searchBox) {
601 |     autocompleteList.parentNode.removeChild(autocompleteList);
602 |   }
603 | });
604 |     // 🔍 Search & Filter Logic
605 |     function searchAndFilter() {
606 |       const searchText = searchInput.value.toLowerCase();
607 |       const selectedCategories = Array.from(categoryCheckboxes)
608 |         .filter(cb => cb.checked)
609 |         .map(cb => cb.value);
610 | 
611 |       let hasVisibleCards = false;
612 | 
613 |       cards.forEach(card => {
614 |         const text = card.textContent.toLowerCase();
615 |         const cardCategory = card.getAttribute('category');
616 | 
617 |         const matchesSearch = text.includes(searchText);
618 |         const matchesCategory = selectedCategories.length === 0 ||
619 |           selectedCategories.includes(cardCategory);
620 | 
621 |         if (matchesSearch && matchesCategory) {
622 |           card.classList.remove("hidden");
623 |           hasVisibleCards = true;
624 |         } else {
625 |           card.classList.add("hidden");
626 |         }
627 |       });
628 | 
629 |       // Show/hide no results message
630 |       const noResultsMsg = document.getElementById('noResultsMessage');
631 |       if (hasVisibleCards) {
632 |         noResultsMsg.classList.add("hidden");
633 |       } else {
634 |         noResultsMsg.classList.remove("hidden");
635 |       }
636 |     }
637 | 
638 |     // Event Listeners
639 |     searchInput.addEventListener('input', searchAndFilter);
640 |     categoryCheckboxes.forEach(cb => cb.addEventListener('change', searchAndFilter));
641 | 
642 |     // 🌗 Dark Mode
643 |     window.addEventListener("DOMContentLoaded", () => {
644 |       const savedMode = localStorage.getItem("mode");
645 | 
646 |       if (savedMode === "dark") {
647 |         document.body.classList.add("dark-mode");
648 |         toggleBtn.textContent = "☀️";
649 |       } else {
650 |         document.body.classList.remove("dark-mode");
651 |         toggleBtn.textContent = "🌙";
652 |       }
653 |       searchAndFilter();
654 |     });
655 |     
656 | 
657 |     // 🟢 Toggle and Save Mode
658 |     toggleBtn.addEventListener("click", () => {
659 |       document.body.classList.toggle("dark-mode");
660 | 
661 |       if (document.body.classList.contains("dark-mode")) {
662 |         toggleBtn.textContent = "☀️";
663 |         localStorage.setItem("mode", "dark");
664 |       } else {
665 |         toggleBtn.textContent = "🌙";
666 |         localStorage.setItem("mode", "light");
667 |       }
668 |     });
669 | 
670 |     // ⬆️ Back to Top
671 | 
672 | const scrollToBottomButton = document.getElementById("scrollToBottom");
673 | 
674 | 
675 | window.onscroll = () => {
676 | 
677 |   if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
678 |     backToTopButton.style.display = "block";
679 |   } else {
680 |     backToTopButton.style.display = "none";
681 |   }
682 |   
683 |  
684 |   const isAtBottom = 
685 |     window.innerHeight + window.scrollY >= document.body.offsetHeight - 100;
686 |   scrollToBottomButton.style.display = isAtBottom ? "none" : "block";
687 | };
688 | 
689 | 
690 | backToTopButton.addEventListener("click", () => {
691 |   window.scrollTo({ top: 0, behavior: 'smooth' });
692 | });
693 | 
694 | 
695 | scrollToBottomButton.addEventListener("click", () => {
696 |   window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
697 | });
698 | 
699 |     // ⬇️ Toggle dropdown
700 |     const filterToggle = document.getElementById("filterToggle");
701 |     const filterDropdown = document.querySelector(".filter-dropdown");
702 |     filterToggle.addEventListener("click", () => {
703 |       filterDropdown.classList.toggle("open");
704 |     });
705 | 
706 |     // ⛔ Close dropdown if clicked outside
707 |     window.addEventListener("click", (e) => {
708 |       if (!filterDropdown.contains(e.target)) {
709 |         filterDropdown.classList.remove("open");
710 |       }
711 |     });
712 | 
713 |   </script>
714 |    
715 | </div>
716 | <script>
717 |   document.getElementById('fab-share').onclick = function(e) {
718 |     e.stopPropagation();
719 |     var opts = document.getElementById('share-options');
720 |     opts.style.display = (opts.style.display === 'none' || opts.style.display === '') ? 'flex' : 'none';
721 |   }
722 |   document.body.onclick = function(e) {
723 |     if (!document.getElementById('fab-container').contains(e.target) && document.getElementById('share-options').style.display === 'flex') {
724 |       document.getElementById('share-options').style.display = 'none';
725 |     }
726 |   }
727 | </script>
728 | 
729 | 
730 | <!-- Floating Share Button -->
731 | <div id="fab-share-container" style="position: fixed; bottom: 160px; right: 32px; z-index: 1000; display: flex; flex-direction: column; align-items: center;">
732 |   <button id="fab-share" aria-label="Share" style="background: #219EBC; border: none; border-radius: 50%; width: 56px; height: 56px; box-shadow: 0 2px 8px rgba(44,44,44,0.20); cursor: pointer; position: relative;">
733 |     <i class="fas fa-share-alt" style="color:#fff; font-size:28px;"></i>
734 |   </button>
735 |   <div id="share-options" style="
736 |     display:none; 
737 |     flex-direction: column; 
738 |     gap: 14px; 
739 |     align-items: center; 
740 |     position: absolute; 
741 |     bottom: 70px; 
742 |     left: 50%; 
743 |     transform: translateX(-50%);
744 |     background: #219EBC; 
745 |     box-shadow: 0 2px 12px rgba(44,44,44,0.13);
746 |     padding: 12px 20px; 
747 |     border-radius: 12px;
748 |   ">
749 |     <a href="https://api.whatsapp.com/send?text=Check%20out%20this%20platform%20https://first-contrib-placement.netlify.app/" target="_blank" aria-label="Share on WhatsApp">
750 |       <i class="fab fa-whatsapp" style="color:#fff; font-size:28px;"></i>
751 |     </a>
752 |     <a href="https://www.linkedin.com/sharing/share-offsite/?url=https://first-contrib-placement.netlify.app/" target="_blank" aria-label="Share on LinkedIn">
753 |       <i class="fab fa-linkedin" style="color:#fff; font-size:28px;"></i>
754 |     </a>
755 |     <a href="https://twitter.com/intent/tweet?text=Check%20out%20this%20platform&url=https://first-contrib-placement.netlify.app/" target="_blank" aria-label="Share on X">
756 |       <i class="fab fa-x-twitter" style="color:#fff; font-size:28px;"></i>
757 |     </a>
758 |     <a href="https://www.facebook.com/sharer/sharer.php?u=https://first-contrib-placement.netlify.app/" target="_blank" aria-label="Share on Facebook">
759 |       <i class="fab fa-facebook" style="color:#fff; font-size:28px;"></i>
760 |     </a>
761 |   </div>
762 | </div>
763 | 
764 | <script>
765 |   document.getElementById('fab-share').onclick = function(e) {
766 |     e.stopPropagation();
767 |     var opts = document.getElementById('share-options');
768 |     opts.style.display = (opts.style.display === 'none' || opts.style.display === '') ? 'flex' : 'none';
769 |   }
770 |   document.body.onclick = function(e) {
771 |     if (!document.getElementById('fab-share-container').contains(e.target) && document.getElementById('share-options').style.display === 'flex') {
772 |       document.getElementById('share-options').style.display = 'none';
773 |     }
774 |   }
775 | </script>
776 | 
777 | 
778 | 
779 | 
780 | 
781 | 
782 | 
783 | 
784 | 
785 | 
786 | </body>
787 | 
788 | </html>


--------------------------------------------------------------------------------