ravikirank2018
# CloudCV GSoC 2025 Website Enhancement This repository contains improvements and fixes to the CloudCV GSoC 2025 website. The modifications aim to enhance usability, improve code quality, optimize performance, and ensure better user accessibility, while preserving compatibility with GitHub Pages and Jekyll. --- ## Overview of Enhancements ### 1. Teaser Markdown Rendering Fix **Issue:** `teaser.md` was wrapped in a `<p>` tag, which could break layout if the markdown includes block elements like headers or lists. **Fix:** Replaced `<p>` with `<div class="lead">` to ensure proper rendering of Markdown structure. --- ### 2. Safe CSS Class Generation **Issue:** Project titles were used directly in HTML classes. Titles with spaces or special characters can create invalid class names. **Fix:** Used Liquid’s `slugify` filter to safely transform project titles for use in CSS classes. --- ### 3. External Links Behavior **Improvement:** Added `target="_blank"` to all project website and GitHub links to ensure they open in new browser tabs. --- ### 4. Image Accessibility & Lazy Loading **Improvement:** - Added `alt` attributes using project title for better accessibility. - Added `loading="lazy"` to defer image loading and improve performance. --- ### 5. HTML Structure and Tag Closure **Fix:** Properly closed all `.container` and `.row` divs. Added meaningful HTML comments for better readability and maintainability. --- ### 6. Sample Project Content **Addition:** Populated sample project entries for GSoC 2025: - Enhanced Test Suite and Improved UX - Mitigating Biases in VLMs - RAG-Based Chatbot for Challenge Support Each project includes: - Title - Technologies used - Difficulty & size - Description - Participation call --- ## Preview Instructions 1. Clone the repository: ```bash git clone https://github.com/ravikirank2018/GSoC-Ideas.git cd GSoC-Ideas Serve the Jekyll site locally: <section id="about"> <div class="container"> <div class="row"> <div class="col-lg-8 col-lg-offset-2" id="mentee-guidelines"> <h2 class="text-center fw-400">About CloudCV</h2> <!-- CHANGED: Replaced <p> with <div> to safely include Markdown --> <div class="lead"> {% include teaser.md %} </div> </div> </div> </div> </section> <!-- ADDED: Safe slug version of post title --> <section> <div class="container"> <div class="row valign-center"> <div class="col-lg-5 col-sm-6"> <hr class="section-heading-spacer"> <div class="clearfix"></div> <h2 class="section-heading fw-400">{{ post.title }}</h2> <h4> {% for technology in post.technologies %} <span class="label label-info">{{ technology }}</span> {% endfor %} </h4> <div class="lead">{{ post.content }}</div> <!-- CHANGED: Use slug in class --> <p class="{{ slug }}-placeholder project-placeholder">Please wait for loading the projects ...</p> <div> <table style="display: none" data-url="https://api.github.com/repos/{{ site.github_organization }}/{{ site.github_repository }}/issues?state=open&labels=GSoC-2025" class="table {{ slug }}-table"> <caption class="fw-300">Participate in the issue corresponding to this project to get started</caption> <thead> <tr><th></th><th></th></tr> </thead> <tbody></tbody> </table> </div> <div class="text-center"> <!-- CHANGED: Ensured links open in new tab --> <a href="{{ post.website }}" target="_blank"><i class="fa fa-rss-square fa-2x icon-mentoring"></i></a> <a href="{{ post.github }}" target="_blank"><i class="fa fa-github fa-2x icon-mentoring"></i></a> </div> </div> <div class="col-lg-6 col-lg-offset-1 col-sm-6"> <!-- CHANGED: Added loading="lazy" and alt for performance/accessibility --> <img class="img-responsive" loading="lazy" src="../img/projects/{{ post.img }}" alt="{{ post.title }} image"> </div> </div> <!-- /.row --> </div> <!-- /.container --> </section> - Push this into a file and give you a downloadable link - Generate the updated `index.html` file with the project blocks added - Help you raise a pull request back to the main CloudCV repo once your edits are finalized I'm happy to help with the next steps.