Add contributor story on Porsche Digital Campus projects (#34)

* WIP: Add first draft on PDC contributor story
* Change logo of CTA button
* Finalize PDC blog post
* Rename first image in order to not have it overwritten
* Add hyperlinks
* Center hero image on blog posts
* Don't create smaller images than 1080
* Don't create unneeded smaller images

---------

Signed-off-by: Eduard Itrich <[email protected]>
on-behalf-of: @porscheofficial <[email protected]>

Author: itrich

content/blog/porsche-digital-campus.mdx

@@ -0,0 +1,74 @@
+---
+title: Research @ Porsche Digital Campus
+date: 2023-12-18
+image: /assets/blog/pdc/hero.jpg
+descriptionShort: The Porsche Digital Campus is an innovative initiative with the goal of bringing together research and real-world application in the fields of AI, machine learning, and data science.
+author:
+  name: Porsche Digital Campus
+  description: The Porsche Digital Campus is an innovative initiative with the goal of bringing together research and real-world application in the fields of AI, machine learning, and data science.
+  image: https://uploads-ssl.webflow.com/6419a4c2c9609e21b02a47e8/6454e539d4ea54c08e42aedb_Frame%2010683.png
+  slug: https://campus.porsche.digital/
+readTime: 3min
+---
+
+<ImageText imageSrc="/assets/blog/pdc/team.jpg" imageAlt="Porsche Digital Campus" theme="light"
+    title="Tell us a little more about yourself, your role at Porsche Digital and what topics drive you. ">
+    We are the research team and part of the Porsche Digital Campus: An
+    international group of software technology experts with a clear focus on the
+    application of artificial intelligence as well quantum computing. 
+</ImageText>
+
+<ImageText imageSrc="/assets/blog/pdc/1.png" imageAlt="Porsche Digital Campus" theme="light" left
+    title="Porsche Digital has published several research projects in the field of artificial intelligence on GitHub. How would you explain these projects to a five-year-old? What problem do these projects solve for Porsche?">
+    For the [first project](https://github.com/porscheofficial/sls_sat_solving_with_deep_learning), “Using deep learning to construct stochastic local
+    search SAT solvers with performance bounds”, imagine you have a tricky
+    puzzle. Computers have a special friend, like a magical helper, that helps
+    them solve these puzzles faster and better! We built a magical helper that
+    is really smart and can learn the best way to solve more difficult puzzles
+    quickly. So, with this helper, computers can play and finish more tough
+    puzzles in less time! It’s like having a super-smart friend to help you with
+    your games!  
+
+    For the [second project](https://github.com/porscheofficial/distribution_and_volume_based_isolation_forest), “Distribution and volume based scoring for Isolation
+    Forest’, imagine you have a super-smart robot that can find which toys are
+    different from the others. We made this robot even smarter! The team taught it a
+    new way to look at all the toys and find the different ones more accurately. We
+    tested the new smart robot with lots of toys and found out it can spot the
+    different ones even better than before! So, it’s like having an upgraded robot
+    friend who’s really good at finding unique toys! 
+ 
+    For the [third project](https://github.com/porscheofficial/speed-estimation-traffic-monitoring), “FARSEC: A Reproducible Framework for Automatic Real-Time
+    Vehicle Speed Estimation Using Traffic Cameras”, imagine you have a smart camera
+    that can watch cars and see how fast they are going. This is important to help
+    cars move smoothly on the road and to keep everyone safe. Some smart cameras are
+    good but can only work well with certain videos. In this project, we developed a
+    new software algorithm for smart cameras that can work well with many different
+    videos and can understand how fast cars are going even if the camera is moving.
+    This new camera is easy to use and can be made even smarter in the future!
+</ImageText>
+
+<ImageText imageSrc="/assets/blog/pdc/2.png" imageAlt="Porsche Digital Campus" theme="light"
+    title="By publishing AI research projects as open-source projects, you’ve made a big step ahead in our FOSS movement. What was your initial motivation to take this path? Can you tell us why you’ve chosen to release your project on GitHub?">
+    Today, providing the code and data necessary to reproduce the results
+    presented in a research paper is a necessary requirement for scientific
+    credibility. So being able to make our code available alongside our
+    publications is absolute key to establishing that our work is as credible as
+    that of academic institutions. Porsche’s official [GitHub organization](https://github.com/porscheofficial)
+    is the perfect place to do so.
+</ImageText>
+
+<ImageText imageSrc="/assets/blog/pdc/3.png" imageAlt="Porsche Digital Campus" theme="light" left
+    title="What did you learn along the way? What were the benefits of this strategy for you, your team and Porsche Digital?">
+    We were very keen to see the results of the research. Knowing that we would
+    make the code public was exciting and the team paid even more attention to
+    writing clean code, keeping the size of the repo manageable, and having
+    sensible code structures. This, again, improved the quality of the code and
+    hence the progress of the whole project.
+</ImageText>
+
+<ImageText imageSrc="/assets/blog/pdc/4.png" imageAlt="Porsche Digital Campus" theme="light"
+    title="With a glimpse into the future: What are your further plans regarding FOSS Contributions? Who would you like to see next joining our FOSS Contributor community?">
+    Publishing on GitHub will become the new default way of making the code for
+    studies available alongside academic publications. So, keep your eyes
+    peeled!
+</ImageText>

next.config.js

@@ -9,15 +9,15 @@ const nextConfig = {
   images: {
     loader: "custom",
     // eslint-disable-next-line no-magic-numbers
-    imageSizes: [10, 16, 32, 48, 64, 96, 128, 256, 384],
+    imageSizes: [],
     // eslint-disable-next-line no-magic-numbers
-    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+    deviceSizes: [1200, 1920, 2048, 3840],
   },
   transpilePackages: ["next-image-export-optimizer"],
   env: {
     nextImageExportOptimizer_imageFolderPath: "public/assets",
     nextImageExportOptimizer_exportFolderPath: "out",
-    nextImageExportOptimizer_quality: "75",
+    nextImageExportOptimizer_quality: "90",
     nextImageExportOptimizer_storePicturesInWEBP: "true",
     nextImageExportOptimizer_exportFolderName: "nextImageExportOptimizer",
 

public/assets/blog/pdc/1.png

@@ -82,7 +82,8 @@ const BlogPage: React.FC<PageProps> = ({ params }: PageProps) => {
         description={description}
         subtitle="FOSS@Porsche"
         imageSrc={blog.image}
-        imageAlt=""
+        imageAlt="Hero Image"
+        position="center center"
       />
 
       <Section spacing="none">

public/assets/blog/pdc/2.png

@@ -3,6 +3,7 @@
 .card {
   background: #fff;
   border-radius: $pds-border-radius-medium;
+  overflow: hidden;
 
   @include pds-media-query-min("m") {
     display: grid;

public/assets/blog/pdc/3.png

@@ -13,6 +13,7 @@ interface HeroSectionProps {
   description?: string;
   imageSrc: string | StaticImageData;
   imageAlt: string;
+  position?: string;
 }
 
 export const HeroSection: React.FC<HeroSectionProps> = ({
@@ -21,12 +22,14 @@ export const HeroSection: React.FC<HeroSectionProps> = ({
   description,
   imageSrc,
   imageAlt,
+  position = "right center",
 }) => {
   return (
     <div className={s["hero-container"]}>
       <div className={s["background-image-container"]}>
         <ExportedImage
           className={s["hero-image"]}
+          style={{ objectPosition: position }}
           src={imageSrc}
           alt={imageAlt}
           fill

public/assets/blog/pdc/4.png

@@ -6,12 +6,14 @@
 
   .background-image-container {
     grid-row: 1;
-    height: 50rem;
+    @include pds-media-query-min("m") {
+      height: 50rem;
+    }
+    height: 40rem;
     position: relative;
 
     .hero-image {
       object-fit: cover;
-      object-position: right center;
     }
     .image-overlay {
       background: linear-gradient(