diff --git a/app.css b/app.css
new file mode 100644
index 0000000..8efebaa
--- /dev/null
+++ b/app.css
@@ -0,0 +1,99 @@
+body {
+ font-family: 'Arial', sans-serif;
+ background-color: #111d4a; /* Dark background for the entire page */
+ color: #f4f4f4; /* Light text color for better readability */
+ margin: 0;
+ padding: 0;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+h1 {
+ color: #f4f4f4; /* Light color for the main heading */
+ margin-bottom: 30px;
+ font-size: 2.5em;
+}
+
+.container {
+ padding: 40px;
+ margin: 0 auto;
+ max-width: 1000px;
+ text-align: center;
+ background-color: #1f2a48; /* Slightly lighter background for the container */
+ border-radius: 8px; /* Rounded corners for the container */
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Soft shadow for depth */
+}
+
+#jobslist {
+ padding-inline-start: 0;
+ list-style-type: none; /* Remove bullets from list items */
+}
+
+.job-section {
+ background-color: #2a3b5a; /* Darker background for each job section */
+ border-radius: 8px;
+ padding: 20px;
+ margin-bottom: 20px; /* Space between job sections */
+}
+
+.main-category {
+ color: #ff9900; /* Bright color for the main category */
+ font-size: 2em;
+ margin-bottom: 20px;
+}
+
+.job-title {
+ color: #00aaff; /* Bright blue for job titles */
+ font-size: 1.5em;
+ margin-bottom: 10px;
+}
+
+.link {
+ display: flex;
+ align-items: center;
+ margin-bottom: 10px; /* Add spacing between items */
+ background-color: #1e2a45; /* Slightly different background for links */
+ border-radius: 4px;
+ padding: 10px;
+}
+
+.category {
+ margin-right: 15px; /* Space between category and URL */
+ font-weight: bold;
+ color: #ffcc00; /* Yellow color for the category */
+}
+
+.link a {
+ color: #00aaff; /* Link color */
+ text-decoration: none; /* Remove underline from links */
+}
+
+.link a:hover {
+ text-decoration: underline; /* Underline on hover for better UX */
+}
+
+#searchBar {
+ width: 100%;
+ height: 40px; /* Increased height for better usability */
+ border-radius: 4px;
+ border: 1px solid #444; /* Darker border for better contrast */
+ padding: 10px;
+ font-size: 14px; /* Slightly larger font size */
+ background-color: #222; /* Darker background for the search bar */
+ color: #f4f4f4; /* Light text color for input */
+}
+
+#searchWrapper {
+ position: relative;
+ margin-bottom: 20px;
+}
+
+#searchWrapper::after {
+ content: '🔍';
+ position: absolute;
+ top: 10px;
+ right: 15px;
+ color: #f4f4f4; /* Light color for the search icon */
+}
diff --git a/app.js b/app.js
new file mode 100644
index 0000000..92e3a62
--- /dev/null
+++ b/app.js
@@ -0,0 +1,83 @@
+const jobslist = document.getElementById('jobslist');
+const searchBar = document.getElementById('searchBar');
+let jobData = [];
+
+searchBar.addEventListener('keyup', (e) => {
+ const searchString = e.target.value.toLowerCase();
+
+ // Filter jobs based on search string
+ const filteredJobs = jobData.flatMap(category => {
+ return Object.entries(category.jobs)
+ .filter(([jobTitle, job]) => {
+ // Check if job title matches search string
+ const jobTitleMatch = jobTitle.toLowerCase().includes(searchString);
+
+ // Check if any link's category or URL matches search string
+ const linksMatch = job.links.some(link =>
+ link.url.toLowerCase().includes(searchString) ||
+ link.category.toLowerCase().includes(searchString)
+ );
+
+ return jobTitleMatch || linksMatch;
+ })
+ .map(([jobTitle, job]) => ({
+ main_category: category.main_category,
+ jobTitle,
+ job
+ }));
+ });
+
+ displayJobs(filteredJobs);
+});
+
+const loadJobs = async () => {
+ try {
+ const res = await fetch('jobs.json'); // Adjust the path if necessary
+ jobData = await res.json(); // Load all categories and jobs
+ displayJobs(jobData.flatMap(category => {
+ return Object.entries(category.jobs).map(([jobTitle, job]) => ({
+ main_category: category.main_category,
+ jobTitle,
+ job
+ }));
+ }));
+ } catch (err) {
+ console.error(err);
+ }
+};
+
+const displayJobs = (jobs) => {
+ let lastCategory = '';
+
+ const htmlString = jobs
+ .map(({ main_category, jobTitle, job }) => {
+ // Check if the main category has changed
+ const isNewCategory = main_category !== lastCategory;
+ lastCategory = main_category;
+
+ const linksHtml = job.links
+ .map(link => `
+
+ ${link.category}
+ ${link.url}
+
+ `)
+ .join('');
+
+ return `
+ ${isNewCategory ? `${main_category}
` : ''}
+
+ `;
+ })
+ .join('');
+
+ jobslist.innerHTML = htmlString;
+};
+
+// Load jobs data when the page is ready
+document.addEventListener('DOMContentLoaded', loadJobs);
diff --git a/careers.docx b/careers.docx
new file mode 100644
index 0000000..eba88ad
Binary files /dev/null and b/careers.docx differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..5f0de15
--- /dev/null
+++ b/index.html
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+ Document
+
+
+
+
+
✨ Job Links ✨
+
+
+
+
+
+