Skip to content

Commit bcc2e9e

Browse files
codeperfectpluscodeperfectplus
committed
add job openings page and JSON data for current job listings
1 parent 1a54cf8 commit bcc2e9e

File tree

3 files changed

+220
-14
lines changed

3 files changed

+220
-14
lines changed

‎assets/data/job_openings.json

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"jobs": [
3+
{
4+
"id": "1",
5+
"title": "Example Job",
6+
"location": "India",
7+
"department": "Engineering",
8+
"experience": "3+ years",
9+
"description": "Dummy Jon",
10+
"contactEmail": "[email protected]",
11+
"applyLink": "https://example.com/apply/software-engineer"
12+
}
13+
]
14+
}
15+

‎index.html

+73-14
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,66 @@
1414
</style>
1515
</head>
1616
<body class="bg-gray-50">
17+
<!-- Navbar -->
18+
<nav class="bg-white shadow-sm">
19+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
20+
<div class="flex justify-between h-16">
21+
<div class="flex items-center justify-between w-full">
22+
<!-- Logo and Brand Section -->
23+
<div class="flex-shrink-0 flex items-center space-x-4">
24+
<img class="h-10 w-auto"
25+
src="https://raw.githubusercontent.com/DrakeEntity/project-Image/master/9b2ca712-347a-4987-bac7-a4c3d106ed24_200x200.png"
26+
alt="PyContributors Logo">
27+
<div class="flex flex-col">
28+
<span class="text-xl font-bold text-gray-900">PyContributors</span>
29+
<span class="text-sm text-gray-500 hidden sm:block">Open Source Community</span>
30+
</div>
31+
</div>
32+
33+
<!-- Desktop Navigation -->
34+
<div class="hidden sm:flex sm:space-x-8 items-center">
35+
<a href="/"
36+
class="text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-blue-600 text-sm font-medium transition-colors duration-200">
37+
Home
38+
</a>
39+
<a href="/jobs"
40+
class="text-gray-500 hover:text-gray-700 hover:border-gray-300 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium transition-colors duration-200">
41+
Jobs
42+
</a>
43+
<!-- Mobile Menu Button -->
44+
<button type="button"
45+
class="sm:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-500 hover:text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
46+
aria-controls="mobile-menu"
47+
aria-expanded="false">
48+
<span class="sr-only">Open main menu</span>
49+
<svg class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
50+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
51+
</svg>
52+
</button>
53+
</div>
54+
</div>
55+
</div>
56+
</div>
57+
58+
<!-- Mobile Menu -->
59+
<div class="sm:hidden" id="mobile-menu">
60+
<div class="pt-2 pb-3 space-y-1">
61+
<a href="#"
62+
class="bg-blue-50 border-blue-600 text-blue-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium transition-colors duration-200">
63+
Home
64+
</a>
65+
<a href="#about"
66+
class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium transition-colors duration-200">
67+
About
68+
</a>
69+
<a href="#projects"
70+
class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium transition-colors duration-200">
71+
Projects
72+
</a>
73+
</div>
74+
</div>
75+
</nav>
76+
1777
<!-- Hero Section -->
1878
<div class="bg-gradient-to-r from-blue-600 to-indigo-700 text-white">
1979
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
@@ -25,15 +85,16 @@ <h1 class="text-4xl md:text-6xl font-bold mb-6">
2585
An open source community empowering Python developers worldwide
2686
</p>
2787
<div class="flex flex-col sm:flex-row justify-center gap-4">
28-
<a href="https://discord.gg/JfbK3bS" class="inline-flex items-center justify-center bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold hover:bg-blue-50 transition-colors">
29-
<i data-feather="message-circle" class="w-5 h-5 mr-2"></i>
30-
Join Discord
31-
</a>
3288
<a href="https://github.com/Py-Contributors" class="inline-flex items-center justify-center bg-gray-800 text-white px-6 py-3 rounded-lg font-semibold hover:bg-gray-700 transition-colors">
3389
<i data-feather="github" class="w-5 h-5 mr-2"></i>
3490
GitHub
3591
</a>
92+
<a href="https://www.linkedin.com/company/pycontributors/" class="inline-flex items-center justify-center bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-500 transition-colors">
93+
<i data-feather="linkedin" class="w-5 h-5 mr-2"></i>
94+
LinkedIn
95+
</a>
3696
</div>
97+
3798
</div>
3899
</div>
39100
</div>
@@ -107,22 +168,20 @@ <h2 class="text-3xl font-bold text-gray-900 mb-4">Featured Projects</h2>
107168
</div>
108169
<div class="grid md:grid-cols-2 gap-8">
109170
<div class="bg-gray-50 rounded-xl p-6">
110-
<h3 class="text-xl font-semibold text-gray-900 mb-2">Python Projects</h3>
171+
<h3 class="text-xl font-semibold text-gray-900 mb-2">Sanatio</h3>
111172
<p class="text-gray-600 mb-4">
112-
From web applications to data science tools, contribute to various Python-based projects
113-
suitable for all skill levels.
173+
A Python library for data validation and sanitization, designed to simplify error handling in your code and ensure clean, robust data pipelines.
114174
</p>
115-
<a href="#" class="text-blue-600 hover:text-blue-700 font-medium">
175+
<a href="https://github.com/codeperfectplus/Sanatio" class="text-blue-600 hover:text-blue-700 font-medium">
116176
View Projects →
117177
</a>
118178
</div>
119179
<div class="bg-gray-50 rounded-xl p-6">
120-
<h3 class="text-xl font-semibold text-gray-900 mb-2">Machine Learning</h3>
180+
<h3 class="text-xl font-semibold text-gray-900 mb-2">Random Profile Generator</h3>
121181
<p class="text-gray-600 mb-4">
122-
Work on exciting machine learning and AI projects, from basic algorithms to advanced
123-
neural networks.
182+
A utility package for generating random profiles, ideal for testing applications, populating dummy data, or experimenting with datasets.
124183
</p>
125-
<a href="#" class="text-blue-600 hover:text-blue-700 font-medium">
184+
<a href="https://github.com/codeperfectplus/RandomProfileGenerator" class="text-blue-600 hover:text-blue-700 font-medium">
126185
View Projects →
127186
</a>
128187
</div>
@@ -139,7 +198,7 @@ <h2 class="text-3xl font-bold mb-4">Ready to Start Contributing?</h2>
139198
Join our community today and be part of something bigger. Whether you're a beginner
140199
or an experienced developer, there's a place for you in PyContributors.
141200
</p>
142-
<a href="https://discord.gg/JfbK3bS" class="inline-block bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition-colors">
201+
<a href="https://github.com/Py-Contributors" class="inline-block bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition-colors">
143202
Get Started Today
144203
</a>
145204
</div>
@@ -165,7 +224,7 @@ <h4 class="text-white font-semibold mb-4">Links</h4>
165224
<div>
166225
<h4 class="text-white font-semibold mb-4">Community</h4>
167226
<ul class="space-y-2 text-sm">
168-
<li><a href="https://discord.gg/JfbK3bS" class="hover:text-white">Discord</a></li>
227+
<li><a href="https://www.linkedin.com/company/pycontributors/" class="hover:text-white">LinkedIn</a></li>
169228
<li><a href="https://github.com/Py-Contributors" class="hover:text-white">GitHub</a></li>
170229
</ul>
171230
</div>

‎jobs/index.html

+132
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
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>PyContributors - Open Source Community</title>
8+
<script src="https://cdn.tailwindcss.com"></script>
9+
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.29.0/feather.min.js"></script>
10+
<style>
11+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
12+
13+
body {
14+
font-family: 'Inter', sans-serif;
15+
}
16+
</style>
17+
</head>
18+
19+
<body class="bg-gray-50">
20+
<!-- Navbar -->
21+
<nav class="bg-white shadow-sm">
22+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
23+
<div class="flex justify-between h-16">
24+
<div class="flex items-center justify-between w-full">
25+
<!-- Logo and Brand Section -->
26+
<div class="flex-shrink-0 flex items-center space-x-4">
27+
<img class="h-10 w-auto"
28+
src="https://raw.githubusercontent.com/DrakeEntity/project-Image/master/9b2ca712-347a-4987-bac7-a4c3d106ed24_200x200.png"
29+
alt="PyContributors Logo">
30+
<div class="flex flex-col">
31+
<span class="text-xl font-bold text-gray-900">PyContributors</span>
32+
<span class="text-sm text-gray-500 hidden sm:block">Open Source Community</span>
33+
</div>
34+
</div>
35+
36+
<!-- Desktop Navigation -->
37+
<div class="hidden sm:flex sm:space-x-8 items-center">
38+
<a href="/"
39+
class="text-gray-500 hover:text-gray-700 hover:border-gray-300 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium transition-colors duration-200">
40+
Home
41+
</a>
42+
<a href="/jobs"
43+
class="text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-blue-600 text-sm font-medium transition-colors duration-200">
44+
Jobs
45+
</a>
46+
<!-- Mobile Menu Button -->
47+
<button type="button"
48+
class="sm:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-500 hover:text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
49+
aria-controls="mobile-menu"
50+
aria-expanded="false">
51+
<span class="sr-only">Open main menu</span>
52+
<svg class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
53+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
54+
</svg>
55+
</button>
56+
</div>
57+
</div>
58+
</div>
59+
</div>
60+
61+
<!-- Mobile Menu -->
62+
<div class="sm:hidden" id="mobile-menu">
63+
<div class="pt-2 pb-3 space-y-1">
64+
<a href="#"
65+
class="bg-blue-50 border-blue-600 text-blue-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium transition-colors duration-200">
66+
Home
67+
</a>
68+
<a href="#about"
69+
class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium transition-colors duration-200">
70+
About
71+
</a>
72+
<a href="#projects"
73+
class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium transition-colors duration-200">
74+
Projects
75+
</a>
76+
</div>
77+
</div>
78+
</nav>
79+
<div class="container mx-auto px-4 py-6">
80+
<h1 class="text-3xl font-bold mb-6">Current Job Openings</h1>
81+
<div id="job-listings" class="space-y-4">
82+
<!-- Job cards will be rendered here -->
83+
</div>
84+
</div>
85+
86+
<script>
87+
// Define the path to the JSON file
88+
const jsonFilePath = '/assets/data/job_openings.json';
89+
90+
// Fetch data from the JSON file and render job cards
91+
fetch(jsonFilePath)
92+
.then(response => {
93+
if (!response.ok) {
94+
throw new Error('Network response was not ok ' + response.statusText);
95+
}
96+
return response.json();
97+
})
98+
.then(data => {
99+
const jobListingsContainer = document.getElementById('job-listings');
100+
101+
// Render each job listing
102+
data.jobs.forEach(job => {
103+
const jobCard = document.createElement('div');
104+
jobCard.className = 'border rounded-lg shadow-md p-4';
105+
106+
jobCard.innerHTML = `
107+
<h2 class="text-xl font-semibold"><a href="/jobs/${job.id}" class="text-blue-500 hover:underline" target="_blank" rel="noopener noreferrer">${job.title}</a></h2>
108+
<p class="text-gray-700">Location: ${job.location}</p>
109+
<p class="text-gray-700">Department: ${job.department}</p>
110+
<p class="text-gray-700">Experience Required: ${job.experience}</p>
111+
<p class="text-gray-700">Description: ${job.description}</p>
112+
<p class="text-gray-700">Contact Email: <a href="mailto:${job.contactEmail}" class="text-blue-500 hover:underline">${job.contactEmail}</a></p>
113+
<a href="${job.applyLink}" class="text-blue-500 hover:underline mt-2 inline-block" target="_blank" rel="noopener noreferrer">Apply Now</a>
114+
`;
115+
116+
jobListingsContainer.appendChild(jobCard);
117+
});
118+
})
119+
.catch(error => {
120+
console.error('Error fetching job data:', error);
121+
const jobListingsContainer = document.getElementById('job-listings');
122+
jobListingsContainer.innerHTML = '<p class="text-red-500">Failed to load job openings. Please try again later.</p>';
123+
});
124+
</script>
125+
126+
<style>
127+
@import "https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css";
128+
</style>
129+
130+
</body>
131+
132+
</html>

0 commit comments

Comments
 (0)