diff --git a/_includes/newsletter-subscribe.html b/_includes/newsletter-subscribe.html
index 773a011..2cc6903 100644
--- a/_includes/newsletter-subscribe.html
+++ b/_includes/newsletter-subscribe.html
@@ -1,32 +1,14 @@
-<div id="mc_embed_signup" class="space-y-10 lg:pl-16 xl:pl-24">
-  <form
-    class="rounded-2xl border border-zinc-100 p-6 dark:border-zinc-700/40"
+<div id="mc_embed_signup" class="space-y-10 lg:pl-16 xl:pl-24 max-w-2xl">
+  <form class="rounded-2xl border border-zinc-100 p-6 dark:border-zinc-700/40"
     action="//broadcastencoders.us7.list-manage.com/subscribe/post?u=87d0f7c65b57565cbc5050728&amp;id=8356552428"
-    method="post"
-    id="mc-embedded-subscribe-form"
-    name="mc-embedded-subscribe-form"
-    class="validate"
-    target="_blank"
-    novalidate
-  >
+    method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank"
+    novalidate>
     <h2 class="flex text-sm font-semibold text-zinc-900 dark:text-zinc-100">
-      <svg
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        aria-hidden="true"
-        class="h-6 w-6 flex-none"
-      >
-        <path
-          d="M2.75 7.75a3 3 0 0 1 3-3h12.5a3 3 0 0 1 3 3v8.5a3 3 0 0 1-3 3H5.75a3 3 0 0 1-3-3v-8.5Z"
-          class="fill-zinc-100 stroke-zinc-400 dark:fill-zinc-100/10 dark:stroke-zinc-500"
-        ></path>
-        <path
-          d="m4 6 6.024 5.479a2.915 2.915 0 0 0 3.952 0L20 6"
-          class="stroke-zinc-400 dark:stroke-zinc-500"
-        ></path>
+      <svg viewBox="0 0 24 24" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
+        aria-hidden="true" class="h-6 w-6 flex-none">
+        <path d="M2.75 7.75a3 3 0 0 1 3-3h12.5a3 3 0 0 1 3 3v8.5a3 3 0 0 1-3 3H5.75a3 3 0 0 1-3-3v-8.5Z"
+          class="fill-zinc-100 stroke-zinc-400 dark:fill-zinc-100/10 dark:stroke-zinc-500"></path>
+        <path d="m4 6 6.024 5.479a2.915 2.915 0 0 0 3.952 0L20 6" class="stroke-zinc-400 dark:stroke-zinc-500"></path>
       </svg>
       <span class="ml-3">Stay up to date</span>
     </h2>
@@ -34,32 +16,22 @@ <h2 class="flex text-sm font-semibold text-zinc-900 dark:text-zinc-100">
       Get notified when I publish something new, and unsubscribe at any time.
     </p>
     <div class="mt-6 flex">
-      <input
-        type="email"
-        value=""
-        name="EMAIL"
-        id="mce-EMAIL"
-        placeholder="Email address"
-        aria-label="Email address"
+      <input type="email" value="" name="EMAIL" id="mce-EMAIL" placeholder="Email address" aria-label="Email address"
         required
-        class="min-w-0 flex-auto appearance-none rounded-md border border-zinc-900/10 bg-white px-3 py-[calc(theme(spacing.2)-1px)] shadow-md shadow-zinc-800/5 placeholder:text-zinc-400 focus:border-teal-500 focus:outline-none focus:ring-4 focus:ring-teal-500/10 dark:border-zinc-700 dark:bg-zinc-700/[0.15] dark:text-zinc-200 dark:placeholder:text-zinc-500 dark:focus:border-teal-400 dark:focus:ring-teal-400/10 sm:text-sm"
-      />
+        class="min-w-0 flex-auto appearance-none rounded-md border border-zinc-900/10 bg-white px-3 py-[calc(theme(spacing.2)-1px)] shadow-md shadow-zinc-800/5 placeholder:text-zinc-400 focus:border-teal-500 focus:outline-none focus:ring-4 focus:ring-teal-500/10 dark:border-zinc-700 dark:bg-zinc-700/[0.15] dark:text-zinc-200 dark:placeholder:text-zinc-500 dark:focus:border-teal-400 dark:focus:ring-teal-400/10 sm:text-sm" />
       <div style="position: absolute; left: -5000px">
-        <input
-          type="text"
-          name="b_87d0f7c65b57565cbc5050728_8356552428"
-          tabindex="-1"
-          value=""
-        />
+        <input type="text" name="b_87d0f7c65b57565cbc5050728_8356552428" tabindex="-1" value="" />
       </div>
-      <button
-        id="mc-embedded-subscribe"
-        value="Subscribe"
+      <button id="mc-embedded-subscribe" value="Subscribe"
         class="inline-flex items-center gap-2 justify-center rounded-md py-2 px-3 text-sm outline-offset-2 transition active:transition-none bg-zinc-800 font-semibold text-zinc-100 hover:bg-zinc-700 active:bg-zinc-800 active:text-zinc-100/70 dark:bg-zinc-700 dark:hover:bg-zinc-600 dark:active:bg-zinc-700 dark:active:text-zinc-100/70 ml-4 flex-none"
-        type="submit"
-      >
+        type="submit">
         Join
       </button>
     </div>
+    {% if show_social %}
+    <div class="flex gap-2 py-3 justify-start px-4">
+      {% include icon-twitter.html %} {% include icon-github.html %}
+    </div>
+    {% endif %}
   </form>
-</div>
+</div>
\ No newline at end of file
diff --git a/_layouts/default.html b/_layouts/default.html
index 9bec70d..c124922 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -18,7 +18,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta charset="utf-8">
   <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
-  <meta name="description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}"/>
+  <meta name="description"
+    content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}" />
   <link rel="canonical" href="{{site.url}}{{page.url}}" />
   <meta name="google-site-verification" content="cXJcXt8PxPjf0yl9Y2B7AjDuc46fq6rD2MtIaDwWB8A" />
 
@@ -29,28 +30,29 @@
   {% include icons-svgs.html %}
 </head>
 
-<body class="min-h-screen flex justify-center py-10">
-  <div class="max-w-5xl w-full px-6">
-    <header class="text-center mb-8">
-        <h1 class="hero__headline text-6xl text-cool-orange">Web Development and the Cloud</h1>
-        <div class="hero__subheadline text-4xl -mt-6">blog</div>
-        <nav class="flex pointer-events-auto justify-center py-4">
-          <ul class="flex justify-center align-middle max-w-fit rounded-full bg-white/90 px-3 text-sm font-medium text-zinc-800 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur dark:bg-zinc-800/90 dark:text-zinc-200 dark:ring-white/10">
-            <li><a class="relative block px-3 py-2 transition hover:text-teal-500 dark:hover:text-teal-400" href="/">Articles</a></li>
-            <li><a class="relative block px-3 py-2 transition hover:text-teal-500 dark:hover:text-teal-400" href="/about">About</a></li>
-          </ul>
-        </nav>
-    </header>
-
-    {{ content }}
-
-    <footer class="text-center mt-8">
-        {% comment}
-        {% include footer.html %}
-        {% endcomment %}
-        <p class="text-gray-500">© 2023 Phil Oxrud. All rights reserved.</p>
-    </footer>
-  </div>
+<body class="p-4 lg:mx-auto flex flex-col min-h-screen max-w-5xl">
+  <header class="text-center mb-8">
+    <h1 class="hero__headline text-[min(10vw,60px)] leading-none text-cool-orange">Web Development and the Cloud</h1>
+    <div class="hero__subheadline text-4xl">blog</div>
+    <nav class="flex pointer-events-auto justify-center py-4">
+      <ul
+        class="flex justify-center align-middle max-w-fit rounded-full bg-white/90 px-3 text-sm font-medium text-zinc-800 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur dark:bg-zinc-800/90 dark:text-zinc-200 dark:ring-white/10">
+        <li><a class="relative block px-3 py-2 transition hover:text-teal-500 dark:hover:text-teal-400"
+            href="/">Articles</a></li>
+        <li><a class="relative block px-3 py-2 transition hover:text-teal-500 dark:hover:text-teal-400"
+            href="/about">About</a></li>
+      </ul>
+    </nav>
+  </header>
+
+  {{ content }}
+
+  <footer class="mt-auto py-6 border-t border-zinc-100 text-center mt-8">
+    {% comment}
+    {% include footer.html %}
+    {% endcomment %}
+    <p class="text-gray-500">©2023 Phil Oxrud. All rights reserved.</p>
+  </footer>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/_layouts/home.html b/_layouts/home.html
index 8a42cbd..9f011ca 100644
--- a/_layouts/home.html
+++ b/_layouts/home.html
@@ -2,20 +2,20 @@
 layout: default
 ---
 
-<div class="main">
+<main>
   <section>
     <div class="flex gap-8">
       <img class="rounded-full object-fill h-16" src="/assets/philoxrud.jpg" class="avatar" />
       {{ site.description }}
     </div>
-    <div class="flex gap-2 py-3 justify-end">
+    <div class="flex gap-2 py-3 justify-end px-4">
       {% include icon-twitter.html %} {% include icon-github.html %}
     </div>
   </section>
 
   <div class="mx-auto grid max-w-xl grid-cols-1 gap-y-20 lg:max-w-none lg:grid-cols-2">
     <section>
-      <h2 class="text-left text-2xl font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">
+      <h2 class="text-center lg:text-left text-2xl font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">
         My Articles and Tutorials
       </h2>
       <ul>
@@ -33,4 +33,4 @@ <h2 class="text-left text-2xl font-semibold tracking-tight text-zinc-800 dark:te
     </section>
     <section>{% include newsletter-subscribe.html %}</section>
   </div>
-</div>
\ No newline at end of file
+</main>
\ No newline at end of file
diff --git a/_layouts/post.html b/_layouts/post.html
index 4cdc2f8..941a1fa 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -1,13 +1,10 @@
 ---
 layout: default
 ---
-<article itemscope itemtype="http://schema.org/BlogPosting">
+<article class="border-b-2" itemscope itemtype="http://schema.org/BlogPosting">
 
   <header class="border-b-2">
-    <h1 itemprop="name headline"
-      class="text-center text-2xl sm:text-3xl font-extrabold text-slate-900 tracking-tight dark:text-slate-200"">{{ page.title | escape }}</h1>
-    <p class=" text-center py-2">
-
+    <p class="text-center py-2">
       <time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
         <svg class="inline h-6 w-5 fill-blue">
           <use xlink:href="#calendar" />
@@ -19,17 +16,22 @@
       &#8226; <span itemprop="author" itemscope itemtype="http://schema.org/Person" class="author"><span
           itemprop="name">{{ page.author }}</span></span>
       {% endif %}
-      </p>
+    </p>
   </header>
 
-  <div class="mx-auto py-8 prose md:prose-lg prose-headings:bold" itemprop="articleBody">
+  <div class="mx-auto py-8 prose md:prose-lg" itemprop="articleBody">
+    <h1 itemprop="name headline">{{ page.title | escape }}</h1>
     {{ content }}
   </div>
 </article>
 
+{% assign show_social = true %}
+<section class="py-4 mx-auto">{% include newsletter-subscribe.html %}</section>
+
 {% if page.comments %}
 <section>
-  <div id="disqus_thread"></div>
+  <div id=" disqus_thread">
+  </div>
   <script>
 
     var disqus_config = function () {
diff --git a/_posts/2014-07-22-creating-youtube-directive.markdown b/_posts/2014-07-22-creating-youtube-directive.md
similarity index 100%
rename from _posts/2014-07-22-creating-youtube-directive.markdown
rename to _posts/2014-07-22-creating-youtube-directive.md
diff --git a/_posts/2023-08-23-github-actions-with-aws.md b/_posts/2023-08-23-github-actions-with-aws.md
new file mode 100644
index 0000000..acd2aed
--- /dev/null
+++ b/_posts/2023-08-23-github-actions-with-aws.md
@@ -0,0 +1,182 @@
+---
+layout: post
+category: posts
+title: Connecting GitHub Actions with AWS S3 using CloudFormation
+author: Phil Oxrud
+comments: true
+description: A CloudFormation tutorial for using GitHub Actions with AWS S3. Can be used for deploying static websites.
+---
+
+_GitHub Actions_ allows the user to create _workflows_ that can automate tasks that can be triggered on certain actions, such as pull requests to specific branches. Typically a workflow will run tests on a PR before presenting it for merge approval. Another use case, and one that will be discussed here, is using a GitHub Actions workflow to build the static assets for a React project and _synching_ the resulting _build artifacts_ to an S3 bucket.
+
+For the purpose of this tutorial we will make the following assumptions:
+
+- You have created a **prod** branch, and would like pushes/merges to this branch to trigger the workflow.
+- The resulting production build assets should be sync'd to the **s3://my-website** s3 bucket.
+- Your GitHub repo is **myorg/my-repo**.
+- The React project is called **my-react-project**.
+- The React production build command is **npm run build**.
+
+## Connecting GitHub with AWS
+
+GitHub Actions needs permissions to run _aws cli_ commands. Previously this was done by creating a new AWS IAM User with the required permissions, generating **AWS_ACCESS_KEY_ID** and **AWS_SECRET_ACCESS_KEY** credentials and storing those in _GitHub Actions Secrets_. This type of authentication is no longer recommended as a best practice. This is because these credentials are what can be considered as _long lived credentials_. Long-lived credentials should be avoided since they are more difficult to keep track of, rotate, and overall present a higher security risk.
+
+Instead, it is best practice to create IAM Roles for specific applications/services, and then let these applications/services _assume_ the Roles when required.
+
+GitHub and AWS can authenticate with each other through the use of _OIDC Authentication_ protocol. To achieve this, we will use AWS to create an `IODCProvider`, whois job will be to authenticate with GitHub Actions and provide it with an IAM Role. GitHub Actions will then _Assume_ this when making aws cli calls on our behalf.
+
+To clarify, we will need to create 2 resources on AWS's side:
+
+- IODCProvider
+- authenticate with GitHub and provide it with a Role
+- IAM Role
+- we need to create a role that will give GitHub the permissions for our AWS resources Specifically access to our S3 bucket.
+
+IAM Roles have two parts: Permissions and Trust Policies. The permission policy assigns to the role permissions for AWS resources, while the Trust Policy simply indicated who can use (assume) this role.
+
+The OIDCProvider, the GitHub access Role and its Trust and Permission policies can all be created using the CloudFormation template below:
+
+```yml
+AWSTemplateFormatVersion: "2010-09-09"
+
+Parameters:
+  WwwBucketName:
+    Type: String
+
+Resources:
+  GitHubOIDCProvider:
+    Type: "AWS::IAM::OIDCProvider"
+    Properties:
+      ClientIdList:
+        - "sts.amazonaws.com"
+      ThumbprintList:
+        - "6938fd4d98bab03faadb97b34396831e3780aea1"
+      Url: https://token.actions.githubusercontent.com
+
+  GitHubActionsRole:
+    Type: "AWS::IAM::Role"
+    Properties:
+      RoleName: "GitHubActionsRole"
+      AssumeRolePolicyDocument:
+        Version: "2012-10-17"
+        Statement:
+          - Effect: Allow
+            Principal:
+              Federated: !Sub "arn:aws:iam::${AWS::AccountId}:oidc-provider/token.actions.githubusercontent.com"
+            Action: "sts:AssumeRoleWithWebIdentity"
+            Condition:
+              StringEquals:
+                {
+                  "token.actions.githubusercontent.com:aud": "sts.amazonaws.com",
+                  "token.actions.githubusercontent.com:sub": "repo:myorg/my-repo:ref:refs/heads/prod"
+                }
+  SyncToS3BucketPermission:
+    Type: "AWS::IAM::Policy"
+    Properties:
+      PolicyName: SyncToS3BucketPolicy
+      PolicyDocument:
+        Version: "2012-10-17"
+        Statement:
+          - Effect: Allow
+            Action:
+              - "s3:PutObject"
+              - "s3:DeleteObject"
+              - "s3:ListBucket"
+            Resource:
+              - !Sub "arn:aws:s3:::${WwwBucketName}"
+              - !Sub "arn:aws:s3:::${WwwBucketName}/*"
+      Roles:
+        - !Ref GitHubActionsRole
+```
+
+This CF template will create a OIDCProvider, a GitHubActionsRole with the required s3 sync permissions, and a trust policy to only allow GitHub to assume this role.
+
+Please note that the condition:
+
+```yml
+StringEquals: { ? ...
+      "token.actions.githubusercontent.com:sub"
+    : "repo:myorg/my-repo:ref:refs/heads/prod" }
+```
+
+is required to make sure that only pushes to our repo and the **prod** branch get authorized.
+
+## Creating a GitHub Actions Workflow
+
+Once we can establish authenticated GitHub => AWS connections we are ready to write our GitHub Actions Workflow.
+
+Workflows are made by creating a `.github/workflow` directory and placing in it workflow yaml files. It is possible to have many simultaneous workflows running in parallel.
+
+For this tutorial we will create a workflow file called `frontend-deploy.yml` and place it in `.github/workflow`
+
+```yml
+# Build and Deploy the frontend assets to AWS S3
+
+name: Deploy frontend
+
+on:
+  push:
+    branches: [prod]
+
+env:
+  AWS_REGION: "us-east-1"
+  BUCKET: "my-website"
+  MY_AWS_ACCOUNT: "111111111111"
+
+permissions:
+  id-token: write
+  contents: read
+
+jobs:
+  deploy:
+    runs-on: ubuntu-22.04
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "18.x"
+
+      - name: Install npm packages
+        run: |
+          cd my-react-project
+          npm i
+
+      - name: Build prod
+        run: |
+          cd my-react-project
+          npm run build
+
+      - name: configure aws credentials
+        uses: aws-actions/configure-aws-credentials@v2
+        with:
+          role-to-assume: "arn:aws:iam::$MY_AWS_ACCOUNT:role/GitHubActionsRole"
+          role-session-name: GitHub_OIDC
+          aws-region: ${{env.AWS_REGION}}
+
+      - name: sync frontend website
+        run: |
+          aws s3 sync my-react-project/build/ s3://${{env.BUCKET}}/
+```
+
+This workflow has a single job called _deploy_ with many steps required to build the react project, setup the aws credentials, and sync the project with the S3 bucket.
+
+The section:
+
+```yml
+on:
+  push:
+    branches: [prod]
+```
+
+is required to make sure that this workflow only triggers on pushes to the `prod` branch.
+
+Finally, the part below is how GitHub sends auth data to AWS:
+
+```yml
+permissions:
+  id-token: write
+  contents: read
+```
diff --git a/about.md b/about.md
new file mode 100644
index 0000000..8935690
--- /dev/null
+++ b/about.md
@@ -0,0 +1,18 @@
+---
+layout: default
+title: "About"
+---
+
+<h2 class="mx-auto pb-4 lg:text-left text-2xl font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">About</h2>
+
+<div class="mx-auto prose">Hi, my name is Phil Oxrud, a Toronto based web developer with a passion for crafting innovative cloud based solutions. Currently my primary focus is on specializing in Node, React, Python, Postgres, and AWS based solutions. Recently I became a certified <i>AWS Solutions Architect Professional.</i> </div>
+
+<div class="mx-auto rounded-2xl  p-10 text-center max-w-sm">
+  <h3 class="text-base font-semibold leading-7 text-gray-900">Get in Touch</h3>
+  <dl class="mt-3 space-y-1 text-sm leading-6 text-gray-600">
+                <div>
+                  <dt class="sr-only">Email</dt>
+                  <dd><a class="font-semibold text-indigo-600" href="mailto:phil@oxrud.com">phil@oxrud.com</a></dd>
+                </div>
+              </dl>
+</div>
diff --git a/assets/css/main.scss b/assets/css/main.scss
index 357c22d..7d41ac3 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -19,7 +19,7 @@
 .hero__headline {
   font-family: 'permanent_markerregular', Arial, sans-serif;
   text-shadow: 2px 2px 3px rgba(0,0,0,0.9);
-  transform: translateY(-50%) rotate(-2deg) rotateY(0);
+  transform:  rotate(-2deg);
 }
 
 .hero__subheadline {