New Logo added

src/components/blog.js

@@ -51,7 +51,7 @@ export const blogQuery = graphql`
   query {
     allMarkdownRemark(
       sort: { fields: [frontmatter___date], order: DESC }
-      limit: 3
+      limit: 6
       filter: { frontmatter: { posttype: { eq: "blog" } } }
     ) {
       totalCount

src/components/seo.js

@@ -57,11 +57,11 @@ function SEO({ description, lang, meta, title, img }) {
         },
         {
           property: `og:type`,
-          content: `blog`,
+          content: `Website`,
         },
         {
           name: `twitter:card`,
-          content: `summary`,
+          content: `summary_large_image`,
         },
         {
           name: `twitter:creator`,

src/contents/posts/007-javascript-arrow-function.md

@@ -0,0 +1,67 @@
+---
+posttype: 'blog'
+title: 'JavaScript Arrow Functions'
+date: 2020-11-01 12:00:00
+author: 'Shafiqul Islam Shuvo'
+image: '../../images/javascript-arrow-function.jpg'
+postdescription: "Arrow Functions in JavaScript"
+tags:
+- JavaScript
+- ES6
+---
+
+**Arrow** function was introduced with **ES6** as a new syntax for writing JavaScript functions. There are a few differences between **arrow** functions and **regular** functions
+
+<h5 class="post-subheading">Arrow Function <em>vs</em> Regular Function</h5>
+
+<table class="table table-bordered">
+  <thead class="thead-light">
+    <tr>
+      <th class="text-center">Arrow Function</th>
+      <th class="text-center">Regular Function</th>
+    </tr>
+  </thead>
+  <tr>
+    <td width="50%">The value of <code>this</code> will always be inherited from the outer function. If there is no outer function, <code>this</code> will refer to the global object. In other words, the arrow function resolves <code>this</code> lexically.</td>
+    <td>The value of <code>this</code> depends how the function is invoked or who owns the function:
+      <ul class="point-list">
+      <li>1. Simple invocation - <code>this</code> refers to the global object</li>
+      <li>2. Method invocation – <code>this</code> refers to the parent object</li>
+      <li>3. Constructor invocation – <code>this</code> refers to the newly created instance</li>
+      </ul>
+  </td>
+  </tr>
+  <tr>
+    <td>Doesn’t have <code>arguments</code> object but we can access the arguments using a rest parameter <code>…args</code></td>
+    <td>Has a special <code>arguments</code> object containing the list of arguments</td>
+  </tr>
+  <tr>
+    <td>Supports implicit <code>return</code> expression statement.</td>
+    <td><code>return</code> expression statement needs to be explicitly declared.</td>
+  </tr>
+  <tr>
+    <td>A <strong>class method</strong> defined as arrow function will always bind <code>this</code> to the class instance.</td>
+    <td>If a <strong>class method</strong> defined as a regular function and used as a <strong>callback</strong>, we have to bind <code>this</code> to the method.</td>
+  </tr>
+</table>
+
+<br>
+<h5 class="post-subheading">Arrow Functions should be used when</h5>
+
+<ul class="point-list">
+  <li>The value of <code>this</code> needs to be consistent and returns the same value always</li>
+  <li>The function has only one line of statement and which may be a simple <code>return expression</code></li>
+  <li>The function doesn't need to access its <code>arguments</code> object</li>
+  <li><strong>Callback</strong> functions with static context</li>
+</ul>
+
+<h5 class="post-subheading">Arrow Functions shouldn't be used when</h5>
+
+<ul class="point-list">
+  <li>As an object property or object prototype (<code>this</code> inside the arrow function will refer to "window" object instead of the parent object/function)</li>
+  <li><strong>Callback</strong> functions with dynamic context</li>
+  <li>The function will be used as a <code>constructor</code></li>
+  <li>The <code>return expression</code> statement needs to be explicit</li>
+  <li>Need to access the <code>arguments</code> object of the function</li>
+</ul>
+

src/contents/posts/008-css-bem-methodology.md

@@ -0,0 +1,61 @@
+---
+posttype: 'blog'
+title: 'CSS BEM Methodology'
+date: 2020-11-11 12:00:00
+author: 'Shafiqul Islam Shuvo'
+image: '../../images/css-bem-methodology.png'
+postdescription: "BEM Methodology is a popular naming convention for classes in HTML and CSS"
+tags:
+- CSS
+- BEM
+---
+
+The **BEM** methodology (Block, Element, Modifier) is a popular naming convention for classes in HTML and CSS.
+
+
+
+It is less confusing comparing to the other methods (i.e. **SMACSS**) but still provides a good architecture with a recognizable terminology.
+
+<br>
+
+<h5 class="post-subheading">3 principle elements of BEM</h5>
+
+<ul class="point-list mb-1">
+  <li><strong>Block</strong>: Container, Wrapper, Layout elements</li>
+</ul>
+
+**Example:** `.form`, `.menu`
+
+<ul class="point-list mb-1">
+  <li><strong>Element</strong>: Child of a Block element</li>
+</ul>
+
+**Example:** `.form__input`, `.menu__item`
+
+<ul class="point-list mb-1">
+  <li><strong>Modifier</strong>: can change the appearance of a Block or Element</li>
+</ul>
+
+**Example:** `.form__input--disabled`, `.menu__item--active`
+
+<br>
+
+<h5 class="post-subheading">Rules of BEM</h5>
+
+<ul class="point-list">
+  <li>HTML <strong>tag</strong> or <strong>ID</strong> selector shouldn't be used</li>
+  <li><strong>Elements</strong> are namespaced using the <strong>Block</strong> names and separated by <code>__</code> (double underscores)</li>
+  <li><strong>Modifiers</strong> are separated by <code>—-</code> (double hyphens)</li>
+</ul>
+
+<br>
+
+<h5 class="post-subheading">Benefits of using BEM</h5>
+
+<ul class="check-list">
+  <li><strong>BEM</strong> is hugely adopted and one of the most popular methodology for writing CSS</li>
+  <li><strong>BEM</strong> helps to build a solid structure that remains simple and easy to understand.</li>
+  <li>Because of strict naming conventions, there is less possibility to run into conflicts with CSS names</li>
+  <li>Everything is a <strong>class</strong> and nothing is nested, so won't have to face <strong>specificity</strong> related issues.</li>
+  <li>The Prolonged naming convention can reduce the readability of the code but it helps to understand the role of each element.</li>
+</ul>

src/contents/projects/004-ecommerce-html-template.md

@@ -1,6 +1,6 @@
 ---
 posttype: 'portfolio'
-title: 'HTML Template for E-commerce'
+title: 'E-commerce Template'
 date: 2017-01-01 10:00:00
 link: 'https://meghsohor.github.io/portfolio/e-commerce/'
 image: '../../images/e-commerce.jpg'

src/pages/blog.js

@@ -52,7 +52,7 @@ export const blogQuery = graphql`
             date(formatString: "MMMM DD, YYYY")
             image {
               childImageSharp {
-                fluid(maxWidth: 600) {
+                fluid(maxWidth: 728) {
                   ...GatsbyImageSharpFluid
                 }
               }

src/styles/main.css

@@ -1,6 +1,6 @@
 @import "../../node_modules/bootstrap/dist/css/bootstrap.min.css";
 @import url("../../node_modules/font-awesome/css/font-awesome.min.css");
-@import url("https://fonts.googleapis.com/css2?family=Bitter:wght@400;600;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Domine:wght@400;600;700&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;&display=swap");
 
 /*-------- Base Styles ---------*/
@@ -10,7 +10,9 @@ body {
 }
 
 body {
-  font-family: "Bitter", serif;
+  font-family: "Domine", serif;
+  font-size: 18px;
+  color: #1b1b1b;
   background-color: #f0f0f0;
 }
 
@@ -34,18 +36,24 @@ h6,
 .h4,
 .h5,
 .h6 {
-  font-weight: 600;
+  font-weight: 700;
+}
+
+h6, .h6 {
+  font-size: 18px;
 }
 
-.badge,
 strong,
 b {
-  font-weight: 600;
+  font-weight: 700;
 }
 .btn {
   font-weight: 600;
   text-transform: uppercase;
 }
+.badge {
+  font-weight: 600;
+}
 
 img {
   max-width: 100%;
@@ -420,16 +428,15 @@ ul {
   position: relative;
   padding: 0.5rem;
   padding-left: 0;
-  display: flex;
 }
 .check-list li:before {
   content: "\F14A";
   color: #2d9fd2;
   font: normal normal normal 14px/1 FontAwesome;
   font-size: 1.25rem;
-  display: block;
+  float: left;
   margin-right: 0.5rem;
-  line-height: 2rem;
+  line-height: 1.7rem;
 }
 
 .career-card .portfolio-tags {
@@ -596,7 +603,7 @@ deckgo-highlight-code {
   margin-bottom: 2rem;
 }
 code {
-  font-size: 0.9rem;
+  font-size: 16px;
   font-family: Fira Code,monospace;
   font-weight: 500;
   background: #f4f4f6;

src/templates/post-list.js

@@ -47,7 +47,7 @@ export const postListQuery = graphql`
             date(formatString: "MMMM DD, YYYY")
             image {
               childImageSharp {
-                fluid(maxWidth: 600) {
+                fluid(maxWidth: 728) {
                   ...GatsbyImageSharpFluid
                 }
               }