Merge new-blog-view. Adds multiple missing things and improves styles

content/_data/authors.yml

@@ -0,0 +1,29 @@
+Olli Mukkula:
+  name        : "Olli Mukkula"
+  bio         : "Application Specialist at CSC, Quantum Technologies"
+  avatar      : "/assets/images/authors/Olli_Mukkula.png"
+
+Joonas Nivala:
+  name        : "Joonas Nivala"
+  bio         : "Quantum Computing trainee at CSC, Quantum Technologies"
+  avatar      : "/assets/images/authors/Joonas_Nivala.jpg"
+
+Nikolas Klemola Tango:
+  name        : "Nikolas Klemola Tango"
+  bio         : "Junior Application Specialist at CSC, Quantum Technologies"
+  avatar      : "/assets/images/authors/Nikolas_Klemola_Tango.jpg"
+
+Huyen Do:
+  name        : "Huyen Do"
+  bio         : "Quantum Computing trainee at CSC, Quantum Technologies"
+  avatar      : "/assets/images/authors/Huyen_Do.jpg"
+
+Meeri Makitalo:
+  name        : "Meeri Mäkitalo"
+  bio         : "Quantum Computing trainee at CSC, Quantum Technologies"
+  avatar      : "/assets/images/authors/Meeri_Makitalo.jpg"
+
+Michael Mucciardi:
+  name        : "Michael Mucciardi"
+  bio         : "Senior Systems Specialist at CSC, Quantum Technologies"
+  avatar      : "/assets/images/authors/Michael_Mucciardi.jpg"  

content/_data/constants.yml

@@ -6,6 +6,8 @@ feedback_email: fiqci-feedback@postit.csc.fi
 header_nav:
   - title: Home
     page: pages/home.md
+  - title: About FiQCI
+    page: pages/about.md
   - title: Get access
     page: pages/access.md
   - title: Blogs and instructions
@@ -38,15 +40,19 @@ access_cards:
     href: FIXME
     teaser: /assets/images/FiQCI-banner.jpg
     description: |-
-      The backbone of the classical HPC resources in FiQCI, and the portal for quantum computing resources, is the pan-European EuroHPC LUMI supercomputer. LUMI is the fastest and greenest supercomputer in Europe, hosted by CSC in Kajaani, Finland.
+      The backbone of the classical HPC resources in FiQCI, and the portal for quantum computing resources, 
+      is the pan-European EuroHPC LUMI supercomputer. LUMI is the fastest and greenest supercomputer in Europe, 
+      hosted by CSC in Kajaani, Finland.
     links:
       - title: Getting started with Lumi
         href: https://www.lumi-supercomputer.eu/get-started/
   - title: Helmi - VTT Q5
     href: FIXME
     teaser: /assets/images/vtt-images/VTT_lab-2.jpg
     description: |-
-      Helmi, the first Finnish quantum computer, co-developed by VTT and IQM Quantum Computers, is operated by VTT in Espoo, Finland. Helmi is based on superconducting technology, and presently provides five qubits. Upgrades to 20, then 50 qubits is planned for the near future.
+      Helmi, the first Finnish quantum computer, co-developed by VTT and IQM Quantum Computers, 
+      is operated by VTT in Espoo, Finland. Helmi is based on superconducting technology, 
+      and presently provides five qubits. Upgrades to 20, then 50 qubits is planned for the near future.
     links:
       - title: How to access Helmi, instructions
         href: FIXME
@@ -56,18 +62,145 @@ access_cards:
     href: FIXME
     teaser: /assets/images/FiQCI-banner.jpg
     description: |-
-      Kvasi, the Atos Quantum Learning Machine or Qaptiva is a quantum computing simulator with which you can learn to use and develop new quantum algorithms. Kvasi provides a platform for developing and simulating quantum algorithms in both ideal and realistic, noisy conditions. Kvasi is capable of simulating algorithms for quantum computers of 30+ qubits.
+      Kvasi, the Atos Quantum Learning Machine or Qaptiva is a quantum computing simulator with which you can learn 
+      to use and develop new quantum algorithms. Kvasi provides a platform for developing and simulating quantum 
+      algorithms in both ideal and realistic, noisy conditions. Kvasi is capable of simulating algorithms for 
+      quantum computers of 30+ qubits.
     links:
       - title: How to access Kvasi, instructions
         href: FIXME
       - title: Read more about Kvasi
         href: FIXME
 
+quantum_resources:
+  - name: Helmi
+    desc: |-
+      Helmi (VTT Q5), the Finnish quantum computer operated by VTT, co-developed with IQM.
+      Helmi is based on superconducting technology, and presently provides five qubits.
+      Upgrades to 20, then 50 qubits is planned for the near future. Helmi is accessible
+      through the LUMI supercomputer environment. The pilot phase for Helmi access is now running!
+    image: "/assets/images/vtt-images/VTT_lab-2.jpg"
+    links:
+      - link: ""
+        teaser: "How to access Helmi, instructions"
+        icon: mdiArrowRight
+      - link: ""
+        teaser: "Read more about Helmi (VTT website)"
+        icon: mdiOpenInNew
+
+  - name: VTT Q50
+    desc: |-
+      Lorem ipsum the Finnish quantum computer operated by VTT, co-developed with IQM.
+      Lorem ipsum is accessible through the LUMI supercomputer environment. The pilot phase
+      for VTT Q50 access is now running!
+    image: "/assets/images/vtt-images/VTT_lab-2.jpg"
+    links:
+      - link: ""
+        teaser: "How to access VTT Q50, instructions"
+        icon: mdiArrowRight
+      - link: ""
+        teaser: "Read more about VTT Q50 (VTT website)"
+        icon: mdiOpenInNew
+
+supercomputer_resources:
+  - name: LUMI
+    desc: |-
+      The backbone of the classical HPC resources in FiQCI, and the portal for quantum computing resources, 
+      is the pan-European EuroHPC LUMI supercomputer. LUMI is the fastest and greenest supercomputer in Europe, 
+      hosted by CSC in Kajaani, Finland.
+    image: "/assets/images/FiQCI-banner.jpg"
+    links:
+      - link: ""
+        teaser: "How to access Lumi"
+        icon: mdiArrowRight
+      - link: ""
+        teaser: "Read more about LUMI (LUMI website)"
+        icon: mdiOpenInNew
+
+emulation_resources:
+  - name: Quantum emuation with LUMI
+    desc: |-
+      With the LUMI supercomputer it is possible to emulate quantum computer with upto 40+ qubits.
+    image: "/assets/images/FiQCI-banner.jpg"
+    links:
+      - link: ""
+        teaser: "Quantum emulation dosumentation"
+        icon: mdiArrowRight
+
+about:
+  desc: |-
+    The Finnish Quantum-Computing Infrastructure (FiQCI) was established in 2020, when it became
+    part of the Finnish Research Infrastructure (FIRI) roadmap of significant national research
+    infrastructures within the Finnish research infrastructure ecosystem, maintained by the
+    Research Council of Finland.
+
+  mission: |-
+    The mission of FiQCI is to provide state-of-the-art quantum-computing services such as
+    computing time and training to the Finnish RDI communities. This includes providing a
+    hybrid high-performance computing and quantum computing (HPC+QC) platform for developing,
+    testing, and exploiting quantum-accelerated computational workflows. Through FiQCI, Finnish
+    researchers have access to one of the most powerful hybrid HPC+nQC resources in the world,
+    available for quantum accelerated research and development. The infrastructure also aims to
+    offer possibilities to carry out experiments in quantum physics.
+
+  maintain: |-
+    FiQCI is jointly maintained, operated, and developed by VTT, Aalto University, and
+    CSC - IT Center for Science.
+
+  advisory-group:
+    desc: |-
+      The Scientific and Technical Advisory Group (STAG) provides input for the operation
+      of the infrastructure. The current (2023) members of the STAG are:
+    people:
+      - name: Dr. Valeria Bartsch
+        institution: Fraunhofer Institute for Industrial Mathematics
+        country: Germany
+
+      - name: Dr. Alba Cervera Lierta
+        institution: Barcelona Supercomputing Center
+        country: Spain
+
+      - name: Prof. Tommi Mikkonen
+        institution: University of Jyväskylä
+        country: Finland
+
+      - name: Prof. Martin Schulz
+        institution: Technical University of Munich
+        country: Germany
+
+      - name: Prof. Göran Wendin
+        institution: Chalmers University of Technology
+        country: Sweden
+
+    management:
+      people:
+        - name: Prof. Mika Prunnila
+          institution: VTT
+          title: FiQCI director
+
+        - name: Dr. Mikael Johansson
+          institution: CSC
+          title: FiQCI vice-director
+
+        - name: Prof. Tapio Ala-Nissilä
+          institution: Aalto University
+          title: FiQCI vice-director
+
+    acknowledgement:
+      desc: |-
+        When publishing the results that utilise the FiQCI infrastructure, users should acknowledge
+        the use of FiQCI, preferably in the format: "These results have been acquired using the
+        Finnish Quantum-Computing Infrastructure
+
+      helmi-link-url: /publications/2022-11-01-Helmi_pilot
+      helmi-link-text: Additionally, users should also acknowledge using Helmi if applicable
+
 logo: assets/images/FiQCI-logo.png
 favicon: assets/images/favicon.png
 footer_icons: assets/footer-icons
 funder_logos: assets/images/funders
 description: >-
-  Web presence of the Finnish Quantum-Computing Infrastructure. We provide state-of-the-art quantum-computing services to Finnish RDI communities.
+  Web presence of the Finnish Quantum-Computing Infrastructure. We provide state-of-the-art quantum-computing 
+  services to Finnish RDI communities.
 excerpt_max_length: 250
 title_separator: " – "

content/_includes/head.html

@@ -11,8 +11,10 @@
   {% include external/mathjax.html -%}
   {% include external/font.html %}
   <script type="text/javascript" src="{{ "site.js" | absolute_url }}" charset="utf-8"></script>
-  {% if page.react %}
+  {% if page.react and (site.pages | where: "name" page.name) %}
     {%- assign react_source = page.name | append: ".js" -%}
+  {% elsif (site.collections | where: "label" page.collection) %}
+    {%- assign react_source = page.layout | append: ".js" %}
   {% else %}
     {%- assign react_source = "default.js" -%}
   {% endif %}

content/_includes/react/root.html

@@ -1 +1 @@
-<div id='{{ include.id }}' class="not-prose"></div>
+<div id='{{ include.id }}' class="not-prose"></div>

content/_includes/react/section-root.html

@@ -1,4 +1,4 @@
-<section class="mx-8 lg:mx-[100px] py-6">
+<section class="mx-2 sm:mx-8 lg:mx-[100px] py-6">
   <div class="flex items-center justify-between mb-6">
     <h2 class="text-3xl font-bold" id="{{ include.heading | slugify }}">{{ include.heading }}</h2>
   </div>

content/_layouts/base.html

@@ -5,7 +5,7 @@
   <body class="flex flex-col min-h-screen">
     {%- include react/root.html id='react-root' -%}
     <header class="sticky top-0 bg-white z-40" id="navigation-header"></header>
-
+    
     <main class="block flex-[1_0]" aria-label="Content">
       {{ content }}
     </main>

content/_layouts/home.html

@@ -2,8 +2,116 @@
 layout: base
 ---
 
+{% assign about_data = site.data.constants.about %}
+
 {%- include react/root.html id='hero' -%}
 
 {{ content }}
 
-{%- include react/root.html id='about-fiqci' -%}
+<div id="about" class="pb-20 text-white bg-[#0D2B53] w-full">
+    <div class="mx-2 sm:mx-8 lg:mx-[100px] min-[2600px]:mx-auto min-[2600px]:max-w-[50vw]">
+        <div class="mx-auto">
+            <div class="hidden md:flex">
+                <div class="flex-auto mt-8 pt-12 mr-0 lg:mr-32 md:mr-20">
+                    <div class="mb-6 ">
+                        <h2 id="about-fiqci" class="text-3xl font-bold">FiQCI mission</h2>
+                    </div>
+                    <div class="pb-4">
+                        <p class="mb-4">
+                            {{ about_data.mission }}
+                        </p>
+                        <p>
+                            {{ about_data.maintain }}
+                        </p>
+
+                        <div class="mt-4">
+                            <a
+                                href="/about/"
+                                class="text-sky-200 hover:underline font-bold"
+                            >
+                                <div class="sm:mx-0 flex items-center gap-3">
+                                    <div class="text-sm">Read more about FiQCI</div>
+                                    <CIcon class="text-lg" path={mdiArrowRight} />
+                                </div>
+                            </a>
+                        </div>
+
+                        <div class="mt-4">
+                            <a
+                                href="/access/"
+                                class="text-sky-200 hover:underline font-bold"
+                            >
+                                <div class="sm:mx-0 flex items-center gap-3">
+                                    <div class="text-sm">How to get access</div>
+                                    <CIcon class="text-lg" path={mdiArrowRight} />
+                                </div>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <div class="w-full pb-4 md:pb-0 md:min-w-64">
+                    <section class="bg-[#0066CC] text-white text-left font-bold text-lg py-8 px-2 sm:px-8">
+                        <p class="mb-4">
+                            Through FiQCI, Finnish researchers have access to one of the most
+                            powerful hybrid HPC+nQC resources in the world.
+                        </p>
+                        <p class="mb-0">
+                            Available for quantum-accelerated research and development.
+                        </p>
+                    </section>
+                </div>
+            </div>
+
+            <div class="flex md:hidden">
+                <div class="flex-auto mt-8 pt-12">
+                    <div class="mb-6 ">
+                        <h2 id="about-fiqci" class="text-3xl font-bold">FiQCI mission</h2>
+                    </div>
+                    <div class="w-full pb-4 md:pb-0 md:min-w-64">
+                        <section class="bg-[#0066CC] text-white text-left font-bold text-lg py-8 px-2 sm:px-8">
+                            <p class="mb-4">
+                                Through FiQCI, Finnish researchers have access to one of the most
+                                powerful hybrid HPC+nQC resources in the world.
+                            </p>
+                            <p class="mb-0">
+                                Available for quantum-accelerated research and development.
+                            </p>
+                        </section>
+                    </div>
+                    <div class="pb-4">
+                        <p class="mb-4">
+                            {{ about_data.mission }}
+                        </p>
+                        <p>
+                            {{ about_data.maintain }}
+                        </p>
+
+                        <div class="mt-4">
+                            <a
+                                href="/about/"
+                                class="text-sky-200 hover:underline font-bold"
+                            >
+                                <div class="sm:mx-0 flex items-center gap-3">
+                                    <div class="text-sm">Read more about FiQCI</div>
+                                    <CIcon class="text-lg" path={mdiArrowRight} />
+                                </div>
+                            </a>
+                        </div>
+
+                        <div class="mt-4">
+                            <a
+                                href="/access/"
+                                class="text-sky-200 hover:underline font-bold"
+                            >
+                                <div class="sm:mx-0 flex items-center gap-3">
+                                    <div class="text-sm">How to get access</div>
+                                    <CIcon class="text-lg" path={mdiArrowRight} />
+                                </div>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

content/_layouts/page.html

@@ -4,10 +4,12 @@
 
 {%- include react/root.html id='banner' -%}
 
-<article class="">
-
-  <div>
+<div class='flex flex-col items-top mb-2'>
+  <div class='mx-2 sm:mx-8 lg:mx-[100px] flex flex-col min-[2600px]:mx-auto min-[2600px]:max-w-[50vw]'>
+    <div class='col-span-2 mt-4 mb-4'>
+      {%- include react/root.html id='breadcrumbs' -%}
+    </div>
+
     {{ content }}
   </div>
-
-</article>
+</div>