Added 'Careers' segment with up-to-date job openings

Author: ceciliasnho

_config.yml

@@ -517,6 +517,25 @@ sag:
     affil: New York University
     url: https://zanna-researchteam.github.io/
 
+#####################################
+#############  Careers  ############
+#####################################
+career-title: Careers
+career-description: Current job openings
+
+roles:
+  - title: Research Software Engineers
+    description: In-person - Manhattan, NYC / Rolling Deadline
+    link: https://apply.interfolio.com/160510
+
+  - title: Postdoctoral Researchers to build large scientific model with astronomical data
+    description: In-person - Paris, France / Feb 14, 2025
+    link: https://aas.org/jobregister/ad/09aadf56
+
+  - title: Postdoctoral Researchers to build large scientific model with solar physics data
+    description: In-person - Manhattan, NYC / Feb 15, 2025
+    link: https://apply.interfolio.com/161867
+
 #####################################
 ########## Pricing Tables ###########
 #####################################

_includes/header-page.html

@@ -37,6 +37,7 @@
               <!-- <li><a href="{{ site.baseurl }}#testimonials">Testimonials</a></li> -->
               <!-- <li class="current-menu-item"><a href="{{ site.baseurl }}#blog">Blog</a></li> -->
               <li><a href="{{ site.baseurl }}/#team">Team</a></li>
+              <li><a href="{{ site.baseurl }}/#careers">Careers</a></li>
               <!-- <li><a href="{{ site.baseurl }}#prices">Prices</a></li> -->
               <!-- <li><a href="{{ site.baseurl }}#contact">Contact</a></li> -->
             </ul>

_includes/header.html

@@ -41,6 +41,7 @@
               <!-- <li><a href="#testimonials">Testimonials</a></li> -->
               <li><a href="#blog">News</a></li>
               <li><a href="#team">Team</a></li>
+              <li><a href="#careers">Careers</a></li>
               <!-- <li><a href="#prices">Prices</a></li> -->
               <!-- <li><a href="#contact">Contact</a></li> -->
             </ul>

_includes/sections/careers.html

@@ -0,0 +1,29 @@
+<!-- Careers Section -->
+<section class="careers-section" id="careers">
+    <div class="container">
+  
+      <!-- Section Heading -->
+      <div class="row text-center">
+  
+        <!-- Section Header -->
+        <header class="col-md-8 col-md-push-2 col-sm-12 section-header">
+          <h2>{{ site.career-title }}</h2>
+          <hr class="normal">
+        </header>
+  
+        <!-- Section Content -->
+        <div class="col-md-8 col-sm-12 section-content">
+          <p>{{ site.career-description }}</p>
+        </div>  
+          <!-- Job listings -->
+          {% for job in site.roles %}
+          <div class="col-md-8 col-sm-12 job-description">
+              <p></p><a href="{{ job.link }}" class="job-title">{{ job.title }}</a>
+              {{ job.description }}</p>        
+          </div>
+          {% endfor %}
+  
+      </div>  
+    </div>
+  </section>
+  

_scss/layout/_careers.scss

@@ -0,0 +1,55 @@
+// Careers Section Styles
+section.careers-section {
+    padding: 100px 0;
+    background-color: $light-bkgd;
+
+    // Section Header
+    header.section-header {
+        h1, h2, h3, h4, h5, h6 {
+            font-weight: bold;
+            text-transform: uppercase;
+            color: $secondary;
+        }
+
+        hr.normal {
+            margin: 40px auto;
+        }
+    }
+
+    // Section Content
+    .section-content {
+        p {
+            font-size: 1.5rem;
+            font-weight: bold;
+            text-align: left;
+            color: $secondary;
+            margin-bottom: 1rem;
+        }
+    }
+
+
+    // Job description styling
+    .job-description{
+        font-size: 1.2rem;
+        font-weight: lighter;
+        text-align: left;
+        color: $secondary;
+        text-decoration: none;
+        margin-bottom: 1rem;
+    }
+
+    // Job title styling
+    .job-title {
+        display: block;
+        
+        font-weight: 500;
+        color: $secondary;
+        text-decoration: none;
+        margin-bottom: 0.25rem;
+
+        &:hover {
+            color: darken($primary, 15%);
+            text-decoration: underline;
+        }
+    }
+}

css/style.scss

@@ -114,5 +114,6 @@
          "layout/_institution",
          "layout/_prices",
          "layout/_contact",
-         "layout/_footer";
+         "layout/_footer",
+         "layout/_careers";
 

index.html

@@ -15,4 +15,6 @@
 
 {% include sections/institutions.html %}
 
+{% include sections/careers.html %}
+
 <!-- include sections/contact.html -->