Redesign homepage with updated fields.

_data/fields.json

@@ -1,32 +1,80 @@
 [
   {
-    "title": "Architecture & Design",
-    "tag": "arch",
-    "description": "study principles, methods, and tools to create high-quality software systems while meeting the functional and non-functional requirements of stakeholders"
+    "id": "aise",
+    "title": "AI for Software Engineering",
+    "icon": "field-aise",
+    "description": "study the use of artificial intelligence techniques to improve software development processes and outcomes"
   },
   {
-    "title": "Maintenance & Evolution",
-    "tag": "m&t",
-    "description": "study techniques and tools for managing, modifying, and improving software systems throughout their lifecycle to ensure their continued usefulness and value to stakeholders"
+    "id": "cloud",
+    "title": "Cloud-based Systems",
+    "icon": "field-cloud",
+    "description": "study the design, implementation, and use of software systems that are deployed and operated on cloud computing infrastructure"
   },
   {
+    "id": "devtools",
+    "title": "Developer Tools",
+    "icon": "field-devtools",
+    "description": "study the design, implementation, and use of tools that support software developers in their work, such as integrated development environments, version control systems, and build automation tools"
+  },
+  {
+    "id": "dsl",
+    "title": "Domain-Specific Languages",
+    "icon": "field-dsl",
+    "description": "study the design, implementation, and use of programming languages and tools that are specialized to a particular application domain"
+  },
+  {
+    "id": "distsys",
     "title": "Distributed Systems",
-    "tag": "dist. sys.",
+    "icon": "field-distsys",
     "description": "study methods and technologies for designing, building, and operating computer systems that consist of multiple autonomous components that communicate and coordinate with each other over a network"
   },
   {
+    "id": "ese",
+    "title": "Empirical Software Engineering",
+    "icon": "field-ese",
+    "description": "use of empirical methods to investigate software development processes and artifacts, and to evaluate and compare software engineering techniques and tools"
+  },
+  {
+    "id": "human",
     "title": "Human Factors",
-    "tag": "human",
+    "icon": "field-human",
     "description": "study the interactions between software developers and software systems, with the aim of improving the usability, efficiency, and effectiveness of software development processes and outcomes"
   },
   {
-    "title": "Languages and Compilers",
-    "tag": "lang",
-    "description": "design, implement, and optimize programming languages and their compilers to improve the efficiency, reliability, and usability of software systems"
+    "id": "mntevl",
+    "title": "Maintenance and Evolution",
+    "icon": "field-mntevl",
+    "description": "study techniques and tools for managing, modifying, and improving software systems throughout their lifecycle to ensure their continued usefulness and value to stakeholders"
+  },
+  {
+    "id": "msr",
+    "title": "Mining Software Repositories",
+    "icon": "field-msr",
+    "description": "use of data mining and machine learning techniques to analyze and understand software development processes and artifacts, and to support decision-making in software engineering"
+  },
+  {
+    "id": "oss",
+    "title": "Open Source",
+    "icon": "field-oss",
+    "description": "study the development, use, and governance of software systems that are made available to the public under an open source license"
+  },
+  {
+    "id": "arch",
+    "title": "Software Architecture",
+    "icon": "field-arch",
+    "description": "study principles, methods, and tools to create high-quality software systems while meeting the functional and non-functional requirements of stakeholders"
+  },
+  {
+    "id": "sustsw",
+    "title": "Sustainable Software",
+    "icon": "field-sustsw",
+    "description": "study the environmental and economic impact of software systems, and the design, implementation, and use of software systems that are environmentally friendly and economically viable"
   },
   {
-    "title": "Software Development Analytics",
-    "tag": "sda",
-    "description": "apply data science techniques to software engineering data to gain insights into software development processes, improve software development practices, and support decision-making in software development organizations"
+    "id": "techdebt",
+    "title": "Technical Debt",
+    "icon": "field-techdebt",
+    "description": "study the trade-offs between short-term and long-term benefits of software development activities"
   }
 ]

_data/seo.yml

@@ -1 +1 @@
-copyright_text: 'SEARCH Group • University of Groningen • 2023<br/><span style="font-size: 0.8em;">Powered by <a class="zerostatic" href="https://github.com/zerostaticthemes/jekyll-serif-theme">Jekyll Serif</a>. Graphics by <a class="zerostatic" href="https://fontawesome.com">Font Awesome</a>, <a class="zerostatic" href="https://icons8.com">Icons8</a>, and <a class="zerostatic" href="https://thenounproject.com/vectorsmarket/">Vectors Market</a>.</span>'
+copyright_text: 'SEARCH Group • University of Groningen • 2023<br/><span style="font-size: 0.8em;">Some graphics by <a href="https://fontawesome.com" rel="noopener" target="_blank">Font Awesome</a>, <a href="https://icons8.com" rel="noopener" target="_blank">Icons8</a>, and <a href="https://thenounproject.com/vectorsmarket/" rel="noopener" target="_blank">Vectors Market</a>.</span>'

_includes/footer.html

@@ -6,7 +6,7 @@
           {% if site.data.social %}
             <div class="block">
               {% for item in site.data.social %}
-                <a class="inline-block p-2.5 hover:opacity-80" href="{{ item.link }}" target="blank">
+                <a class="inline-block p-2.5 hover:opacity-80" href="{{ item.link }}" rel="noopener" target="_blank">
                   <svg class="fill-white w-8 h-8"><use xlink:href="{{ item.image | relative_url }}"></use></svg>
                 </a>
               {% endfor %}

_includes/team-card-poster.html

@@ -0,0 +1,38 @@
+<div>
+  <div class="flex items-top">
+    <!-- Member image -->
+    <div class="pr-3">
+      <div class="w-24 h-24 overflow-hidden rounded-md">
+        <img
+          alt="{{ member.title }}"
+          title="{{ member.title }}"
+          loading="lazy"
+          class="w-full"
+          src="{{ member.image | relative_url }}"
+          />
+      </div>
+    </div>
+    <!-- Member info -->
+    <div>
+      <p class="font-serif text-lg text-primary">
+        <a href="{{member.contact.homepage}}" rel="noopener" target="_blank">{{ member.title | remove: "Prof." | remove: "dr." | remove: "ir." | remove: "Dr." }}</a>
+      </p>
+      <p class="text-md text-gray-500">
+        {{ member.position }}
+        {% if member.position_remark %}
+            ({{ member.position_remark }})
+        {% endif %}
+      </p>
+      <p class="flex space-x-2 mt-2">
+        {% for field in member.fields %}
+          <svg class="w-8 h-8 fill-black">
+            <use xlink:href="/assets/graphics/sprites.svg#field-{{ field }}"></use>
+          </svg>
+        {% endfor %}
+      </p>
+    </div>
+  </div>
+  <p class="italic mt-2">
+    <q>{{ member.callout | strip }}</q>
+  </p>
+</div>

_pages/index.html

@@ -7,7 +7,7 @@
   slogan: effective software engineering
   image: "/uploads/branding/search-logo-large.svg"
 vision:
-  title: "Vision & Core Research Fields"
+  title: "Vision"
   text: "Effective software engineering requires healthy software and teams. A healthy software is maintainable, well-performing, with low technical debt, and based on sound design decisions. A healthy team is productive, diverse and inclusive. And healthy software and team amplify each other.  Our research enables the software industry to improve their software and team health."
   image: "/uploads/branding/vision.svg"
 research:
@@ -32,7 +32,7 @@ <h2 class="text-xl xl:text-2xl mb-2 lg:mb-4 hidden md:block">{{ page.hero.subtit
       <div class="block mt-2 lg:mt-6">
         <div class="flex place-content-center md:justify-start">
           {% for item in site.data.social %}
-          <a class="inline-block p-2.5 hover:opacity-80" href="{{ item.link }}" target="blank">
+          <a class="inline-block p-2.5 hover:opacity-80" href="{{ item.link }}" rel="noopener" target="_blank">
             <svg class="w-10 h-10"><use xlink:href="{{ item.image | relative_url }}"></use></svg>
           </a>
           {% endfor %}
@@ -42,11 +42,11 @@ <h2 class="text-xl xl:text-2xl mb-2 lg:mb-4 hidden md:block">{{ page.hero.subtit
   </div>
 </div>
 
-<div class="bg-offwhite py-8 px-4 md:px-0">
+<div class="bg-offwhite py-10 px-4 md:px-0">
   <div class="container mx-auto">
     <div class="flex justify-start items-center">
         <div class="grow">
-          <h2 class="text-2xl lg:text-3xl xl:text-4xl mb-4 lg:mb-6">{{page.vision.title}}</h1>
+          <h2 class="text-2xl lg:text-3xl xl:text-4xl mt-0 mb-4 lg:mb-6">{{page.vision.title}}</h1>
           <p class="font-sans font-light italic md:leading-6 lg:leading-8 xl:leading-10 md:text-lg lg:text-xl xl:text-2xl">
             {{page.vision.text}}
           </p>
@@ -56,24 +56,9 @@ <h2 class="text-2xl lg:text-3xl xl:text-4xl mb-4 lg:mb-6">{{page.vision.title}}<
         </div>
     </div>
   </div>
-  <div class="container mx-auto mt-8">
-    <div class="grid md:grid-cols-2 gap-4">
-      {% for field in site.data.fields %}
-      <div>
-        <h3 class="flex flex-row items-center mb-2 lg:mb-4 xl:mb-5">
-          <span class="font-serif text-primary text-xl lg:text-2xl xl:text-3xl mr-2">{{ field.title }}</span>
-          <span class="font-sans inline-block p-1 text-center text-xs align-baseline leading-none rounded bg-gray-800 text-white">
-            {{ field.tag }}
-          </span>
-        </h3>
-        <p class="text-sm md:text-base lg:text-lg">{{ field.description }}</p>
-      </div>
-      {% endfor %}
-    </div>
-  </div>
 </div>
 
-<div class="container mx-auto px-4 pt-6 pb-10">
+<div class="container mx-auto pt-6">
   <div class="flex flex-wrap justify-center">
     <div class="col-auto">
       <h2 class="text-2xl lg:text-3xl xl:text-4xl mt-10 mb-8 text-center">Head Researchers</h1>
@@ -82,10 +67,20 @@ <h2 class="text-2xl lg:text-3xl xl:text-4xl mt-10 mb-8 text-center">Head Researc
   <div class="grid md:grid-cols-2 xl:grid-cols-3 gap-6">
     {% assign promoted_members = site.team | where: "status.promoted", true | sort: "weight" %}
     {% for member in promoted_members %}
-      {% include team-card-compact.html member=member show_fields=true %}
+      {% include team-card-poster.html member=member %}
     {% endfor %}
   </div>
-  <div class="flex flex-wrap justify-center mt-6">
-    <a class="rounded bg-primary hover:bg-red-500 px-3.5 py-2 text-sm text-white uppercase" href="{{ 'team' | relative_url }}">meet the whole team</a>
+</div>
+
+<div class="container mx-auto px-4 pt-8 pb-10">
+  <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-2">
+    {% for field in site.data.fields %}
+    <p class="flex items-center">
+      <svg class="w-8 h-8 mr-2">
+        <use xlink:href="/assets/graphics/sprites.svg#{{ field.icon }}"></use>
+      </svg>
+      <span class="text-lg">{{ field.title }}</span>
+    </p>
+    {% endfor %}
   </div>
 </div>

_team/andrea-capiluppi.md

@@ -18,9 +18,12 @@ publications:
 social:
   linkedin: "https://www.linkedin.com/in/andrea-capiluppi-54ab63/"
   twitter: "https://twitter.com/DrACapiluppi"
-fields:
-  - m&t
-  - sda
+callout: "Building a software system is one thing, but maintaining it is much more expensive: this is the phase we need to prioritize!"
+fields: # use ids from _data/fields.json
+  - oss
+  - mntevl
+  - msr
+  - aise
 topics:
   - Software development
   - Reuse of architectures and components

_team/ayushi-rastogi.md

@@ -18,8 +18,11 @@ social:
   linkedin: "https://www.linkedin.com/in/ayushirastogi/"
   twitter: "https://twitter.com/Ayushi_Rastogi"
   github: "https://github.com/AyushiRastogi"
-fields:
-  - sda
+callout: "Software data is a boundless reservoir empowering decision-making with greater insight and navigating trade-offs relevant to society (e.g., fairness) and the software industry (e.g., developer productivity)."
+fields: # use ids from _data/fields.json
+  - ese
+  - oss
+  - msr
   - human
 topics:
   - Mining Software Repositories

_team/daniel-feitosa.md

@@ -21,9 +21,12 @@ social:
   twitter: "https://twitter.com/daniel_feitosa"
   mastodon: "https://mastodon.acm.org/@danielfeitosa"
   github: "https://github.com/feitosa-daniel"
-fields:
+callout: "If software development is to evolve, we need human-centered tooling to leverage cross-system knowledge sharing."
+fields: # use ids from _data/fields.json
   - arch
-  - sda
+  - techdebt
+  - devtools
+  - msr
 topics:
   - Technical Debt
   - Quality Assessment

_team/paris-avgeriou.md

@@ -20,9 +20,12 @@ publications:
 social:
   linkedin: "https://www.linkedin.com/in/parisavgeriou/"
   twitter: "https://twitter.com/PAvgeriou"
-fields:
+callout: "Large, complex, and long-lived systems are hard to design and maintain! We need evidence-based tools to make architecture decisions and manage technical debt."
+fields: # use ids from _data/fields.json
   - arch
-  - m&t
+  - mntevl
+  - techdebt
+  - ese
 topics:
   - pattern-based architecture design and evaluation
   - architectural patterns and pattern languages

_team/tijs-van-der-storm.md

@@ -20,9 +20,10 @@ social:
   linkedin: "https://www.linkedin.com/in/tvdstorm/"
   twitter: "https://twitter.com/tvdstorm"
   github: "https://github.com/tvdstorm"
-fields:
-  - lang
-  - arch
+callout: "There’s too much code in the world! We should rethink the software stack with DSLs for better productivity, reliability, and stakeholder communication."
+fields: # use ids from _data/fields.json
+  - devtools
+  - dsl
 topics:
   - Software Language Engineering
   - Language Workbenches

_team/vasilios-andrikopoulos.md

@@ -20,9 +20,12 @@ social:
   linkedin: "https://www.linkedin.com/in/vandriko/"
   twitter: "https://twitter.com/v_andrikopoulos"
   github: "https://github.com/vandriko"
-fields:
+callout: "Software data is a boundless reservoir empowering decision-making with greater insight and navigating trade-offs relevant to society (e.g., fairness) and the software industry (e.g., developer productivity)."
+fields: # use ids from _data/fields.json
   - arch
-  - dist. sys.
+  - cloud
+  - distsys
+  - sustsw
 topics:
   - Cloud Engineering
   - Collective Adaptive Systems and Systems of Systems