Skip to content

Add Project Listings Under Technology Cards -CPP,JAVA,PYTHON,REACT JS #363

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
Satvika1825 wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Add Project Listings Under Technology Cards -CPP,JAVA,PYTHON,REACT JS #363

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4b4b578
Fix: resolved issues #328 #356 #357 #358
Satvika1825 Aug 20, 2025
cb09cb3
Added React projects for issues #328, #356, #357, #358
Satvika1825 Aug 20, 2025
abe94c5
Merge branch 'main' into main
Satvika1825 Sep 1, 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
1 change: 0 additions & 1 deletion TechStack/C++/a
View file
Open in desktop

This file was deleted.

140 changes: 140 additions & 0 deletions TechStack/CPP/cpp-projects.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
/* Reset unwanted margin */
body {
margin: 0;
padding: 0;
font-family: "Inter", sans-serif;
background: #f9f9f9;
}

/* Header styling */
.ml-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
text-align: center;
padding: 50px 20px;
margin: 0; /* remove extra gap */
}

.ml-header h1 {
font-size: 2.5rem;
margin: 0;
}

.ml-header p {
margin-top: 20px;
font-size: 1.1rem;
opacity: 0.9;
margin-bottom: 20px ;
}

.back-button {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: linear-gradient(135deg, #6a11cb, #2575fc);
color: #fff;
padding: 0.75rem 1.75rem;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
font-size: 0.95rem;
z-index: 10;
}

/* Projects container */
.projects-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
max-width: 1200px;
margin: 40px auto; /* centers and adds spacing */
padding: 0 20px;
}

/* Project cards */
.project-card {
background: white;
border-radius: 15px;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: transform 0.2s ease, box-shadow 0.2s ease;
min-height: 320px; /* ensures equal height */
}

.project-card:hover {
transform: translateY(-6px);
box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.project-icon {
font-size: 2.5rem;
display: inline-block;

background: linear-gradient(135deg, #667eea, #764ba2);

/* For Chrome, Safari, Edge */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

/* For Firefox */
background-clip: text;
color: transparent;

margin-bottom: 15px;
}




/* Text */
.project-content h3 {
font-size: 1.3rem;
margin-bottom: 10px;
color: #333;
}

.project-content p {
color: #555;
font-size: 0.95rem;
margin-bottom: 15px;
flex-grow: 1; /* pushes button down */
}

/* Tags */
.tech-stack {
margin-bottom: 15px;
}

.tech-tag {
display: inline-block;
background: #eee;
padding: 5px 12px;
border-radius: 20px;
font-size: 0.8rem;
margin: 3px;
color: #333;
}

/* Button */
.view-code-btn {
display: inline-block;
padding: 10px 18px;
background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: background 0.2s ease;
}

.view-code-btn:hover {
background: #2575fc;
}
186 changes: 186 additions & 0 deletions TechStack/CPP/cpp-projects.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,186 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>C++ Projects - Project Vault</title>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
/>
<link rel="stylesheet" href="cpp-projects.css" />
<link rel="stylesheet" href="../../style.css" />
</head>
<body>
<header class="ml-header">
<div class="header-content">
<h1>C++ Projects</h1>
<p>Classic C++ projects showcasing data structures, algorithms, and real-world system implementations</p>
<a href="../../index.html" class="back-button">← Back to Home</a>
</div>
</header>

<main class="ml-main">
<div class="projects-container">

<!-- Library Management System -->
<div class="project-card fade-in" style="animation-delay: 0.1s">
<div class="project-icon">
<i class="fas fa-book"></i>
</div>
<div class="project-content">
<h3>Library Management System</h3>
<p>A C++ project that manages book records, borrowing, returning, and tracking availability in a library system.</p>
<div class="tech-stack">
<span class="tech-tag">C++</span>
<span class="tech-tag">File Handling</span>
<span class="tech-tag">OOP</span>
</div>
<a href="https://www.onlinegdb.com/L7DHA3dS2"
class="view-code-btn" target="_blank">
<i ></i> View Project
</a>
<a href="https://github.com/pavitraag/Project-Vault/tree/main/TechStack/CPP/projects"
class="view-code-btn" target="_blank">
<i class="fab fa-github"></i> View Code
</a>
</div>
</div>

<!-- Student Record Management -->
<div class="project-card fade-in" style="animation-delay: 0.2s">
<div class="project-icon">
<i class="fas fa-user-graduate"></i>
</div>
<div class="project-content">
<h3>Student Record Management</h3>
<p>C++ based project to store, update, and manage student records with roll numbers, grades, and personal details.</p>
<div class="tech-stack">
<span class="tech-tag">C++</span>
<span class="tech-tag">Data Structures</span>
</div>
<a href="https://onlinegdb.com/O_0yDPt6j"
class="view-code-btn" target="_blank">
<i ></i> View Project
</a>
<a href="https://github.com/pavitraag/Project-Vault/tree/main/TechStack/CPP/projects"
class="view-code-btn" target="_blank">
<i class="fab fa-github"></i> View Code
</a>
</div>
</div>

<!-- Bank Management System -->
<div class="project-card fade-in" style="animation-delay: 0.3s">
<div class="project-icon">
<i class="fas fa-university"></i>
</div>
<div class="project-content">
<h3>Bank Management System</h3>
<p>A banking system simulation in C++ allowing users to create accounts, deposit, withdraw, and check balances.</p>
<div class="tech-stack">
<span class="tech-tag">C++</span>
<span class="tech-tag">File Handling</span>
</div>
<a href="https://onlinegdb.com/f6liAsosT"
class="view-code-btn" target="_blank">
<i ></i> View Project
</a>
<a href="https://github.com/pavitraag/Project-Vault/tree/main/TechStack/CPP/projects"
class="view-code-btn" target="_blank">
<i class="fab fa-github"></i> View Code
</a>
</div>
</div>

<!-- Tic-Tac-Toe Game -->
<div class="project-card fade-in" style="animation-delay: 0.4s">
<div class="project-icon">
<i class="fas fa-gamepad"></i>
</div>
<div class="project-content">
<h3>Tic-Tac-Toe Game</h3>
<p>A simple console-based Tic-Tac-Toe game implemented in C++ for two players.</p>
<div class="tech-stack">
<span class="tech-tag">C++</span>
<span class="tech-tag">Game Logic</span>
</div>
<a href="https://onlinegdb.com/XoG7ZuWB7"
class="view-code-btn" target="_blank">
<i ></i> View Project
</a>
<a href="https://github.com/pavitraag/Project-Vault/tree/main/TechStack/CPP/projects"
class="view-code-btn" target="_blank">
<i class="fab fa-github"></i> View Code
</a>
</div>
</div>

</div>
</main>

<footer id="contact">
<div class="footer-container">
<div class="footer-section company-info">
<h1 class="heading">Project Vault</h1>
<p>
Project Vault is a curated collection of diverse projects ranging
from stunning websites and interactive games to intelligent machine
learning applications and classic C++ programs.
</p>
<div class="social">
<a class="message" href="mailto:[email protected]" target="_blank" aria-label="Email">
<i class="fa-solid fa-envelope"></i>
</a>
<a class="linkedin" href="https://www.linkedin.com/in/pavitraa-g/" target="_blank" aria-label="LinkedIn">
<i class="fab fa-linkedin"></i>
</a>
<a class="github" href="https://www.github.com/pavitraag" target="_blank" aria-label="GitHub">
<i class="fab fa-github"></i>
</a>
</div>
</div>

<div class="footer-section quick-links">
<h1 class="heading">Quick Links</h1>
<ul class="footer-ul">
<li><a href="../../index.html"><i class="fa-solid fa-house"></i> Home</a></li>
<li><a href="./aboutus.html"><i class="fa-solid fa-circle-info"></i> About</a></li>
<li><a href="#"><i class="fa-solid fa-icons"></i> Components</a></li>
<li><a href="../../faq.html"><i class="fa-solid fa-question-circle"></i> FAQ</a></li>
<li><a href="./discussion.html"><i class="fa-solid fa-comment"></i> Forum</a></li>
<li><a href="./contact.html"><i class="fa-solid fa-phone"></i> Contact</a></li>
</ul>
</div>

<div class="footer-section send-message">
<h1 class="heading">Keep In Touch</h1>
<form id="contact-form" name="Project Vault Contact" autocomplete="off">
<div class="form-group group1">
<input type="text" id="name" name="name" placeholder="Your name" autocomplete="name" required />
<input type="email" id="email" name="email" placeholder="Your email" autocomplete="email" required />
</div>
<div class="form-group">
<textarea id="message" name="message" placeholder="Your message" required></textarea>
<button type="submit">
<span class="button-text">SEND MESSAGE</span>
<div class="loading" style="display: none"></div>
</button>
</div>
</form>
</div>
</div>

<div class="copyright">
Created By Pavitraa ❤️ | © <span id="currentYear">2024</span> All Rights Reserved
</div>
</footer>

<script src="../../script.js"></script>
<script src="../js_files/cpp.js"></script>
</body>
</html>
Loading