responsive

_data/blog.yml

@@ -1,8 +1,14 @@
 - title: Providing Data Scientists With New Superpowers
+  info : Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore cum vel nesciunt distinctio nobis
   link : "https://fastpages.fast.ai/actions/markdown/2020/03/06/fastpages-actions.html"
-  image: '/assets/images/blog-1.png'
+  tags : [fastpages]
+
 - title: Microsoft Official Blog Post
+  info : Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore cum vel nesciunt distinctio nobis
   link : "https://techcommunity.microsoft.com/t5/azure-ai/using-github-actions-amp-azure-machine-learning-for-mlops/ba-p/1419027"
-  image: '/assets/images/blog-2.png'
+  tags : [techcommunity]
+  
 - title: Pending - GitHub Official Blog Post - TBD
-  link : "#"
+  info : Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore cum vel nesciunt distinctio nobis
+  link : "#"
+  tags : []

_data/demos.yml

@@ -1,12 +1,14 @@
 - title: GitHub Universe Talk - MLOps
   subtitle: Machine learning operations with GitHub Actions and Kubernetes - GitHub Universe 2019
-  descr: 'From automating mundane tasks to reducing inefficiencies in developers’ workflows, machine learning has the potential to scale your team’s results like never before. However, the practice of deploying machine learning for enterprises is relatively new. In this talk, Hamel and Jeremy will demonstrate how GitHub Actions and Kubernetes can be used to orchestrate machine learning workflows in new ways that increase transparency and reliability of these applications. By borrowing best practices and technologies from DevOps, they’ll help you learn how to deploy machine learning solutions with confidence.'
+  info: 'From automating mundane tasks to reducing inefficiencies in developers’ workflows, machine learning has the potential to scale your team’s results like never before. However, the practice of deploying machine learning for enterprises is relatively new. In this talk, Hamel and Jeremy will demonstrate how GitHub Actions and Kubernetes can be used to orchestrate machine learning workflows in new ways that increase transparency and reliability of these applications. By borrowing best practices and technologies from DevOps, they’ll help you learn how to deploy machine learning solutions with confidence.'
   video_id: Ll50l3fsoYs
+
 - title: Live Demo Actions & ML Workflows
   video_id: S-kn4mmlxFU
   subtitle: GitHub Actions & Machine Learning Workflows with Hamel Husain
-  descr: "Successful machine learning projects often involve employing techniques and practices from software engineering. GitHub Actions provide a new way to incorporate some of these practices in a way that is tailored to data science. In this talk, Hamel will provide a brief tutorial on GitHub Actions, and will show you how you can use this new tool to automate and bring new innovations to your machine learning workflow."
+  info: "Successful machine learning projects often involve employing techniques and practices from software engineering. GitHub Actions provide a new way to incorporate some of these practices in a way that is tailored to data science. In this talk, Hamel will provide a brief tutorial on GitHub Actions, and will show you how you can use this new tool to automate and bring new innovations to your machine learning workflow."
+
 - title: Azure ML + Actions Webinar
-  subtitle: 'The MLOps Live Webinar Series #3- Git-Base d CI CD for Machine Learning & MLOps'
-  descr:
+  subtitle: 'The MLOps Live Webinar Series #3'
+  info: Git-Base d CI CD for Machine Learning & MLOps
   video_id: V8MRYtNeqUc

_data/github_actions.yml

@@ -1,16 +1,38 @@
 - title: "Submit Argo Workflows on GKE "
+  info : "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore cum vel nesciunt distinctio nobis"
   link : "https://github.com/marketplace/actions/submit-argo-workflows-to-gke"
+
 - title: "Submit Argo Workflows on K8s (Cloud agnostic)"
+  info : Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore cum vel nesciunt distinctio nobis
   link : "https://github.com/marketplace/actions/submit-argo-workflows-from-github"
+
 - title: "Fetch runs from Weights & Biases"
+  info : Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore cum vel nesciunt distinctio nobis
   link : "https://github.com/marketplace/actions/get-runs-from-weights-biases"
+
 - title: "To compile, deploy and run Kubeflow pipeline"
+  info : Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore cum vel nesciunt distinctio nobis
   link : "https://github.com/marketplace/actions/kubeflow-compile-deploy-and-run"
+
 - title: "Dockerize GitHub repositories automatically as a Jupyter Server"
+  info : Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore cum vel nesciunt distinctio nobis
   link : "https://github.com/machine-learning-apps/repo2docker-action"
-#- title: [aml-workspace]
-#(https://github.com/marketplace/actions/azure-machine-learning-workspace) - creates an Azure Machine Learning workspace.
-     #- [aml-compute](https://github.com/marketplace/actions/azure-machine-learning-compute-action) - Manage Azure Compute Resources.
-     #- [aml-run](https://github.com/marketplace/actions/azure-machine-learning-run-action) - Run a training job, experiment or pipeline on Azure.
-     #- [aml-registermodel](https://github.com/marketplace/actions/azure-machine-learning-register-model-action) - Register a model on Azure Machine Learning.
-     #- [aml-deploy](https://github.com/marketplace/actions/azure-machine-learning-deploy-action) #- Deploy a model to AKS or ACI.
+
+- title: aml-workspace
+  link : https://github.com/marketplace/actions/azure-machine-learning-workspace) - creates an Azure Machine Learning workspace.
+
+- title:  aml-compute
+  link : "https://github.com/marketplace/actions/azure-machine-learning-compute-action"
+  info : Manage Azure Compute Resources.
+
+- title:  aml-run
+  link : "https://github.com/marketplace/actions/azure-machine-learning-run-action"
+  info : Run a training job, experiment or pipeline on Azure.
+
+- title:  aml-registermodel
+  link : "https://github.com/marketplace/actions/azure-machine-learning-register-model-action"
+  info: Register a model on Azure Machine Learning.
+
+- title:  aml-deploy
+  linr : "https://github.com/marketplace/actions/azure-machine-learning-deploy-action"
+  info: Deploy a model to AKS or ACI.

_includes/disqus_comments.html

@@ -1,20 +0,0 @@
-{%- if page.comments != false and jekyll.environment == "production" -%}
-
-  <div id="disqus_thread"></div>
-  <script>
-    var disqus_config = function () {
-      this.page.url = '{{ page.url | absolute_url }}';
-      this.page.identifier = '{{ page.url | absolute_url }}';
-    };
-
-    (function() {
-      var d = document, s = d.createElement('script');
-
-      s.src = 'https://{{ site.disqus.shortname }}.disqus.com/embed.js';
-
-      s.setAttribute('data-timestamp', +new Date());
-      (d.head || d.body).appendChild(s);
-    })();
-  </script>
-  <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
-{%- endif -%}

_includes/head.html

@@ -3,6 +3,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   {%- seo -%}
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
   {%- feed_meta -%}
   {%- if jekyll.environment == 'production' and site.google_analytics -%}
@@ -10,7 +11,7 @@
   {%- endif -%}
   <style>
     body {
-      background: #000;
+      background: #1b1f23;
     }
   </style>
 </head>

_includes/header.html

@@ -1,7 +1,8 @@
 <header class="site-header" role="banner">
   <div class="navbar">
     <div class="logo">
-      <img src="{{site.logo}}" alt="logo">
+      <!-- <img src="{{site.logo}}" alt="logo"> -->
+      {%- include github.svg -%}
       <a href="/">
         <span>{{site.title}}</span>
       </a>
@@ -10,6 +11,9 @@
       {%- for item in site.data.navigation -%}
       <a href="{{item.link}}">{{item.title}}</a>
       {%- endfor -%}
-    </nav>
+    </nav>  
+    <div class="trigger">
+      {%- include trigger.svg -%}
+    </div>
   </div>
 </header>

_includes/intro.html

@@ -1,10 +1,10 @@
-<section class="intro">
+<section class="intro home_intro">
+    <div class="image_box">
+      <img src="https://ghicons.github.com/assets/images/blue/png/Data-driven%20recommendations.png" alt="page banner">
+    </div>
   <div class="text_box">
     <h1>{{site.title}}</h1>
     <h2>{{site.subtitle}}</h2>
     <p>{{site.description}}</p>
   </div>
-  <div class="image_box">
-    {%- include intro.svg -%}
-  </div>
 </section>

_includes/sect.svg

@@ -0,0 +1 @@
+<svg width="300px" viewBox="0 0 319 275" class="AvatarShape__Shape-sc-1skcmg3-0 cGCHEx"><clipPath id="clip-hexagon" clipPathUnits="objectBoundingBox"><polygon points="0.25 0, 0.75 0, 1 0.5, 0.75 0.98, 0.25 0.98, 0 0.5"></polygon></clipPath><polygon points="80.75 2, 237.25 2, 316 140.5, 237.25 273, 80.75 273, 2 140.5"></polygon></svg>

_includes/trigger.svg

@@ -0,0 +1,4 @@
+    <svg viewBox="0 0 18 15" width="18px" height="15px">
+      <path
+        d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z" />
+    </svg>

_sass/custom.scss

@@ -2,13 +2,27 @@ body {
   box-sizing: border-box;
   display: grid;
   grid-template-rows: 80px 1fr auto;
+  font-family: "Roboto", sans-serif;
 }
 h1 {
-  font-size: 3rem;
+  font-size: 48px;
   font-weight: 700;
+  color: $brand-color;
+  line-height: 1;
 }
 h2 {
-  font-size: 2rem;
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 1.25;
+}
+p {
+  font-size: 16px;
+  line-height: 1.5;
+  display: block;
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
 }
 .site-header {
   z-index: 1000;
@@ -16,25 +30,34 @@ h2 {
   top: 0;
   background: $background-color;
   border-top: none;
+  .trigger {
+    padding-right: 10px;
+    justify-self: end;
+    align-self: center;
+    cursor: pointer;
+    svg {
+      fill: #fff;
+      &:hover {
+        fill: $brand-color;
+      }
+    }
+  }
   .navbar {
     padding: 15px 2%;
     display: grid;
-    grid-template-columns: 300px 1fr;
+    grid-template-columns: 260px 1fr;
     justify-content: space-around;
     .logo {
       display: flex;
       justify-content: space-evenly;
       align-items: center;
       color: $brand-color;
-      font-size: 1.4em;
-      img {
-        height: 50px;
-      }
+      font-size: 1.1em;
     }
     .navigation {
+      display: none;
       align-items: center;
       justify-content: flex-end;
-      display: flex;
       a {
         padding: 10px;
         color: $text-color-s;
@@ -42,28 +65,28 @@ h2 {
     }
   }
 }
-.intro {
-  height: 90vh;
+.grid {
+  display: grid;
+}
+.home_intro {
+  margin-top: 30px;
   display: grid;
-  grid-template-columns: 1fr 1fr;
   gap: 2em;
-  align-items: center;
+  align-items: start;
   .text_box {
-    h1 {
-      font-size: 48px;
-      font-weight: 600;
-      color: $brand-color;
-    }
-    h2 {
-      font-size: 40px;
-      line-height: 1.2;
-    }
     p {
+      font-size: 16px;
       line-height: 1.5;
       color: $text-color-s;
     }
   }
 }
+.image_box img {
+  display: block;
+  width: 70%;
+  margin-left: auto;
+  margin-right: auto;
+}
 .left_sidebar {
   position: fixed;
   left: 0;
@@ -82,16 +105,15 @@ h2 {
   }
 }
 .page-content {
+  width: 100vw;
   display: grid;
-  grid-template-columns: 15% 1fr 15%;
+  grid-template-columns: 10% 1fr 10%;
   grid-template-areas: ". c .";
-  gap: 1rem;
 }
 .content {
   grid-area: c;
   .content_grid {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
     gap: 1rem;
     .content_item {
       position: relative;
@@ -107,6 +129,7 @@ h2 {
       }
       h2 {
         text-align: center;
+        color: $brand-color;
       }
       p {
         text-align: justify;
@@ -134,3 +157,145 @@ h2 {
     }
   }
 }
+
+/* Team page */
+.team_intro .text_box p,
+.team_grid {
+  color: $text-color-t;
+}
+.team_grid {
+  display: grid;
+  gap: 4rem;
+  h1,
+  h2,
+  h3 {
+    color: $brand-color;
+  }
+  .team_item {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    gap: 4rem;
+    a {
+      display: block;
+      position: relative;
+    }
+    svg {
+      position: absolute;
+      fill: #2188ff;
+      width: 100%;
+      top: 0;
+      left: 0;
+      transform: rotate(180deg);
+    }
+    img {
+      width: 100%;
+      border: 3px solid $brand-color;
+      border-radius: 50%;
+      -webkit-border-radius: 50%;
+      -moz-border-radius: 50%;
+      -ms-border-radius: 50%;
+      -o-border-radius: 50%;
+    }
+    &:nth-child(even) {
+      direction: rtl;
+    }
+    .text_box {
+      direction: ltr;
+    }
+  }
+}
+.author_img {
+  top: 15px;
+  display: block;
+  width: 100%;
+  height: fit-content;
+  position: relative;
+}
+.shape {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+.diamond {
+  z-index: 10;
+  width: 0;
+  height: 0;
+  border: 155px solid $background-color;
+  border-bottom-color: transparent;
+  position: relative;
+  top: -155px;
+
+  &:after {
+    content: "";
+    position: absolute;
+    left: -155px;
+    top: 155px;
+    width: 0;
+    height: 0;
+    border: 155px solid $brand-color;
+    border-top-color: transparent;
+  }
+}
+
+/* Blog page */
+.blog_intro {
+  margin-top: 100px;
+  margin-bottom: 20px;
+  height: max-content;
+}
+.posts_list {
+  margin-top: 30px;
+  a {
+    font-size: 24px;
+    color: $brand-color;
+  }
+  .content_item {
+    margin-top: 50px;
+  }
+}
+/* media queries */
+@media screen and (min-width: 768px) {
+  .site-header .navbar {
+    grid-template-columns: 320px 1fr;
+  }
+  .content_grid {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .intro {
+    margin-bottom: 30px;
+    grid-template-columns: 2fr 1fr;
+    grid-template-areas: "a b";
+    .image_box {
+      grid-area: b;
+      img {
+        width: 100%;
+      }
+    }
+    .text_box {
+      grid-area: a;
+    }
+  }
+}
+@media screen and (min-width: 1440px) {
+  .site-header .navbar .navigation {
+    display: flex;
+  }
+  .trigger {
+    display: none;
+  }
+  .content_grid {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+  .page-content {
+    grid-template-columns: 1fr 1000px 1fr;
+  }
+}
+@media screen and (max-width: 767px) {
+  .y_video {
+    width: calc(100vw * 0.8) ;
+    height: calc(100vw * 0.6);
+  }
+}

_sass/custom_old.scss

@@ -0,0 +1,234 @@
+body {
+  box-sizing: border-box;
+  display: grid;
+  grid-template-rows: 80px 1fr auto;
+}
+h1 {
+  font-size: 3rem;
+  font-weight: 700;
+}
+h2 {
+  font-size: 24px;
+}
+.site-header {
+  z-index: 1000;
+  position: sticky;
+  top: 0;
+  background: $background-color;
+  border-top: none;
+  .navbar {
+    padding: 15px 2%;
+    display: grid;
+    grid-template-columns: 320px 1fr;
+    justify-content: space-around;
+    .logo {
+      display: flex;
+      justify-content: space-evenly;
+      align-items: center;
+      color: $brand-color;
+      font-size: 1.1em;
+    }
+    .navigation {
+      align-items: center;
+      justify-content: flex-end;
+      display: flex;
+      a {
+        padding: 10px;
+        color: $text-color-s;
+      }
+    }
+  }
+}
+.intro {
+  height: 70vh;
+  margin-top: 200px;
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 2em;
+  align-items: start;
+  .text_box {
+    h1 {
+      font-size: 48px;
+      font-weight: 600;
+      color: $brand-color;
+    }
+    h2 {
+      font-size: 40px;
+      line-height: 1.2;
+    }
+    p {
+      line-height: 1.5;
+      color: $text-color-s;
+    }
+  }
+}
+.image_box img {
+  width: 100%;
+}
+.left_sidebar {
+  position: fixed;
+  left: 0;
+  top: 100px;
+  padding: 20px 2% 20px 2%;
+  ul {
+    list-style-type: none;
+    margin: 0;
+    a {
+      padding: 5px;
+      color: $sidebar-color;
+      &:hover {
+        color: $sidebar-hover;
+      }
+    }
+  }
+}
+.page-content {
+  display: grid;
+  grid-template-columns: 15% 1fr 15%;
+  grid-template-areas: ". c .";
+  gap: 1rem;
+}
+.content {
+  grid-area: c;
+  .content_grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1rem;
+    .content_item {
+      position: relative;
+      padding: 10px;
+      border: 1px solid $grey-color-dark;
+      border-radius: 5px;
+      -webkit-border-radius: 5px;
+      -moz-border-radius: 5px;
+      -ms-border-radius: 5px;
+      -o-border-radius: 5px;
+      a {
+        color: $text-color;
+      }
+      h2 {
+        text-align: center;
+      }
+      p {
+        text-align: justify;
+      }
+      .card_bg {
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        height: 60%;
+        opacity: 0.3;
+      }
+      .card_icon {
+        display: block;
+        width: 50%;
+        padding-bottom: 10px;
+        margin: 15px auto;
+      }
+      &:hover {
+        background: #000;
+      }
+      .author_image {
+        width: 100%;
+      }
+    }
+  }
+}
+
+/* Team page */
+.team_intro .text_box p,
+.team_grid {
+  color: $text-color-t;
+}
+.team_grid {
+  display: grid;
+  gap: 4rem;
+  h1,
+  h2,
+  h3 {
+    color: $brand-color;
+  }
+  .team_item {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    gap: 4rem;
+    a {
+      display: block;
+      position: relative;
+    }
+    svg {
+      position: absolute;
+      fill: #2188ff;
+      width: 100%;
+      top: 0;
+      left: 0;
+      transform: rotate(180deg);
+    }
+    img {
+      width: 100%;
+      border: 3px solid $brand-color;
+      border-radius: 50%;
+      -webkit-border-radius: 50%;
+      -moz-border-radius: 50%;
+      -ms-border-radius: 50%;
+      -o-border-radius: 50%;
+}
+    &:nth-child(even) {
+      direction: rtl;
+    }
+    .text_box {
+      direction: ltr;
+    }
+  }
+}
+.author_img {
+  top: 15px;
+  display: block;
+  width: 100%;
+  height: fit-content;
+  position: relative;
+}
+.shape {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+.diamond {
+  z-index: 10;
+  width: 0;
+  height: 0;
+  border: 155px solid $background-color;
+  border-bottom-color: transparent;
+  position: relative;
+  top: -155px;
+
+  &:after {
+    content: "";
+    position: absolute;
+    left: -155px;
+    top: 155px;
+    width: 0;
+    height: 0;
+    border: 155px solid $brand-color;
+    border-top-color: transparent;
+  }
+}
+
+/* Blog page */
+.blog_intro {
+  margin-top: 100px;
+  margin-bottom: 20px;
+  height: max-content;
+}
+.posts_list {
+  margin-top: 30px;
+  a {
+    font-size: 24px;
+    color: $brand-color;
+  }
+  .content_item {
+    margin-top: 50px;
+  }
+}

_sass/minima.scss

@@ -3,7 +3,7 @@
 // Define defaults for each variable.
 
 $base-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
-$base-font-size:   16px !default;
+$base-font-size:   20px !default;
 $base-font-weight: 400 !default;
 $small-font-size:  $base-font-size * 0.875 !default;
 $base-line-height: 1.5 !default;
@@ -12,11 +12,11 @@ $spacing-unit:     30px !default;
 
 $text-color:       #fdfdfd !default;
 $text-color-s:     rgb(200,255,255) !default;
-$background-color: #111 !default;
+$text-color-t:     #5a6170 !default;
+$background-color: #1b1f23 !default;
 $brand-color:      #2a7ae2 !default;
-$sidebar-color:      #a6b4cf !default;
-$sidebar-hover:      #d8e2f5 !default;
-
+$sidebar-color:    #a6b4cf !default;
+$sidebar-hover:    #d8e2f5 !default;
 $grey-color:       #828282 !default;
 $grey-color-light: lighten($grey-color, 40%) !default;
 $grey-color-dark:  darken($grey-color, 25%) !default;

_team/hamel.md

@@ -1,30 +1,19 @@
 ---
 layout: author
 title: Hamel Husain
-link : "https://github.com/hamelsmu"
+nick : "hamelsmu"
 image: "/assets/images/hamel.jpg"
 card_bg: "/assets/images/pngfuel.com (8).png"
 ---
 
-Lorem ipsum dolor sit, amet consectetur adipisicing elit. Omnis modi vero placeat, voluptatem tempore temporibus nulla quos provident architecto saepe quasi voluptates nesciunt impedit ipsum veritatis delectus nostrum rem. Quos, possimus autem. Facere, nihil magni accusamus rerum, recusandae provident ducimus <!--more-->praesentium saepe facilis a incidunt deserunt pariatur eligendi laboriosam, eaque enim qui? Ullam error nemo sunt minima enim placeat. Assumenda ab dolore quasi quibusdam cupiditate delectus voluptates. Dolor, perspiciatis? 
+### What drew you into design systems?
 
-## Lorem ipsum dolor
+Over the decades, my primary expertise has slowly migrated from back-end development to front-end. I've always had an interest in design, and working on design systems allows me to explore that interest while continuing to leverage my expertise in front-end engineering.
 
-Lorem ipsum dolor sit, amet consectetur adipisicing elit. Omnis modi vero placeat, voluptatem tempore temporibus nulla quos provident architecto saepe quasi voluptates nesciunt impedit ipsum veritatis delectus nostrum rem. Quos, possimus autem. Facere, nihil magni accusamus rerum, recusandae provident ducimus 
+### Who have you learned from or been inspired by?
 
-* Lorem ipsum dolor sit
-* Omnis modi vero placeat
-* Quos, possimus autem.
+The constant shifts in front-end programming over the years and an intrinsic desire to learn have always been a driving factor in my own exploration of computer programming. I'm fortuante to work with a huge number of talented engineers and designers at GitHub, which is very inspiring and very rewarding.
 
-Reprehenderit quos voluptatibus eos, officiis mollitia, perferendis maiores facilis sed doloribus inventore ipsam, odio impedit autem magni! Accusantium, ullam reiciendis. Nostrum quo veniam voluptates blanditiis aliquam reiciendis, aperiam voluptas iure in!
+### Favorite tools
 
-```
-.page-content {
-  display: grid;
-  grid-template-columns: 15% 1fr 15%;
-  grid-template-areas: ". c .";
-  gap: 1rem;
-}
-```
-
-Reprehenderit quos voluptatibus eos, officiis mollitia, perferendis maiores facilis sed doloribus inventore ipsam, odio impedit autem magni! Accusantium, ullam reiciendis. Nostrum quo veniam voluptates blanditiis aliquam reiciendis, aperiam voluptas iure in!
+Vim, Photoshop, Blender, and a good, old-fashioned shell prompt.

_team/michal.md

@@ -1,9 +1,19 @@
 ---
 layout: author
 title: Michał Jastrzębski
-link : "https://github.com/inc0"
+nick : "inc0"
 image: "/assets/images/michal.png"
 card_bg: "/assets/images/pngfuel.com (2).png"
 ---
 
-Lorem ipsum dolor sit, amet consectetur adipisicing elit. Omnis modi vero placeat, voluptatem tempore temporibus nulla quos provident architecto saepe quasi voluptates nesciunt impedit ipsum veritatis delectus nostrum rem. Quos, possimus autem. Facere, nihil magni accusamus rerum, recusandae provident ducimus <!--more--> praesentium saepe facilis a incidunt deserunt pariatur eligendi laboriosam, eaque enim qui? Ullam error nemo sunt minima enim placeat. Assumenda ab dolore quasi quibusdam cupiditate delectus voluptates. Dolor, perspiciatis? Reprehenderit quos voluptatibus eos, officiis mollitia, perferendis maiores facilis sed doloribus inventore ipsam, odio impedit autem magni! Accusantium, ullam reiciendis. Nostrum quo veniam voluptates blanditiis aliquam reiciendis, aperiam voluptas iure in!
+### What drew you into design systems?
+
+Over the decades, my primary expertise has slowly migrated from back-end development to front-end. I've always had an interest in design, and working on design systems allows me to explore that interest while continuing to leverage my expertise in front-end engineering.
+
+### Who have you learned from or been inspired by?
+
+The constant shifts in front-end programming over the years and an intrinsic desire to learn have always been a driving factor in my own exploration of computer programming. I'm fortuante to work with a huge number of talented engineers and designers at GitHub, which is very inspiring and very rewarding.
+
+### Favorite tools
+
+Vim, Photoshop, Blender, and a good, old-fashioned shell prompt.

_team/zander.md

@@ -1,9 +1,19 @@
 ---
 layout: author
 title: Zander
-link : "https://github.com/awmatheson"
+nick : "awmatheson"
 image: "/assets/images/zander.jpg"
 card_bg: "/assets/images/pngfuel.com (9).png"
 ---
 
-Lorem ipsum dolor sit, amet consectetur adipisicing elit. Omnis modi vero placeat, voluptatem tempore temporibus nulla quos provident architecto saepe quasi voluptates nesciunt impedit ipsum veritatis delectus nostrum rem. Quos, possimus autem. Facere, nihil magni accusamus rerum, recusandae provident ducimus praesentium saepe <!--more-->facilis a incidunt deserunt pariatur eligendi laboriosam, eaque enim qui? Ullam error nemo sunt minima enim placeat. Assumenda ab dolore quasi quibusdam cupiditate delectus voluptates. Dolor, perspiciatis? Reprehenderit quos voluptatibus eos, officiis mollitia, perferendis maiores facilis sed doloribus inventore ipsam, odio impedit autem magni! Accusantium, ullam reiciendis. Nostrum quo veniam voluptates blanditiis aliquam reiciendis, aperiam voluptas iure in!
+### What drew you into design systems?
+
+Over the decades, my primary expertise has slowly migrated from back-end development to front-end. I've always had an interest in design, and working on design systems allows me to explore that interest while continuing to leverage my expertise in front-end engineering.
+
+### Who have you learned from or been inspired by?
+
+The constant shifts in front-end programming over the years and an intrinsic desire to learn have always been a driving factor in my own exploration of computer programming. I'm fortuante to work with a huge number of talented engineers and designers at GitHub, which is very inspiring and very rewarding.
+
+### Favorite tools
+
+Vim, Photoshop, Blender, and a good, old-fashioned shell prompt.

actions.html

@@ -1,18 +1,27 @@
 ---
-layout: default
+layout : default
+title : GitHub Actions
+description : "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti fugit quo magnam blanditiis soluta
+est,
+molestias quaerat perferendis eligendi nobis? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore ratione
+totam odit optio. Impedit incidunt laboriosam doloremque. Molestias, consequatur aut."
 ---
-<section class="actions">
-  <img src="https://ghicons.github.com/assets/images/blue/svg/Actions.svg" alt="actions">
-  <h2>GitHub Actions</h2>
-  <div class="actions_grid">
-    {%- for item in site.data.github_actions -%}
-    <div class="action_card">
-      <a href="{{item.link}}">
-        <h2>{{item.title}}</h2>
-        <img src="{{item.image}}" alt="">
+<section class="intro blog_intro">
+  <div class="text_box">
+    <h1>{{page.title}}</h1>
+    <p>{{page.description}}</p>
+    <div class="posts_list">
+      {%- for item in site.data.github_actions -%}
+      <div class="blog content_item">
+        <a href="{{item.link}}">
+          <h2>{{item.title}}</h2>
+        </a>
         <p>{{item.info}}</p>
-      </a>
+      </div>
+      {%- endfor -%}
     </div>
-    {%- endfor -%}
   </div>
-</section>
+    <div class="image_box">
+      <img src="https://ghicons.github.com/assets/images/blue/svg/Actions.svg" alt="actions">
+    </div>
+</section>

blog.html

@@ -1,18 +1,24 @@
 ---
-layout: default
+layout      : default
+title       : Blog post
+description : Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti fugit quo magnam blanditiis soluta est, molestias quaerat perferendis eligendi nobis? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore ratione totam odit optio. Impedit incidunt laboriosam doloremque. Molestias, consequatur aut.
 ---
-<section class="blog">
-  <header>
+<section class="intro blog_intro">
+  <div class="text_box">
+    <h1>{{page.title}}</h1>
+    <p>{{page.description}}</p>
+    <div class="posts_list">
+      {% for item in site.data.blog %}
+      <div class="blog content_item">
+        <a href="{{item.link}}">
+          <h2>{{item.title}}</h2>
+        </a>
+        <p>{{item.info}}</p>
+      </div>
+      {% endfor %}
+    </div>
+  </div>
+  <div class="image_box">
     <img src="https://ghicons.github.com/assets/images/blue/svg/issue.svg" alt="blog">
-  <h2>Blog Posts</h2>
-</header>
-  <div class="content_grid">
-    {%- for item in site.data.blog -%}
-          <div class="blog content_item>
-            <a href="{{item.link}}">
-            <h2>{{item.title}}</h2>
-            <img src="{{item.image}}" alt="post image">
-            </a>
-          </div>
-    {%- endfor -%}
+  </div>
 </section>

demos.html

@@ -1,13 +1,31 @@
 ---
-layout: default
+layout : default
 title : "Live Demos / Tutorials"
+description : "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore cum vel nesciunt distinctio nobis,
+pariatur, temporibus vitae dolorem, voluptas quam tenetur? Voluptatibus eaque veritatis dolorum corrupti dignissimos,
+saepe porro, molestiae consequatur quas obcaecati necessitatibus velit inventore aspernatur! Modi id a quisquam eaque
+suscipit praesentium quibusdam odio consequuntur eveniet tempora. Quos?"
 ---
-<h1>page.title</h1>
-{%- for item in site.data.demos -%}
-  <h2>{{item.title}}</h2>
-  <h3>{{item.subtitle}}</h3>
-  <p>{{item.descr}}</p>
-  <iframe width="560" height="315" src="https://www.youtube.com/embed/{{item.video_id}}" frameborder="0"
-    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-
-{%- endfor -%}
+<section class="intro blog_intro">
+  <div class="text_box">
+    <h1>{{page.title}}</h1>
+    <p>{{page.description}}</p>
+    <div class="posts_list">
+      {%- for item in site.data.demos -%}
+      <div class="blog content_item">
+        <a href="{{item.link}}">
+          <h2>{{item.title}}</h2>
+        </a>
+        <h3>{{item.subtitle}}</h3>
+        <p>{{item.info}}</p>
+        <iframe class="y_video" width="600" height="400" src="https://www.youtube.com/embed/{{item.video_id}}" frameborder="0"
+          allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
+        </iframe>
+      </div>
+      {%- endfor -%}
+    </div>
+  </div>
+  <div class="image_box">
+    <img src="https://ghicons.github.com/assets/images/blue/svg/Enterprise%20Observability.svg"  alt="demos">
+  </div>
+</section>

team.html

@@ -1,15 +1,35 @@
 ---
-layout: page
-title: Our Team
+layout: default
+title: Meet the team
+description: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore cum vel nesciunt distinctio nobis,
+pariatur, temporibus vitae dolorem, voluptas quam tenetur? Voluptatibus eaque veritatis dolorum corrupti dignissimos,
+saepe porro, molestiae consequatur quas obcaecati necessitatibus velit inventore aspernatur! Modi id a quisquam eaque
+suscipit praesentium quibusdam odio consequuntur eveniet tempora. Quos?"
 ---
-<div class="content_grid">
+<section class="intro team_intro">
+  <div class="image_box">
+    {%- include intro_team.svg -%}
+  </div>
+  <div class="text_box">
+    <h1>{{page.title}}</h1>
+    <p>{{page.description}}</p>
+  </div>
+</section>
+
+<div class="team_grid">
   {% for author in site.team %}
-  <div class="content_item">
-    <a href="{{ author.url }}">
-    <h2>{{ author.title }}</h2>
-      <img class="author_image" src="{{ author.image }}" alt="{{ author.title }}">
-      <p>{{author.excerpt}}</p>
+  <div class="team_item">
+    <a class="author_img" href="https://github.com/{{author.nick}}">
+<!--       <div class="shape">
+        <div class="diamond"></div>
+      </div> -->
+      <img class="author_image" src="{{author.image}}" alt="{{ author.title }}">
     </a>
+    <div class="text_box">
+      <h2>{{ author.title }}</h2>
+      <a href="https://github.com/{{author.nick}}">@{{author.nick}}</a>
+      {{author.content}}
+    </div>
   </div>
   {% endfor %}
 </div>