From cc946aef40b489448c6491a7212f26269f6726b6 Mon Sep 17 00:00:00 2001
From: praveenpuglia <praveenpuglia@users.noreply.github.com>
Date: Sun, 19 May 2024 11:08:41 +0000
Subject: [PATCH] deploy: 9f765af8cd43418bb7c02a7b333da9a394704bb5

---
 css/blog.css                                  |   1 +
 css/post.css                                  |   8 +
 css/style.css                                 |   9 +
 css/variables.css                             |   3 +-
 index.html                                    | 253 +++++-
 posts/animating-css-snake-art/index.html      | 279 +++++-
 posts/css-toggle-function/index.html          | 273 +++++-
 .../index.html                                | 279 +++++-
 .../index.html                                | 285 ++++++-
 .../index.html                                | 279 +++++-
 .../index.html                                | 279 +++++-
 .../index.html                                | 285 ++++++-
 posts/how-to-use-avif-today/index.html        | 297 ++++++-
 .../index.html                                | 279 +++++-
 posts/index.html                              | 793 +++++++++++-------
 posts/introducing-poppins/index.html          | 285 ++++++-
 .../index.html                                | 279 +++++-
 .../index.html                                | 279 +++++-
 .../index.html                                | 279 +++++-
 posts/meeting-lea-and-chris/index.html        | 273 +++++-
 .../index.html                                | 279 +++++-
 .../index.html                                | 285 ++++++-
 posts/people-i-learn-from/index.html          | 273 +++++-
 posts/ready-steady-gulp/index.html            | 285 ++++++-
 posts/reusing-areas-in-css-grid/index.html    | 279 +++++-
 .../index.html                                | 300 ++++++-
 .../index.html                                | 279 +++++-
 posts/talks-that-impress/index.html           | 273 +++++-
 .../index.html                                | 279 +++++-
 .../index.html                                | 279 +++++-
 posts/white-labeling-vue-cli-pwa/index.html   | 297 ++++++-
 posts/why-vue-is-so-awesome/index.html        | 285 ++++++-
 .../index.html                                | 285 ++++++-
 33 files changed, 7576 insertions(+), 1099 deletions(-)

diff --git a/css/blog.css b/css/blog.css
index 3121889..92435d2 100644
--- a/css/blog.css
+++ b/css/blog.css
@@ -2,4 +2,5 @@
   list-style: none;
   padding: 0;
   margin: 0;
+  margin-top: 3rem;
 }
diff --git a/css/post.css b/css/post.css
index 99a9565..b8a4483 100644
--- a/css/post.css
+++ b/css/post.css
@@ -34,11 +34,19 @@
   font-weight: bold;
 }
 
+.single-post .subtitle {
+  color: var(--color-primary-lighter);
+  font-weight: normal;
+  margin-bottom: 2rem;
+}
+
 .postlist-link .post-title {
   margin-top: 0;
   margin-bottom: 2rem;
 }
 
+
+
 @media (min-width: 768px) {
   .post__metadata {
     flex-direction: row;
diff --git a/css/style.css b/css/style.css
index 665ba5c..8db4b6d 100644
--- a/css/style.css
+++ b/css/style.css
@@ -22,3 +22,12 @@ body {
     font-size: 14px;
   }
 }
+
+@keyframes fade {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
diff --git a/css/variables.css b/css/variables.css
index b2ac3a4..6a56694 100644
--- a/css/variables.css
+++ b/css/variables.css
@@ -2,5 +2,6 @@
   --color-link: #0070f3;
   --accent-color: #002999;
   --color-border-light: #eaeaea;
-  --color-primary: #14252E;
+  --color-primary: #14252e;
+  --color-primary-lighter: #767676;
 }
diff --git a/index.html b/index.html
index 54fa84c..1cd788e 100644
--- a/index.html
+++ b/index.html
@@ -16,11 +16,11 @@
     gtag("config", "UA-22054303-1");
   </script>
 
-  <meta charset="UTF-8" />
+  <meta charset="UTF-8"/>
   <meta
     name="viewport"
     content="width=device-width, initial-scale=1.0, viewport-fit=cover"
-  />
+/>
   <link rel="icon" href="/favicon.ico?v=d41d8cd98f00b204e9800998ecf8427e" type="image/png">
   <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png?v=d41d8cd98f00b204e9800998ecf8427e">
@@ -36,29 +36,31 @@
   <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="manifest" href="/manifest.webmanifest?v=d41d8cd98f00b204e9800998ecf8427e">
-  <meta name="msapplication-TileColor" content="#ffffff" />
-  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
-  <meta name="theme-color" content="#ffffff" />
+  <meta name="view-transition" content="same-origin"/>
+  <meta name="msapplication-TileColor" content="#ffffff"/>
+  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png"/>
+  <meta name="theme-color" content="#ffffff"/>
   <link
     rel="preload"
     href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
     as="style"
     onload="this.onload=null;this.rel='stylesheet'"
-  />
+/>
   <noscript
     ><link
       rel="stylesheet"
       href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
-  /></noscript>
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+/></noscript>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
   <link
     href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap"
     rel="stylesheet"
-  />
+/>
   <link href="/css/style.css?v=d41d8cd98f00b204e9800998ecf8427e" rel="stylesheet">
-   
-
+  
+  
+  
 
 
 
@@ -66,13 +68,13 @@
 
 
 
-  <title>Praveen Puglia</title>
 
 
 
 
+<title></title>
 <meta property="og:site_name" content="Praveen Puglia"/>
-<meta property="og:title" content="undefined - Praveen Puglia"/>
+<meta property="og:title" content=""/>
 <meta property="og:type" content="website"/>
 <meta property="og:url" content="https://praveenpuglia.com/"/>
 <meta property="twitter:url" content="https://praveenpuglia.com/"/>
@@ -94,8 +96,227 @@
   <meta name="twitter:image" content="https://praveenpuglia.com/assets/images/home-banner-mobile.avif"/>
 
 
-</head>
 
+  <style>
+    ::view-transition-old(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-use-avif-today) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-use-avif-today) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-why-vue-is-so-awesome) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-why-vue-is-so-awesome) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-reusing-areas-in-css-grid) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-reusing-areas-in-css-grid) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-animating-css-snake-art) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-animating-css-snake-art) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-css-toggle-function) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-css-toggle-function) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-people-i-learn-from) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-people-i-learn-from) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-introducing-poppins) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-introducing-poppins) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-meeting-lea-and-chris) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-meeting-lea-and-chris) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-talks-that-impress) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-talks-that-impress) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-ready-steady-gulp) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-ready-steady-gulp) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-the-right-html-element-for-icons) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-the-right-html-element-for-icons) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  
+  </style>
+</head>
   <body>
     <div class="site-header">
   <header class="main-header">
@@ -164,4 +385,4 @@ <h3>Past</h3>
 </div>
 
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/posts/animating-css-snake-art/index.html b/posts/animating-css-snake-art/index.html
index c7cf1a7..121aaf8 100644
--- a/posts/animating-css-snake-art/index.html
+++ b/posts/animating-css-snake-art/index.html
@@ -16,11 +16,11 @@
     gtag("config", "UA-22054303-1");
   </script>
 
-  <meta charset="UTF-8" />
+  <meta charset="UTF-8"/>
   <meta
     name="viewport"
     content="width=device-width, initial-scale=1.0, viewport-fit=cover"
-  />
+/>
   <link rel="icon" href="/favicon.ico?v=d41d8cd98f00b204e9800998ecf8427e" type="image/png">
   <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png?v=d41d8cd98f00b204e9800998ecf8427e">
@@ -36,29 +36,31 @@
   <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="manifest" href="/manifest.webmanifest?v=d41d8cd98f00b204e9800998ecf8427e">
-  <meta name="msapplication-TileColor" content="#ffffff" />
-  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
-  <meta name="theme-color" content="#ffffff" />
+  <meta name="view-transition" content="same-origin"/>
+  <meta name="msapplication-TileColor" content="#ffffff"/>
+  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png"/>
+  <meta name="theme-color" content="#ffffff"/>
   <link
     rel="preload"
     href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
     as="style"
     onload="this.onload=null;this.rel='stylesheet'"
-  />
+/>
   <noscript
     ><link
       rel="stylesheet"
       href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
-  /></noscript>
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+/></noscript>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
   <link
     href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap"
     rel="stylesheet"
-  />
+/>
   <link href="/css/style.css?v=d41d8cd98f00b204e9800998ecf8427e" rel="stylesheet">
-   
-
+  
+  
+  
 
 
 
@@ -66,11 +68,11 @@
 
 
 
-  <title>A Snake in CSS - Praveen Puglia</title>
 
 
 
 
+<title>A Snake in CSS - Praveen Puglia</title>
 <meta property="og:site_name" content="Praveen Puglia"/>
 <meta property="og:title" content="A Snake in CSS - Praveen Puglia"/>
 <meta property="og:type" content="website"/>
@@ -94,8 +96,227 @@
   <meta name="twitter:image" content="https://praveenpuglia.com/assets/images/home-banner-mobile.avif"/>
 
 
-</head>
 
+  <style>
+    ::view-transition-old(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-use-avif-today) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-use-avif-today) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-why-vue-is-so-awesome) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-why-vue-is-so-awesome) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-reusing-areas-in-css-grid) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-reusing-areas-in-css-grid) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-animating-css-snake-art) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-animating-css-snake-art) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-css-toggle-function) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-css-toggle-function) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-people-i-learn-from) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-people-i-learn-from) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-introducing-poppins) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-introducing-poppins) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-meeting-lea-and-chris) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-meeting-lea-and-chris) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-talks-that-impress) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-talks-that-impress) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-ready-steady-gulp) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-ready-steady-gulp) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-the-right-html-element-for-icons) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-the-right-html-element-for-icons) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  
+  </style>
+</head>
   <body>
     <div class="site-header">
   <header class="main-header">
@@ -113,19 +334,21 @@ <h3 class="main-header-logo bold">Praveen Puglia</h3>
 </div>
 
     <div class="container">
-      
-<article class="single-post">
-  <h1 class="title">A Snake in CSS</h1>
-  <div class="post__metadata">
-    <time datetime="2017-05-18">18 May, 2017</time>
-    <ul class="post__metadata__tags">
-      <li class="post__metadata__tag">
-        css
-      </li>
-      <li class="post__metadata__tag">
-        animation
-      </li>
-    </ul>
+      <article class="single-post">
+  <div class="single-post__header">
+    <h1 class="title" style="view-transition-name: post-animating-css-snake-art">A Snake in CSS</h1>
+    <h4 class="subtitle"></h4>
+    <div class="post__metadata">
+      <time datetime="2017-05-18">18 May, 2017</time>
+      <ul class="post__metadata__tags">
+          <li class="post__metadata__tag">
+            css
+          </li>
+          <li class="post__metadata__tag">
+            animation
+          </li>
+      </ul>
+    </div>
   </div>
 
   <p>If you think the article has a terrible title, you are right. Moving on...</p>
@@ -273,4 +496,4 @@ <h2>Putting it all together!</h2>
 </div>
 
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/posts/css-toggle-function/index.html b/posts/css-toggle-function/index.html
index 19c03ef..94f931b 100644
--- a/posts/css-toggle-function/index.html
+++ b/posts/css-toggle-function/index.html
@@ -16,11 +16,11 @@
     gtag("config", "UA-22054303-1");
   </script>
 
-  <meta charset="UTF-8" />
+  <meta charset="UTF-8"/>
   <meta
     name="viewport"
     content="width=device-width, initial-scale=1.0, viewport-fit=cover"
-  />
+/>
   <link rel="icon" href="/favicon.ico?v=d41d8cd98f00b204e9800998ecf8427e" type="image/png">
   <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png?v=d41d8cd98f00b204e9800998ecf8427e">
@@ -36,29 +36,31 @@
   <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="manifest" href="/manifest.webmanifest?v=d41d8cd98f00b204e9800998ecf8427e">
-  <meta name="msapplication-TileColor" content="#ffffff" />
-  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
-  <meta name="theme-color" content="#ffffff" />
+  <meta name="view-transition" content="same-origin"/>
+  <meta name="msapplication-TileColor" content="#ffffff"/>
+  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png"/>
+  <meta name="theme-color" content="#ffffff"/>
   <link
     rel="preload"
     href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
     as="style"
     onload="this.onload=null;this.rel='stylesheet'"
-  />
+/>
   <noscript
     ><link
       rel="stylesheet"
       href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
-  /></noscript>
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+/></noscript>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
   <link
     href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap"
     rel="stylesheet"
-  />
+/>
   <link href="/css/style.css?v=d41d8cd98f00b204e9800998ecf8427e" rel="stylesheet">
-   
-
+  
+  
+  
 
 
 
@@ -66,11 +68,11 @@
 
 
 
-  <title>The CSS toggle() Function - Praveen Puglia</title>
 
 
 
 
+<title>The CSS toggle() Function - Praveen Puglia</title>
 <meta property="og:site_name" content="Praveen Puglia"/>
 <meta property="og:title" content="The CSS toggle() Function - Praveen Puglia"/>
 <meta property="og:type" content="website"/>
@@ -94,8 +96,227 @@
   <meta name="twitter:image" content="https://praveenpuglia.com/assets/images/home-banner-mobile.avif"/>
 
 
-</head>
 
+  <style>
+    ::view-transition-old(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-use-avif-today) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-use-avif-today) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-why-vue-is-so-awesome) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-why-vue-is-so-awesome) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-reusing-areas-in-css-grid) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-reusing-areas-in-css-grid) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-animating-css-snake-art) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-animating-css-snake-art) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-css-toggle-function) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-css-toggle-function) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-people-i-learn-from) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-people-i-learn-from) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-introducing-poppins) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-introducing-poppins) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-meeting-lea-and-chris) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-meeting-lea-and-chris) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-talks-that-impress) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-talks-that-impress) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-ready-steady-gulp) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-ready-steady-gulp) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-the-right-html-element-for-icons) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-the-right-html-element-for-icons) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  
+  </style>
+</head>
   <body>
     <div class="site-header">
   <header class="main-header">
@@ -113,16 +334,18 @@ <h3 class="main-header-logo bold">Praveen Puglia</h3>
 </div>
 
     <div class="container">
-      
-<article class="single-post">
-  <h1 class="title">The CSS toggle() Function</h1>
-  <div class="post__metadata">
-    <time datetime="2017-04-25">25 Apr, 2017</time>
-    <ul class="post__metadata__tags">
-      <li class="post__metadata__tag">
-        css
-      </li>
-    </ul>
+      <article class="single-post">
+  <div class="single-post__header">
+    <h1 class="title" style="view-transition-name: post-css-toggle-function">The CSS toggle() Function</h1>
+    <h4 class="subtitle"></h4>
+    <div class="post__metadata">
+      <time datetime="2017-04-25">25 Apr, 2017</time>
+      <ul class="post__metadata__tags">
+          <li class="post__metadata__tag">
+            css
+          </li>
+      </ul>
+    </div>
   </div>
 
   <p>CSS has had <a href="https://drafts.csswg.org/indexes/#functions">functions</a> for a long time now. We use them everyday in colors( e.g <code>rgb()/hsl()</code>), backgrounds( e.g. <code>linear-gradient()</code>), animations(e.g. <code>cubic-bezier()</code>) etc. CSS Values and Units Module Level 4 defines the <a href="https://drafts.csswg.org/css-values-4/#funcdef-toggle"><code>toggle()</code></a> function. Let's take a look.</p>
@@ -275,4 +498,4 @@ <h3>Resources</h3>
 </div>
 
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/posts/design-story-independence-day-cover-photo/index.html b/posts/design-story-independence-day-cover-photo/index.html
index 96843c8..f5cf0c2 100644
--- a/posts/design-story-independence-day-cover-photo/index.html
+++ b/posts/design-story-independence-day-cover-photo/index.html
@@ -16,11 +16,11 @@
     gtag("config", "UA-22054303-1");
   </script>
 
-  <meta charset="UTF-8" />
+  <meta charset="UTF-8"/>
   <meta
     name="viewport"
     content="width=device-width, initial-scale=1.0, viewport-fit=cover"
-  />
+/>
   <link rel="icon" href="/favicon.ico?v=d41d8cd98f00b204e9800998ecf8427e" type="image/png">
   <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png?v=d41d8cd98f00b204e9800998ecf8427e">
@@ -36,29 +36,31 @@
   <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="manifest" href="/manifest.webmanifest?v=d41d8cd98f00b204e9800998ecf8427e">
-  <meta name="msapplication-TileColor" content="#ffffff" />
-  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
-  <meta name="theme-color" content="#ffffff" />
+  <meta name="view-transition" content="same-origin"/>
+  <meta name="msapplication-TileColor" content="#ffffff"/>
+  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png"/>
+  <meta name="theme-color" content="#ffffff"/>
   <link
     rel="preload"
     href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
     as="style"
     onload="this.onload=null;this.rel='stylesheet'"
-  />
+/>
   <noscript
     ><link
       rel="stylesheet"
       href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
-  /></noscript>
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+/></noscript>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
   <link
     href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap"
     rel="stylesheet"
-  />
+/>
   <link href="/css/style.css?v=d41d8cd98f00b204e9800998ecf8427e" rel="stylesheet">
-   
-
+  
+  
+  
 
 
 
@@ -66,11 +68,11 @@
 
 
 
-  <title>Design Story - Independence Day Cover Photo - Praveen Puglia</title>
 
 
 
 
+<title>Design Story - Independence Day Cover Photo - Praveen Puglia</title>
 <meta property="og:site_name" content="Praveen Puglia"/>
 <meta property="og:title" content="Design Story - Independence Day Cover Photo - Praveen Puglia"/>
 <meta property="og:type" content="website"/>
@@ -94,8 +96,227 @@
   <meta name="twitter:image" content="https://praveenpuglia.com/assets/images/home-banner-mobile.avif"/>
 
 
-</head>
 
+  <style>
+    ::view-transition-old(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-use-avif-today) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-use-avif-today) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-why-vue-is-so-awesome) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-why-vue-is-so-awesome) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-reusing-areas-in-css-grid) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-reusing-areas-in-css-grid) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-animating-css-snake-art) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-animating-css-snake-art) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-css-toggle-function) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-css-toggle-function) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-people-i-learn-from) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-people-i-learn-from) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-introducing-poppins) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-introducing-poppins) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-meeting-lea-and-chris) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-meeting-lea-and-chris) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-talks-that-impress) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-talks-that-impress) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-ready-steady-gulp) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-ready-steady-gulp) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-the-right-html-element-for-icons) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-the-right-html-element-for-icons) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  
+  </style>
+</head>
   <body>
     <div class="site-header">
   <header class="main-header">
@@ -113,19 +334,21 @@ <h3 class="main-header-logo bold">Praveen Puglia</h3>
 </div>
 
     <div class="container">
-      
-<article class="single-post">
-  <h1 class="title">Design Story - Independence Day Cover Photo</h1>
-  <div class="post__metadata">
-    <time datetime="2014-08-15">15 Aug, 2014</time>
-    <ul class="post__metadata__tags">
-      <li class="post__metadata__tag">
-        design
-      </li>
-      <li class="post__metadata__tag">
-        india
-      </li>
-    </ul>
+      <article class="single-post">
+  <div class="single-post__header">
+    <h1 class="title" style="view-transition-name: post-design-story-independence-day-cover-photo">Design Story - Independence Day Cover Photo</h1>
+    <h4 class="subtitle"></h4>
+    <div class="post__metadata">
+      <time datetime="2014-08-15">15 Aug, 2014</time>
+      <ul class="post__metadata__tags">
+          <li class="post__metadata__tag">
+            design
+          </li>
+          <li class="post__metadata__tag">
+            india
+          </li>
+      </ul>
+    </div>
   </div>
 
   <p>Let's have a look at it first.</p>
@@ -180,4 +403,4 @@ <h1 class="title">Design Story - Independence Day Cover Photo</h1>
 </div>
 
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/posts/finding-unique-color-strings-in-project/index.html b/posts/finding-unique-color-strings-in-project/index.html
index 7f2ef45..1333ef3 100644
--- a/posts/finding-unique-color-strings-in-project/index.html
+++ b/posts/finding-unique-color-strings-in-project/index.html
@@ -16,11 +16,11 @@
     gtag("config", "UA-22054303-1");
   </script>
 
-  <meta charset="UTF-8" />
+  <meta charset="UTF-8"/>
   <meta
     name="viewport"
     content="width=device-width, initial-scale=1.0, viewport-fit=cover"
-  />
+/>
   <link rel="icon" href="/favicon.ico?v=d41d8cd98f00b204e9800998ecf8427e" type="image/png">
   <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png?v=d41d8cd98f00b204e9800998ecf8427e">
@@ -36,29 +36,31 @@
   <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="manifest" href="/manifest.webmanifest?v=d41d8cd98f00b204e9800998ecf8427e">
-  <meta name="msapplication-TileColor" content="#ffffff" />
-  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
-  <meta name="theme-color" content="#ffffff" />
+  <meta name="view-transition" content="same-origin"/>
+  <meta name="msapplication-TileColor" content="#ffffff"/>
+  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png"/>
+  <meta name="theme-color" content="#ffffff"/>
   <link
     rel="preload"
     href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
     as="style"
     onload="this.onload=null;this.rel='stylesheet'"
-  />
+/>
   <noscript
     ><link
       rel="stylesheet"
       href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
-  /></noscript>
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+/></noscript>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
   <link
     href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap"
     rel="stylesheet"
-  />
+/>
   <link href="/css/style.css?v=d41d8cd98f00b204e9800998ecf8427e" rel="stylesheet">
-   
-
+  
+  
+  
 
 
 
@@ -66,11 +68,11 @@
 
 
 
-  <title>Finding Unique Color Strings In Project - Praveen Puglia</title>
 
 
 
 
+<title>Finding Unique Color Strings In Project - Praveen Puglia</title>
 <meta property="og:site_name" content="Praveen Puglia"/>
 <meta property="og:title" content="Finding Unique Color Strings In Project - Praveen Puglia"/>
 <meta property="og:type" content="website"/>
@@ -94,8 +96,227 @@
   <meta name="twitter:image" content="https://praveenpuglia.com/assets/images/home-banner-mobile.avif"/>
 
 
-</head>
 
+  <style>
+    ::view-transition-old(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-use-avif-today) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-use-avif-today) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-why-vue-is-so-awesome) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-why-vue-is-so-awesome) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-reusing-areas-in-css-grid) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-reusing-areas-in-css-grid) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-animating-css-snake-art) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-animating-css-snake-art) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-css-toggle-function) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-css-toggle-function) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-people-i-learn-from) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-people-i-learn-from) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-introducing-poppins) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-introducing-poppins) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-meeting-lea-and-chris) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-meeting-lea-and-chris) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-talks-that-impress) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-talks-that-impress) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-ready-steady-gulp) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-ready-steady-gulp) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-the-right-html-element-for-icons) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-the-right-html-element-for-icons) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  
+  </style>
+</head>
   <body>
     <div class="site-header">
   <header class="main-header">
@@ -113,22 +334,24 @@ <h3 class="main-header-logo bold">Praveen Puglia</h3>
 </div>
 
     <div class="container">
-      
-<article class="single-post">
-  <h1 class="title">Finding Unique Color Strings In Project</h1>
-  <div class="post__metadata">
-    <time datetime="2015-11-01">01 Nov, 2015</time>
-    <ul class="post__metadata__tags">
-      <li class="post__metadata__tag">
-        regex
-      </li>
-      <li class="post__metadata__tag">
-        javascript
-      </li>
-      <li class="post__metadata__tag">
-        colors
-      </li>
-    </ul>
+      <article class="single-post">
+  <div class="single-post__header">
+    <h1 class="title" style="view-transition-name: post-finding-unique-color-strings-in-project">Finding Unique Color Strings In Project</h1>
+    <h4 class="subtitle"></h4>
+    <div class="post__metadata">
+      <time datetime="2015-11-01">01 Nov, 2015</time>
+      <ul class="post__metadata__tags">
+          <li class="post__metadata__tag">
+            regex
+          </li>
+          <li class="post__metadata__tag">
+            javascript
+          </li>
+          <li class="post__metadata__tag">
+            colors
+          </li>
+      </ul>
+    </div>
   </div>
 
   <p>One of my recent projects is messy with it's color theory. Partly because it's brand new and there are things which will take different directions <em>soon</em>!</p>
@@ -207,4 +430,4 @@ <h1 class="title">Finding Unique Color Strings In Project</h1>
 </div>
 
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/posts/first-scss-experiment-a-blurry-world/index.html b/posts/first-scss-experiment-a-blurry-world/index.html
index fc5f0f9..4c65d6b 100644
--- a/posts/first-scss-experiment-a-blurry-world/index.html
+++ b/posts/first-scss-experiment-a-blurry-world/index.html
@@ -16,11 +16,11 @@
     gtag("config", "UA-22054303-1");
   </script>
 
-  <meta charset="UTF-8" />
+  <meta charset="UTF-8"/>
   <meta
     name="viewport"
     content="width=device-width, initial-scale=1.0, viewport-fit=cover"
-  />
+/>
   <link rel="icon" href="/favicon.ico?v=d41d8cd98f00b204e9800998ecf8427e" type="image/png">
   <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png?v=d41d8cd98f00b204e9800998ecf8427e">
@@ -36,29 +36,31 @@
   <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="manifest" href="/manifest.webmanifest?v=d41d8cd98f00b204e9800998ecf8427e">
-  <meta name="msapplication-TileColor" content="#ffffff" />
-  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
-  <meta name="theme-color" content="#ffffff" />
+  <meta name="view-transition" content="same-origin"/>
+  <meta name="msapplication-TileColor" content="#ffffff"/>
+  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png"/>
+  <meta name="theme-color" content="#ffffff"/>
   <link
     rel="preload"
     href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
     as="style"
     onload="this.onload=null;this.rel='stylesheet'"
-  />
+/>
   <noscript
     ><link
       rel="stylesheet"
       href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
-  /></noscript>
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+/></noscript>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
   <link
     href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap"
     rel="stylesheet"
-  />
+/>
   <link href="/css/style.css?v=d41d8cd98f00b204e9800998ecf8427e" rel="stylesheet">
-   
-
+  
+  
+  
 
 
 
@@ -66,11 +68,11 @@
 
 
 
-  <title>First SCSS Experiment - A Blurry World - Praveen Puglia</title>
 
 
 
 
+<title>First SCSS Experiment - A Blurry World - Praveen Puglia</title>
 <meta property="og:site_name" content="Praveen Puglia"/>
 <meta property="og:title" content="First SCSS Experiment - A Blurry World - Praveen Puglia"/>
 <meta property="og:type" content="website"/>
@@ -94,8 +96,227 @@
   <meta name="twitter:image" content="https://praveenpuglia.com/assets/images/home-banner-mobile.avif"/>
 
 
-</head>
 
+  <style>
+    ::view-transition-old(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-use-avif-today) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-use-avif-today) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-why-vue-is-so-awesome) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-why-vue-is-so-awesome) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-reusing-areas-in-css-grid) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-reusing-areas-in-css-grid) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-animating-css-snake-art) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-animating-css-snake-art) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-css-toggle-function) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-css-toggle-function) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-people-i-learn-from) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-people-i-learn-from) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-introducing-poppins) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-introducing-poppins) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-meeting-lea-and-chris) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-meeting-lea-and-chris) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-talks-that-impress) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-talks-that-impress) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-ready-steady-gulp) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-ready-steady-gulp) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-the-right-html-element-for-icons) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-the-right-html-element-for-icons) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  
+  </style>
+</head>
   <body>
     <div class="site-header">
   <header class="main-header">
@@ -113,19 +334,21 @@ <h3 class="main-header-logo bold">Praveen Puglia</h3>
 </div>
 
     <div class="container">
-      
-<article class="single-post">
-  <h1 class="title">First SCSS Experiment - A Blurry World</h1>
-  <div class="post__metadata">
-    <time datetime="2015-03-19">19 Mar, 2015</time>
-    <ul class="post__metadata__tags">
-      <li class="post__metadata__tag">
-        css
-      </li>
-      <li class="post__metadata__tag">
-        scss
-      </li>
-    </ul>
+      <article class="single-post">
+  <div class="single-post__header">
+    <h1 class="title" style="view-transition-name: post-first-scss-experiment-a-blurry-world">First SCSS Experiment - A Blurry World</h1>
+    <h4 class="subtitle"></h4>
+    <div class="post__metadata">
+      <time datetime="2015-03-19">19 Mar, 2015</time>
+      <ul class="post__metadata__tags">
+          <li class="post__metadata__tag">
+            css
+          </li>
+          <li class="post__metadata__tag">
+            scss
+          </li>
+      </ul>
+    </div>
   </div>
 
   <p>I know. I know. I am late into the business. All cool kids have nailed it completely and I took it up yesterday. But better late than never.</p>
@@ -219,4 +442,4 @@ <h3>SCSS:</h3>
 </div>
 
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/posts/how-i-have-settled-down-to-inconsolata-for-codes/index.html b/posts/how-i-have-settled-down-to-inconsolata-for-codes/index.html
index d87267e..ce14887 100644
--- a/posts/how-i-have-settled-down-to-inconsolata-for-codes/index.html
+++ b/posts/how-i-have-settled-down-to-inconsolata-for-codes/index.html
@@ -16,11 +16,11 @@
     gtag("config", "UA-22054303-1");
   </script>
 
-  <meta charset="UTF-8" />
+  <meta charset="UTF-8"/>
   <meta
     name="viewport"
     content="width=device-width, initial-scale=1.0, viewport-fit=cover"
-  />
+/>
   <link rel="icon" href="/favicon.ico?v=d41d8cd98f00b204e9800998ecf8427e" type="image/png">
   <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png?v=d41d8cd98f00b204e9800998ecf8427e">
@@ -36,29 +36,31 @@
   <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="manifest" href="/manifest.webmanifest?v=d41d8cd98f00b204e9800998ecf8427e">
-  <meta name="msapplication-TileColor" content="#ffffff" />
-  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
-  <meta name="theme-color" content="#ffffff" />
+  <meta name="view-transition" content="same-origin"/>
+  <meta name="msapplication-TileColor" content="#ffffff"/>
+  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png"/>
+  <meta name="theme-color" content="#ffffff"/>
   <link
     rel="preload"
     href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
     as="style"
     onload="this.onload=null;this.rel='stylesheet'"
-  />
+/>
   <noscript
     ><link
       rel="stylesheet"
       href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
-  /></noscript>
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+/></noscript>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
   <link
     href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap"
     rel="stylesheet"
-  />
+/>
   <link href="/css/style.css?v=d41d8cd98f00b204e9800998ecf8427e" rel="stylesheet">
-   
-
+  
+  
+  
 
 
 
@@ -66,11 +68,11 @@
 
 
 
-  <title>I Have Settle Down To Inconsolata For Code - Praveen Puglia</title>
 
 
 
 
+<title>I Have Settle Down To Inconsolata For Code - Praveen Puglia</title>
 <meta property="og:site_name" content="Praveen Puglia"/>
 <meta property="og:title" content="I Have Settle Down To Inconsolata For Code - Praveen Puglia"/>
 <meta property="og:type" content="website"/>
@@ -94,8 +96,227 @@
   <meta name="twitter:image" content="https://praveenpuglia.com/assets/images/home-banner-mobile.avif"/>
 
 
-</head>
 
+  <style>
+    ::view-transition-old(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-use-avif-today) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-use-avif-today) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-why-vue-is-so-awesome) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-why-vue-is-so-awesome) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-reusing-areas-in-css-grid) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-reusing-areas-in-css-grid) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-animating-css-snake-art) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-animating-css-snake-art) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-css-toggle-function) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-css-toggle-function) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-people-i-learn-from) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-people-i-learn-from) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-introducing-poppins) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-introducing-poppins) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-meeting-lea-and-chris) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-meeting-lea-and-chris) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-talks-that-impress) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-talks-that-impress) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-ready-steady-gulp) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-ready-steady-gulp) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-the-right-html-element-for-icons) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-the-right-html-element-for-icons) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  
+  </style>
+</head>
   <body>
     <div class="site-header">
   <header class="main-header">
@@ -113,19 +334,21 @@ <h3 class="main-header-logo bold">Praveen Puglia</h3>
 </div>
 
     <div class="container">
-      
-<article class="single-post">
-  <h1 class="title">I Have Settle Down To Inconsolata For Code</h1>
-  <div class="post__metadata">
-    <time datetime="2014-07-29">29 Jul, 2014</time>
-    <ul class="post__metadata__tags">
-      <li class="post__metadata__tag">
-        typography
-      </li>
-      <li class="post__metadata__tag">
-        font
-      </li>
-    </ul>
+      <article class="single-post">
+  <div class="single-post__header">
+    <h1 class="title" style="view-transition-name: post-how-i-have-settled-down-to-inconsolata-for-codes">I Have Settle Down To Inconsolata For Code</h1>
+    <h4 class="subtitle"></h4>
+    <div class="post__metadata">
+      <time datetime="2014-07-29">29 Jul, 2014</time>
+      <ul class="post__metadata__tags">
+          <li class="post__metadata__tag">
+            typography
+          </li>
+          <li class="post__metadata__tag">
+            font
+          </li>
+      </ul>
+    </div>
   </div>
 
   <p>Choosing the coding font that suits your style is a difficult job. It has to impress you with it's curves, spaces and visual aesthetics. For me, there are these specific things that mattered the most.</p>
@@ -191,4 +414,4 @@ <h1 class="title">I Have Settle Down To Inconsolata For Code</h1>
 </div>
 
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/posts/how-to-import-markdown-files-in-vue-cli-typescript-project/index.html b/posts/how-to-import-markdown-files-in-vue-cli-typescript-project/index.html
index 1a44857..541901a 100644
--- a/posts/how-to-import-markdown-files-in-vue-cli-typescript-project/index.html
+++ b/posts/how-to-import-markdown-files-in-vue-cli-typescript-project/index.html
@@ -16,11 +16,11 @@
     gtag("config", "UA-22054303-1");
   </script>
 
-  <meta charset="UTF-8" />
+  <meta charset="UTF-8"/>
   <meta
     name="viewport"
     content="width=device-width, initial-scale=1.0, viewport-fit=cover"
-  />
+/>
   <link rel="icon" href="/favicon.ico?v=d41d8cd98f00b204e9800998ecf8427e" type="image/png">
   <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png?v=d41d8cd98f00b204e9800998ecf8427e">
@@ -36,29 +36,31 @@
   <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="manifest" href="/manifest.webmanifest?v=d41d8cd98f00b204e9800998ecf8427e">
-  <meta name="msapplication-TileColor" content="#ffffff" />
-  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
-  <meta name="theme-color" content="#ffffff" />
+  <meta name="view-transition" content="same-origin"/>
+  <meta name="msapplication-TileColor" content="#ffffff"/>
+  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png"/>
+  <meta name="theme-color" content="#ffffff"/>
   <link
     rel="preload"
     href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
     as="style"
     onload="this.onload=null;this.rel='stylesheet'"
-  />
+/>
   <noscript
     ><link
       rel="stylesheet"
       href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
-  /></noscript>
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+/></noscript>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
   <link
     href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap"
     rel="stylesheet"
-  />
+/>
   <link href="/css/style.css?v=d41d8cd98f00b204e9800998ecf8427e" rel="stylesheet">
-   
-
+  
+  
+  
 
 
 
@@ -66,11 +68,11 @@
 
 
 
-  <title>Import Markdown Files in Vue CLI + TypeScript Projects - Praveen Puglia</title>
 
 
 
 
+<title>Import Markdown Files in Vue CLI + TypeScript Projects - Praveen Puglia</title>
 <meta property="og:site_name" content="Praveen Puglia"/>
 <meta property="og:title" content="Import Markdown Files in Vue CLI + TypeScript Projects - Praveen Puglia"/>
 <meta property="og:type" content="website"/>
@@ -94,8 +96,227 @@
   <meta name="twitter:image" content="https://praveenpuglia.com/assets/images/home-banner-mobile.avif"/>
 
 
-</head>
 
+  <style>
+    ::view-transition-old(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-use-avif-today) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-use-avif-today) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-why-vue-is-so-awesome) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-why-vue-is-so-awesome) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-reusing-areas-in-css-grid) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-reusing-areas-in-css-grid) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-animating-css-snake-art) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-animating-css-snake-art) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-css-toggle-function) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-css-toggle-function) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-people-i-learn-from) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-people-i-learn-from) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-introducing-poppins) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-introducing-poppins) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-meeting-lea-and-chris) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-meeting-lea-and-chris) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-talks-that-impress) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-talks-that-impress) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-ready-steady-gulp) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-ready-steady-gulp) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-the-right-html-element-for-icons) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-the-right-html-element-for-icons) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  
+  </style>
+</head>
   <body>
     <div class="site-header">
   <header class="main-header">
@@ -113,22 +334,24 @@ <h3 class="main-header-logo bold">Praveen Puglia</h3>
 </div>
 
     <div class="container">
-      
-<article class="single-post">
-  <h1 class="title">Import Markdown Files in Vue CLI + TypeScript Projects</h1>
-  <div class="post__metadata">
-    <time datetime="2021-02-17">17 Feb, 2021</time>
-    <ul class="post__metadata__tags">
-      <li class="post__metadata__tag">
-        markdown
-      </li>
-      <li class="post__metadata__tag">
-        typescript
-      </li>
-      <li class="post__metadata__tag">
-        vue.js
-      </li>
-    </ul>
+      <article class="single-post">
+  <div class="single-post__header">
+    <h1 class="title" style="view-transition-name: post-how-to-import-markdown-files-in-vue-cli-typescript-project">Import Markdown Files in Vue CLI + TypeScript Projects</h1>
+    <h4 class="subtitle"></h4>
+    <div class="post__metadata">
+      <time datetime="2021-02-17">17 Feb, 2021</time>
+      <ul class="post__metadata__tags">
+          <li class="post__metadata__tag">
+            markdown
+          </li>
+          <li class="post__metadata__tag">
+            typescript
+          </li>
+          <li class="post__metadata__tag">
+            vue.js
+          </li>
+      </ul>
+    </div>
   </div>
 
   <p>Recently, I came across the need to import a markdown file in a Vue component and realized that the internet is full of confusing solutions. Fiddled around for a few hours and found out that it's really quite simple.</p>
@@ -210,4 +433,4 @@ <h1 class="title">Import Markdown Files in Vue CLI + TypeScript Projects</h1>
 </div>
 
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/posts/how-to-use-avif-today/index.html b/posts/how-to-use-avif-today/index.html
index c8fa2c1..37e9f6b 100644
--- a/posts/how-to-use-avif-today/index.html
+++ b/posts/how-to-use-avif-today/index.html
@@ -16,11 +16,11 @@
     gtag("config", "UA-22054303-1");
   </script>
 
-  <meta charset="UTF-8" />
+  <meta charset="UTF-8"/>
   <meta
     name="viewport"
     content="width=device-width, initial-scale=1.0, viewport-fit=cover"
-  />
+/>
   <link rel="icon" href="/favicon.ico?v=d41d8cd98f00b204e9800998ecf8427e" type="image/png">
   <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png?v=d41d8cd98f00b204e9800998ecf8427e">
@@ -36,29 +36,31 @@
   <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="manifest" href="/manifest.webmanifest?v=d41d8cd98f00b204e9800998ecf8427e">
-  <meta name="msapplication-TileColor" content="#ffffff" />
-  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
-  <meta name="theme-color" content="#ffffff" />
+  <meta name="view-transition" content="same-origin"/>
+  <meta name="msapplication-TileColor" content="#ffffff"/>
+  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png"/>
+  <meta name="theme-color" content="#ffffff"/>
   <link
     rel="preload"
     href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
     as="style"
     onload="this.onload=null;this.rel='stylesheet'"
-  />
+/>
   <noscript
     ><link
       rel="stylesheet"
       href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
-  /></noscript>
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+/></noscript>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
   <link
     href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap"
     rel="stylesheet"
-  />
+/>
   <link href="/css/style.css?v=d41d8cd98f00b204e9800998ecf8427e" rel="stylesheet">
-   
-
+  
+  
+  
 
 
 
@@ -66,11 +68,11 @@
 
 
 
-  <title>Use AVIF today - Praveen Puglia</title>
 
 
 
 
+<title>Use AVIF today - Praveen Puglia</title>
 <meta property="og:site_name" content="Praveen Puglia"/>
 <meta property="og:title" content="Use AVIF today - Praveen Puglia"/>
 <meta property="og:type" content="website"/>
@@ -85,17 +87,236 @@
 />
 
 
-<meta name="description" content="Web Developer since the days of Internet Explorer. Frontend Architect @smallcase"/>
-<meta name="twitter:description" content="Web Developer since the days of Internet Explorer. Frontend Architect @smallcase"/>
-<meta property="og:description" content="Web Developer since the days of Internet Explorer. Frontend Architect @smallcase"/>
+<meta name="description" content="Short post on how to serve AVIF today with fallback for unsupported browsers."/>
+<meta name="twitter:description" content="Short post on how to serve AVIF today with fallback for unsupported browsers."/>
+<meta property="og:description" content="Short post on how to serve AVIF today with fallback for unsupported browsers."/>
 
 
   <meta property="og:image" content="https://praveenpuglia.com/assets/images/home-banner-mobile.avif"/>
   <meta name="twitter:image" content="https://praveenpuglia.com/assets/images/home-banner-mobile.avif"/>
 
 
-</head>
 
+  <style>
+    ::view-transition-old(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-use-avif-today) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-use-avif-today) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-why-vue-is-so-awesome) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-why-vue-is-so-awesome) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-reusing-areas-in-css-grid) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-reusing-areas-in-css-grid) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-animating-css-snake-art) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-animating-css-snake-art) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-css-toggle-function) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-css-toggle-function) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-people-i-learn-from) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-people-i-learn-from) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-introducing-poppins) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-introducing-poppins) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-meeting-lea-and-chris) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-meeting-lea-and-chris) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-talks-that-impress) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-talks-that-impress) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-ready-steady-gulp) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-ready-steady-gulp) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-the-right-html-element-for-icons) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-the-right-html-element-for-icons) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  
+  </style>
+</head>
   <body>
     <div class="site-header">
   <header class="main-header">
@@ -113,25 +334,27 @@ <h3 class="main-header-logo bold">Praveen Puglia</h3>
 </div>
 
     <div class="container">
-      
-<article class="single-post">
-  <h1 class="title">Use AVIF today</h1>
-  <div class="post__metadata">
-    <time datetime="2021-07-08">08 Jul, 2021</time>
-    <ul class="post__metadata__tags">
-      <li class="post__metadata__tag">
-        avif
-      </li>
-      <li class="post__metadata__tag">
-        image
-      </li>
-      <li class="post__metadata__tag">
-        compression
-      </li>
-      <li class="post__metadata__tag">
-        html
-      </li>
-    </ul>
+      <article class="single-post">
+  <div class="single-post__header">
+    <h1 class="title" style="view-transition-name: post-how-to-use-avif-today">Use AVIF today</h1>
+    <h4 class="subtitle">Short post on how to serve AVIF today with fallback for unsupported browsers.</h4>
+    <div class="post__metadata">
+      <time datetime="2021-07-08">08 Jul, 2021</time>
+      <ul class="post__metadata__tags">
+          <li class="post__metadata__tag">
+            avif
+          </li>
+          <li class="post__metadata__tag">
+            image
+          </li>
+          <li class="post__metadata__tag">
+            compression
+          </li>
+          <li class="post__metadata__tag">
+            html
+          </li>
+      </ul>
+    </div>
   </div>
 
   <p>Short one!</p>
@@ -190,4 +413,4 @@ <h1 class="title">Use AVIF today</h1>
 </div>
 
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/posts/import-sass-variables-in-javascript-with-webpack/index.html b/posts/import-sass-variables-in-javascript-with-webpack/index.html
index b6cae9c..241c2c8 100644
--- a/posts/import-sass-variables-in-javascript-with-webpack/index.html
+++ b/posts/import-sass-variables-in-javascript-with-webpack/index.html
@@ -16,11 +16,11 @@
     gtag("config", "UA-22054303-1");
   </script>
 
-  <meta charset="UTF-8" />
+  <meta charset="UTF-8"/>
   <meta
     name="viewport"
     content="width=device-width, initial-scale=1.0, viewport-fit=cover"
-  />
+/>
   <link rel="icon" href="/favicon.ico?v=d41d8cd98f00b204e9800998ecf8427e" type="image/png">
   <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png?v=d41d8cd98f00b204e9800998ecf8427e">
@@ -36,29 +36,31 @@
   <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="manifest" href="/manifest.webmanifest?v=d41d8cd98f00b204e9800998ecf8427e">
-  <meta name="msapplication-TileColor" content="#ffffff" />
-  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
-  <meta name="theme-color" content="#ffffff" />
+  <meta name="view-transition" content="same-origin"/>
+  <meta name="msapplication-TileColor" content="#ffffff"/>
+  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png"/>
+  <meta name="theme-color" content="#ffffff"/>
   <link
     rel="preload"
     href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
     as="style"
     onload="this.onload=null;this.rel='stylesheet'"
-  />
+/>
   <noscript
     ><link
       rel="stylesheet"
       href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
-  /></noscript>
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+/></noscript>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
   <link
     href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap"
     rel="stylesheet"
-  />
+/>
   <link href="/css/style.css?v=d41d8cd98f00b204e9800998ecf8427e" rel="stylesheet">
-   
-
+  
+  
+  
 
 
 
@@ -66,11 +68,11 @@
 
 
 
-  <title>Import Sass variables in JavaScript with Webpack - Praveen Puglia</title>
 
 
 
 
+<title>Import Sass variables in JavaScript with Webpack - Praveen Puglia</title>
 <meta property="og:site_name" content="Praveen Puglia"/>
 <meta property="og:title" content="Import Sass variables in JavaScript with Webpack - Praveen Puglia"/>
 <meta property="og:type" content="website"/>
@@ -94,8 +96,227 @@
   <meta name="twitter:image" content="https://praveenpuglia.com/assets/images/home-banner-mobile.avif"/>
 
 
-</head>
 
+  <style>
+    ::view-transition-old(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-use-avif-today) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-use-avif-today) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-why-vue-is-so-awesome) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-why-vue-is-so-awesome) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-reusing-areas-in-css-grid) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-reusing-areas-in-css-grid) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-animating-css-snake-art) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-animating-css-snake-art) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-css-toggle-function) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-css-toggle-function) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-people-i-learn-from) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-people-i-learn-from) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-introducing-poppins) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-introducing-poppins) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-meeting-lea-and-chris) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-meeting-lea-and-chris) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-talks-that-impress) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-talks-that-impress) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-ready-steady-gulp) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-ready-steady-gulp) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-the-right-html-element-for-icons) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-the-right-html-element-for-icons) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  
+  </style>
+</head>
   <body>
     <div class="site-header">
   <header class="main-header">
@@ -113,19 +334,21 @@ <h3 class="main-header-logo bold">Praveen Puglia</h3>
 </div>
 
     <div class="container">
-      
-<article class="single-post">
-  <h1 class="title">Import Sass variables in JavaScript with Webpack</h1>
-  <div class="post__metadata">
-    <time datetime="2021-01-24">24 Jan, 2021</time>
-    <ul class="post__metadata__tags">
-      <li class="post__metadata__tag">
-        sass
-      </li>
-      <li class="post__metadata__tag">
-        webpack
-      </li>
-    </ul>
+      <article class="single-post">
+  <div class="single-post__header">
+    <h1 class="title" style="view-transition-name: post-import-sass-variables-in-javascript-with-webpack">Import Sass variables in JavaScript with Webpack</h1>
+    <h4 class="subtitle"></h4>
+    <div class="post__metadata">
+      <time datetime="2021-01-24">24 Jan, 2021</time>
+      <ul class="post__metadata__tags">
+          <li class="post__metadata__tag">
+            sass
+          </li>
+          <li class="post__metadata__tag">
+            webpack
+          </li>
+      </ul>
+    </div>
   </div>
 
   <p>Wouldn't that be great?</p>
@@ -207,4 +430,4 @@ <h1 class="title">Import Sass variables in JavaScript with Webpack</h1>
 </div>
 
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/posts/index.html b/posts/index.html
index e29a767..5912c34 100644
--- a/posts/index.html
+++ b/posts/index.html
@@ -16,11 +16,11 @@
     gtag("config", "UA-22054303-1");
   </script>
 
-  <meta charset="UTF-8" />
+  <meta charset="UTF-8"/>
   <meta
     name="viewport"
     content="width=device-width, initial-scale=1.0, viewport-fit=cover"
-  />
+/>
   <link rel="icon" href="/favicon.ico?v=d41d8cd98f00b204e9800998ecf8427e" type="image/png">
   <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png?v=d41d8cd98f00b204e9800998ecf8427e">
@@ -36,29 +36,31 @@
   <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="manifest" href="/manifest.webmanifest?v=d41d8cd98f00b204e9800998ecf8427e">
-  <meta name="msapplication-TileColor" content="#ffffff" />
-  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
-  <meta name="theme-color" content="#ffffff" />
+  <meta name="view-transition" content="same-origin"/>
+  <meta name="msapplication-TileColor" content="#ffffff"/>
+  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png"/>
+  <meta name="theme-color" content="#ffffff"/>
   <link
     rel="preload"
     href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
     as="style"
     onload="this.onload=null;this.rel='stylesheet'"
-  />
+/>
   <noscript
     ><link
       rel="stylesheet"
       href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
-  /></noscript>
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+/></noscript>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
   <link
     href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap"
     rel="stylesheet"
-  />
+/>
   <link href="/css/style.css?v=d41d8cd98f00b204e9800998ecf8427e" rel="stylesheet">
-   
-
+  
+  
+  
 
 
 
@@ -66,11 +68,11 @@
 
 
 
-  <title>Posts - Praveen Puglia</title>
 
 
 
 
+<title>Posts - Praveen Puglia</title>
 <meta property="og:site_name" content="Praveen Puglia"/>
 <meta property="og:title" content="Posts - Praveen Puglia"/>
 <meta property="og:type" content="website"/>
@@ -94,8 +96,227 @@
   <meta name="twitter:image" content="https://praveenpuglia.com/assets/images/home-banner-mobile.avif"/>
 
 
-</head>
 
+  <style>
+    ::view-transition-old(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-use-avif-today) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-use-avif-today) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-why-vue-is-so-awesome) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-why-vue-is-so-awesome) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-reusing-areas-in-css-grid) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-reusing-areas-in-css-grid) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-animating-css-snake-art) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-animating-css-snake-art) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-css-toggle-function) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-css-toggle-function) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-people-i-learn-from) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-people-i-learn-from) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-introducing-poppins) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-introducing-poppins) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-meeting-lea-and-chris) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-meeting-lea-and-chris) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-talks-that-impress) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-talks-that-impress) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-ready-steady-gulp) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-ready-steady-gulp) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-the-right-html-element-for-icons) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-the-right-html-element-for-icons) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  
+  </style>
+</head>
   <body>
     <div class="site-header">
   <header class="main-header">
@@ -113,283 +334,281 @@ <h3 class="main-header-logo bold">Praveen Puglia</h3>
 </div>
 
     <div class="container">
-      
-<h1 class="title">Posts</h1>
+      <h1 class="title">Posts</h1>
 
 <ol reversed class="posts-list">
   
-  <li class="post">
-    <time class="post-date" datetime="2023-01-06">06 Jan, 2023</time>
-    <a href="/posts/secret-page-dev-info-vite-react/" class="postlist-link">
-      <h3 class="post-title">
-        A secret, deployment version page for developers
-        
-      </h3>
-    </a>
-  </li>
-  
-  <li class="post">
-    <time class="post-date" datetime="2021-07-17">17 Jul, 2021</time>
-    <a href="/posts/white-labeling-vue-cli-pwa/" class="postlist-link">
-      <h3 class="post-title">
-        White Labeling, Vue CLI &amp; PWA
-        
-      </h3>
-    </a>
-  </li>
-  
-  <li class="post">
-    <time class="post-date" datetime="2021-07-08">08 Jul, 2021</time>
-    <a href="/posts/how-to-use-avif-today/" class="postlist-link">
-      <h3 class="post-title">
-        Use AVIF today
-        
-      </h3>
-    </a>
-  </li>
-  
-  <li class="post">
-    <time class="post-date" datetime="2021-02-17">17 Feb, 2021</time>
-    <a href="/posts/how-to-import-markdown-files-in-vue-cli-typescript-project/" class="postlist-link">
-      <h3 class="post-title">
-        Import Markdown Files in Vue CLI + TypeScript Projects
-        
-      </h3>
-    </a>
-  </li>
-  
-  <li class="post">
-    <time class="post-date" datetime="2021-01-26">26 Jan, 2021</time>
-    <a href="/posts/my-graphql-schema-types-generation-workflow copy/" class="postlist-link">
-      <h3 class="post-title">
-        My GraphQL Schema &amp; Types Generation Workflow
-        
-      </h3>
-    </a>
-  </li>
-  
-  <li class="post">
-    <time class="post-date" datetime="2021-01-24">24 Jan, 2021</time>
-    <a href="/posts/import-sass-variables-in-javascript-with-webpack/" class="postlist-link">
-      <h3 class="post-title">
-        Import Sass variables in JavaScript with Webpack
-        
-      </h3>
-    </a>
-  </li>
-  
-  <li class="post">
-    <time class="post-date" datetime="2019-04-09">09 Apr, 2019</time>
-    <a href="/posts/managing-mixins-and-utils-in-vue/" class="postlist-link">
-      <h3 class="post-title">
-        Managing Mixins &amp; Utilities in VueJS
-        
-      </h3>
-    </a>
-  </li>
-  
-  <li class="post">
-    <time class="post-date" datetime="2018-04-06">06 Apr, 2018</time>
-    <a href="/posts/why-vue-is-so-awesome/" class="postlist-link">
-      <h3 class="post-title">
-        Why Vue Is So Awesome 😍
-        
-      </h3>
-    </a>
-  </li>
-  
-  <li class="post">
-    <time class="post-date" datetime="2017-10-26">26 Oct, 2017</time>
-    <a href="/posts/nicer-imports-with-webpack-aliases/" class="postlist-link">
-      <h3 class="post-title">
-        Nicer imports with webpack aliases
-        
-      </h3>
-    </a>
-  </li>
-  
-  <li class="post">
-    <time class="post-date" datetime="2017-09-18">18 Sep, 2017</time>
-    <a href="/posts/reusing-areas-in-css-grid/" class="postlist-link">
-      <h3 class="post-title">
-        Reusing Areas In CSS Grid
-        
-      </h3>
-    </a>
-  </li>
-  
-  <li class="post">
-    <time class="post-date" datetime="2017-05-18">18 May, 2017</time>
-    <a href="/posts/animating-css-snake-art/" class="postlist-link">
-      <h3 class="post-title">
-        A Snake in CSS
-        
-      </h3>
-    </a>
-  </li>
-  
-  <li class="post">
-    <time class="post-date" datetime="2017-04-25">25 Apr, 2017</time>
-    <a href="/posts/css-toggle-function/" class="postlist-link">
-      <h3 class="post-title">
-        The CSS toggle() Function
-        
-      </h3>
-    </a>
-  </li>
-  
-  <li class="post">
-    <time class="post-date" datetime="2016-05-18">18 May, 2016</time>
-    <a href="/posts/make-your-web-apps-little-more-native/" class="postlist-link">
-      <h3 class="post-title">
-        Make your web apps look a little more native
-        
-      </h3>
-    </a>
-  </li>
-  
-  <li class="post">
-    <time class="post-date" datetime="2016-02-13">13 Feb, 2016</time>
-    <a href="/posts/people-i-learn-from/" class="postlist-link">
-      <h3 class="post-title">
-        People I Learn From
-        
-      </h3>
-    </a>
-  </li>
-  
-  <li class="post">
-    <time class="post-date" datetime="2015-12-20">20 Dec, 2015</time>
-    <a href="/posts/introducing-poppins/" class="postlist-link">
-      <h3 class="post-title">
-        Introducing Poppins - An Eye Popping, Light Sublime Text 3 Syntax Theme
-        
-      </h3>
-    </a>
-  </li>
-  
-  <li class="post">
-    <time class="post-date" datetime="2015-12-11">11 Dec, 2015</time>
-    <a href="/posts/meeting-lea-and-chris/" class="postlist-link">
-      <h3 class="post-title">
-        Meeting Lea &amp; Chris
-        
-      </h3>
-    </a>
-  </li>
-  
-  <li class="post">
-    <time class="post-date" datetime="2015-11-01">01 Nov, 2015</time>
-    <a href="/posts/finding-unique-color-strings-in-project/" class="postlist-link">
-      <h3 class="post-title">
-        Finding Unique Color Strings In Project
-        
-      </h3>
-    </a>
-  </li>
-  
-  <li class="post">
-    <time class="post-date" datetime="2015-09-06">06 Sep, 2015</time>
-    <a href="/posts/talks-that-impress/" class="postlist-link">
-      <h3 class="post-title">
-        Talks That Impress
-        
-      </h3>
-    </a>
-  </li>
-  
-  <li class="post">
-    <time class="post-date" datetime="2015-06-28">28 Jun, 2015</time>
-    <a href="/posts/ready-steady-gulp/" class="postlist-link">
-      <h3 class="post-title">
-        Ready Steady Gulp!
-        
-      </h3>
-    </a>
-  </li>
-  
-  <li class="post">
-    <time class="post-date" datetime="2015-03-19">19 Mar, 2015</time>
-    <a href="/posts/first-scss-experiment-a-blurry-world/" class="postlist-link">
-      <h3 class="post-title">
-        First SCSS Experiment - A Blurry World
-        
-      </h3>
-    </a>
-  </li>
-  
-  <li class="post">
-    <time class="post-date" datetime="2015-03-17">17 Mar, 2015</time>
-    <a href="/posts/tree-style-directory-structure-powershell/" class="postlist-link">
-      <h3 class="post-title">
-        Tree Like Directory Structure In PowerShell
-        
-      </h3>
-    </a>
-  </li>
-  
-  <li class="post">
-    <time class="post-date" datetime="2015-02-17">17 Feb, 2015</time>
-    <a href="/posts/the-right-html-element-for-icons/" class="postlist-link">
-      <h3 class="post-title">
-        The Right HTML Element For Icons
-        
-      </h3>
-    </a>
-  </li>
-  
-  <li class="post">
-    <time class="post-date" datetime="2015-02-12">12 Feb, 2015</time>
-    <a href="/posts/make-wamp-work-on-windows-10-technical-preview/" class="postlist-link">
-      <h3 class="post-title">
-        Make WAMP Work On Windows 10
-        
-      </h3>
-    </a>
-  </li>
-  
-  <li class="post">
-    <time class="post-date" datetime="2014-10-19">19 Oct, 2014</time>
-    <a href="/posts/xiaomi-redmi-1s-is-a-powerful-product-with-bad-design/" class="postlist-link">
-      <h3 class="post-title">
-        Xiaomi Redmi 1S Is A Powerful Product With Bad Design
-        
-      </h3>
-    </a>
-  </li>
-  
-  <li class="post">
-    <time class="post-date" datetime="2014-09-28">28 Sep, 2014</time>
-    <a href="/posts/so-you-love-in-ternational-brands/" class="postlist-link">
-      <h3 class="post-title">
-        So You Love IN-ternational Brands?
-        
-      </h3>
-    </a>
-  </li>
-  
-  <li class="post">
-    <time class="post-date" datetime="2014-08-15">15 Aug, 2014</time>
-    <a href="/posts/design-story-independence-day-cover-photo/" class="postlist-link">
-      <h3 class="post-title">
-        Design Story - Independence Day Cover Photo
-        
-      </h3>
-    </a>
-  </li>
-  
-  <li class="post">
-    <time class="post-date" datetime="2014-07-29">29 Jul, 2014</time>
-    <a href="/posts/how-i-have-settled-down-to-inconsolata-for-codes/" class="postlist-link">
-      <h3 class="post-title">
-        I Have Settle Down To Inconsolata For Code
-        
-      </h3>
-    </a>
-  </li>
+    <li class="post">
+      <time class="post-date" datetime="2023-01-06">06 Jan, 2023</time>
+      <a href="/posts/secret-page-dev-info-vite-react/" class="postlist-link">
+        <h4 class="post-title" style="view-transition-name: post-secret-page-dev-info-vite-react">
+          Don&#39;t struggle figuring out the deployed version and commit hash
+          
+        </h4>
+      </a>
+    </li>
+  
+    <li class="post">
+      <time class="post-date" datetime="2021-07-17">17 Jul, 2021</time>
+      <a href="/posts/white-labeling-vue-cli-pwa/" class="postlist-link">
+        <h4 class="post-title" style="view-transition-name: post-white-labeling-vue-cli-pwa">
+          White Labeling, Vue CLI &amp; PWA
+          
+        </h4>
+      </a>
+    </li>
+  
+    <li class="post">
+      <time class="post-date" datetime="2021-07-08">08 Jul, 2021</time>
+      <a href="/posts/how-to-use-avif-today/" class="postlist-link">
+        <h4 class="post-title" style="view-transition-name: post-how-to-use-avif-today">
+          Use AVIF today
+          
+        </h4>
+      </a>
+    </li>
+  
+    <li class="post">
+      <time class="post-date" datetime="2021-02-17">17 Feb, 2021</time>
+      <a href="/posts/how-to-import-markdown-files-in-vue-cli-typescript-project/" class="postlist-link">
+        <h4 class="post-title" style="view-transition-name: post-how-to-import-markdown-files-in-vue-cli-typescript-project">
+          Import Markdown Files in Vue CLI + TypeScript Projects
+          
+        </h4>
+      </a>
+    </li>
+  
+    <li class="post">
+      <time class="post-date" datetime="2021-01-26">26 Jan, 2021</time>
+      <a href="/posts/my-graphql-schema-types-generation-workflow copy/" class="postlist-link">
+        <h4 class="post-title" style="view-transition-name: post-my-graphql-schema-types-generation-workflow copy">
+          My GraphQL Schema &amp; Types Generation Workflow
+          
+        </h4>
+      </a>
+    </li>
+  
+    <li class="post">
+      <time class="post-date" datetime="2021-01-24">24 Jan, 2021</time>
+      <a href="/posts/import-sass-variables-in-javascript-with-webpack/" class="postlist-link">
+        <h4 class="post-title" style="view-transition-name: post-import-sass-variables-in-javascript-with-webpack">
+          Import Sass variables in JavaScript with Webpack
+          
+        </h4>
+      </a>
+    </li>
+  
+    <li class="post">
+      <time class="post-date" datetime="2019-04-09">09 Apr, 2019</time>
+      <a href="/posts/managing-mixins-and-utils-in-vue/" class="postlist-link">
+        <h4 class="post-title" style="view-transition-name: post-managing-mixins-and-utils-in-vue">
+          Managing Mixins &amp; Utilities in VueJS
+          
+        </h4>
+      </a>
+    </li>
+  
+    <li class="post">
+      <time class="post-date" datetime="2018-04-06">06 Apr, 2018</time>
+      <a href="/posts/why-vue-is-so-awesome/" class="postlist-link">
+        <h4 class="post-title" style="view-transition-name: post-why-vue-is-so-awesome">
+          Why Vue Is So Awesome 😍
+          
+        </h4>
+      </a>
+    </li>
+  
+    <li class="post">
+      <time class="post-date" datetime="2017-10-26">26 Oct, 2017</time>
+      <a href="/posts/nicer-imports-with-webpack-aliases/" class="postlist-link">
+        <h4 class="post-title" style="view-transition-name: post-nicer-imports-with-webpack-aliases">
+          Nicer imports with webpack aliases
+          
+        </h4>
+      </a>
+    </li>
+  
+    <li class="post">
+      <time class="post-date" datetime="2017-09-18">18 Sep, 2017</time>
+      <a href="/posts/reusing-areas-in-css-grid/" class="postlist-link">
+        <h4 class="post-title" style="view-transition-name: post-reusing-areas-in-css-grid">
+          Reusing Areas In CSS Grid
+          
+        </h4>
+      </a>
+    </li>
+  
+    <li class="post">
+      <time class="post-date" datetime="2017-05-18">18 May, 2017</time>
+      <a href="/posts/animating-css-snake-art/" class="postlist-link">
+        <h4 class="post-title" style="view-transition-name: post-animating-css-snake-art">
+          A Snake in CSS
+          
+        </h4>
+      </a>
+    </li>
+  
+    <li class="post">
+      <time class="post-date" datetime="2017-04-25">25 Apr, 2017</time>
+      <a href="/posts/css-toggle-function/" class="postlist-link">
+        <h4 class="post-title" style="view-transition-name: post-css-toggle-function">
+          The CSS toggle() Function
+          
+        </h4>
+      </a>
+    </li>
+  
+    <li class="post">
+      <time class="post-date" datetime="2016-05-18">18 May, 2016</time>
+      <a href="/posts/make-your-web-apps-little-more-native/" class="postlist-link">
+        <h4 class="post-title" style="view-transition-name: post-make-your-web-apps-little-more-native">
+          Make your web apps look a little more native
+          
+        </h4>
+      </a>
+    </li>
+  
+    <li class="post">
+      <time class="post-date" datetime="2016-02-13">13 Feb, 2016</time>
+      <a href="/posts/people-i-learn-from/" class="postlist-link">
+        <h4 class="post-title" style="view-transition-name: post-people-i-learn-from">
+          People I Learn From
+          
+        </h4>
+      </a>
+    </li>
+  
+    <li class="post">
+      <time class="post-date" datetime="2015-12-20">20 Dec, 2015</time>
+      <a href="/posts/introducing-poppins/" class="postlist-link">
+        <h4 class="post-title" style="view-transition-name: post-introducing-poppins">
+          Introducing Poppins - An Eye Popping, Light Sublime Text 3 Syntax Theme
+          
+        </h4>
+      </a>
+    </li>
+  
+    <li class="post">
+      <time class="post-date" datetime="2015-12-11">11 Dec, 2015</time>
+      <a href="/posts/meeting-lea-and-chris/" class="postlist-link">
+        <h4 class="post-title" style="view-transition-name: post-meeting-lea-and-chris">
+          Meeting Lea &amp; Chris
+          
+        </h4>
+      </a>
+    </li>
+  
+    <li class="post">
+      <time class="post-date" datetime="2015-11-01">01 Nov, 2015</time>
+      <a href="/posts/finding-unique-color-strings-in-project/" class="postlist-link">
+        <h4 class="post-title" style="view-transition-name: post-finding-unique-color-strings-in-project">
+          Finding Unique Color Strings In Project
+          
+        </h4>
+      </a>
+    </li>
+  
+    <li class="post">
+      <time class="post-date" datetime="2015-09-06">06 Sep, 2015</time>
+      <a href="/posts/talks-that-impress/" class="postlist-link">
+        <h4 class="post-title" style="view-transition-name: post-talks-that-impress">
+          Talks That Impress
+          
+        </h4>
+      </a>
+    </li>
+  
+    <li class="post">
+      <time class="post-date" datetime="2015-06-28">28 Jun, 2015</time>
+      <a href="/posts/ready-steady-gulp/" class="postlist-link">
+        <h4 class="post-title" style="view-transition-name: post-ready-steady-gulp">
+          Ready Steady Gulp!
+          
+        </h4>
+      </a>
+    </li>
+  
+    <li class="post">
+      <time class="post-date" datetime="2015-03-19">19 Mar, 2015</time>
+      <a href="/posts/first-scss-experiment-a-blurry-world/" class="postlist-link">
+        <h4 class="post-title" style="view-transition-name: post-first-scss-experiment-a-blurry-world">
+          First SCSS Experiment - A Blurry World
+          
+        </h4>
+      </a>
+    </li>
+  
+    <li class="post">
+      <time class="post-date" datetime="2015-03-17">17 Mar, 2015</time>
+      <a href="/posts/tree-style-directory-structure-powershell/" class="postlist-link">
+        <h4 class="post-title" style="view-transition-name: post-tree-style-directory-structure-powershell">
+          Tree Like Directory Structure In PowerShell
+          
+        </h4>
+      </a>
+    </li>
+  
+    <li class="post">
+      <time class="post-date" datetime="2015-02-17">17 Feb, 2015</time>
+      <a href="/posts/the-right-html-element-for-icons/" class="postlist-link">
+        <h4 class="post-title" style="view-transition-name: post-the-right-html-element-for-icons">
+          The Right HTML Element For Icons
+          
+        </h4>
+      </a>
+    </li>
+  
+    <li class="post">
+      <time class="post-date" datetime="2015-02-12">12 Feb, 2015</time>
+      <a href="/posts/make-wamp-work-on-windows-10-technical-preview/" class="postlist-link">
+        <h4 class="post-title" style="view-transition-name: post-make-wamp-work-on-windows-10-technical-preview">
+          Make WAMP Work On Windows 10
+          
+        </h4>
+      </a>
+    </li>
+  
+    <li class="post">
+      <time class="post-date" datetime="2014-10-19">19 Oct, 2014</time>
+      <a href="/posts/xiaomi-redmi-1s-is-a-powerful-product-with-bad-design/" class="postlist-link">
+        <h4 class="post-title" style="view-transition-name: post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design">
+          Xiaomi Redmi 1S Is A Powerful Product With Bad Design
+          
+        </h4>
+      </a>
+    </li>
+  
+    <li class="post">
+      <time class="post-date" datetime="2014-09-28">28 Sep, 2014</time>
+      <a href="/posts/so-you-love-in-ternational-brands/" class="postlist-link">
+        <h4 class="post-title" style="view-transition-name: post-so-you-love-in-ternational-brands">
+          So You Love IN-ternational Brands?
+          
+        </h4>
+      </a>
+    </li>
+  
+    <li class="post">
+      <time class="post-date" datetime="2014-08-15">15 Aug, 2014</time>
+      <a href="/posts/design-story-independence-day-cover-photo/" class="postlist-link">
+        <h4 class="post-title" style="view-transition-name: post-design-story-independence-day-cover-photo">
+          Design Story - Independence Day Cover Photo
+          
+        </h4>
+      </a>
+    </li>
+  
+    <li class="post">
+      <time class="post-date" datetime="2014-07-29">29 Jul, 2014</time>
+      <a href="/posts/how-i-have-settled-down-to-inconsolata-for-codes/" class="postlist-link">
+        <h4 class="post-title" style="view-transition-name: post-how-i-have-settled-down-to-inconsolata-for-codes">
+          I Have Settle Down To Inconsolata For Code
+          
+        </h4>
+      </a>
+    </li>
   
 </ol>
-
     </div>
     <div class="site-footer">
   <footer class="footer-content">
@@ -420,4 +639,4 @@ <h3 class="post-title">
 </div>
 
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/posts/introducing-poppins/index.html b/posts/introducing-poppins/index.html
index 461a31d..06ee441 100644
--- a/posts/introducing-poppins/index.html
+++ b/posts/introducing-poppins/index.html
@@ -16,11 +16,11 @@
     gtag("config", "UA-22054303-1");
   </script>
 
-  <meta charset="UTF-8" />
+  <meta charset="UTF-8"/>
   <meta
     name="viewport"
     content="width=device-width, initial-scale=1.0, viewport-fit=cover"
-  />
+/>
   <link rel="icon" href="/favicon.ico?v=d41d8cd98f00b204e9800998ecf8427e" type="image/png">
   <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png?v=d41d8cd98f00b204e9800998ecf8427e">
@@ -36,29 +36,31 @@
   <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="manifest" href="/manifest.webmanifest?v=d41d8cd98f00b204e9800998ecf8427e">
-  <meta name="msapplication-TileColor" content="#ffffff" />
-  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
-  <meta name="theme-color" content="#ffffff" />
+  <meta name="view-transition" content="same-origin"/>
+  <meta name="msapplication-TileColor" content="#ffffff"/>
+  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png"/>
+  <meta name="theme-color" content="#ffffff"/>
   <link
     rel="preload"
     href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
     as="style"
     onload="this.onload=null;this.rel='stylesheet'"
-  />
+/>
   <noscript
     ><link
       rel="stylesheet"
       href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
-  /></noscript>
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+/></noscript>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
   <link
     href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap"
     rel="stylesheet"
-  />
+/>
   <link href="/css/style.css?v=d41d8cd98f00b204e9800998ecf8427e" rel="stylesheet">
-   
-
+  
+  
+  
 
 
 
@@ -66,11 +68,11 @@
 
 
 
-  <title>Introducing Poppins - An Eye Popping, Light Sublime Text 3 Syntax Theme - Praveen Puglia</title>
 
 
 
 
+<title>Introducing Poppins - An Eye Popping, Light Sublime Text 3 Syntax Theme - Praveen Puglia</title>
 <meta property="og:site_name" content="Praveen Puglia"/>
 <meta property="og:title" content="Introducing Poppins - An Eye Popping, Light Sublime Text 3 Syntax Theme - Praveen Puglia"/>
 <meta property="og:type" content="website"/>
@@ -94,8 +96,227 @@
   <meta name="twitter:image" content="https://praveenpuglia.com/assets/images/home-banner-mobile.avif"/>
 
 
-</head>
 
+  <style>
+    ::view-transition-old(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-use-avif-today) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-use-avif-today) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-why-vue-is-so-awesome) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-why-vue-is-so-awesome) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-reusing-areas-in-css-grid) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-reusing-areas-in-css-grid) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-animating-css-snake-art) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-animating-css-snake-art) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-css-toggle-function) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-css-toggle-function) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-people-i-learn-from) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-people-i-learn-from) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-introducing-poppins) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-introducing-poppins) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-meeting-lea-and-chris) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-meeting-lea-and-chris) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-talks-that-impress) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-talks-that-impress) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-ready-steady-gulp) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-ready-steady-gulp) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-the-right-html-element-for-icons) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-the-right-html-element-for-icons) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  
+  </style>
+</head>
   <body>
     <div class="site-header">
   <header class="main-header">
@@ -113,22 +334,24 @@ <h3 class="main-header-logo bold">Praveen Puglia</h3>
 </div>
 
     <div class="container">
-      
-<article class="single-post">
-  <h1 class="title">Introducing Poppins - An Eye Popping, Light Sublime Text 3 Syntax Theme</h1>
-  <div class="post__metadata">
-    <time datetime="2015-12-20">20 Dec, 2015</time>
-    <ul class="post__metadata__tags">
-      <li class="post__metadata__tag">
-        sublime-text
-      </li>
-      <li class="post__metadata__tag">
-        theme
-      </li>
-      <li class="post__metadata__tag">
-        tools
-      </li>
-    </ul>
+      <article class="single-post">
+  <div class="single-post__header">
+    <h1 class="title" style="view-transition-name: post-introducing-poppins">Introducing Poppins - An Eye Popping, Light Sublime Text 3 Syntax Theme</h1>
+    <h4 class="subtitle"></h4>
+    <div class="post__metadata">
+      <time datetime="2015-12-20">20 Dec, 2015</time>
+      <ul class="post__metadata__tags">
+          <li class="post__metadata__tag">
+            sublime-text
+          </li>
+          <li class="post__metadata__tag">
+            theme
+          </li>
+          <li class="post__metadata__tag">
+            tools
+          </li>
+      </ul>
+    </div>
   </div>
 
   <img class="human-photo" src="/assets/images/2015/12/poppins.avif">
@@ -170,4 +393,4 @@ <h1 class="title">Introducing Poppins - An Eye Popping, Light Sublime Text 3 Syn
 </div>
 
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/posts/make-wamp-work-on-windows-10-technical-preview/index.html b/posts/make-wamp-work-on-windows-10-technical-preview/index.html
index 26234a4..ceaab2a 100644
--- a/posts/make-wamp-work-on-windows-10-technical-preview/index.html
+++ b/posts/make-wamp-work-on-windows-10-technical-preview/index.html
@@ -16,11 +16,11 @@
     gtag("config", "UA-22054303-1");
   </script>
 
-  <meta charset="UTF-8" />
+  <meta charset="UTF-8"/>
   <meta
     name="viewport"
     content="width=device-width, initial-scale=1.0, viewport-fit=cover"
-  />
+/>
   <link rel="icon" href="/favicon.ico?v=d41d8cd98f00b204e9800998ecf8427e" type="image/png">
   <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png?v=d41d8cd98f00b204e9800998ecf8427e">
@@ -36,29 +36,31 @@
   <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="manifest" href="/manifest.webmanifest?v=d41d8cd98f00b204e9800998ecf8427e">
-  <meta name="msapplication-TileColor" content="#ffffff" />
-  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
-  <meta name="theme-color" content="#ffffff" />
+  <meta name="view-transition" content="same-origin"/>
+  <meta name="msapplication-TileColor" content="#ffffff"/>
+  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png"/>
+  <meta name="theme-color" content="#ffffff"/>
   <link
     rel="preload"
     href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
     as="style"
     onload="this.onload=null;this.rel='stylesheet'"
-  />
+/>
   <noscript
     ><link
       rel="stylesheet"
       href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
-  /></noscript>
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+/></noscript>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
   <link
     href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap"
     rel="stylesheet"
-  />
+/>
   <link href="/css/style.css?v=d41d8cd98f00b204e9800998ecf8427e" rel="stylesheet">
-   
-
+  
+  
+  
 
 
 
@@ -66,11 +68,11 @@
 
 
 
-  <title>Make WAMP Work On Windows 10 - Praveen Puglia</title>
 
 
 
 
+<title>Make WAMP Work On Windows 10 - Praveen Puglia</title>
 <meta property="og:site_name" content="Praveen Puglia"/>
 <meta property="og:title" content="Make WAMP Work On Windows 10 - Praveen Puglia"/>
 <meta property="og:type" content="website"/>
@@ -94,8 +96,227 @@
   <meta name="twitter:image" content="https://praveenpuglia.com/assets/images/home-banner-mobile.avif"/>
 
 
-</head>
 
+  <style>
+    ::view-transition-old(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-use-avif-today) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-use-avif-today) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-why-vue-is-so-awesome) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-why-vue-is-so-awesome) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-reusing-areas-in-css-grid) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-reusing-areas-in-css-grid) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-animating-css-snake-art) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-animating-css-snake-art) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-css-toggle-function) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-css-toggle-function) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-people-i-learn-from) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-people-i-learn-from) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-introducing-poppins) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-introducing-poppins) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-meeting-lea-and-chris) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-meeting-lea-and-chris) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-talks-that-impress) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-talks-that-impress) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-ready-steady-gulp) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-ready-steady-gulp) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-the-right-html-element-for-icons) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-the-right-html-element-for-icons) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  
+  </style>
+</head>
   <body>
     <div class="site-header">
   <header class="main-header">
@@ -113,19 +334,21 @@ <h3 class="main-header-logo bold">Praveen Puglia</h3>
 </div>
 
     <div class="container">
-      
-<article class="single-post">
-  <h1 class="title">Make WAMP Work On Windows 10</h1>
-  <div class="post__metadata">
-    <time datetime="2015-02-12">12 Feb, 2015</time>
-    <ul class="post__metadata__tags">
-      <li class="post__metadata__tag">
-        windows
-      </li>
-      <li class="post__metadata__tag">
-        wamp
-      </li>
-    </ul>
+      <article class="single-post">
+  <div class="single-post__header">
+    <h1 class="title" style="view-transition-name: post-make-wamp-work-on-windows-10-technical-preview">Make WAMP Work On Windows 10</h1>
+    <h4 class="subtitle"></h4>
+    <div class="post__metadata">
+      <time datetime="2015-02-12">12 Feb, 2015</time>
+      <ul class="post__metadata__tags">
+          <li class="post__metadata__tag">
+            windows
+          </li>
+          <li class="post__metadata__tag">
+            wamp
+          </li>
+      </ul>
+    </div>
   </div>
 
   <h3>Edit For Windows 10 Clean Install</h3>
@@ -191,4 +414,4 @@ <h3>Edit For Windows 10 Clean Install</h3>
 </div>
 
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/posts/make-your-web-apps-little-more-native/index.html b/posts/make-your-web-apps-little-more-native/index.html
index a96bb56..d79a65f 100644
--- a/posts/make-your-web-apps-little-more-native/index.html
+++ b/posts/make-your-web-apps-little-more-native/index.html
@@ -16,11 +16,11 @@
     gtag("config", "UA-22054303-1");
   </script>
 
-  <meta charset="UTF-8" />
+  <meta charset="UTF-8"/>
   <meta
     name="viewport"
     content="width=device-width, initial-scale=1.0, viewport-fit=cover"
-  />
+/>
   <link rel="icon" href="/favicon.ico?v=d41d8cd98f00b204e9800998ecf8427e" type="image/png">
   <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png?v=d41d8cd98f00b204e9800998ecf8427e">
@@ -36,29 +36,31 @@
   <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="manifest" href="/manifest.webmanifest?v=d41d8cd98f00b204e9800998ecf8427e">
-  <meta name="msapplication-TileColor" content="#ffffff" />
-  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
-  <meta name="theme-color" content="#ffffff" />
+  <meta name="view-transition" content="same-origin"/>
+  <meta name="msapplication-TileColor" content="#ffffff"/>
+  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png"/>
+  <meta name="theme-color" content="#ffffff"/>
   <link
     rel="preload"
     href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
     as="style"
     onload="this.onload=null;this.rel='stylesheet'"
-  />
+/>
   <noscript
     ><link
       rel="stylesheet"
       href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
-  /></noscript>
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+/></noscript>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
   <link
     href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap"
     rel="stylesheet"
-  />
+/>
   <link href="/css/style.css?v=d41d8cd98f00b204e9800998ecf8427e" rel="stylesheet">
-   
-
+  
+  
+  
 
 
 
@@ -66,11 +68,11 @@
 
 
 
-  <title>Make your web apps look a little more native - Praveen Puglia</title>
 
 
 
 
+<title>Make your web apps look a little more native - Praveen Puglia</title>
 <meta property="og:site_name" content="Praveen Puglia"/>
 <meta property="og:title" content="Make your web apps look a little more native - Praveen Puglia"/>
 <meta property="og:type" content="website"/>
@@ -94,8 +96,227 @@
   <meta name="twitter:image" content="https://praveenpuglia.com/assets/images/home-banner-mobile.avif"/>
 
 
-</head>
 
+  <style>
+    ::view-transition-old(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-use-avif-today) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-use-avif-today) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-why-vue-is-so-awesome) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-why-vue-is-so-awesome) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-reusing-areas-in-css-grid) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-reusing-areas-in-css-grid) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-animating-css-snake-art) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-animating-css-snake-art) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-css-toggle-function) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-css-toggle-function) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-people-i-learn-from) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-people-i-learn-from) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-introducing-poppins) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-introducing-poppins) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-meeting-lea-and-chris) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-meeting-lea-and-chris) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-talks-that-impress) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-talks-that-impress) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-ready-steady-gulp) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-ready-steady-gulp) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-the-right-html-element-for-icons) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-the-right-html-element-for-icons) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  
+  </style>
+</head>
   <body>
     <div class="site-header">
   <header class="main-header">
@@ -113,19 +334,21 @@ <h3 class="main-header-logo bold">Praveen Puglia</h3>
 </div>
 
     <div class="container">
-      
-<article class="single-post">
-  <h1 class="title">Make your web apps look a little more native</h1>
-  <div class="post__metadata">
-    <time datetime="2016-05-18">18 May, 2016</time>
-    <ul class="post__metadata__tags">
-      <li class="post__metadata__tag">
-        typography
-      </li>
-      <li class="post__metadata__tag">
-        font
-      </li>
-    </ul>
+      <article class="single-post">
+  <div class="single-post__header">
+    <h1 class="title" style="view-transition-name: post-make-your-web-apps-little-more-native">Make your web apps look a little more native</h1>
+    <h4 class="subtitle"></h4>
+    <div class="post__metadata">
+      <time datetime="2016-05-18">18 May, 2016</time>
+      <ul class="post__metadata__tags">
+          <li class="post__metadata__tag">
+            typography
+          </li>
+          <li class="post__metadata__tag">
+            font
+          </li>
+      </ul>
+    </div>
   </div>
 
   <p>Everybody loves Medium and there is just something about it that attracts people. The more I used it, the more I realized there was something wonderful it was doing to give it's users, the native feeling. I personally love apps when they adapt to different systems &amp; devices. It shows that they care for their users and what sort of system they use. The user doesn't need to adapt to the app but the app adapts for the user's environment. Making elements adapt to native design system also creates a sense of trust.</p>
@@ -170,4 +393,4 @@ <h1 class="title">Make your web apps look a little more native</h1>
 </div>
 
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/posts/managing-mixins-and-utils-in-vue/index.html b/posts/managing-mixins-and-utils-in-vue/index.html
index 17178be..d08bb8a 100644
--- a/posts/managing-mixins-and-utils-in-vue/index.html
+++ b/posts/managing-mixins-and-utils-in-vue/index.html
@@ -16,11 +16,11 @@
     gtag("config", "UA-22054303-1");
   </script>
 
-  <meta charset="UTF-8" />
+  <meta charset="UTF-8"/>
   <meta
     name="viewport"
     content="width=device-width, initial-scale=1.0, viewport-fit=cover"
-  />
+/>
   <link rel="icon" href="/favicon.ico?v=d41d8cd98f00b204e9800998ecf8427e" type="image/png">
   <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png?v=d41d8cd98f00b204e9800998ecf8427e">
@@ -36,29 +36,31 @@
   <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="manifest" href="/manifest.webmanifest?v=d41d8cd98f00b204e9800998ecf8427e">
-  <meta name="msapplication-TileColor" content="#ffffff" />
-  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
-  <meta name="theme-color" content="#ffffff" />
+  <meta name="view-transition" content="same-origin"/>
+  <meta name="msapplication-TileColor" content="#ffffff"/>
+  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png"/>
+  <meta name="theme-color" content="#ffffff"/>
   <link
     rel="preload"
     href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
     as="style"
     onload="this.onload=null;this.rel='stylesheet'"
-  />
+/>
   <noscript
     ><link
       rel="stylesheet"
       href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
-  /></noscript>
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+/></noscript>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
   <link
     href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap"
     rel="stylesheet"
-  />
+/>
   <link href="/css/style.css?v=d41d8cd98f00b204e9800998ecf8427e" rel="stylesheet">
-   
-
+  
+  
+  
 
 
 
@@ -66,11 +68,11 @@
 
 
 
-  <title>Managing Mixins &amp; Utilities in VueJS - Praveen Puglia</title>
 
 
 
 
+<title>Managing Mixins &amp; Utilities in VueJS - Praveen Puglia</title>
 <meta property="og:site_name" content="Praveen Puglia"/>
 <meta property="og:title" content="Managing Mixins &amp; Utilities in VueJS - Praveen Puglia"/>
 <meta property="og:type" content="website"/>
@@ -94,8 +96,227 @@
   <meta name="twitter:image" content="https://praveenpuglia.com/assets/images/home-banner-mobile.avif"/>
 
 
-</head>
 
+  <style>
+    ::view-transition-old(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-use-avif-today) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-use-avif-today) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-why-vue-is-so-awesome) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-why-vue-is-so-awesome) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-reusing-areas-in-css-grid) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-reusing-areas-in-css-grid) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-animating-css-snake-art) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-animating-css-snake-art) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-css-toggle-function) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-css-toggle-function) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-people-i-learn-from) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-people-i-learn-from) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-introducing-poppins) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-introducing-poppins) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-meeting-lea-and-chris) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-meeting-lea-and-chris) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-talks-that-impress) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-talks-that-impress) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-ready-steady-gulp) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-ready-steady-gulp) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-the-right-html-element-for-icons) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-the-right-html-element-for-icons) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  
+  </style>
+</head>
   <body>
     <div class="site-header">
   <header class="main-header">
@@ -113,19 +334,21 @@ <h3 class="main-header-logo bold">Praveen Puglia</h3>
 </div>
 
     <div class="container">
-      
-<article class="single-post">
-  <h1 class="title">Managing Mixins &amp; Utilities in VueJS</h1>
-  <div class="post__metadata">
-    <time datetime="2019-04-09">09 Apr, 2019</time>
-    <ul class="post__metadata__tags">
-      <li class="post__metadata__tag">
-        vue.js
-      </li>
-      <li class="post__metadata__tag">
-        typescript
-      </li>
-    </ul>
+      <article class="single-post">
+  <div class="single-post__header">
+    <h1 class="title" style="view-transition-name: post-managing-mixins-and-utils-in-vue">Managing Mixins &amp; Utilities in VueJS</h1>
+    <h4 class="subtitle"></h4>
+    <div class="post__metadata">
+      <time datetime="2019-04-09">09 Apr, 2019</time>
+      <ul class="post__metadata__tags">
+          <li class="post__metadata__tag">
+            vue.js
+          </li>
+          <li class="post__metadata__tag">
+            typescript
+          </li>
+      </ul>
+    </div>
   </div>
 
   <p>I have been working quite a bit with <a href="https://vuejs.org/">Vue.js</a> and I have sort of found a sweet spot for how to manage utilities in a Vue project.</p>
@@ -216,4 +439,4 @@ <h1 class="title">Managing Mixins &amp; Utilities in VueJS</h1>
 </div>
 
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/posts/meeting-lea-and-chris/index.html b/posts/meeting-lea-and-chris/index.html
index 4837ddd..4e2389a 100644
--- a/posts/meeting-lea-and-chris/index.html
+++ b/posts/meeting-lea-and-chris/index.html
@@ -16,11 +16,11 @@
     gtag("config", "UA-22054303-1");
   </script>
 
-  <meta charset="UTF-8" />
+  <meta charset="UTF-8"/>
   <meta
     name="viewport"
     content="width=device-width, initial-scale=1.0, viewport-fit=cover"
-  />
+/>
   <link rel="icon" href="/favicon.ico?v=d41d8cd98f00b204e9800998ecf8427e" type="image/png">
   <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png?v=d41d8cd98f00b204e9800998ecf8427e">
@@ -36,29 +36,31 @@
   <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="manifest" href="/manifest.webmanifest?v=d41d8cd98f00b204e9800998ecf8427e">
-  <meta name="msapplication-TileColor" content="#ffffff" />
-  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
-  <meta name="theme-color" content="#ffffff" />
+  <meta name="view-transition" content="same-origin"/>
+  <meta name="msapplication-TileColor" content="#ffffff"/>
+  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png"/>
+  <meta name="theme-color" content="#ffffff"/>
   <link
     rel="preload"
     href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
     as="style"
     onload="this.onload=null;this.rel='stylesheet'"
-  />
+/>
   <noscript
     ><link
       rel="stylesheet"
       href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
-  /></noscript>
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+/></noscript>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
   <link
     href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap"
     rel="stylesheet"
-  />
+/>
   <link href="/css/style.css?v=d41d8cd98f00b204e9800998ecf8427e" rel="stylesheet">
-   
-
+  
+  
+  
 
 
 
@@ -66,11 +68,11 @@
 
 
 
-  <title>Meeting Lea &amp; Chris - Praveen Puglia</title>
 
 
 
 
+<title>Meeting Lea &amp; Chris - Praveen Puglia</title>
 <meta property="og:site_name" content="Praveen Puglia"/>
 <meta property="og:title" content="Meeting Lea &amp; Chris - Praveen Puglia"/>
 <meta property="og:type" content="website"/>
@@ -94,8 +96,227 @@
   <meta name="twitter:image" content="https://praveenpuglia.com/assets/images/home-banner-mobile.avif"/>
 
 
-</head>
 
+  <style>
+    ::view-transition-old(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-use-avif-today) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-use-avif-today) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-why-vue-is-so-awesome) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-why-vue-is-so-awesome) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-reusing-areas-in-css-grid) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-reusing-areas-in-css-grid) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-animating-css-snake-art) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-animating-css-snake-art) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-css-toggle-function) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-css-toggle-function) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-people-i-learn-from) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-people-i-learn-from) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-introducing-poppins) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-introducing-poppins) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-meeting-lea-and-chris) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-meeting-lea-and-chris) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-talks-that-impress) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-talks-that-impress) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-ready-steady-gulp) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-ready-steady-gulp) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-the-right-html-element-for-icons) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-the-right-html-element-for-icons) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  
+  </style>
+</head>
   <body>
     <div class="site-header">
   <header class="main-header">
@@ -113,16 +334,18 @@ <h3 class="main-header-logo bold">Praveen Puglia</h3>
 </div>
 
     <div class="container">
-      
-<article class="single-post">
-  <h1 class="title">Meeting Lea &amp; Chris</h1>
-  <div class="post__metadata">
-    <time datetime="2015-12-11">11 Dec, 2015</time>
-    <ul class="post__metadata__tags">
-      <li class="post__metadata__tag">
-        life
-      </li>
-    </ul>
+      <article class="single-post">
+  <div class="single-post__header">
+    <h1 class="title" style="view-transition-name: post-meeting-lea-and-chris">Meeting Lea &amp; Chris</h1>
+    <h4 class="subtitle"></h4>
+    <div class="post__metadata">
+      <time datetime="2015-12-11">11 Dec, 2015</time>
+      <ul class="post__metadata__tags">
+          <li class="post__metadata__tag">
+            life
+          </li>
+      </ul>
+    </div>
   </div>
 
   <p><strong>Reporting From Boston</strong></p>
@@ -177,4 +400,4 @@ <h1 class="title">Meeting Lea &amp; Chris</h1>
 </div>
 
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/posts/my-graphql-schema-types-generation-workflow copy/index.html b/posts/my-graphql-schema-types-generation-workflow copy/index.html
index 3f454f9..16116ff 100644
--- a/posts/my-graphql-schema-types-generation-workflow copy/index.html	
+++ b/posts/my-graphql-schema-types-generation-workflow copy/index.html	
@@ -16,11 +16,11 @@
     gtag("config", "UA-22054303-1");
   </script>
 
-  <meta charset="UTF-8" />
+  <meta charset="UTF-8"/>
   <meta
     name="viewport"
     content="width=device-width, initial-scale=1.0, viewport-fit=cover"
-  />
+/>
   <link rel="icon" href="/favicon.ico?v=d41d8cd98f00b204e9800998ecf8427e" type="image/png">
   <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png?v=d41d8cd98f00b204e9800998ecf8427e">
@@ -36,29 +36,31 @@
   <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="manifest" href="/manifest.webmanifest?v=d41d8cd98f00b204e9800998ecf8427e">
-  <meta name="msapplication-TileColor" content="#ffffff" />
-  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
-  <meta name="theme-color" content="#ffffff" />
+  <meta name="view-transition" content="same-origin"/>
+  <meta name="msapplication-TileColor" content="#ffffff"/>
+  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png"/>
+  <meta name="theme-color" content="#ffffff"/>
   <link
     rel="preload"
     href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
     as="style"
     onload="this.onload=null;this.rel='stylesheet'"
-  />
+/>
   <noscript
     ><link
       rel="stylesheet"
       href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
-  /></noscript>
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+/></noscript>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
   <link
     href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap"
     rel="stylesheet"
-  />
+/>
   <link href="/css/style.css?v=d41d8cd98f00b204e9800998ecf8427e" rel="stylesheet">
-   
-
+  
+  
+  
 
 
 
@@ -66,11 +68,11 @@
 
 
 
-  <title>My GraphQL Schema &amp; Types Generation Workflow - Praveen Puglia</title>
 
 
 
 
+<title>My GraphQL Schema &amp; Types Generation Workflow - Praveen Puglia</title>
 <meta property="og:site_name" content="Praveen Puglia"/>
 <meta property="og:title" content="My GraphQL Schema &amp; Types Generation Workflow - Praveen Puglia"/>
 <meta property="og:type" content="website"/>
@@ -94,8 +96,227 @@
   <meta name="twitter:image" content="https://praveenpuglia.com/assets/images/home-banner-mobile.avif"/>
 
 
-</head>
 
+  <style>
+    ::view-transition-old(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-use-avif-today) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-use-avif-today) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-why-vue-is-so-awesome) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-why-vue-is-so-awesome) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-reusing-areas-in-css-grid) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-reusing-areas-in-css-grid) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-animating-css-snake-art) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-animating-css-snake-art) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-css-toggle-function) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-css-toggle-function) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-people-i-learn-from) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-people-i-learn-from) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-introducing-poppins) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-introducing-poppins) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-meeting-lea-and-chris) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-meeting-lea-and-chris) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-talks-that-impress) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-talks-that-impress) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-ready-steady-gulp) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-ready-steady-gulp) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-the-right-html-element-for-icons) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-the-right-html-element-for-icons) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  
+  </style>
+</head>
   <body>
     <div class="site-header">
   <header class="main-header">
@@ -113,19 +334,21 @@ <h3 class="main-header-logo bold">Praveen Puglia</h3>
 </div>
 
     <div class="container">
-      
-<article class="single-post">
-  <h1 class="title">My GraphQL Schema &amp; Types Generation Workflow</h1>
-  <div class="post__metadata">
-    <time datetime="2021-01-26">26 Jan, 2021</time>
-    <ul class="post__metadata__tags">
-      <li class="post__metadata__tag">
-        graphql
-      </li>
-      <li class="post__metadata__tag">
-        typescript
-      </li>
-    </ul>
+      <article class="single-post">
+  <div class="single-post__header">
+    <h1 class="title" style="view-transition-name: post-my-graphql-schema-types-generation-workflow copy">My GraphQL Schema &amp; Types Generation Workflow</h1>
+    <h4 class="subtitle"></h4>
+    <div class="post__metadata">
+      <time datetime="2021-01-26">26 Jan, 2021</time>
+      <ul class="post__metadata__tags">
+          <li class="post__metadata__tag">
+            graphql
+          </li>
+          <li class="post__metadata__tag">
+            typescript
+          </li>
+      </ul>
+    </div>
   </div>
 
   <p>At <a href="https://voicezen.ai">Voicezen</a>, we use multiple GraphQL endpoints. We also use Vue with TypeScript. Naturally, we need type definitions for everything the endpoints expose.</p>
@@ -275,4 +498,4 @@ <h1 class="title">My GraphQL Schema &amp; Types Generation Workflow</h1>
 </div>
 
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/posts/nicer-imports-with-webpack-aliases/index.html b/posts/nicer-imports-with-webpack-aliases/index.html
index ec63555..cc6d7f8 100644
--- a/posts/nicer-imports-with-webpack-aliases/index.html
+++ b/posts/nicer-imports-with-webpack-aliases/index.html
@@ -16,11 +16,11 @@
     gtag("config", "UA-22054303-1");
   </script>
 
-  <meta charset="UTF-8" />
+  <meta charset="UTF-8"/>
   <meta
     name="viewport"
     content="width=device-width, initial-scale=1.0, viewport-fit=cover"
-  />
+/>
   <link rel="icon" href="/favicon.ico?v=d41d8cd98f00b204e9800998ecf8427e" type="image/png">
   <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png?v=d41d8cd98f00b204e9800998ecf8427e">
@@ -36,29 +36,31 @@
   <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="manifest" href="/manifest.webmanifest?v=d41d8cd98f00b204e9800998ecf8427e">
-  <meta name="msapplication-TileColor" content="#ffffff" />
-  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
-  <meta name="theme-color" content="#ffffff" />
+  <meta name="view-transition" content="same-origin"/>
+  <meta name="msapplication-TileColor" content="#ffffff"/>
+  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png"/>
+  <meta name="theme-color" content="#ffffff"/>
   <link
     rel="preload"
     href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
     as="style"
     onload="this.onload=null;this.rel='stylesheet'"
-  />
+/>
   <noscript
     ><link
       rel="stylesheet"
       href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
-  /></noscript>
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+/></noscript>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
   <link
     href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap"
     rel="stylesheet"
-  />
+/>
   <link href="/css/style.css?v=d41d8cd98f00b204e9800998ecf8427e" rel="stylesheet">
-   
-
+  
+  
+  
 
 
 
@@ -66,11 +68,11 @@
 
 
 
-  <title>Nicer imports with webpack aliases - Praveen Puglia</title>
 
 
 
 
+<title>Nicer imports with webpack aliases - Praveen Puglia</title>
 <meta property="og:site_name" content="Praveen Puglia"/>
 <meta property="og:title" content="Nicer imports with webpack aliases - Praveen Puglia"/>
 <meta property="og:type" content="website"/>
@@ -94,8 +96,227 @@
   <meta name="twitter:image" content="https://praveenpuglia.com/assets/images/home-banner-mobile.avif"/>
 
 
-</head>
 
+  <style>
+    ::view-transition-old(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-use-avif-today) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-use-avif-today) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-why-vue-is-so-awesome) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-why-vue-is-so-awesome) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-reusing-areas-in-css-grid) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-reusing-areas-in-css-grid) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-animating-css-snake-art) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-animating-css-snake-art) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-css-toggle-function) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-css-toggle-function) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-people-i-learn-from) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-people-i-learn-from) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-introducing-poppins) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-introducing-poppins) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-meeting-lea-and-chris) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-meeting-lea-and-chris) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-talks-that-impress) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-talks-that-impress) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-ready-steady-gulp) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-ready-steady-gulp) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-the-right-html-element-for-icons) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-the-right-html-element-for-icons) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  
+  </style>
+</head>
   <body>
     <div class="site-header">
   <header class="main-header">
@@ -113,22 +334,24 @@ <h3 class="main-header-logo bold">Praveen Puglia</h3>
 </div>
 
     <div class="container">
-      
-<article class="single-post">
-  <h1 class="title">Nicer imports with webpack aliases</h1>
-  <div class="post__metadata">
-    <time datetime="2017-10-26">26 Oct, 2017</time>
-    <ul class="post__metadata__tags">
-      <li class="post__metadata__tag">
-        vue.js
-      </li>
-      <li class="post__metadata__tag">
-        webpack
-      </li>
-      <li class="post__metadata__tag">
-        scss
-      </li>
-    </ul>
+      <article class="single-post">
+  <div class="single-post__header">
+    <h1 class="title" style="view-transition-name: post-nicer-imports-with-webpack-aliases">Nicer imports with webpack aliases</h1>
+    <h4 class="subtitle"></h4>
+    <div class="post__metadata">
+      <time datetime="2017-10-26">26 Oct, 2017</time>
+      <ul class="post__metadata__tags">
+          <li class="post__metadata__tag">
+            vue.js
+          </li>
+          <li class="post__metadata__tag">
+            webpack
+          </li>
+          <li class="post__metadata__tag">
+            scss
+          </li>
+      </ul>
+    </div>
   </div>
 
   <h2>The Setup</h2>
@@ -201,4 +424,4 @@ <h2>The Better Solution</h2>
 </div>
 
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/posts/people-i-learn-from/index.html b/posts/people-i-learn-from/index.html
index e13f62b..2c01ef8 100644
--- a/posts/people-i-learn-from/index.html
+++ b/posts/people-i-learn-from/index.html
@@ -16,11 +16,11 @@
     gtag("config", "UA-22054303-1");
   </script>
 
-  <meta charset="UTF-8" />
+  <meta charset="UTF-8"/>
   <meta
     name="viewport"
     content="width=device-width, initial-scale=1.0, viewport-fit=cover"
-  />
+/>
   <link rel="icon" href="/favicon.ico?v=d41d8cd98f00b204e9800998ecf8427e" type="image/png">
   <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png?v=d41d8cd98f00b204e9800998ecf8427e">
@@ -36,29 +36,31 @@
   <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="manifest" href="/manifest.webmanifest?v=d41d8cd98f00b204e9800998ecf8427e">
-  <meta name="msapplication-TileColor" content="#ffffff" />
-  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
-  <meta name="theme-color" content="#ffffff" />
+  <meta name="view-transition" content="same-origin"/>
+  <meta name="msapplication-TileColor" content="#ffffff"/>
+  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png"/>
+  <meta name="theme-color" content="#ffffff"/>
   <link
     rel="preload"
     href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
     as="style"
     onload="this.onload=null;this.rel='stylesheet'"
-  />
+/>
   <noscript
     ><link
       rel="stylesheet"
       href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
-  /></noscript>
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+/></noscript>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
   <link
     href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap"
     rel="stylesheet"
-  />
+/>
   <link href="/css/style.css?v=d41d8cd98f00b204e9800998ecf8427e" rel="stylesheet">
-   
-
+  
+  
+  
 
 
 
@@ -66,11 +68,11 @@
 
 
 
-  <title>People I Learn From - Praveen Puglia</title>
 
 
 
 
+<title>People I Learn From - Praveen Puglia</title>
 <meta property="og:site_name" content="Praveen Puglia"/>
 <meta property="og:title" content="People I Learn From - Praveen Puglia"/>
 <meta property="og:type" content="website"/>
@@ -94,8 +96,227 @@
   <meta name="twitter:image" content="https://praveenpuglia.com/assets/images/home-banner-mobile.avif"/>
 
 
-</head>
 
+  <style>
+    ::view-transition-old(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-use-avif-today) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-use-avif-today) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-why-vue-is-so-awesome) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-why-vue-is-so-awesome) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-reusing-areas-in-css-grid) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-reusing-areas-in-css-grid) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-animating-css-snake-art) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-animating-css-snake-art) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-css-toggle-function) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-css-toggle-function) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-people-i-learn-from) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-people-i-learn-from) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-introducing-poppins) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-introducing-poppins) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-meeting-lea-and-chris) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-meeting-lea-and-chris) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-talks-that-impress) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-talks-that-impress) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-ready-steady-gulp) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-ready-steady-gulp) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-the-right-html-element-for-icons) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-the-right-html-element-for-icons) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  
+  </style>
+</head>
   <body>
     <div class="site-header">
   <header class="main-header">
@@ -113,16 +334,18 @@ <h3 class="main-header-logo bold">Praveen Puglia</h3>
 </div>
 
     <div class="container">
-      
-<article class="single-post">
-  <h1 class="title">People I Learn From</h1>
-  <div class="post__metadata">
-    <time datetime="2016-02-13">13 Feb, 2016</time>
-    <ul class="post__metadata__tags">
-      <li class="post__metadata__tag">
-        life
-      </li>
-    </ul>
+      <article class="single-post">
+  <div class="single-post__header">
+    <h1 class="title" style="view-transition-name: post-people-i-learn-from">People I Learn From</h1>
+    <h4 class="subtitle"></h4>
+    <div class="post__metadata">
+      <time datetime="2016-02-13">13 Feb, 2016</time>
+      <ul class="post__metadata__tags">
+          <li class="post__metadata__tag">
+            life
+          </li>
+      </ul>
+    </div>
   </div>
 
   <p>The world of web development is wild. Every day there are literally tons of new things to learn. I feel exhausted time to time and it's really important for one to remain inspired. I like it when I look at work done by people and wonder wide eyed - <em>How the heck is this done?</em>. That inspires me.</p>
@@ -174,4 +397,4 @@ <h3><a href="https://twitter.com/Una">Una Kravets</a></h3>
 </div>
 
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/posts/ready-steady-gulp/index.html b/posts/ready-steady-gulp/index.html
index 0b22882..23e2029 100644
--- a/posts/ready-steady-gulp/index.html
+++ b/posts/ready-steady-gulp/index.html
@@ -16,11 +16,11 @@
     gtag("config", "UA-22054303-1");
   </script>
 
-  <meta charset="UTF-8" />
+  <meta charset="UTF-8"/>
   <meta
     name="viewport"
     content="width=device-width, initial-scale=1.0, viewport-fit=cover"
-  />
+/>
   <link rel="icon" href="/favicon.ico?v=d41d8cd98f00b204e9800998ecf8427e" type="image/png">
   <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png?v=d41d8cd98f00b204e9800998ecf8427e">
@@ -36,29 +36,31 @@
   <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="manifest" href="/manifest.webmanifest?v=d41d8cd98f00b204e9800998ecf8427e">
-  <meta name="msapplication-TileColor" content="#ffffff" />
-  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
-  <meta name="theme-color" content="#ffffff" />
+  <meta name="view-transition" content="same-origin"/>
+  <meta name="msapplication-TileColor" content="#ffffff"/>
+  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png"/>
+  <meta name="theme-color" content="#ffffff"/>
   <link
     rel="preload"
     href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
     as="style"
     onload="this.onload=null;this.rel='stylesheet'"
-  />
+/>
   <noscript
     ><link
       rel="stylesheet"
       href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
-  /></noscript>
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+/></noscript>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
   <link
     href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap"
     rel="stylesheet"
-  />
+/>
   <link href="/css/style.css?v=d41d8cd98f00b204e9800998ecf8427e" rel="stylesheet">
-   
-
+  
+  
+  
 
 
 
@@ -66,11 +68,11 @@
 
 
 
-  <title>Ready Steady Gulp! - Praveen Puglia</title>
 
 
 
 
+<title>Ready Steady Gulp! - Praveen Puglia</title>
 <meta property="og:site_name" content="Praveen Puglia"/>
 <meta property="og:title" content="Ready Steady Gulp! - Praveen Puglia"/>
 <meta property="og:type" content="website"/>
@@ -94,8 +96,227 @@
   <meta name="twitter:image" content="https://praveenpuglia.com/assets/images/home-banner-mobile.avif"/>
 
 
-</head>
 
+  <style>
+    ::view-transition-old(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-use-avif-today) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-use-avif-today) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-why-vue-is-so-awesome) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-why-vue-is-so-awesome) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-reusing-areas-in-css-grid) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-reusing-areas-in-css-grid) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-animating-css-snake-art) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-animating-css-snake-art) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-css-toggle-function) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-css-toggle-function) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-people-i-learn-from) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-people-i-learn-from) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-introducing-poppins) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-introducing-poppins) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-meeting-lea-and-chris) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-meeting-lea-and-chris) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-talks-that-impress) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-talks-that-impress) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-ready-steady-gulp) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-ready-steady-gulp) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-the-right-html-element-for-icons) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-the-right-html-element-for-icons) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  
+  </style>
+</head>
   <body>
     <div class="site-header">
   <header class="main-header">
@@ -113,22 +334,24 @@ <h3 class="main-header-logo bold">Praveen Puglia</h3>
 </div>
 
     <div class="container">
-      
-<article class="single-post">
-  <h1 class="title">Ready Steady Gulp!</h1>
-  <div class="post__metadata">
-    <time datetime="2015-06-28">28 Jun, 2015</time>
-    <ul class="post__metadata__tags">
-      <li class="post__metadata__tag">
-        gulp
-      </li>
-      <li class="post__metadata__tag">
-        javascript
-      </li>
-      <li class="post__metadata__tag">
-        bundling
-      </li>
-    </ul>
+      <article class="single-post">
+  <div class="single-post__header">
+    <h1 class="title" style="view-transition-name: post-ready-steady-gulp">Ready Steady Gulp!</h1>
+    <h4 class="subtitle"></h4>
+    <div class="post__metadata">
+      <time datetime="2015-06-28">28 Jun, 2015</time>
+      <ul class="post__metadata__tags">
+          <li class="post__metadata__tag">
+            gulp
+          </li>
+          <li class="post__metadata__tag">
+            javascript
+          </li>
+          <li class="post__metadata__tag">
+            bundling
+          </li>
+      </ul>
+    </div>
   </div>
 
   <p>Lately, if something has totally changed the way I work, it's <a href="http://gulpjs.com/">Gulp</a> - <em>the streaming build system</em> . There are lot of cool things you can do with gulp with great flexibility. Let's get started!</p>
@@ -248,4 +471,4 @@ <h3>Minify CSS</h3>
 </div>
 
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/posts/reusing-areas-in-css-grid/index.html b/posts/reusing-areas-in-css-grid/index.html
index 44189ce..92996f7 100644
--- a/posts/reusing-areas-in-css-grid/index.html
+++ b/posts/reusing-areas-in-css-grid/index.html
@@ -16,11 +16,11 @@
     gtag("config", "UA-22054303-1");
   </script>
 
-  <meta charset="UTF-8" />
+  <meta charset="UTF-8"/>
   <meta
     name="viewport"
     content="width=device-width, initial-scale=1.0, viewport-fit=cover"
-  />
+/>
   <link rel="icon" href="/favicon.ico?v=d41d8cd98f00b204e9800998ecf8427e" type="image/png">
   <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png?v=d41d8cd98f00b204e9800998ecf8427e">
@@ -36,29 +36,31 @@
   <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="manifest" href="/manifest.webmanifest?v=d41d8cd98f00b204e9800998ecf8427e">
-  <meta name="msapplication-TileColor" content="#ffffff" />
-  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
-  <meta name="theme-color" content="#ffffff" />
+  <meta name="view-transition" content="same-origin"/>
+  <meta name="msapplication-TileColor" content="#ffffff"/>
+  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png"/>
+  <meta name="theme-color" content="#ffffff"/>
   <link
     rel="preload"
     href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
     as="style"
     onload="this.onload=null;this.rel='stylesheet'"
-  />
+/>
   <noscript
     ><link
       rel="stylesheet"
       href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
-  /></noscript>
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+/></noscript>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
   <link
     href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap"
     rel="stylesheet"
-  />
+/>
   <link href="/css/style.css?v=d41d8cd98f00b204e9800998ecf8427e" rel="stylesheet">
-   
-
+  
+  
+  
 
 
 
@@ -66,11 +68,11 @@
 
 
 
-  <title>Reusing Areas In CSS Grid - Praveen Puglia</title>
 
 
 
 
+<title>Reusing Areas In CSS Grid - Praveen Puglia</title>
 <meta property="og:site_name" content="Praveen Puglia"/>
 <meta property="og:title" content="Reusing Areas In CSS Grid - Praveen Puglia"/>
 <meta property="og:type" content="website"/>
@@ -94,8 +96,227 @@
   <meta name="twitter:image" content="https://praveenpuglia.com/assets/images/home-banner-mobile.avif"/>
 
 
-</head>
 
+  <style>
+    ::view-transition-old(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-use-avif-today) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-use-avif-today) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-why-vue-is-so-awesome) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-why-vue-is-so-awesome) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-reusing-areas-in-css-grid) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-reusing-areas-in-css-grid) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-animating-css-snake-art) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-animating-css-snake-art) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-css-toggle-function) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-css-toggle-function) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-people-i-learn-from) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-people-i-learn-from) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-introducing-poppins) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-introducing-poppins) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-meeting-lea-and-chris) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-meeting-lea-and-chris) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-talks-that-impress) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-talks-that-impress) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-ready-steady-gulp) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-ready-steady-gulp) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-the-right-html-element-for-icons) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-the-right-html-element-for-icons) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  
+  </style>
+</head>
   <body>
     <div class="site-header">
   <header class="main-header">
@@ -113,19 +334,21 @@ <h3 class="main-header-logo bold">Praveen Puglia</h3>
 </div>
 
     <div class="container">
-      
-<article class="single-post">
-  <h1 class="title">Reusing Areas In CSS Grid</h1>
-  <div class="post__metadata">
-    <time datetime="2017-09-18">18 Sep, 2017</time>
-    <ul class="post__metadata__tags">
-      <li class="post__metadata__tag">
-        css
-      </li>
-      <li class="post__metadata__tag">
-        grid
-      </li>
-    </ul>
+      <article class="single-post">
+  <div class="single-post__header">
+    <h1 class="title" style="view-transition-name: post-reusing-areas-in-css-grid">Reusing Areas In CSS Grid</h1>
+    <h4 class="subtitle"></h4>
+    <div class="post__metadata">
+      <time datetime="2017-09-18">18 Sep, 2017</time>
+      <ul class="post__metadata__tags">
+          <li class="post__metadata__tag">
+            css
+          </li>
+          <li class="post__metadata__tag">
+            grid
+          </li>
+      </ul>
+    </div>
   </div>
 
   <p>I have been playing around with CSS Grids for some time now and it has been an extremely delightful experience. So much so that I have submitted a talk proposal at <a href="https://metarefresh.talkfunnel.com/2017/2-grid-is-fun">MetaRefresh 2017</a>. If it gets selected, it's gonna be my first time ever speaking at a conference. I am nervous. If you are gonna be at MetaRefresh and wanna know about Grids, go vote! 😊</p>
@@ -259,4 +482,4 @@ <h1 class="title">Reusing Areas In CSS Grid</h1>
 </div>
 
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/posts/secret-page-dev-info-vite-react/index.html b/posts/secret-page-dev-info-vite-react/index.html
index fcdd9b3..3780f87 100644
--- a/posts/secret-page-dev-info-vite-react/index.html
+++ b/posts/secret-page-dev-info-vite-react/index.html
@@ -16,11 +16,11 @@
     gtag("config", "UA-22054303-1");
   </script>
 
-  <meta charset="UTF-8" />
+  <meta charset="UTF-8"/>
   <meta
     name="viewport"
     content="width=device-width, initial-scale=1.0, viewport-fit=cover"
-  />
+/>
   <link rel="icon" href="/favicon.ico?v=d41d8cd98f00b204e9800998ecf8427e" type="image/png">
   <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png?v=d41d8cd98f00b204e9800998ecf8427e">
@@ -36,29 +36,31 @@
   <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="manifest" href="/manifest.webmanifest?v=d41d8cd98f00b204e9800998ecf8427e">
-  <meta name="msapplication-TileColor" content="#ffffff" />
-  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
-  <meta name="theme-color" content="#ffffff" />
+  <meta name="view-transition" content="same-origin"/>
+  <meta name="msapplication-TileColor" content="#ffffff"/>
+  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png"/>
+  <meta name="theme-color" content="#ffffff"/>
   <link
     rel="preload"
     href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
     as="style"
     onload="this.onload=null;this.rel='stylesheet'"
-  />
+/>
   <noscript
     ><link
       rel="stylesheet"
       href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
-  /></noscript>
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+/></noscript>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
   <link
     href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap"
     rel="stylesheet"
-  />
+/>
   <link href="/css/style.css?v=d41d8cd98f00b204e9800998ecf8427e" rel="stylesheet">
-   
-
+  
+  
+  
 
 
 
@@ -66,13 +68,13 @@
 
 
 
-  <title>A secret, deployment version page for developers - Praveen Puglia</title>
 
 
 
 
+<title>Don&#39;t struggle figuring out the deployed version and commit hash - Praveen Puglia</title>
 <meta property="og:site_name" content="Praveen Puglia"/>
-<meta property="og:title" content="A secret, deployment version page for developers - Praveen Puglia"/>
+<meta property="og:title" content="Don&#39;t struggle figuring out the deployed version and commit hash - Praveen Puglia"/>
 <meta property="og:type" content="website"/>
 <meta property="og:url" content="https://praveenpuglia.com/posts/secret-page-dev-info-vite-react/"/>
 <meta property="twitter:url" content="https://praveenpuglia.com/posts/secret-page-dev-info-vite-react/"/>
@@ -85,20 +87,239 @@
 />
 
 
-<meta name="description" content="Web Developer since the days of Internet Explorer. Frontend Architect @smallcase"/>
-<meta name="twitter:description" content="Web Developer since the days of Internet Explorer. Frontend Architect @smallcase"/>
-<meta property="og:description" content="Web Developer since the days of Internet Explorer. Frontend Architect @smallcase"/>
+<meta name="description" content="You should never have to ask your team what version is on prod with a dedicated dev info page."/>
+<meta name="twitter:description" content="You should never have to ask your team what version is on prod with a dedicated dev info page."/>
+<meta property="og:description" content="You should never have to ask your team what version is on prod with a dedicated dev info page."/>
 
 
   <meta name="twitter:card" content="summary_large_image"/>
   <meta property="og:image" content="/assets/images/2023/app-version-git-hash.avif"/>
   <meta name="twitter:image" content="/assets/images/2023/app-version-git-hash.avif"/>
-  <meta property="og:image:alt" content="Page image for A secret, deployment version page for developers - Praveen Puglia"/>
-  <meta name="twitter:image:alt" content="Page image for A secret, deployment version page for developers - Praveen Puglia"/>
+  <meta property="og:image:alt" content="Page image for Don&#39;t struggle figuring out the deployed version and commit hash - Praveen Puglia"/>
+  <meta name="twitter:image:alt" content="Page image for Don&#39;t struggle figuring out the deployed version and commit hash - Praveen Puglia"/>
 
 
-</head>
 
+  <style>
+    ::view-transition-old(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-use-avif-today) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-use-avif-today) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-why-vue-is-so-awesome) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-why-vue-is-so-awesome) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-reusing-areas-in-css-grid) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-reusing-areas-in-css-grid) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-animating-css-snake-art) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-animating-css-snake-art) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-css-toggle-function) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-css-toggle-function) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-people-i-learn-from) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-people-i-learn-from) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-introducing-poppins) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-introducing-poppins) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-meeting-lea-and-chris) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-meeting-lea-and-chris) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-talks-that-impress) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-talks-that-impress) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-ready-steady-gulp) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-ready-steady-gulp) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-the-right-html-element-for-icons) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-the-right-html-element-for-icons) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  
+  </style>
+</head>
   <body>
     <div class="site-header">
   <header class="main-header">
@@ -116,25 +337,24 @@ <h3 class="main-header-logo bold">Praveen Puglia</h3>
 </div>
 
     <div class="container">
-      
-<article class="single-post">
-  <h1 class="title">A secret, deployment version page for developers</h1>
-  <div class="post__metadata">
-    <time datetime="2023-01-06">06 Jan, 2023</time>
-    <ul class="post__metadata__tags">
-      <li class="post__metadata__tag">
-        typescript
-      </li>
-      <li class="post__metadata__tag">
-        react
-      </li>
-      <li class="post__metadata__tag">
-        vite
-      </li>
-      <li class="post__metadata__tag">
-        git
-      </li>
-    </ul>
+      <article class="single-post">
+  <div class="single-post__header">
+    <h1 class="title" style="view-transition-name: post-secret-page-dev-info-vite-react">Don&#39;t struggle figuring out the deployed version and commit hash</h1>
+    <h4 class="subtitle">You should never have to ask your team what version is on prod with a dedicated dev info page.</h4>
+    <div class="post__metadata">
+      <time datetime="2023-01-06">06 Jan, 2023</time>
+      <ul class="post__metadata__tags">
+          <li class="post__metadata__tag">
+            tools
+          </li>
+          <li class="post__metadata__tag">
+            vite
+          </li>
+          <li class="post__metadata__tag">
+            git
+          </li>
+      </ul>
+    </div>
   </div>
 
   <p><img src="/assets/images/2023/app-version-git-hash.avif" alt="Adding a secret page for developers with app version &amp; commit hash in a Vite.js / React app"></p>
@@ -229,4 +449,4 @@ <h2>Creating the Secret Page</h2>
 </div>
 
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/posts/so-you-love-in-ternational-brands/index.html b/posts/so-you-love-in-ternational-brands/index.html
index b70b9fe..4257479 100644
--- a/posts/so-you-love-in-ternational-brands/index.html
+++ b/posts/so-you-love-in-ternational-brands/index.html
@@ -16,11 +16,11 @@
     gtag("config", "UA-22054303-1");
   </script>
 
-  <meta charset="UTF-8" />
+  <meta charset="UTF-8"/>
   <meta
     name="viewport"
     content="width=device-width, initial-scale=1.0, viewport-fit=cover"
-  />
+/>
   <link rel="icon" href="/favicon.ico?v=d41d8cd98f00b204e9800998ecf8427e" type="image/png">
   <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png?v=d41d8cd98f00b204e9800998ecf8427e">
@@ -36,29 +36,31 @@
   <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="manifest" href="/manifest.webmanifest?v=d41d8cd98f00b204e9800998ecf8427e">
-  <meta name="msapplication-TileColor" content="#ffffff" />
-  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
-  <meta name="theme-color" content="#ffffff" />
+  <meta name="view-transition" content="same-origin"/>
+  <meta name="msapplication-TileColor" content="#ffffff"/>
+  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png"/>
+  <meta name="theme-color" content="#ffffff"/>
   <link
     rel="preload"
     href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
     as="style"
     onload="this.onload=null;this.rel='stylesheet'"
-  />
+/>
   <noscript
     ><link
       rel="stylesheet"
       href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
-  /></noscript>
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+/></noscript>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
   <link
     href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap"
     rel="stylesheet"
-  />
+/>
   <link href="/css/style.css?v=d41d8cd98f00b204e9800998ecf8427e" rel="stylesheet">
-   
-
+  
+  
+  
 
 
 
@@ -66,11 +68,11 @@
 
 
 
-  <title>So You Love IN-ternational Brands? - Praveen Puglia</title>
 
 
 
 
+<title>So You Love IN-ternational Brands? - Praveen Puglia</title>
 <meta property="og:site_name" content="Praveen Puglia"/>
 <meta property="og:title" content="So You Love IN-ternational Brands? - Praveen Puglia"/>
 <meta property="og:type" content="website"/>
@@ -94,8 +96,227 @@
   <meta name="twitter:image" content="https://praveenpuglia.com/assets/images/home-banner-mobile.avif"/>
 
 
-</head>
 
+  <style>
+    ::view-transition-old(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-use-avif-today) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-use-avif-today) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-why-vue-is-so-awesome) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-why-vue-is-so-awesome) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-reusing-areas-in-css-grid) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-reusing-areas-in-css-grid) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-animating-css-snake-art) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-animating-css-snake-art) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-css-toggle-function) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-css-toggle-function) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-people-i-learn-from) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-people-i-learn-from) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-introducing-poppins) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-introducing-poppins) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-meeting-lea-and-chris) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-meeting-lea-and-chris) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-talks-that-impress) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-talks-that-impress) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-ready-steady-gulp) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-ready-steady-gulp) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-the-right-html-element-for-icons) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-the-right-html-element-for-icons) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  
+  </style>
+</head>
   <body>
     <div class="site-header">
   <header class="main-header">
@@ -113,19 +334,21 @@ <h3 class="main-header-logo bold">Praveen Puglia</h3>
 </div>
 
     <div class="container">
-      
-<article class="single-post">
-  <h1 class="title">So You Love IN-ternational Brands?</h1>
-  <div class="post__metadata">
-    <time datetime="2014-09-28">28 Sep, 2014</time>
-    <ul class="post__metadata__tags">
-      <li class="post__metadata__tag">
-        india
-      </li>
-      <li class="post__metadata__tag">
-        brands
-      </li>
-    </ul>
+      <article class="single-post">
+  <div class="single-post__header">
+    <h1 class="title" style="view-transition-name: post-so-you-love-in-ternational-brands">So You Love IN-ternational Brands?</h1>
+    <h4 class="subtitle"></h4>
+    <div class="post__metadata">
+      <time datetime="2014-09-28">28 Sep, 2014</time>
+      <ul class="post__metadata__tags">
+          <li class="post__metadata__tag">
+            india
+          </li>
+          <li class="post__metadata__tag">
+            brands
+          </li>
+      </ul>
+    </div>
   </div>
 
   <p>I have never written anything about brands or branding before. I have never been bothered enough but as I realize, they do affect me and my surroundings. They bring in changes in how people interact with each other. They are used as tools to measure your mental and financial conditions. Having a good knowledge of brands make you appear sophisticated( ...or at least few people think so! )</p>
@@ -186,4 +409,4 @@ <h1 class="title">So You Love IN-ternational Brands?</h1>
 </div>
 
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/posts/talks-that-impress/index.html b/posts/talks-that-impress/index.html
index 2c2fc2b..410159a 100644
--- a/posts/talks-that-impress/index.html
+++ b/posts/talks-that-impress/index.html
@@ -16,11 +16,11 @@
     gtag("config", "UA-22054303-1");
   </script>
 
-  <meta charset="UTF-8" />
+  <meta charset="UTF-8"/>
   <meta
     name="viewport"
     content="width=device-width, initial-scale=1.0, viewport-fit=cover"
-  />
+/>
   <link rel="icon" href="/favicon.ico?v=d41d8cd98f00b204e9800998ecf8427e" type="image/png">
   <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png?v=d41d8cd98f00b204e9800998ecf8427e">
@@ -36,29 +36,31 @@
   <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="manifest" href="/manifest.webmanifest?v=d41d8cd98f00b204e9800998ecf8427e">
-  <meta name="msapplication-TileColor" content="#ffffff" />
-  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
-  <meta name="theme-color" content="#ffffff" />
+  <meta name="view-transition" content="same-origin"/>
+  <meta name="msapplication-TileColor" content="#ffffff"/>
+  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png"/>
+  <meta name="theme-color" content="#ffffff"/>
   <link
     rel="preload"
     href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
     as="style"
     onload="this.onload=null;this.rel='stylesheet'"
-  />
+/>
   <noscript
     ><link
       rel="stylesheet"
       href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
-  /></noscript>
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+/></noscript>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
   <link
     href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap"
     rel="stylesheet"
-  />
+/>
   <link href="/css/style.css?v=d41d8cd98f00b204e9800998ecf8427e" rel="stylesheet">
-   
-
+  
+  
+  
 
 
 
@@ -66,11 +68,11 @@
 
 
 
-  <title>Talks That Impress - Praveen Puglia</title>
 
 
 
 
+<title>Talks That Impress - Praveen Puglia</title>
 <meta property="og:site_name" content="Praveen Puglia"/>
 <meta property="og:title" content="Talks That Impress - Praveen Puglia"/>
 <meta property="og:type" content="website"/>
@@ -94,8 +96,227 @@
   <meta name="twitter:image" content="https://praveenpuglia.com/assets/images/home-banner-mobile.avif"/>
 
 
-</head>
 
+  <style>
+    ::view-transition-old(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-use-avif-today) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-use-avif-today) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-why-vue-is-so-awesome) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-why-vue-is-so-awesome) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-reusing-areas-in-css-grid) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-reusing-areas-in-css-grid) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-animating-css-snake-art) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-animating-css-snake-art) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-css-toggle-function) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-css-toggle-function) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-people-i-learn-from) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-people-i-learn-from) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-introducing-poppins) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-introducing-poppins) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-meeting-lea-and-chris) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-meeting-lea-and-chris) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-talks-that-impress) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-talks-that-impress) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-ready-steady-gulp) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-ready-steady-gulp) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-the-right-html-element-for-icons) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-the-right-html-element-for-icons) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  
+  </style>
+</head>
   <body>
     <div class="site-header">
   <header class="main-header">
@@ -113,16 +334,18 @@ <h3 class="main-header-logo bold">Praveen Puglia</h3>
 </div>
 
     <div class="container">
-      
-<article class="single-post">
-  <h1 class="title">Talks That Impress</h1>
-  <div class="post__metadata">
-    <time datetime="2015-09-06">06 Sep, 2015</time>
-    <ul class="post__metadata__tags">
-      <li class="post__metadata__tag">
-        thoughts
-      </li>
-    </ul>
+      <article class="single-post">
+  <div class="single-post__header">
+    <h1 class="title" style="view-transition-name: post-talks-that-impress">Talks That Impress</h1>
+    <h4 class="subtitle"></h4>
+    <div class="post__metadata">
+      <time datetime="2015-09-06">06 Sep, 2015</time>
+      <ul class="post__metadata__tags">
+          <li class="post__metadata__tag">
+            thoughts
+          </li>
+      </ul>
+    </div>
   </div>
 
   <p>I am organizing a <a href="http://nvite.co/e114">CodePen Meetup in India</a> for the first time ever and it's a big deal for me. Not just because CodePen is big and people know it for it's quality, but also because of the care I am required to take in all aspects of the event. Most importantly the talks.</p>
@@ -163,4 +386,4 @@ <h1 class="title">Talks That Impress</h1>
 </div>
 
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/posts/the-right-html-element-for-icons/index.html b/posts/the-right-html-element-for-icons/index.html
index 6630a98..aa807eb 100644
--- a/posts/the-right-html-element-for-icons/index.html
+++ b/posts/the-right-html-element-for-icons/index.html
@@ -16,11 +16,11 @@
     gtag("config", "UA-22054303-1");
   </script>
 
-  <meta charset="UTF-8" />
+  <meta charset="UTF-8"/>
   <meta
     name="viewport"
     content="width=device-width, initial-scale=1.0, viewport-fit=cover"
-  />
+/>
   <link rel="icon" href="/favicon.ico?v=d41d8cd98f00b204e9800998ecf8427e" type="image/png">
   <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png?v=d41d8cd98f00b204e9800998ecf8427e">
@@ -36,29 +36,31 @@
   <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="manifest" href="/manifest.webmanifest?v=d41d8cd98f00b204e9800998ecf8427e">
-  <meta name="msapplication-TileColor" content="#ffffff" />
-  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
-  <meta name="theme-color" content="#ffffff" />
+  <meta name="view-transition" content="same-origin"/>
+  <meta name="msapplication-TileColor" content="#ffffff"/>
+  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png"/>
+  <meta name="theme-color" content="#ffffff"/>
   <link
     rel="preload"
     href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
     as="style"
     onload="this.onload=null;this.rel='stylesheet'"
-  />
+/>
   <noscript
     ><link
       rel="stylesheet"
       href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
-  /></noscript>
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+/></noscript>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
   <link
     href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap"
     rel="stylesheet"
-  />
+/>
   <link href="/css/style.css?v=d41d8cd98f00b204e9800998ecf8427e" rel="stylesheet">
-   
-
+  
+  
+  
 
 
 
@@ -66,11 +68,11 @@
 
 
 
-  <title>The Right HTML Element For Icons - Praveen Puglia</title>
 
 
 
 
+<title>The Right HTML Element For Icons - Praveen Puglia</title>
 <meta property="og:site_name" content="Praveen Puglia"/>
 <meta property="og:title" content="The Right HTML Element For Icons - Praveen Puglia"/>
 <meta property="og:type" content="website"/>
@@ -94,8 +96,227 @@
   <meta name="twitter:image" content="https://praveenpuglia.com/assets/images/home-banner-mobile.avif"/>
 
 
-</head>
 
+  <style>
+    ::view-transition-old(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-use-avif-today) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-use-avif-today) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-why-vue-is-so-awesome) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-why-vue-is-so-awesome) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-reusing-areas-in-css-grid) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-reusing-areas-in-css-grid) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-animating-css-snake-art) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-animating-css-snake-art) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-css-toggle-function) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-css-toggle-function) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-people-i-learn-from) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-people-i-learn-from) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-introducing-poppins) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-introducing-poppins) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-meeting-lea-and-chris) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-meeting-lea-and-chris) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-talks-that-impress) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-talks-that-impress) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-ready-steady-gulp) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-ready-steady-gulp) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-the-right-html-element-for-icons) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-the-right-html-element-for-icons) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  
+  </style>
+</head>
   <body>
     <div class="site-header">
   <header class="main-header">
@@ -113,19 +334,21 @@ <h3 class="main-header-logo bold">Praveen Puglia</h3>
 </div>
 
     <div class="container">
-      
-<article class="single-post">
-  <h1 class="title">The Right HTML Element For Icons</h1>
-  <div class="post__metadata">
-    <time datetime="2015-02-17">17 Feb, 2015</time>
-    <ul class="post__metadata__tags">
-      <li class="post__metadata__tag">
-        html
-      </li>
-      <li class="post__metadata__tag">
-        icons
-      </li>
-    </ul>
+      <article class="single-post">
+  <div class="single-post__header">
+    <h1 class="title" style="view-transition-name: post-the-right-html-element-for-icons">The Right HTML Element For Icons</h1>
+    <h4 class="subtitle"></h4>
+    <div class="post__metadata">
+      <time datetime="2015-02-17">17 Feb, 2015</time>
+      <ul class="post__metadata__tags">
+          <li class="post__metadata__tag">
+            html
+          </li>
+          <li class="post__metadata__tag">
+            icons
+          </li>
+      </ul>
+    </div>
   </div>
 
   <p><a href="/assets/images/2015/02/span_vs_i.avif"><img src="/assets/images/2015/02/span_vs_i.avif" alt=" VS "></a></p>
@@ -189,4 +412,4 @@ <h1 class="title">The Right HTML Element For Icons</h1>
 </div>
 
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/posts/tree-style-directory-structure-powershell/index.html b/posts/tree-style-directory-structure-powershell/index.html
index d224208..b21d2c5 100644
--- a/posts/tree-style-directory-structure-powershell/index.html
+++ b/posts/tree-style-directory-structure-powershell/index.html
@@ -16,11 +16,11 @@
     gtag("config", "UA-22054303-1");
   </script>
 
-  <meta charset="UTF-8" />
+  <meta charset="UTF-8"/>
   <meta
     name="viewport"
     content="width=device-width, initial-scale=1.0, viewport-fit=cover"
-  />
+/>
   <link rel="icon" href="/favicon.ico?v=d41d8cd98f00b204e9800998ecf8427e" type="image/png">
   <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png?v=d41d8cd98f00b204e9800998ecf8427e">
@@ -36,29 +36,31 @@
   <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="manifest" href="/manifest.webmanifest?v=d41d8cd98f00b204e9800998ecf8427e">
-  <meta name="msapplication-TileColor" content="#ffffff" />
-  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
-  <meta name="theme-color" content="#ffffff" />
+  <meta name="view-transition" content="same-origin"/>
+  <meta name="msapplication-TileColor" content="#ffffff"/>
+  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png"/>
+  <meta name="theme-color" content="#ffffff"/>
   <link
     rel="preload"
     href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
     as="style"
     onload="this.onload=null;this.rel='stylesheet'"
-  />
+/>
   <noscript
     ><link
       rel="stylesheet"
       href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
-  /></noscript>
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+/></noscript>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
   <link
     href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap"
     rel="stylesheet"
-  />
+/>
   <link href="/css/style.css?v=d41d8cd98f00b204e9800998ecf8427e" rel="stylesheet">
-   
-
+  
+  
+  
 
 
 
@@ -66,11 +68,11 @@
 
 
 
-  <title>Tree Like Directory Structure In PowerShell - Praveen Puglia</title>
 
 
 
 
+<title>Tree Like Directory Structure In PowerShell - Praveen Puglia</title>
 <meta property="og:site_name" content="Praveen Puglia"/>
 <meta property="og:title" content="Tree Like Directory Structure In PowerShell - Praveen Puglia"/>
 <meta property="og:type" content="website"/>
@@ -94,8 +96,227 @@
   <meta name="twitter:image" content="https://praveenpuglia.com/assets/images/home-banner-mobile.avif"/>
 
 
-</head>
 
+  <style>
+    ::view-transition-old(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-use-avif-today) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-use-avif-today) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-why-vue-is-so-awesome) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-why-vue-is-so-awesome) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-reusing-areas-in-css-grid) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-reusing-areas-in-css-grid) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-animating-css-snake-art) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-animating-css-snake-art) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-css-toggle-function) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-css-toggle-function) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-people-i-learn-from) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-people-i-learn-from) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-introducing-poppins) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-introducing-poppins) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-meeting-lea-and-chris) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-meeting-lea-and-chris) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-talks-that-impress) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-talks-that-impress) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-ready-steady-gulp) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-ready-steady-gulp) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-the-right-html-element-for-icons) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-the-right-html-element-for-icons) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  
+  </style>
+</head>
   <body>
     <div class="site-header">
   <header class="main-header">
@@ -113,19 +334,21 @@ <h3 class="main-header-logo bold">Praveen Puglia</h3>
 </div>
 
     <div class="container">
-      
-<article class="single-post">
-  <h1 class="title">Tree Like Directory Structure In PowerShell</h1>
-  <div class="post__metadata">
-    <time datetime="2015-03-17">17 Mar, 2015</time>
-    <ul class="post__metadata__tags">
-      <li class="post__metadata__tag">
-        tools
-      </li>
-      <li class="post__metadata__tag">
-        shell
-      </li>
-    </ul>
+      <article class="single-post">
+  <div class="single-post__header">
+    <h1 class="title" style="view-transition-name: post-tree-style-directory-structure-powershell">Tree Like Directory Structure In PowerShell</h1>
+    <h4 class="subtitle"></h4>
+    <div class="post__metadata">
+      <time datetime="2015-03-17">17 Mar, 2015</time>
+      <ul class="post__metadata__tags">
+          <li class="post__metadata__tag">
+            tools
+          </li>
+          <li class="post__metadata__tag">
+            shell
+          </li>
+      </ul>
+    </div>
   </div>
 
   <p>One of those things that I may not require too often but when I do, it has to be nicely formatted and give me precise results.</p>
@@ -194,4 +417,4 @@ <h1 class="title">Tree Like Directory Structure In PowerShell</h1>
 </div>
 
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/posts/white-labeling-vue-cli-pwa/index.html b/posts/white-labeling-vue-cli-pwa/index.html
index 11aceb3..41ee792 100644
--- a/posts/white-labeling-vue-cli-pwa/index.html
+++ b/posts/white-labeling-vue-cli-pwa/index.html
@@ -16,11 +16,11 @@
     gtag("config", "UA-22054303-1");
   </script>
 
-  <meta charset="UTF-8" />
+  <meta charset="UTF-8"/>
   <meta
     name="viewport"
     content="width=device-width, initial-scale=1.0, viewport-fit=cover"
-  />
+/>
   <link rel="icon" href="/favicon.ico?v=d41d8cd98f00b204e9800998ecf8427e" type="image/png">
   <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png?v=d41d8cd98f00b204e9800998ecf8427e">
@@ -36,29 +36,31 @@
   <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="manifest" href="/manifest.webmanifest?v=d41d8cd98f00b204e9800998ecf8427e">
-  <meta name="msapplication-TileColor" content="#ffffff" />
-  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
-  <meta name="theme-color" content="#ffffff" />
+  <meta name="view-transition" content="same-origin"/>
+  <meta name="msapplication-TileColor" content="#ffffff"/>
+  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png"/>
+  <meta name="theme-color" content="#ffffff"/>
   <link
     rel="preload"
     href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
     as="style"
     onload="this.onload=null;this.rel='stylesheet'"
-  />
+/>
   <noscript
     ><link
       rel="stylesheet"
       href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
-  /></noscript>
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+/></noscript>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
   <link
     href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap"
     rel="stylesheet"
-  />
+/>
   <link href="/css/style.css?v=d41d8cd98f00b204e9800998ecf8427e" rel="stylesheet">
-   
-
+  
+  
+  
 
 
 
@@ -66,11 +68,11 @@
 
 
 
-  <title>White Labeling, Vue CLI &amp; PWA - Praveen Puglia</title>
 
 
 
 
+<title>White Labeling, Vue CLI &amp; PWA - Praveen Puglia</title>
 <meta property="og:site_name" content="Praveen Puglia"/>
 <meta property="og:title" content="White Labeling, Vue CLI &amp; PWA - Praveen Puglia"/>
 <meta property="og:type" content="website"/>
@@ -85,17 +87,236 @@
 />
 
 
-<meta name="description" content="Web Developer since the days of Internet Explorer. Frontend Architect @smallcase"/>
-<meta name="twitter:description" content="Web Developer since the days of Internet Explorer. Frontend Architect @smallcase"/>
-<meta property="og:description" content="Web Developer since the days of Internet Explorer. Frontend Architect @smallcase"/>
+<meta name="description" content="Using Vue CLI PWA plugin to dynamically generate service worker assets for different clients"/>
+<meta name="twitter:description" content="Using Vue CLI PWA plugin to dynamically generate service worker assets for different clients"/>
+<meta property="og:description" content="Using Vue CLI PWA plugin to dynamically generate service worker assets for different clients"/>
 
 
   <meta property="og:image" content="https://praveenpuglia.com/assets/images/home-banner-mobile.avif"/>
   <meta name="twitter:image" content="https://praveenpuglia.com/assets/images/home-banner-mobile.avif"/>
 
 
-</head>
 
+  <style>
+    ::view-transition-old(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-use-avif-today) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-use-avif-today) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-why-vue-is-so-awesome) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-why-vue-is-so-awesome) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-reusing-areas-in-css-grid) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-reusing-areas-in-css-grid) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-animating-css-snake-art) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-animating-css-snake-art) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-css-toggle-function) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-css-toggle-function) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-people-i-learn-from) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-people-i-learn-from) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-introducing-poppins) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-introducing-poppins) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-meeting-lea-and-chris) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-meeting-lea-and-chris) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-talks-that-impress) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-talks-that-impress) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-ready-steady-gulp) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-ready-steady-gulp) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-the-right-html-element-for-icons) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-the-right-html-element-for-icons) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  
+  </style>
+</head>
   <body>
     <div class="site-header">
   <header class="main-header">
@@ -113,25 +334,27 @@ <h3 class="main-header-logo bold">Praveen Puglia</h3>
 </div>
 
     <div class="container">
-      
-<article class="single-post">
-  <h1 class="title">White Labeling, Vue CLI &amp; PWA</h1>
-  <div class="post__metadata">
-    <time datetime="2021-07-17">17 Jul, 2021</time>
-    <ul class="post__metadata__tags">
-      <li class="post__metadata__tag">
-        vue.js
-      </li>
-      <li class="post__metadata__tag">
-        pwa
-      </li>
-      <li class="post__metadata__tag">
-        javascript
-      </li>
-      <li class="post__metadata__tag">
-        white-labeling
-      </li>
-    </ul>
+      <article class="single-post">
+  <div class="single-post__header">
+    <h1 class="title" style="view-transition-name: post-white-labeling-vue-cli-pwa">White Labeling, Vue CLI &amp; PWA</h1>
+    <h4 class="subtitle">Using Vue CLI PWA plugin to dynamically generate service worker assets for different clients</h4>
+    <div class="post__metadata">
+      <time datetime="2021-07-17">17 Jul, 2021</time>
+      <ul class="post__metadata__tags">
+          <li class="post__metadata__tag">
+            vue.js
+          </li>
+          <li class="post__metadata__tag">
+            pwa
+          </li>
+          <li class="post__metadata__tag">
+            javascript
+          </li>
+          <li class="post__metadata__tag">
+            white-labeling
+          </li>
+      </ul>
+    </div>
   </div>
 
   <p>At <a href="https://voicezen.ai/">Voicezen</a>, I have been fortunate enough to work on a platform that has to be white-labelled. But what does it mean to be white-labelled?</p>
@@ -362,4 +585,4 @@ <h1 class="title">White Labeling, Vue CLI &amp; PWA</h1>
 </div>
 
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/posts/why-vue-is-so-awesome/index.html b/posts/why-vue-is-so-awesome/index.html
index 23c37aa..5c8fcbe 100644
--- a/posts/why-vue-is-so-awesome/index.html
+++ b/posts/why-vue-is-so-awesome/index.html
@@ -16,11 +16,11 @@
     gtag("config", "UA-22054303-1");
   </script>
 
-  <meta charset="UTF-8" />
+  <meta charset="UTF-8"/>
   <meta
     name="viewport"
     content="width=device-width, initial-scale=1.0, viewport-fit=cover"
-  />
+/>
   <link rel="icon" href="/favicon.ico?v=d41d8cd98f00b204e9800998ecf8427e" type="image/png">
   <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png?v=d41d8cd98f00b204e9800998ecf8427e">
@@ -36,29 +36,31 @@
   <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="manifest" href="/manifest.webmanifest?v=d41d8cd98f00b204e9800998ecf8427e">
-  <meta name="msapplication-TileColor" content="#ffffff" />
-  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
-  <meta name="theme-color" content="#ffffff" />
+  <meta name="view-transition" content="same-origin"/>
+  <meta name="msapplication-TileColor" content="#ffffff"/>
+  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png"/>
+  <meta name="theme-color" content="#ffffff"/>
   <link
     rel="preload"
     href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
     as="style"
     onload="this.onload=null;this.rel='stylesheet'"
-  />
+/>
   <noscript
     ><link
       rel="stylesheet"
       href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
-  /></noscript>
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+/></noscript>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
   <link
     href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap"
     rel="stylesheet"
-  />
+/>
   <link href="/css/style.css?v=d41d8cd98f00b204e9800998ecf8427e" rel="stylesheet">
-   
-
+  
+  
+  
 
 
 
@@ -66,11 +68,11 @@
 
 
 
-  <title>Why Vue Is So Awesome 😍 - Praveen Puglia</title>
 
 
 
 
+<title>Why Vue Is So Awesome 😍 - Praveen Puglia</title>
 <meta property="og:site_name" content="Praveen Puglia"/>
 <meta property="og:title" content="Why Vue Is So Awesome 😍 - Praveen Puglia"/>
 <meta property="og:type" content="website"/>
@@ -94,8 +96,227 @@
   <meta name="twitter:image" content="https://praveenpuglia.com/assets/images/home-banner-mobile.avif"/>
 
 
-</head>
 
+  <style>
+    ::view-transition-old(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-use-avif-today) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-use-avif-today) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-why-vue-is-so-awesome) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-why-vue-is-so-awesome) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-reusing-areas-in-css-grid) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-reusing-areas-in-css-grid) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-animating-css-snake-art) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-animating-css-snake-art) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-css-toggle-function) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-css-toggle-function) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-people-i-learn-from) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-people-i-learn-from) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-introducing-poppins) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-introducing-poppins) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-meeting-lea-and-chris) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-meeting-lea-and-chris) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-talks-that-impress) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-talks-that-impress) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-ready-steady-gulp) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-ready-steady-gulp) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-the-right-html-element-for-icons) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-the-right-html-element-for-icons) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  
+  </style>
+</head>
   <body>
     <div class="site-header">
   <header class="main-header">
@@ -113,22 +334,24 @@ <h3 class="main-header-logo bold">Praveen Puglia</h3>
 </div>
 
     <div class="container">
-      
-<article class="single-post">
-  <h1 class="title">Why Vue Is So Awesome 😍</h1>
-  <div class="post__metadata">
-    <time datetime="2018-04-06">06 Apr, 2018</time>
-    <ul class="post__metadata__tags">
-      <li class="post__metadata__tag">
-        vue.js
-      </li>
-      <li class="post__metadata__tag">
-        thoughts
-      </li>
-      <li class="post__metadata__tag">
-        javascript
-      </li>
-    </ul>
+      <article class="single-post">
+  <div class="single-post__header">
+    <h1 class="title" style="view-transition-name: post-why-vue-is-so-awesome">Why Vue Is So Awesome 😍</h1>
+    <h4 class="subtitle"></h4>
+    <div class="post__metadata">
+      <time datetime="2018-04-06">06 Apr, 2018</time>
+      <ul class="post__metadata__tags">
+          <li class="post__metadata__tag">
+            vue.js
+          </li>
+          <li class="post__metadata__tag">
+            thoughts
+          </li>
+          <li class="post__metadata__tag">
+            javascript
+          </li>
+      </ul>
+    </div>
   </div>
 
   <p>...and Angular is not.</p>
@@ -294,4 +517,4 @@ <h2>Try It</h2>
 </div>
 
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/posts/xiaomi-redmi-1s-is-a-powerful-product-with-bad-design/index.html b/posts/xiaomi-redmi-1s-is-a-powerful-product-with-bad-design/index.html
index 3181ef0..5eff04b 100644
--- a/posts/xiaomi-redmi-1s-is-a-powerful-product-with-bad-design/index.html
+++ b/posts/xiaomi-redmi-1s-is-a-powerful-product-with-bad-design/index.html
@@ -16,11 +16,11 @@
     gtag("config", "UA-22054303-1");
   </script>
 
-  <meta charset="UTF-8" />
+  <meta charset="UTF-8"/>
   <meta
     name="viewport"
     content="width=device-width, initial-scale=1.0, viewport-fit=cover"
-  />
+/>
   <link rel="icon" href="/favicon.ico?v=d41d8cd98f00b204e9800998ecf8427e" type="image/png">
   <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png?v=d41d8cd98f00b204e9800998ecf8427e">
@@ -36,29 +36,31 @@
   <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=d41d8cd98f00b204e9800998ecf8427e">
   <link rel="manifest" href="/manifest.webmanifest?v=d41d8cd98f00b204e9800998ecf8427e">
-  <meta name="msapplication-TileColor" content="#ffffff" />
-  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
-  <meta name="theme-color" content="#ffffff" />
+  <meta name="view-transition" content="same-origin"/>
+  <meta name="msapplication-TileColor" content="#ffffff"/>
+  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png"/>
+  <meta name="theme-color" content="#ffffff"/>
   <link
     rel="preload"
     href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
     as="style"
     onload="this.onload=null;this.rel='stylesheet'"
-  />
+/>
   <noscript
     ><link
       rel="stylesheet"
       href="https://unpkg.com/prism-themes@1.9.0/themes/prism-one-light.min.css"
-  /></noscript>
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+/></noscript>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
   <link
     href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap"
     rel="stylesheet"
-  />
+/>
   <link href="/css/style.css?v=d41d8cd98f00b204e9800998ecf8427e" rel="stylesheet">
-   
-
+  
+  
+  
 
 
 
@@ -66,11 +68,11 @@
 
 
 
-  <title>Xiaomi Redmi 1S Is A Powerful Product With Bad Design - Praveen Puglia</title>
 
 
 
 
+<title>Xiaomi Redmi 1S Is A Powerful Product With Bad Design - Praveen Puglia</title>
 <meta property="og:site_name" content="Praveen Puglia"/>
 <meta property="og:title" content="Xiaomi Redmi 1S Is A Powerful Product With Bad Design - Praveen Puglia"/>
 <meta property="og:type" content="website"/>
@@ -94,8 +96,227 @@
   <meta name="twitter:image" content="https://praveenpuglia.com/assets/images/home-banner-mobile.avif"/>
 
 
-</head>
 
+  <style>
+    ::view-transition-old(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-secret-page-dev-info-vite-react) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-white-labeling-vue-cli-pwa) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-use-avif-today) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-use-avif-today) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-to-import-markdown-files-in-vue-cli-typescript-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-my-graphql-schema-types-generation-workflow copy) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-import-sass-variables-in-javascript-with-webpack) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-managing-mixins-and-utils-in-vue) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-why-vue-is-so-awesome) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-why-vue-is-so-awesome) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-nicer-imports-with-webpack-aliases) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-reusing-areas-in-css-grid) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-reusing-areas-in-css-grid) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-animating-css-snake-art) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-animating-css-snake-art) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-css-toggle-function) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-css-toggle-function) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-your-web-apps-little-more-native) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-people-i-learn-from) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-people-i-learn-from) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-introducing-poppins) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-introducing-poppins) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-meeting-lea-and-chris) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-meeting-lea-and-chris) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-finding-unique-color-strings-in-project) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-talks-that-impress) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-talks-that-impress) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-ready-steady-gulp) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-ready-steady-gulp) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-first-scss-experiment-a-blurry-world) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-tree-style-directory-structure-powershell) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-the-right-html-element-for-icons) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-the-right-html-element-for-icons) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-make-wamp-work-on-windows-10-technical-preview) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-so-you-love-in-ternational-brands) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-design-story-independence-day-cover-photo) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  ::view-transition-old(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.2s linear forwards;
+    }
+
+    ::view-transition-new(post-how-i-have-settled-down-to-inconsolata-for-codes) {
+      animation: fade 0.3s linear reverse;
+    }
+
+  
+  </style>
+</head>
   <body>
     <div class="site-header">
   <header class="main-header">
@@ -113,22 +334,24 @@ <h3 class="main-header-logo bold">Praveen Puglia</h3>
 </div>
 
     <div class="container">
-      
-<article class="single-post">
-  <h1 class="title">Xiaomi Redmi 1S Is A Powerful Product With Bad Design</h1>
-  <div class="post__metadata">
-    <time datetime="2014-10-19">19 Oct, 2014</time>
-    <ul class="post__metadata__tags">
-      <li class="post__metadata__tag">
-        thoughts
-      </li>
-      <li class="post__metadata__tag">
-        phone
-      </li>
-      <li class="post__metadata__tag">
-        design
-      </li>
-    </ul>
+      <article class="single-post">
+  <div class="single-post__header">
+    <h1 class="title" style="view-transition-name: post-xiaomi-redmi-1s-is-a-powerful-product-with-bad-design">Xiaomi Redmi 1S Is A Powerful Product With Bad Design</h1>
+    <h4 class="subtitle"></h4>
+    <div class="post__metadata">
+      <time datetime="2014-10-19">19 Oct, 2014</time>
+      <ul class="post__metadata__tags">
+          <li class="post__metadata__tag">
+            thoughts
+          </li>
+          <li class="post__metadata__tag">
+            phone
+          </li>
+          <li class="post__metadata__tag">
+            design
+          </li>
+      </ul>
+    </div>
   </div>
 
   <p><a href="/assets/images/2014/10/xiaomi-redmi-1s-quad-core-16ghz-1gb-8gb-47-inch-ips-8mp-camera-dual-sim-wcdma-version-smartphone-black.avif"><img src="/assets/images/2014/10/xiaomi-redmi-1s-quad-core-16ghz-1gb-8gb-47-inch-ips-8mp-camera-dual-sim-wcdma-version-smartphone-black.avif" alt=""></a></p>
@@ -181,4 +404,4 @@ <h2>Summary</h2>
 </div>
 
   </body>
-</html>
+</html>
\ No newline at end of file