Added preview videos for chatto

content/projects/chatto-a-self-hosted-e2ee-chat-application.md

@@ -1,9 +1,12 @@
 +++
-title = "Chatto - A Self Hosted E2EE Chat Application"
+title = "Chatto <A Self Hosted E2EE Chat Applicati>n"
 date = "2020-06-01T15:02:07+05:30"
 disable_comments = true
 draft = false
 
+[sidebar]
+    disable = true
+
 categories = [
 
     "Projects"
@@ -65,3 +68,30 @@ Chatto is a self hosted, end to end encrypted chat application.
 * **Frontend** - 
   + Server side templating - Thymeleaf
   + JS - TypeScript, Browserify (and plugins like tsify), Terser, Grunt, Yarn
+      * Templating using Handlebars
+
+## Preview
+
+### Design
+
++ **Full layout**
+    <p align="center"> ![Preview](/img/projects/chatto/chatto-preview-main.png)
+    Design adapted from [bootsnip](https://bootsnipp.com/snippets/nNg98)</p>
++ **Mobile layout** <br>
+    The UI uses bootstrap grid system for a fully responsive layout. This is how it might look on a mobile screen -
+    <p align="center">![chatto-on-mobile](/img/projects/chatto/chatto-preview-main-2.png)</p>
+<!-- <video autoplay loop style=" width: 100%    !important;
+  height: auto   !important;">
+    <source type="video/mp4" src="/img/projects/chatto/chatto-preview-infinite-scroll.mkv">
+    </source>
+</video> -->
+### Infinite scroll
+{{< apvid >}}/img/projects/chatto/chatto-preview-infinite-scroll-2.mkv{{< /apvid >}}
+Decryption takes place on the fly on a background thread using the web worker API for a smooth user experience.
+
+### E2EE Passphrase
+{{< avid >}}/img/projects/chatto/chatto-preview-passphrase.mp4{{</ avid>}}
+Note - passphrase is not stored on the server, or anywhere other than client's memory. The app simply checks whether decryption was successful to determine whether the passphrase is correct.
+
+### Markdown in chat
+{{< avid >}}/img/projects/chatto/chatto-preview-markdown.mkv{{</ avid>}}