diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6f3a2913 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/pages/jobs/job_images/data_science.jpeg b/pages/jobs/job_images/data_science.jpeg new file mode 100644 index 00000000..484eabdb Binary files /dev/null and b/pages/jobs/job_images/data_science.jpeg differ diff --git a/pages/jobs/job_images/design.jpg b/pages/jobs/job_images/design.jpg new file mode 100644 index 00000000..63b7a611 Binary files /dev/null and b/pages/jobs/job_images/design.jpg differ diff --git a/pages/jobs/job_images/download (2).png b/pages/jobs/job_images/download (2).png new file mode 100644 index 00000000..ed011281 Binary files /dev/null and b/pages/jobs/job_images/download (2).png differ diff --git a/pages/jobs/job_images/download.png b/pages/jobs/job_images/download.png new file mode 100644 index 00000000..564d2308 Binary files /dev/null and b/pages/jobs/job_images/download.png differ diff --git a/pages/jobs/job_images/fullstack.jpeg b/pages/jobs/job_images/fullstack.jpeg new file mode 100644 index 00000000..62f67975 Binary files /dev/null and b/pages/jobs/job_images/fullstack.jpeg differ diff --git a/pages/jobs/job_images/innovation.png b/pages/jobs/job_images/innovation.png new file mode 100644 index 00000000..1f75c629 Binary files /dev/null and b/pages/jobs/job_images/innovation.png differ diff --git a/pages/jobs/job_images/manage.png b/pages/jobs/job_images/manage.png new file mode 100644 index 00000000..b7020fa8 Binary files /dev/null and b/pages/jobs/job_images/manage.png differ diff --git a/pages/jobs/job_images/market.png b/pages/jobs/job_images/market.png new file mode 100644 index 00000000..4301c6e3 Binary files /dev/null and b/pages/jobs/job_images/market.png differ diff --git a/pages/jobs/job_images/product.png b/pages/jobs/job_images/product.png new file mode 100644 index 00000000..cf0dbc30 Binary files /dev/null and b/pages/jobs/job_images/product.png differ diff --git a/pages/jobs/job_images/secure.png b/pages/jobs/job_images/secure.png new file mode 100644 index 00000000..d9eb6ca7 Binary files /dev/null and b/pages/jobs/job_images/secure.png differ diff --git a/pages/jobs/jobs.css b/pages/jobs/jobs.css index 75ccaa77..98e2ed1c 100644 --- a/pages/jobs/jobs.css +++ b/pages/jobs/jobs.css @@ -379,4 +379,71 @@ body { } .scroll-top:hover .fa-arrow-up { transform: translateY(-4px); -} \ No newline at end of file +} +/* 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 index 2678a630..9c1fba37 100644 --- a/pages/jobs/jobs.html +++ b/pages/jobs/jobs.html @@ -1,20 +1,16 @@ - - Jobs - - - - - + +
@@ -29,32 +25,38 @@

Jobs

+

Job Listings

- + + + +
+ + - + defer + > diff --git a/pages/jobs/jobs.js b/pages/jobs/jobs.js index 3ee998d6..4429f8ba 100644 --- a/pages/jobs/jobs.js +++ b/pages/jobs/jobs.js @@ -1,38 +1,53 @@ 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, @@ -40,6 +55,9 @@ const jobListings = [ 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, @@ -47,6 +65,9 @@ const jobListings = [ 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, @@ -54,6 +75,9 @@ const jobListings = [ 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, @@ -61,6 +85,9 @@ const jobListings = [ 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, @@ -68,11 +95,13 @@ const jobListings = [ 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) => `
-
-
-
${job.title}
-
${job.company}
- -

${job.description}

-
-
- ${job.location} - -
-
-
+
+
+ +
+
+
${job.title}
+
${job.company}
+ ${job.location} +

${job.description}

+

Salary: ${job.salary}

+

Required Tools: ${job.tools.join(", ")}

+
+
+ +
+
+ ` ) .join("");