Merge pull request #569 from ThunderShadows/job_update

Updated Job Description
aditya-bhaumik · Oct 12, 2024 · 64cf0df · 64cf0df
2 parents d0b940c + 1fea795
commit 64cf0df
Show file tree

Hide file tree

Showing 14 changed files with 162 additions and 57 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/pages/jobs/job_images/data_science.jpeg b/pages/jobs/job_images/data_science.jpeg
diff --git a/pages/jobs/job_images/design.jpg b/pages/jobs/job_images/design.jpg
diff --git a/pages/jobs/job_images/download (2).png b/pages/jobs/job_images/download (2).png
diff --git a/pages/jobs/job_images/download.png b/pages/jobs/job_images/download.png
diff --git a/pages/jobs/job_images/fullstack.jpeg b/pages/jobs/job_images/fullstack.jpeg
diff --git a/pages/jobs/job_images/innovation.png b/pages/jobs/job_images/innovation.png
diff --git a/pages/jobs/job_images/manage.png b/pages/jobs/job_images/manage.png
diff --git a/pages/jobs/job_images/market.png b/pages/jobs/job_images/market.png
diff --git a/pages/jobs/job_images/product.png b/pages/jobs/job_images/product.png
diff --git a/pages/jobs/job_images/secure.png b/pages/jobs/job_images/secure.png
diff --git a/pages/jobs/jobs.css b/pages/jobs/jobs.css
@@ -379,4 +379,71 @@ body {
 }
 .scroll-top:hover .fa-arrow-up {
 	transform: translateY(-4px);
-}
+}
+/* Job Item Styling */
+.job-item {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 20px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+}
+
+.card-header {
+  text-align: center;
+  margin-bottom: 10px;
+}
+
+.company-logo {
+  width: 100%;
+  height: 80px;
+  object-fit: contain;
+  margin-bottom: 15px;
+}
+
+.card-body {
+  padding: 10px 0;
+}
+
+.location {
+  display: block;
+  margin-bottom: 10px;
+  font-size: 14px;
+  color: #666;
+}
+
+.apply-btn {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+}
+
+.apply-btn button {
+  background-color: #4CAF50;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.apply-btn button:hover {
+  background-color: #45a049;
+}
+
+/* Salary and Tools Styling */
+.card-body p {
+  margin: 5px 0;
+  font-size: 14px;
+}
+
+.card-body p strong {
+  font-weight: bold;
+}
diff --git a/pages/jobs/jobs.html b/pages/jobs/jobs.html
@@ -1,20 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <!-- <base href="/Pathsphere/"> -->
-    <!-- uncomment above line if deploying to github pages -->
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Jobs</title>
-    <!-- Added a favicon -->
     <link rel="icon" type="image/x-icon" href="/images/pathsphere.png">
     <link rel="stylesheet" href="./jobs.css" />
-    <!-- <<<<<<< enhanceFAQ -->
-    <!-- <style>
-        Removed css code from here and created a new file jobs.css
-    </style> -->
-
-    <!-- >>>>>>> main -->
+    <!-- Font Awesome for icons -->
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
+    />
   </head>
   <body>
     <main>
@@ -29,32 +25,38 @@ <h1>Jobs</h1>
         <input type="text" id="search-input" placeholder="Search jobs..." />
         <button id="search-button">Search</button>
       </div>
+
       <div class="job-listings">
         <h2>Job Listings</h2>
         <div id="jobs" class="main">
           <!-- Cards will be generated here by JavaScript -->
         </div>
       </div>
-      <a class="scroll-top" href="#"> <i class="fa-solid fa-arrow-up"></i> </a>
+
+      <a class="scroll-top" href="#">
+        <i class="fa-solid fa-arrow-up"></i>
+      </a>
     </main>
+
     <script src="/scripts/componentLoader.js"></script>
     <script>
       prependComponent('Navbar');
       prependComponent('Cursor');
       appendComponent('Footer');
     </script>
+
     <script src="./jobs.js"></script>
     <script>
       window.embeddedChatbotConfig = {
-      chatbotId: "7akUzokCgwR0gNp0m-qQF",
-      domain: "www.chatbase.co"
-      }
-      </script>
-      <script
+        chatbotId: "7akUzokCgwR0gNp0m-qQF",
+        domain: "www.chatbase.co",
+      };
+    </script>
+    <script
       src="https://www.chatbase.co/embed.min.js"
       chatbotId="7akUzokCgwR0gNp0m-qQF"
       domain="www.chatbase.co"
-      defer>
-      </script>
+      defer
+    ></script>
   </body>
 </html>
diff --git a/pages/jobs/jobs.js b/pages/jobs/jobs.js
@@ -1,78 +1,107 @@
 const jobListings = [
   {
-      id: 1,
-      title: "Software Engineer",
-      company: "Tech Corp",
-      location: "New York, USA",
-      description: "Develop and maintain web applications using modern frameworks.",
+    id: 1,
+    title: "Software Engineer",
+    company: "Tech Corp",
+    location: "New York, USA",
+    description: "Develop and maintain web applications using modern frameworks.",
+    salary: "$90K - $120K",
+    tools: ["JavaScript", "React", "Node.js"],
+    logo: "./job_images/manage.png",
   },
   {
-      id: 2,
-      title: "Data Scientist",
-      company: "DataSolutions",
-      location: "San Francisco, USA",
-      description: "Analyze large datasets to extract insights and support decision-making.",
+    id: 2,
+    title: "Data Scientist",
+    company: "DataSolutions",
+    location: "San Francisco, USA",
+    description: "Analyze large datasets to extract insights and support decision-making.",
+    salary: "$110K - $150K",
+    tools: ["Python", "R", "TensorFlow"],
+    logo: "./job_images/data_science.jpeg", // updated path
   },
   {
-      id: 3,
-      title: "UI/UX Designer",
-      company: "Creative Minds",
-      location: "London, UK",
-      description: "Design intuitive and responsive interfaces for web and mobile applications.",
+    id: 3,
+    title: "UI/UX Designer",
+    company: "Creative Minds",
+    location: "London, UK",
+    description: "Design intuitive and responsive interfaces for web and mobile applications.",
+    salary: "$70K - $100K",
+    tools: ["Sketch", "Figma", "Adobe XD"],
+    logo: "./job_images/design.jpg",
   },
   {
-      id: 4,
-      title: "Project Manager",
-      company: "Business Solutions",
-      location: "Toronto, Canada",
-      description: "Oversee project execution and ensure timely delivery within scope and budget.",
+    id: 4,
+    title: "Project Manager",
+    company: "Business Solutions",
+    location: "Toronto, Canada",
+    description: "Oversee project execution and ensure timely delivery within scope and budget.",
+    salary: "$100K - $130K",
+    tools: ["Jira", "Asana", "Trello"],
+    logo: "./job_images/innovation.png",
   },
   {
-      id: 5,
-      title: "DevOps Engineer",
-      company: "CloudTech",
-      location: "Berlin, Germany",
-      description: "Implement CI/CD pipelines, automate infrastructure, and manage cloud services.",
+    id: 5,
+    title: "DevOps Engineer",
+    company: "CloudTech",
+    location: "Berlin, Germany",
+    description: "Implement CI/CD pipelines, automate infrastructure, and manage cloud services.",
+    salary: "$95K - $140K",
+    tools: ["Docker", "Kubernetes", "AWS"],
+    logo: "./job_images/download.png",
   },
   {
       id: 6,
       title: "Cybersecurity Analyst",
       company: "SecureWorks",
       location: "Sydney, Australia",
       description: "Monitor and analyze security systems to prevent data breaches and cyberattacks.",
+      salary: "$105K - $160K",
+      tools: ["Network Security", "Penetration Testing", "Firewalls", "Encryption", "Azure"],
+      logo: "./job_images/secure.png",
   },
   {
       id: 7,
       title: "Full-Stack Developer",
       company: "InnoTech",
       location: "Paris, France",
       description: "Build end-to-end solutions, from front-end to back-end, for enterprise applications.",
+      salary: "$100K - $150K",
+      tools: ["HTML", "CSS", "JavaScript", "React", "Node.js", "MongoDB"],
+      logo: "./job_images/fullstack.jpeg",
   },
   {
       id: 8,
       title: "Marketing Specialist",
       company: "Brandify",
       location: "Dubai, UAE",
       description: "Develop and execute marketing campaigns to enhance brand visibility and engagement.",
+      salary: "$70K - $110K",
+      tools: ["SEO", "Google Analytics", "Social Media", "Content Marketing", "Brand Strategy"],
+      logo: "./job_images/market.png",
   },
   {
       id: 9,
       title: "Blockchain Developer",
       company: "Crypto Solutions",
       location: "Singapore",
       description: "Design, implement, and maintain blockchain technologies and decentralized apps.",
+      salary: "$120K - $180K",
+      tools: ["Ethereum", "Solidity", "Smart Contracts", "DeFi", "Cryptography"],
+      logo: "./job_images/download (2).png",
   },
   {
       id: 10,
       title: "Product Manager",
       company: "NextGen",
       location: "Austin, USA",
       description: "Drive the product development lifecycle from ideation to market launch.",
+      salary: "$130K - $200K",
+      tools: ["Agile", "Scrum", "JIRA", "Stakeholder Management", "Product Roadmap"],
+      logo: "./job_images/product.png",
   },
   // Add more job listings as needed
 ];
 
-
 const searchInput = document.getElementById('search-input');
 const searchButton = document.getElementById('search-button');
 const jobsContainer = document.getElementById('jobs');
@@ -118,19 +147,23 @@ function generateJobCards() {
     .map(
       (job) => `
       <div class="job-item">
-         <div class="card">
-           <div class="card-body">
-              <h5>${job.title}</h5>
-               <h6>${job.company}</h6>
-              
-              <p>${job.description}</p>
-           </div>
-  <div class="apply-btn">
-  <span class="location">${job.location}</span>
-  <button>Apply Now</button>
-  </div>
-  </div>
-</div>
+        <div class="card">
+          <div class="card-header">
+            <img src="${job.logo}" alt="${job.company} Logo" class="company-logo">
+          </div>
+          <div class="card-body">
+            <h5>${job.title}</h5>
+            <h6>${job.company}</h6>
+            <span class="location">${job.location}</span>
+            <p>${job.description}</p>
+            <p><strong>Salary:</strong> ${job.salary}</p>
+            <p><strong>Required Tools:</strong> ${job.tools.join(", ")}</p>
+          </div>
+          <div class="apply-btn">
+            <button>Apply Now</button>
+          </div>
+        </div>
+      </div>
     `
     )
     .join("");