Skip to content

Added Open Source Preview Webpage for Hacktoberfest Contributions #44

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
saymanlal wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Added Open Source Preview Webpage for Hacktoberfest Contributions #44

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
838b4f7
preview webpage
saymanlal Oct 31, 2025
ba3b3b8
added the frontend ready to deploy using github pages
saymanlal Oct 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
198 changes: 198 additions & 0 deletions host.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,198 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hacktoberfest Projects 2025 | Open Source Showcase</title>

<!-- Favicon & Icons -->
<link rel="icon" href="https://cdn-icons-png.flaticon.com/512/919/919827.png" />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet" />
<script src="https://kit.fontawesome.com/a2e8f5a1f4.js" crossorigin="anonymous"></script>
Comment on lines +8 to +11
Copy link

@coderabbitai coderabbitai bot Oct 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Replace hardcoded Font Awesome kit ID and verify external dependency.

The Font Awesome kit ID a2e8f5a1f4 on line 11 appears to be a placeholder or shared demo key. Additionally, relying on external CDNs for fonts and icons creates a single point of failure—if the CDN is unavailable, the page loses styling and icons.

Consider:

  1. Replacing the Font Awesome kit ID with a project-specific one or using a fallback icon library.
  2. Adding fallback fonts or using system fonts as a backup.
  3. Documenting the external dependency requirement in a README.

If using Font Awesome is intentional, ensure the kit ID is project-owned and document it for future contributors.

🤖 Prompt for AI Agents 
In host.html around lines 8 to 11, the page embeds an external Font Awesome kit
ID (a2e8f5a1f4) and Google Fonts link which are likely placeholders/shared keys
and introduce a CDN single point of failure; replace the hardcoded kit ID with
the project-owned Font Awesome kit or remove the kit and swap in a locally
hosted or alternative icon library, add fallback/system fonts in the CSS
font-family stack for Poppins (e.g., system-ui, -apple-system, "Segoe UI",
sans-serif), and document the external dependencies and required kit ID in the
project README so future contributors know to provision or replace the CDN
assets.


<style>
:root {
--bg: #0d1117;
--text: #f0f6fc;
--accent: #58a6ff;
--secondary: #161b22;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
scroll-behavior: smooth;
}

body {
background: var(--bg);
color: var(--text);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
overflow-x: hidden;
}

header {
text-align: center;
padding: 2rem 1rem;
animation: fadeInDown 1s ease forwards;
}

header h1 {
font-size: 2.5rem;
color: var(--accent);
}

header p {
font-size: 1.1rem;
color: #8b949e;
margin-top: 0.5rem;
}

.btn {
display: inline-block;
margin-top: 1.5rem;
background: var(--accent);
color: white;
padding: 0.8rem 1.5rem;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}

.btn:hover {
background: #1f6feb;
transform: translateY(-3px);
}

main {
max-width: 1000px;
padding: 2rem;
text-align: center;
animation: fadeInUp 1s ease forwards;
}

.projects {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}

.card {
background: var(--secondary);
border-radius: 12px;
padding: 1.5rem;
transition: all 0.3s ease;
border: 1px solid #21262d;
}

.card:hover {
transform: translateY(-5px);
border-color: var(--accent);
box-shadow: 0 0 15px rgba(88, 166, 255, 0.2);
}

.card h3 {
color: var(--accent);
font-size: 1.2rem;
margin-bottom: 0.5rem;
}

.card p {
font-size: 0.95rem;
color: #c9d1d9;
}

footer {
margin-top: 3rem;
text-align: center;
color: #8b949e;
padding-bottom: 2rem;
}

.socials a {
color: var(--accent);
margin: 0 10px;
font-size: 1.5rem;
transition: color 0.3s ease;
}

.socials a:hover {
color: white;
}

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

@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
</head>

<body>
<header role="banner">
<h1>Hacktoberfest Projects 2025</h1>
<p>Explore, Contribute, and Grow with Open Source</p>
<a href="https://github.com/gitsofaryan/Hacktoberfest-Projects-2025" class="btn" aria-label="View repository on GitHub">
<i class="fab fa-github"></i> View on GitHub
</a>
Comment on lines +159 to +161
Copy link

@coderabbitai coderabbitai bot Oct 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Add contribution guidelines and links to issues/documentation.

The PR objectives state the page should include "links to the repository, issues, and documentation" and "contribution guidelines." Currently, only the repository link is present. The featured projects section lacks links to actual contribution paths.

Consider:

  1. Adding a dedicated "Contributing" section with guidelines and links to open issues.
  2. Adding a "Documentation" link in the header or footer.
  3. Making project cards clickable to link to their respective repositories or issue pages.
  4. Including a "Getting Started" or "How to Contribute" section as described in the PR objectives.

This would align the implementation with the stated objectives.

🤖 Prompt for AI Agents 
In host.html around lines 159 to 161, the page currently only contains a GitHub
repo link but lacks contribution guidelines, documentation and issue links
described in the PR objectives; add a new "Contributing" section that includes a
brief contribution guide and direct links to the repository's CONTRIBUTING.md
and open issues page, add a "Documentation" link in the header or footer
pointing to the repo's docs or wiki, make each featured project card clickable
linking to that project's repository or issues page, and include a short
"Getting Started / How to Contribute" blurb with links to issue labels (help
wanted/good first issue) and the contribution guide.

</header>

<main role="main">
<h2>🌱 Featured Projects</h2>
<div class="projects" aria-label="Project showcase">
<div class="card">
<h3><i class="fas fa-code"></i> BitMasking</h3>
<p>Understand the power of bitwise operations through clean C++ implementations.</p>
</div>

<div class="card">
<h3><i class="fas fa-brain"></i> Handwritten Digit Recognition</h3>
<p>Train a model to recognize handwritten digits using ML fundamentals.</p>
</div>

<div class="card">
<h3><i class="fas fa-car"></i> Vehicle Parking Management</h3>
<p>A complete Python + Flask based system to manage parking slots efficiently.</p>
</div>

<div class="card">
<h3><i class="fas fa-terminal"></i> Learn Bash Scripting</h3>
<p>Master shell scripting with real-world examples and exercises.</p>
</div>
</div>
</main>

<footer role="contentinfo">
<div class="socials" aria-label="Social media links">
<a href="https://github.com/YourUsername" aria-label="GitHub"><i class="fab fa-github"></i></a>
<a href="https://x.com/YourUsername" aria-label="X (Twitter)"><i class="fab fa-x-twitter"></i></a>
<a href="https://www.linkedin.com/in/YourUsername" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
Comment on lines +191 to +193
Copy link

@coderabbitai coderabbitai bot Oct 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

Replace placeholder social links with actual URLs.

The social links in the footer contain hardcoded YourUsername placeholders (lines 191–193), rendering them non-functional. These should be replaced with actual project maintainer or organization accounts.

Update the social links:

- <a href="https://github.com/YourUsername" aria-label="GitHub"><i class="fab fa-github"></i></a>
- <a href="https://x.com/YourUsername" aria-label="X (Twitter)"><i class="fab fa-x-twitter"></i></a>
- <a href="https://www.linkedin.com/in/YourUsername" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
+ <a href="https://github.com/gitsofaryan" aria-label="GitHub"><i class="fab fa-github"></i></a>
+ <a href="https://x.com/[handle]" aria-label="X (Twitter)"><i class="fab fa-x-twitter"></i></a>
+ <a href="https://www.linkedin.com/in/[profile]" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>

Or remove placeholder links entirely if they're not applicable.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<a href="https://github.com/YourUsername" aria-label="GitHub"><i class="fab fa-github"></i></a>
<a href="https://x.com/YourUsername" aria-label="X (Twitter)"><i class="fab fa-x-twitter"></i></a>
<a href="https://www.linkedin.com/in/YourUsername" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
<a href="https://github.com/gitsofaryan" aria-label="GitHub"><i class="fab fa-github"></i></a>
<a href="https://x.com/[handle]" aria-label="X (Twitter)"><i class="fab fa-x-twitter"></i></a>
<a href="https://www.linkedin.com/in/[profile]" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
🤖 Prompt for AI Agents 
In host.html around lines 191 to 193, the footer social anchor tags use
placeholder URLs containing "YourUsername", which are non-functional; replace
each href with the actual GitHub, X (Twitter), and LinkedIn URLs for the project
maintainer or organization (or remove the corresponding anchor if no account
exists), and ensure aria-labels remain accurate for accessibility.

</div>
<p>Made with ❤️ by contributors of Hacktoberfest 2025</p>
</footer>
</body>
</html>