diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
deleted file mode 100644
index dd84ea7..0000000
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ /dev/null
@@ -1,38 +0,0 @@
----
-name: Bug report
-about: Create a report to help us improve
-title: ''
-labels: ''
-assignees: ''
-
----
-
-**Describe the bug**
-A clear and concise description of what the bug is.
-
-**To Reproduce**
-Steps to reproduce the behavior:
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
-
-**Expected behavior**
-A clear and concise description of what you expected to happen.
-
-**Screenshots**
-If applicable, add screenshots to help explain your problem.
-
-**Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
-
-**Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
-
-**Additional context**
-Add any other context about the problem here.
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
deleted file mode 100644
index bbcbbe7..0000000
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ /dev/null
@@ -1,20 +0,0 @@
----
-name: Feature request
-about: Suggest an idea for this project
-title: ''
-labels: ''
-assignees: ''
-
----
-
-**Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
-
-**Describe the solution you'd like**
-A clear and concise description of what you want to happen.
-
-**Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
-
-**Additional context**
-Add any other context or screenshots about the feature request here.
diff --git a/.gitignore b/.gitignore
index a905225..867d379 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,8 +1,5 @@
-_site/
-.sass-cache/
-.jekyll-cache/
-.jekyll-metadata
-Gemfile.lock
-README.md
 *.gem
-.bundle
\ No newline at end of file
+.bundle
+.sass-cache
+_site
+Gemfile.lock
diff --git a/404.md b/404.md
index d2b889f..a50ef20 100644
--- a/404.md
+++ b/404.md
@@ -1,5 +1,5 @@
 ---
-title: You lost from my journey
-permalink: "/404.html"
+title: Lost from journey
 layout: 404
----
\ No newline at end of file
+permalink: "/404.html"
+---
diff --git a/CHANGELOG.md b/CHANGELOG.md
deleted file mode 100644
index 8b13789..0000000
--- a/CHANGELOG.md
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
deleted file mode 100644
index bef6526..0000000
--- a/CODE_OF_CONDUCT.md
+++ /dev/null
@@ -1,76 +0,0 @@
-# Contributor Covenant Code of Conduct
-
-## Our Pledge
-
-In the interest of fostering an open and welcoming environment, we as
-contributors and maintainers pledge to making participation in our project and
-our community a harassment-free experience for everyone, regardless of age, body
-size, disability, ethnicity, sex characteristics, gender identity and expression,
-level of experience, education, socio-economic status, nationality, personal
-appearance, race, religion, or sexual identity and orientation.
-
-## Our Standards
-
-Examples of behavior that contributes to creating a positive environment
-include:
-
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
-
-Examples of unacceptable behavior by participants include:
-
-* The use of sexualized language or imagery and unwelcome sexual attention or
- advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic
- address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
- professional setting
-
-## Our Responsibilities
-
-Project maintainers are responsible for clarifying the standards of acceptable
-behavior and are expected to take appropriate and fair corrective action in
-response to any instances of unacceptable behavior.
-
-Project maintainers have the right and responsibility to remove, edit, or
-reject comments, commits, code, wiki edits, issues, and other contributions
-that are not aligned to this Code of Conduct, or to ban temporarily or
-permanently any contributor for other behaviors that they deem inappropriate,
-threatening, offensive, or harmful.
-
-## Scope
-
-This Code of Conduct applies both within project spaces and in public spaces
-when an individual is representing the project or its community. Examples of
-representing a project or community include using an official project e-mail
-address, posting via an official social media account, or acting as an appointed
-representative at an online or offline event. Representation of a project may be
-further defined and clarified by project maintainers.
-
-## Enforcement
-
-Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported by contacting the project team at justharpi@gmail.com. All
-complaints will be reviewed and investigated and will result in a response that
-is deemed necessary and appropriate to the circumstances. The project team is
-obligated to maintain confidentiality with regard to the reporter of an incident.
-Further details of specific enforcement policies may be posted separately.
-
-Project maintainers who do not follow or enforce the Code of Conduct in good
-faith may face temporary or permanent repercussions as determined by other
-members of the project's leadership.
-
-## Attribution
-
-This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
-available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
-
-[homepage]: https://www.contributor-covenant.org
-
-For answers to common questions about this code of conduct, see
-https://www.contributor-covenant.org/faq
diff --git a/Gemfile b/Gemfile
index 43b6a9b..bb94df8 100644
--- a/Gemfile
+++ b/Gemfile
@@ -1,33 +1,4 @@
+# frozen_string_literal: true
+
 source "https://rubygems.org"
-
-# Hello! This is where you manage which Jekyll version is used to run.
-# When you want to use a different version, change it below, save the
-# file and run `bundle install`. Run Jekyll with `bundle exec`, like so:
-#
-#     bundle exec jekyll serve
-#
-# This will help ensure the proper Jekyll version is running.
-# Happy Jekylling!
-gem "jekyll", "~> 3.8.3"
-
-# This is the default theme for new Jekyll sites. You may change this to anything you like.
-# gem "minima", "~> 2.0"
-
-# If you want to use GitHub Pages, remove the "gem "jekyll"" above and
-# uncomment the line below. To upgrade, run `bundle update github-pages`.
-# gem "github-pages", group: :jekyll_plugins
-
-# If you have any plugins, put them here!
-group :jekyll_plugins do
-  gem 'jekyll-feed', '~> 0.11.0'
-  gem 'jekyll-sitemap'
-  gem 'jekyll-sass-converter', '~> 1.5', '>= 1.5.2'
-  gem 'rouge', '3.3.0'
-end
-
-# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
-gem "tzinfo-data", platforms: [:mingw, :mswin, :x64_mingw, :jruby]
-
-# Performance-booster for watching directories on Windows
-gem "wdm", "~> 0.1.0" if Gem.win_platform?
-
+gemspec
diff --git a/LICENSE b/LICENSE.txt
similarity index 87%
rename from LICENSE
rename to LICENSE.txt
index 88aa011..ce9be25 100644
--- a/LICENSE
+++ b/LICENSE.txt
@@ -1,6 +1,6 @@
-MIT License
+The MIT License (MIT)
 
-Copyright (c) 2019 Mahendrata Harpi
+Copyright (c) 2019 piharpi
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -9,13 +9,13 @@ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:
 
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
 
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/README.md b/README.md
index 7b7352d..4e78a35 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,52 @@
-# Bangsring Jekyll Theme
-Description is work in progress
+# bangsring
+
+Welcome to your new Jekyll theme! In this directory, you'll find the files you need to be able to package up your theme into a gem. Put your layouts in `_layouts`, your includes in `_includes`, your sass files in `_sass` and any other assets in `assets`.
+
+To experiment with this code, add some sample content and run `bundle exec jekyll serve` – this directory is setup just like a Jekyll site!
+
+TODO: Delete this and the text above, and describe your gem
+
+
+## Installation
+
+Add this line to your Jekyll site's `Gemfile`:
+
+```ruby
+gem "bangsring"
+```
+
+And add this line to your Jekyll site's `_config.yml`:
+
+```yaml
+theme: bangsring
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install bangsring
+
+## Usage
+
+TODO: Write usage instructions here. Describe your available layouts, includes, sass and/or assets.
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/hello. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
+
+## Development
+
+To set up your environment to develop this theme, run `bundle install`.
+
+Your theme is setup just like a normal Jekyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.
+
+When your theme is released, only the files in `_layouts`, `_includes`, `_sass` and `assets` tracked with Git will be bundled.
+To add a custom directory to your theme-gem, please edit the regexp in `bangsring.gemspec` accordingly.
 
 ## License
-MIT License 
+
+The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+
diff --git a/_config.yml b/_config.yml
index fe504bb..69d765d 100644
--- a/_config.yml
+++ b/_config.yml
@@ -1,50 +1,64 @@
 # Site settings
-title: Leah Rutherford
-projects: true # false to hide my work
-description:  >-
-  Turpis egestas integer eget aliquet nibh praesent tristique magna sit amet 
-  purus gravida quis blandit turpis cursus in hac habitasse platea <a href="#">dictumst</a> quisque sagittis.
+title: Mahendrata Harpi 🇮🇩
+description: >-
+  this blog is place where i'm writing about web technology 
+  what i like and as journal for documentation things what i learned, meet me <a href="https://github.com/piharpi" target="_blank">@github</a>.
 lang: en-US
 timezone: Asia/Jakarta
-icon: favicon.ico
+icon: "favicon.ico"
 
 # User settings
-author: 
-  name: Leah Rutherford
+author:
+  name: Mahendrata Harpi
   username: piharpi
   email: justharpi@gmail.com
-  avatar: '/assets/img/avatar.png'
+  avatar: "/assets/img/avatar.jpg"
 
 # Url settings
-url: https://piharpi.github.io/bangsring
+url: https://piharpi.com
 baseurl: ""
-permalink: /:categories/:title
-google_analytics: UA-105586262-2
-fb_appid: 1806380839422028
+permalink: blog/:categories/:title/
+google_analytics: UA-105586262-1
+fb_appid: ""
 
+# Collection setting
 collections:
   posts:
     output: true
 
 # Markdown settings
 markdown: kramdown
-syntax_highlighter: rouge
+highlighter: rouge
+kramdown:
+  syntax_highlighter: rouge
 
 # Default front matter
 defaults:
-  -
-    scope:
+  - scope:
       path: ""
     values:
       layout: post
-      image: /assets/img/avatar.png
+      comments: false
+
+# Jekyll Compose default front matter
+jekyll_compose:
+  post_default_front_matter:
+    modified:
+    tags: []
+    description:
+  draft_default_front_matter:
+    modified:
+    tags: []
+    description:
 
 # Build settings
 sass:
   style: compressed
+
 include:
   - _redirects
   - .htaccess
+
 exclude:
   - CNAME
   - Gemfile
@@ -52,10 +66,10 @@ exclude:
   - LICENSE
   - CHANGELOG.md
   - README.md
-  - node_modules 
+  - node_modules
   - bangsring.gemspec
   - CODE_OF_CONDUCT.md
-  
+
 # Plugins
 plugins:
   - jekyll-feed
diff --git a/_data/menus.yml b/_data/menus.yml
index 25f8d20..cfe6a56 100644
--- a/_data/menus.yml
+++ b/_data/menus.yml
@@ -1,14 +1,8 @@
-- title : Home
-  url   : /
+- title: Home
+  url: /
 
-- title : Blog
-  url   : /blog
+- title: About
+  url: /about/
 
-- title : Tips
-  url   : /tips
-
-- title : About 
-  url   : /about
-
-- title : RSS 
-  url   : /feed.xml
\ No newline at end of file
+- title: RSS
+  url: /feed.xml/
diff --git a/_data/projects.yml b/_data/projects.yml
deleted file mode 100644
index d947579..0000000
--- a/_data/projects.yml
+++ /dev/null
@@ -1,22 +0,0 @@
-
-
-- title : bangsring
-  url   : https://github.com/piharpi/bangsring
-  description : 🏖 Bangsring is minimalist Jekyll theme for running a personal site and blog.
-  action : <a class="github-button" href="https://github.com/piharpi/bangsring" rel="noreferrer" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star piharpi/bangsring on GitHub">Star</a>
-
-- title : ruby-book
-  url   : https://piharpi.gitbook.io/ruby-in-bahasa/
-  description : Ruby ebook in bahasa indonesia, free and open source.
-  action : <a class="github-button" href="https://github.com/piharpi/rubyinbahasa/issues" rel="noreferrer" data-icon="octicon-issue-opened" data-size="large" data-show-count="true" aria-label="Issue piharpi/rubyinbahasa on GitHub">Issue</a>
-
-- title : osingdev.org
-  url   : https://github.com/osingdev
-  description : A community of programmers @banyuwangi, to discuss and share knowledge.
-  action : <a class="github-button" href="https://github.com/osingdev/osingdev.github.io/fork" rel="noreferrer" data-icon="octicon-repo-forked" data-size="large" data-show-count="true" aria-label="Fork osingdev/osingdev.github.io on GitHub">Fork</a>
-
-
-- title : piharpi.com
-  url   : https://piharpi.com/
-  description : My personal site, this is what you are currently seeing, running on jekyll.
-  action : <a class="github-button" href="https://github.com/piharpi/piharpi.com" data-icon="octicon-star" rel="noreferrer" data-size="large" data-show-count="true" aria-label="Star osingdev/piharpi.com on GitHub">Star</a>
\ No newline at end of file
diff --git a/_includes/blog.html b/_includes/blog.html
deleted file mode 100644
index 1ad4912..0000000
--- a/_includes/blog.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<h4 class="home-title"><span role="img" aria-label="book">📘</span>blog posts</h4>
-<div class="content">
-{% for post in site.categories.blog %}
-<article class="list-post blog">
-    <header class="list-post-header">
-      <h2 class="list-post-title">
-        <a href="{{ post.url | absolute_url }}">{{ post.title | escape }}</a>
-      </h2>
-    </header>
-    <section class="list-post-excerpt">
-      <p class="list-post-excerpt"> — {{ post.excerpt | strip_html | normalize_whitespace | truncatewords: 15, '...' }} </p>
-    </section>
-  </article>
-{% endfor %}
-</div>
\ No newline at end of file
diff --git a/_includes/comments.html b/_includes/comments.html
new file mode 100644
index 0000000..e97f140
--- /dev/null
+++ b/_includes/comments.html
@@ -0,0 +1 @@
+<!-- paste here -->
diff --git a/_includes/cover.html b/_includes/cover.html
deleted file mode 100644
index 2fad9cb..0000000
--- a/_includes/cover.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<div class="site-intro">
-  {% assign url = page.url %}
-    {% if url == "/" %}
-      <figure class="intro-image">
-        <img src="{{ site.author.avatar | absolute_url }}" alt="{{ site.author.username }}">
-      </figure>
-    {%endif%}
-  <div class="intro-name">{{ site.title  }}</div>
-  <p class="intro-description">{{ site.description }}</p>
-</div>  
-  
-{% include header.html %}
\ No newline at end of file
diff --git a/_includes/disqus_comment.html b/_includes/disqus_comment.html
deleted file mode 100644
index 2304536..0000000
--- a/_includes/disqus_comment.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<div class="disqus">
-<div id="disqus_thread"></div>
-</div>
-<script src="/assets/js/disqus.js"></script>
-<script>
-    var options =
-    {
-        scriptUrl: '//domain.disqus.com/embed.js',
-        laziness: 0.5,
-        throttle: 250,
-        disqusConfig: function () {
-            this.page.title = '{{ page.title }}';
-            this.page.url = 'https://yourweb.tld{{ page.url }}';
-            this.page.identifier = '{{ page.id }}';
-        }
-    };
-
-    disqusLoader('.disqus', options);
-
-</script>
-<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
\ No newline at end of file
diff --git a/_includes/footer.html b/_includes/footer.html
index 81a9bfd..5a9a8f2 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -1,8 +1,14 @@
-<footer class="site-footer">
-    <p><span class="crafted">Crafted with 🍩 in Banyuwangi, <b>IDN</b>.</span></p>
+<footer class="footer">
+  <div class="copyright">
+    <a href="/thanks">ack.</a>
+    <b>/</b>
+    <a href="/feed.xml">rss</a>
+    <b>/</b>
+    <b>&copy; {{ site.time | date: "%Y" }}</b>
+  </div>
 </footer>
 <script src="/assets/js/galite.js"></script>
 <script>
   var galite = galite || {};
   galite.UA = "{{ site.google_analytics }}";
-</script>
\ No newline at end of file
+</script>
diff --git a/_includes/head.html b/_includes/head.html
index 781ceff..43c8a62 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -1,58 +1,148 @@
 <head prefix="og:http://ogp.me/ns#">
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="mobile-web-app-capable" content="yes">
-  <meta name="theme-color" content="#24292e">
-  <meta name="apple-mobile-web-app-capable" content="yes">
-  <meta name="application-name" content="{{ site.title }}">
-  <meta name="apple-mobile-web-app-status-bar-style" content="#fff">
-  <meta name="apple-mobile-web-app-title" content="{{ site.title }}">
-  <title>{% if page.title %}{{ page.title | escape }} | {{ site.title }}{% else %}{{ site.title | escape }}{% endif %}</title>
-  <link rel="alternate" href="{{ page.url | absolute_url | remove: 'index.html' | remove: '.html' }}" hreflang="{{ site.lang }}">
-  <link rel="canonical" href="{{ page.url | absolute_url | remove: 'index.html' | remove: '.html' }}">
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="mobile-web-app-capable" content="yes" />
+  <meta name="theme-color" content="#24292e" />
+  <meta name="apple-mobile-web-app-capable" content="yes" />
+  <meta name="application-name" content="{{ site.title }}" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="#fff" />
+  <meta name="apple-mobile-web-app-title" content="{{ site.title }}" />
+  <title>
+    {% if page.title %}{{ page.title | escape }} - {{ site.title }}{% else %}{{
+      site.title | escape
+    }}{% endif %}
+  </title>
+  <link
+    rel="alternate"
+    href="{{
+      page.url | absolute_url | remove: 'index.html' | remove: '.html'
+    }}"
+    hreflang="{{ site.lang }}"
+  />
+  <link
+    rel="canonical"
+    href="{{
+      page.url | absolute_url | remove: 'index.html' | remove: '.html'
+    }}"
+  />
   {% if paginator.previous_page %}
-  <link rel="prev" href="{{ paginator.previous_page_path | absolute_url | remove: 'index.html' | remove: '.html' }}">
+  <link
+    rel="prev"
+    href="{{
+      paginator.previous_page_path
+        | absolute_url
+        | remove: 'index.html'
+        | remove: '.html'
+    }}"
+  />
+  {% endif %} {% if paginator.next_page %}
+  <link
+    rel="next"
+    href="{{
+      paginator.next_page_path
+        | absolute_url
+        | remove: 'index.html'
+        | remove: '.html'
+    }}"
+  />
   {% endif %}
-  {% if paginator.next_page %}
-  <link rel="next" href="{{ paginator.next_page_path | absolute_url | remove: 'index.html' | remove: '.html' }}">
-  {% endif %}
-  <meta name="description" content="{{ page.excerpt | default: site.description | strip_html | normalize_whitespace | truncate: 200 | escape }}">
-  <meta name="referrer" content="no-referrer-when-downgrade">
-  <meta property="fb:app_id" content="{{ site.fb_appid }}">
-  <meta property="og:site_name" content="{% if page.title %}{{ page.title | escape }} | {{ site.author.username }}{% else %}{{ site.title | escape }}{% endif %}">
-  <meta property="og:title" content="{% if page.title %}{{ page.title | escape }} | {{ site.author.username }}{% else %}{{ site.title | escape }}{% endif %}">
+  <meta
+    name="description"
+    content="{{
+      page.description
+        | default: site.description
+        | strip_html
+        | normalize_whitespace
+        | truncate: 200
+        | escape
+    }}"
+  />
+  <meta name="referrer" content="no-referrer-when-downgrade" />
+  <meta property="fb:app_id" content="{{ site.fb_appid }}" />
+  <meta
+    property="og:site_name"
+    content="{% if page.title %}{{ page.title | escape }} | {{
+      site.author.username
+    }}{% else %}{{ site.title | escape }}{% endif %}"
+  />
+  <meta
+    property="og:title"
+    content="{% if page.title %}{{ page.title | escape }} | {{
+      site.author.username
+    }}{% else %}{{ site.title | escape }}{% endif %}"
+  />
   {% if page.location %}
-  <meta property="og:type" content="article">
-  <meta property="article:publisher" content="https://web.facebook.com/{{site.author.username}}">
+  <meta property="og:type" content="article" />
+  <meta
+    property="article:publisher"
+    content="https://web.facebook.com/{{ site.author.username }}"
+  />
   {% else %}
-  <meta property="og:type" content="website">
+  <meta property="og:type" content="website" />
   {% endif %}
-  <meta property="og:url" content="{{ page.url | absolute_url | remove: 'index.html' | remove: '.html'}}">
-  <meta property="og:description" content="{{ page.excerpt | default: site.description | strip_html | normalize_whitespace | truncate: 200 | escape }}">
+  <meta
+    property="og:url"
+    content="{{
+      page.url | absolute_url | remove: 'index.html' | remove: '.html'
+    }}"
+  />
+  <meta
+    property="og:description"
+    content="{{
+      page.description
+        | default: site.description
+        | strip_html
+        | normalize_whitespace
+        | truncate: 200
+        | escape
+    }}"
+  />
   {% if page.image %}
-  <meta property="og:image" content="{{ page.image | absolute_url }}">
+  <meta property="og:image" content="{{ page.image | absolute_url }}" />
   {% else %}
-  <meta property="og:image" content="{{ site.image | absolute_url }}">
+  <meta property="og:image" content="{{ site.image | absolute_url }}" />
   {% endif %}
   <meta property="og:image:width" content="640" />
   <meta property="og:image:height" content="640" />
-  <meta name="twitter:card" content="summary">
-  <meta name="twitter:title" content="{% if page.title %}{{ page.title | escape }} | {{ site.author.username }}{% else %}{{ site.title | escape }}{% endif %}">
-  <meta name="twitter:url" content="{{ page.url | absolute_url | remove: 'index.html' | remove: '.html'}}">
-  <meta name="twitter:site" content="@{{site.author.username}}">
-  <meta name="twitter:creator" content="@{{site.author.username}}">  
-  <meta name="twitter:description" content="{{ page.excerpt | default: site.description | strip_html | normalize_whitespace | truncate: 200 | escape }}"/>
+  <meta name="twitter:card" content="summary" />
+  <meta
+    name="twitter:title"
+    content="{% if page.title %}{{ page.title | escape }} | {{
+      site.author.username
+    }}{% else %}{{ site.title | escape }}{% endif %}"
+  />
+  <meta
+    name="twitter:url"
+    content="{{
+      page.url | absolute_url | remove: 'index.html' | remove: '.html'
+    }}"
+  />
+  <meta name="twitter:site" content="@{{ site.author.username }}" />
+  <meta name="twitter:creator" content="@{{ site.author.username }}" />
+  <meta
+    name="twitter:description"
+    content="{{
+      page.description
+        | default: site.description
+        | strip_html
+        | normalize_whitespace
+        | truncate: 200
+        | escape
+    }}"
+  />
   {% if page.image %}
-  <meta name="twitter:image" content="{{ page.image | absolute_url }}">
+  <meta name="twitter:image" content="{{ page.image | absolute_url }}" />
   {% else %}
-  <meta name="twitter:image" content="{{ site.image | absolute_url }}">
-  {% endif %}
-  {% feed_meta %}
-  <link rel="icon" href="{{ site.icon | absolute_url }}" type="image/x-icon"/>
-  <link rel="shortcut icon" href="{{ site.icon | absolute_url }}" type="image/x-icon"/>
+  <meta name="twitter:image" content="{{ site.image | absolute_url }}" />
+  {% endif %} {% feed_meta %}
+  <link rel="icon" href="{{ site.icon | absolute_url }}" type="image/x-icon" />
+  <link
+    rel="shortcut icon"
+    href="{{ site.icon | absolute_url }}"
+    type="image/x-icon"
+  />
 
-  <link rel="apple-touch-icon" href="{{ site.icon }}">
-  <link rel="stylesheet" href="{{ '/assets/css/style.css' | absolute_url }}">
-  <script async defer src="https://buttons.github.io/buttons.js"></script>
-</head>
\ No newline at end of file
+  <link rel="apple-touch-icon" href="{{ site.icon }}" />
+  <link rel="stylesheet" href="{{ '/assets/css/style.css' | absolute_url }}" />
+</head>
diff --git a/_includes/header.html b/_includes/header.html
deleted file mode 100644
index 2bf5f4f..0000000
--- a/_includes/header.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<header class="site-header" role="navigation">
-  <nav class="site-nav">
-      <input type="checkbox" id="nav-trigger" class="nav-trigger"/>
-      <label for="nav-trigger">
-          <span class="menu-icon">
-              <svg viewBox="0 0 18 15" width="18px" height="15px" style="background: white;">
-                <path fill="#fff" d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"/>
-                <path fill="#fff" d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484 h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"/>
-                <path fill="#fff" d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z"/>
-              </svg>
-          </span>
-      </label>
-      <div class="trigger">
-        <div class="trigger-container">
-          {% assign url = page.url%}
-          {% for menu in site.data.menus %}
-            {% if url == menu.url %}
-              <a class="page-link active" href="{{ menu.url | absolute_url }}">{{ menu.title }}</a>
-            {% else %}
-              <a class="page-link" href="{{ menu.url | absolute_url }}">{{ menu.title }}</a>
-            {% endif %}
-          {% endfor %}
-      </div>
-  </nav>
-</header>
\ No newline at end of file
diff --git a/_includes/jumbotron.html b/_includes/jumbotron.html
new file mode 100644
index 0000000..446484c
--- /dev/null
+++ b/_includes/jumbotron.html
@@ -0,0 +1,9 @@
+<div class="introduction">
+  <img
+    class="introduction-image"
+    src="{{ site.author.avatar | absolute_url }}"
+    alt="{{ site.author.username }}"
+  />
+  <div class="introduction-name">{{ site.title }}</div>
+  <p class="introduction-description">{{ site.description }}</p>
+</div>
diff --git a/_includes/navbar.html b/_includes/navbar.html
new file mode 100644
index 0000000..30f027f
--- /dev/null
+++ b/_includes/navbar.html
@@ -0,0 +1,28 @@
+<header class="navbar" role="navigation">
+  <nav class="menu">
+    <input type="checkbox" id="menu-trigger" class="menu-trigger" />
+    <label for="menu-trigger">
+      <span class="menu-icon">
+        <svg viewBox="0 0 18 15" width="18px" height="15px" style="background: white;">
+          <path fill="#fff"
+            d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.031C17.335,0,18,0.665,18,1.484L18,1.484z" />
+          <path fill="#fff"
+            d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484 h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z" />
+          <path fill="#fff"
+            d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z" />
+        </svg>
+      </span>
+    </label>
+    <div class="trigger">
+      <div class="trigger-container">
+        {% assign url = page.url %}
+        {% for menu in site.data.menus %}
+        {% if url == menu.url %}
+        <a class="menu-link active" href="{{ menu.url | absolute_url }}">{{ menu.title }}</a>
+        {% else %}
+        <a class="menu-link" href="{{ menu.url | absolute_url }}">{{ menu.title }}</a>
+        {% endif %}
+        {% endfor %}
+      </div>
+  </nav>
+</header>
\ No newline at end of file
diff --git a/_includes/pagination.html b/_includes/pagination.html
deleted file mode 100644
index 8c961f1..0000000
--- a/_includes/pagination.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<div class="pagination">
-        {% if paginator.previous_page %}
-        <a class="page-previous" href="{{ paginator.previous_page_path }}" class="previous">
-            <span aria-hidden="true">←</span>
-            NEWER POSTS
-        </a>
-        {% endif %}
-    <span class="page_number">PAGE {{ paginator.page }} OF {{ paginator.total_pages }}</span>
-        {% if paginator.next_page %}
-        <a class="page-next" href="{{ paginator.next_page_path }}" class="next">OLDER POSTS
-            <span aria-hidden="true">→</span>
-        </a>
-        {% endif %}
-</div>
\ No newline at end of file
diff --git a/_includes/post-nav.html b/_includes/post-nav.html
index 1529596..934b497 100644
--- a/_includes/post-nav.html
+++ b/_includes/post-nav.html
@@ -1,14 +1,14 @@
-<aside class="post-nav">
+<nav class="post-nav">
   {% if page.previous %}
-    <a class="post-nav-item post-nav-prev" href="{{ page.previous | relative_url }}">
-      <h4>Previous</h4>
-      <span>{{ page.previous.title }}</span>
-    </a>
+  <a class="post-nav-item post-nav-prev" href="{{ page.previous | relative_url }}">
+    <h4>Previous</h4>
+    <span>{{ page.previous.title }}</span>
+  </a>
   {% endif %}
   {% if page.next %}
-    <a class="post-nav-item post-nav-next" href="{{ page.next | relative_url }}">
-      <h4>Next</h4>
-      <span>{{ page.next.title }}</span>
-    </a>
+  <a class="post-nav-item post-nav-next" href="{{ page.next | relative_url }}">
+    <h4>Next</h4>
+    <span>{{ page.next.title }}</span>
+  </a>
   {% endif %}
-</aside>
\ No newline at end of file
+</nav>
\ No newline at end of file
diff --git a/_includes/tags.html b/_includes/tags.html
deleted file mode 100644
index ce51072..0000000
--- a/_includes/tags.html
+++ /dev/null
@@ -1,16 +0,0 @@
-{% for tag in site.tags %}
-  {% capture tag_name %}{{ tag | first }}{% endcapture %}
-  <h4 class="home-title" id="{{ tag_name | downcase | slugify }}" class="category-head">{{ tag_name }}</h4>
-  <div class="content">
-    {% for post in site.tags[tag_name] %}
-    <article class="list-post tips">
-      <header class="list-post-header tips">
-          <h2 class="list-post-title"><a href="{{ post.url | absolute_url }}">{{ post.title }}</a></h2>
-      </header>
-      <small class="list-post-meta tips-time">
-          <time datetime="{{ post.date | date_to_xmlschema }}">{{ post.categories | first | capitalize }}</time>
-      </small>
-    </article>
-    {% endfor %}
-  </div>
-{% endfor %}
\ No newline at end of file
diff --git a/_includes/tips.html b/_includes/tips.html
deleted file mode 100644
index bc62054..0000000
--- a/_includes/tips.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<h4 class="home-title"><span role="img" aria-label="coffee">☕️</span>programming tips</h4>
-<div class="content">
-  {% for post in site.categories.tips reversed %}
-  <article class="list-post tips">
-    <header class="list-post-header tips">
-      <h2 class="list-post-title">
-        <a href="{{ post.url | absolute_url }}">{{ post.title | escape }}</a>
-      </h2>
-    </header> 
-    <small class="list-meta">
-        {% if post.tags != empty %}
-            {% assign tags = post.tags %}
-            {% for tag in tags %}
-              <a class="tag" href="{{site.url}}/tags/#{{tag | downcase | slugify}}">{{tag | downcase }}</a>{% unless forloop.last %},{% endunless %}
-            {% endfor %}
-       {% endif %}
-    </small>
-  </article>
-  {% endfor %}
-</div>
\ No newline at end of file
diff --git a/_layouts/404.html b/_layouts/404.html
index 48c3575..d7f77e3 100644
--- a/_layouts/404.html
+++ b/_layouts/404.html
@@ -4,18 +4,58 @@ layout: compress
 
 <!DOCTYPE html>
 <html lang="{{ page.lang | default: site.lang | default: " en " }}">
-
 {% include head.html %}
+<style>
+body {
+  border: 0;
+}
 
+.wrapper {
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  height: 75vh;
+}
+
+.title {
+  font-size: 5em;
+  font-weight: bold;
+  font-family: 'Fira Code';
+  line-height: 1.1;
+  color: #ff5555;
+  text-shadow: 1px 0px 0px#b45151;
+}
+
+.phrase {
+  color: gray;
+}
+
+.solution {
+  border-radius: 4em 1em 2em 1em / 1em 5em 1em 3em;
+  color: #0036c7;
+  background: #ebebeb;
+  font-family: 'Roboto';
+  line-height: 1.188;
+  text-decoration: none;
+  padding: 5px 8px;
+  border: 0;
+  font-size: 15.625px;
+  letter-spacing: 0.5px;
+}
+
+.solution:hover {
+  border: 0;
+}
+</style>
 <body>
   <main aria-label="Content">
-    <div class="wrapper">            
-      <div class="er-wrapper">
-        <div class="er-container">
-          <h1 class="er-header">404 — </h1>
-          <p class="er-paragraph">Hmm... Seems like you lost from my journey 🎒 .</p>
-          <p class="er-by">Don't worry you can back to trip <a href="{{ site.url }}">right now</a>.</p>              
-        </div>
+    {% include navbar.html %}
+    <div class="wrapper">
+      <div class="container">
+        <div class="title">404</div>
+        <p class="phrase">Hmm... Seems you lost from my 🎒 journey.</p>
+        <a class="solution" href="{{ site.url }}">home</a>
       </div>
     </div>
   </main>
diff --git a/_layouts/default.html b/_layouts/default.html
index c6c2270..4bba2ec 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -8,13 +8,14 @@ layout: compress
 {% include head.html %}
 
 <body>
-    <div class="wrapper">
-    {% include cover.html %}
+  {% include navbar.html %}
+  <div class="wrapper">
+    {% include jumbotron.html %}
     <main aria-label="Content">
-            {{ content }}
+      {{ content }}
     </main>
     {% include footer.html %}
-    </div>
+  </div>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/_layouts/home.html b/_layouts/home.html
index 34a65f7..2341134 100644
--- a/_layouts/home.html
+++ b/_layouts/home.html
@@ -2,72 +2,24 @@
 layout: default
 home: true
 ---
-<div class="home">
-  {% if site.projects %}
-  <h4 class="home-title"><span role="img" aria-label="icon-rocket">🚀</span>my works <span class="project-nav"><button id="prevProject" aria-label="arrow left">⟵</button><button id="nextProject" aria-label="arrow right">⟶</button></span></h4>
-  <div class="content">
-        <div class="projects">
-            <div class="projects-container" id="projectsContainer">
-            {% for project in site.data.projects %}
-              <div class="project-item">
-                <h4 class="project-item-title"><a target="_blank" href="{{ project.url }}" rel="noreferrer">{{ project.title | downcase }}</a></h4>
-                <p class="project-item-description">{{ project.description | downcase }}</p>  
-                <p class="project-action">{{ project.action }}</p>
-              </div>
-            {% endfor %}
-            </div>
-      </div>
-  </div>
-  {% endif %}
-  <script>
-    const projects = document.getElementById('projectsContainer'),
-          prev = document.getElementById('prevProject'),
-          next = document.getElementById('nextProject');
-          
-    next.addEventListener('mousedown', () => projects.scrollLeft += 245);
-    prev.addEventListener('mousedown', () => projects.scrollLeft -= 245);
-  </script>
 
-  <h4 class="home-title"><span role="img" aria-label="icon-book">📘</span>blog posts</h4>
-  <div class="content">
-    {% for post in site.categories.blog limit:3 %}
-      <article class="list-post blog">
-        <header class="list-post-header">
-          <h4 class="list-post-title">
-            <a href="{{ post.url | absolute_url }}">{{ post.title | escape }}.</a>
-          </h4>
-        </header>
-        <section class="list-post-excerpt">
-          <p class="list-post-excerpt"> — {{ post.excerpt | strip_html | downcase | normalize_whitespace | truncatewords: 15, '...' }} </p>
-        </section>
-      </article>
-    {% endfor %}
-    <nav class="see-all-container">
-     <a class="button" href="{{ site.url | absolute_url }}/blog">See All</a>
-    </nav>
-  </div>
-  
-  <h4 class="home-title"><span role="img" aria-label="icon-coffee">☕️</span>programming tips</h4>
-  <div class="content">
-    {% for post in site.categories.tips reversed limit: 3 %}
-      <article class="list-post tips">
-        <header class="list-post-header tips">
-          <h4 class="list-post-title">
-            <a href="{{ post.url | absolute_url }}">{{ post.title | escape }}</a>
-          </h4>
-        </header> 
-        <small class="list-meta">
-          {% if post.tags != empty %}
-              {% assign tags = post.tags %}
-              {% for tag in tags %}
-                <a class="tag" href="{{site.url}}/tags/#{{tag | downcase | slugify}}">{{tag | downcase }}</a>{% unless forloop.last %},{% endunless %}
-              {% endfor %}
-          {% endif %}
-        </small>
-      </article>
-    {% endfor %}
-    <nav class="see-all-container">
-        <a class="button" href="{{ site.url | absolute_url }}/tips">See All</a>
-    </nav>
-  </div>
-</div>
\ No newline at end of file
+{% for post in site.posts %} 
+  {% capture current_year %}
+    {{post.date | date: "%Y"}}
+  {% endcapture %} 
+  {% if current_year != previous_year %} 
+    {% assign previous_year = current_year %}
+    <h4 class="post-header">
+      <span role="img" aria-label="icon-book" aria-hidden="true">🎉</span>
+      {{ current_year }}
+    </h4>
+  {% endif %}
+  <article class="posts">
+    <span class="posts-date">{{ post.date | date: "%b %d" }}</span>
+    <header class="posts-header">
+      <h4 class="posts-title">
+        <a href="{{ post.url }}">{{ post.title | escape }}</a>
+      </h4>
+    </header>
+  </article>
+{% endfor %}
diff --git a/_layouts/page.html b/_layouts/page.html
index 26a8a71..018f8ef 100644
--- a/_layouts/page.html
+++ b/_layouts/page.html
@@ -1,6 +1,5 @@
 ---
 layout: compress
-file: page.url
 ---
 
 <!DOCTYPE html>
@@ -9,20 +8,16 @@ file: page.url
 {% include head.html %}
 
 <body>
+  {% include navbar.html %}
   <div class="wrapper">
-  
-    {% include cover.html %}
-
-    <main aria-label="Content">
-      <div class="content">
-
-        {% include {{ page.url | remove: "/" }}.html %}
-
-      </div>
+    <header class="header">
+      <h1 class="header-title" itemprop="headline">{{ page.title | escape }}.</h1>
+    </header>
+    <main class="page-content" aria-label="Content">
+      {{ content }}
     </main>
-    
     {% include footer.html %}
-
   </div>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/_layouts/post.html b/_layouts/post.html
index 54403e7..2e8f16e 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -8,57 +8,69 @@ layout: compress
 {% include head.html %}
 
 <body>
-<div class="wrapper">
-<main class="page-content" aria-label="Content">
-  {% include cover.html %}
-  <article class="post" itemscope itemtype="https://schema.org/BlogPosting">
-    <header class="post-header">
-      <h1 class="post-title" itemprop="headline">{{ page.title | escape }}</h1>
-    </header>
-    {% if page.date or page.tags %}
-    <div class="post-meta">
-      <span itemprop="author" itemscope itemtype="https://schema.org/Person">
-        Posted by <span itemprop="name">{{ site.author.name }}</span> on
-      </span> 
-      <time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
-        {{ page.date | date: "%b %d, %Y" }}
-      </time>
-      <time hidden datetime="{{ page.modified | date_to_xmlschema }}" itemprop="dateModified">
-        {{ page.date | date: "%b %d, %Y" }}
-      </time>
-      <span hidden itemprop="publisher" itemtype="Person">{{ site.author.name }}</span>
-      <span hidden itemprop="image">{{ page.image | absolute_url }}</span>
-      <span hidden itemprop="mainEntityOfPage">{{ page.excerpt }}</span>
-      {% if page.tags and page.tags != empty %}
-      <div class="tags"> 
-          {% assign tags = page.tags %}
-          🔥 
-          <span itemprop="keywords">
-          {% for tag in tags %}
-            <a class="tag" href="{{site.url}}/tags/#{{tag | downcase | slugify}}">{{tag | downcase }}</a>{% unless forloop.last %},{% endunless %}
-          {% endfor %}
-          </span>
-      </div>
-     {% endif %}
-    </div>
+  {% include navbar.html %}
+  <div class="wrapper post">
+    <main class="page-content" aria-label="Content">
+      <article itemscope itemtype="https://schema.org/BlogPosting">
+
+        <header class="header">
+          <h1 class="header-title" itemprop="headline">{{ page.title | escape }}</h1>
+          
+          {% if page.date %}
+          <div class="post-meta">
+            <time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
+              {{ page.date | date: "%b %d, %Y" }}
+            </time>
+            <span itemprop="author" itemscope itemtype="https://schema.org/Person">
+              <span itemprop="name">{{ site.author.name }}</span>
+            </span>
+            <time hidden datetime="{{ page.modified | date_to_xmlschema }}" itemprop="dateModified">
+              {{ page.date | date: "%b %d, %Y" }}
+            </time>
+            <span hidden itemprop="publisher" itemtype="Person">{{ site.author.name }}</span>
+            <span hidden itemprop="image">{{ page.image }}</span>
+            <span hidden itemprop="mainEntityOfPage">{{ page.excerpt }}</span>
+  
+            {% if page.tags and page.tags != empty %}
+            <div class="tags">
+              {% assign tags = page.tags %}
+              <span itemprop="keywords">
+                {% for tag in tags %}
+                <a class="tag"
+                  href="/tags/#{{tag | downcase | slugify}}">{{tag | upcase }}</a>{% unless forloop.last %},{% endunless %}
+                {% endfor %}
+              </span>
+            </div>
+            {% endif %}
+          </div>
+          {% endif %}
+        </header>
+
+        <div class="page-content" itemprop="articleBody">
+          {{ content }}
+          {% if page.modified %}
+            <small>Updated at <b>{{page.modified | date: "%d %B %Y"}}</b></small>
+          {% endif %}
+          {% if page.tweet %}
+          <p>Comments this article on 
+            <a href="https://twitter.com/{{site.username}}/status/{{page.tweet}}">Twitter</a>.
+          </p>
+          {% endif %}
+        </div>
+
+      </article>
+      {% if page.comments %}
+        {% include comments.html%}
+      {% endif %}
+
+    </main>
+    {% if page.next or page.previous %}
+      {% include post-nav.html %}
     {% endif %}
-    <div class="post-content" itemprop="articleBody">
-        {{ content }}
+  </div>
 
-        {% if page.tweet %}
-        <p>Comments this article on <a href="https://twitter.com/{{site.username}}/status/{{page.tweet}}">Twitter</a>.</p>
-        {% endif %}
-    </div>
-
-  </article>
-
-  {% if page.next or page.previous %}
-    {% include post-nav.html %}
-  {% endif %}
-
-</main>
-{% include footer.html %}
-</div>
+  {% include footer.html %}
 
 </body>
+
 </html>
\ No newline at end of file
diff --git a/_posts/2018-07-12-react-component-with-dot-notation.md b/_posts/2018-07-12-react-component-with-dot-notation.md
deleted file mode 100644
index 12f0e23..0000000
--- a/_posts/2018-07-12-react-component-with-dot-notation.md
+++ /dev/null
@@ -1,98 +0,0 @@
----
-title: React Component with Dot Notation
-date: 2019-02-19 11:45:47 +07:00
-modified: 2019-02-20 11:45:47 +07:00
-categories: tips
-tags: [react, javascript, dot-notation]
-image:
----
-
-This is my answer to someone’s question on [StackOverflow](https://stackoverflow.com/questions/49256472/react-how-to-extend-a-component-that-has-child-components-and-keep-them/49258038#answer-49258038). How can we define a React component that is accessible through the dot notation?
-
-Take a look at the following code. We have the ```Menu``` component and its three children ```Menu.Item:```
-
-    const App = () => (
-      <Menu>
-        <Menu.Item>Home</Menu.Item>
-        <Menu.Item>Blog</Menu.Item>
-        <Menu.Item>About</Menu.Item>
-      </Menu>
-    );
-
-How can we define a component like ```Menu```? Where it has some kind of “sub-component” that is accessible through a dot notation.
-
-Well, it’s actually a pretty common pattern. And it’s not really a sub-component, it’s just another component being attached to another one.
-
-Let’s use the above ```Menu```component for example. We’ll put this component to its own dedicated file: ```menu.js```. First, let’s define these two components separately on this module file:
-
-    // menu.js
-    import React from 'react';
-
-    export const MenuItem = ({ children }) => <li>{children}</li>;
-
-    export default const Menu = ({ children }) => <ul>{children}</ul>;
-
-It’s just a simple functional component. The ```Menu``` is the parent with ```ul``` tag. And the ```MenuItem``` will act as its children. Now we can use these two components like so:
-
-    import React from 'react';
-    import { render } from 'react-dom';
-    import Menu, { MenuItem } from './menu';
-
-    const App = () => (
-      <Menu>
-        <MenuItem>Home</MenuItem>
-        <MenuItem>Blog</MenuItem>
-        <MenuItem>About</MenuItem>
-      </Menu>
-    );
-
-    render(<App />, document.getElementById('root'));
-
-Where’s the dot notation? To make our MenuItem component accessible through the dot nation, we can simply attach it to the Menu component as a static property. To do so, we can no longer use the functional component for Menu and switch to the class component instead:
-
-    // menu.js
-    import React, { Component } from 'react';
-
-    export default const MenuItem = ({ children }) => <li>{children}</li>;
-
-    export default class Menu extends Component {
-      static Item = MenuItem;
-
-      render() {
-        return (
-          <ul>{this.props.children}</ul>
-        );
-      }
-    }
-
-Now we can use the dot notation to declare the ```MenuItem``` component:
-
-    import React from 'react';
-    import { render } from 'react-dom';
-    import Menu from './menu';
-
-    const App = () => (
-      <Menu>
-        <Menu.Item>Home</Menu.Item>
-        <Menu.Item>Blog</Menu.Item>
-        <Menu.Item>About</Menu.Item>
-      </Menu>
-    );
-
-    render(<App />, document.getElementById('root'));
-
-You can also put the ```MenuItem``` component definition directly within the ```Menu``` class. But this way you can no longer import ```MenuItem``` individually.
-
-    import React, { Component } from 'react';
-
-    export default class Menu extends Component {
-      static Item = ({ children }) => <li>{children}</li>;
-
-      render() {
-        return (
-          <ul>{this.props.children}</ul>
-        );
-      }
-    }
-
-**For demo purpose**, Originally published at <https://bagja.net>.
\ No newline at end of file
diff --git a/_posts/2018-09-28-hello-world-how-this-site-was-made.md b/_posts/2018-09-28-hello-world-how-this-site-was-made.md
new file mode 100644
index 0000000..2866254
--- /dev/null
+++ b/_posts/2018-09-28-hello-world-how-this-site-was-made.md
@@ -0,0 +1,63 @@
+---
+title: Hello World, how this site was made.
+date: 2018-09-28 09:45:47 +07:00
+modified: 2019-08-29 09:24:47 +07:00
+tags: [blog, netlify, jekyll, github]
+description: All the services are free, a source code this site placed on github repository and intergration with netlify service, another service that you can use is github page for hosting your own static site.
+# image: "/assets/img/posts/blog/frontslash.png"
+---
+
+The website was made using Jekyll the one of open source static sites generator, and using my own simple theme, I called [bangsring](https://github.com/piharpi/bangsring).
+
+<hr>
+
+All the services are free, source code the site was placed on my [github](https://github.com/piharpi/piharpi.com) repository and intergration with [netlify](https://netlify.com) service, another service that you can use is [github page](https://pages.github.com/) for hosting your own static site.
+
+<hr>
+
+##### I'm not just tell my story, <br> but i will show you how to create your own site.
+
+So, before we start create a site, you need some tools, you can self paced for how to installing each tools, on this guide i'm just want to show you how to install jekyll and deploying in netlify, but make sure you have each tools below.
+
+#### Prerequisites
+
+- [Ruby](https://www.ruby-lang.org/en/downloads/) programming language
+- [Git](https://git-scm.com) (version control)
+- [Netlify](https://netlify.com) and [Github](https://github.com) account
+- [Bundler](https://bundler.io)
+
+#### Installation
+
+First, you need some [SSG](https://www.staticgen.com/), there are many kind ssg, but in case i'm using Jekyll cause i'm already familiar with it, open your terminal and type command on below
+
+```bash
+$ bundle install jekyll # installing jekyll in your machine
+$ jekyll new my-site && cd my-site # create new jekyll project
+$ jekyll s # run jekyll server
+```
+
+Now, jekyll is running on your local machine, open your browser and go to `localhost:4000` is default address from jekyll, press <kbd>CTRL</kbd> + <kbd>C</kbd> to stop the jekyll server.
+
+#### Adding remote repository
+
+Before we adding remote repository, you must have [github](https://github.com/new) repository, if already have repository, just add github remote address to your local folder, with the following commands
+
+```bash
+$ git init # initializing project folder
+$ git remote add origin https://github.com/YOUR-USERNAME/YOUR-REPO.git # change UPPERCASE with your own!
+$ git add -A && git commit -m "Initialize" && git push -u origin master # push code to github
+```
+
+Now check your github repository, make sure the files is uploaded correctly.
+
+#### Deploying to netlify
+
+Go [netlify](https://netlify.com) dashboard, and following this step.
+
+1. click **new site from git**, then choose **Github**.
+2. then choose your repository where is the jekyll sources uploaded.
+3. netlify smart enough to configuring, we just need to click **Deploy site** button.
+
+Wait for moment, and voila..! your site's are hosting and using `.netlify.com` tld, if your website wants to look professional, just buy a domain from your favorite domain store. or if you the first time, I advice using namecheap.com*(isn't sponsor)* \*based on my experienced it provides good service and have various TLDs.
+
+So, what you waiting for, just create your own website for free.
diff --git a/_posts/2018-09-28-overhaul-lanyard-gun-prow-jack.md b/_posts/2018-09-28-overhaul-lanyard-gun-prow-jack.md
deleted file mode 100644
index 8a1d5bf..0000000
--- a/_posts/2018-09-28-overhaul-lanyard-gun-prow-jack.md
+++ /dev/null
@@ -1,39 +0,0 @@
----
-title: Overhaul lanyard gun prow jack 
-date: 2018-09-28 09:45:47 +07:00
-modified: 2019-02-20 11:45:47 +07:00
-categories: blog
-tags: [story, antagonist]
-image: "/assets/img/posts/devc-yogya-28-09-2018s.jpg"
----
-
-Once upon a time, there was a little boy whose name was Alex he oftern visited his aunt, and she always
-gave him something when he left her house. Somtimes she gave him something to eat. Sometimes she gave
-him to play with. The most important one she always gave something.
-
-## The story of Alex
-One day alex went to visit his aunt. When he was leaving, she said to him, "Here is a little cake, Alex. Please take it to your mother. Carry it carefully and don't stop it".
-
-"Thank you, Auntie," said a little boy, and he started home. He carried the cake carrefully int his hands. But he held it very tightly because he did not want to drop it. When he got home he said to his 
-mother.
-
-    "Look at, Mother. Auntie sent you nice little cake"
-    "Where is it?" his mother asked
-    "Here ini my hands" He replied, and opened his hands to show her the cake.
-    "Oh, Alex, you're foolish boy, "she cried
-    "You've ruined it. You shouldn't carry a cake like that you 
-     should wrap it carefully in some leaves  and carry it onyour head"
-    "I'm sorry,Mother," said the little boy sadly."But I'll remember next time,"
-     he promised.
-
-The next week, he went to see his aunt again, When he was leaving, she said to him, "here is some butter,Alex. Please tke it to your mother. Carry it carefully and don't drop it."
-
-"Thank you, Auntie, "said the litter boy and he started home. then he remember what his mother had said. He wrapperd the butter carefully in some leaves, and carried it son his head. On the way home,
-it was very hot, and Soon the butter began to melt down his face, down his shirt, down his shorts. When he got home he said to his mother.
-
-"Look at, Mother, Auntie sent you  some butter. I remembered what you said. I wrapped it carefully in some leaves and carried it on my head".
-
-"Oh, Alex, You're stupid boy !", cried his mother. "You'veruined it. You shouldn't carry butter like that. You should wrap it in some leaves and put in the river to cool first, Then carry it carefully in your hand".
-
-
-Originally posted in <a href="#">blahblah.com</a>
\ No newline at end of file
diff --git a/_posts/2018-11-18-think-classic-lorem-ipsum-passe?.md b/_posts/2018-11-18-think-classic-lorem-ipsum-passe?.md
deleted file mode 100644
index a85a0b4..0000000
--- a/_posts/2018-11-18-think-classic-lorem-ipsum-passe?.md
+++ /dev/null
@@ -1,96 +0,0 @@
----
-title: Think classic lorem ipsum is passé?
-date: 2018-11-18 11:38:47 +07:00
-modified: 2019-02-20 11:45:47 +07:00
-categories: blog
-tags: [demo, bangsring, jekyll, github-pages]
-image: https://source.unsplash.com/FWCUZqXCrUs/800x480 # for open graph image / seo image 
-tweet: 1106842621706563584
----
-Pommy ipsum manky odds and sods tallywhacker up North a bit miffed, her Majesty's pleasure had a barney with the inlaws blimey have a gander jammy git a cuppa fried toast, well chuffed duck nick flabbergasted easy peasy Dalek and. On the pull yorkshire mixture Sherlock pennyboy bloke.
-
-> Distraction is the process of diverting the attention of an individual or group from a desired area of focus and thereby blocking or diminishing the reception of desired information.
-
-Fusce ut placerat orci nulla. Nibh mauris cursus mattis molestie a iaculis. At tempor commodo ullamcorper a lacus vestibulum sed. <kbd>ctrl</kbd> + <kbd>space</kbd> Fames ac turpis egestas integer.
-
-### Table of Contents
-1. [What is programming](#what-is-programming)
-    - [How to become programmer](#how-to-become-programmer)
-    - [Why programmer are single](#why-programmer-are-single)
-    - [Coding is not fun!](#coding-is-not-fun)
-2. [Choose programming language](#choose-programming-language)
-3. [Don't hate your programs](#dont-hate-your-programs)
-4. [Learn how to learn](#learn-how-to-learn)
-5. [Conclusion](#conclusion)
-
-Doubloon lookout six pounders loot shrouds mutiny run a shot across the bow sheet Admiral of the Black rigging. Ballast fire in the hole Arr bilge no prey, no pay matey loaded to the gunwalls rutters quarterdeck heave to. Nipper Arr sutler gaff smartly broadside topsail walk the plank warp case shot.
-
-<figure>
-<img  src="https://source.unsplash.com/xPD38QJWFYM/800x500"  alt="Istanbul, Turkey">
-<figcaption>
-26 E Mallory Ave, Memphis, United States by <u>@kharaoke</u>.
-</figcaption>
-</figure>
-
-Boom swab Shiver me timbers rutters yo-ho-ho pinnace lookout sutler bowsprit run a rig. Take a caulk quarter driver interloper main sheet belay run a shot across the bow bucko draught bring a spring upon her cable. Pieces of Eight come about cable league Gold Road aye Sea Legs flogging square-rigged bowsprit.
-
-## What is programming
-Elit sed vulputate mi sit amet. Auctor urna nunc id cursus metus aliquam eleifend. Senectus et netus et malesuada fames. At risus viverra adipiscing at in tellus integer feugiat scelerisque. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor. 
-
-- #### How to become programmer
-Yawl pink shrouds tack overhaul scurvy. Ye lugger Chain Shot Blimey barkadeer heave down. Grog jib Gold Road jack Pirate Round jury mast. Jack Tar grog blossom sutler bilge water Sea Legs hearties. Sutler lugger gibbet chase guns keel bowsprit.
-
-- #### Why programmer are single
-  Programmers are used to imagining every possible scenario while coding, to reduce or eliminate bugs. Like "what happens if I don't initialize that now, will it be used in future?", etc.
-  They also literally expect the "worst case" while developing algorithms, and use it to bound performance.
-
-
-- #### Coding is not fun!
-  And what eventually happens is that these people will adapt this to real life. If you are going to propose to somebody and imagining all possible scenarios, and expecting the worst case, most probably either you will mess it up, or you will back off. 
-
-No prey, no pay hogshead lanyard me bilge doubloon. Careen Cat o'nine tails reef sails come about ballast pink. Transom poop deck barque belay Corsair rigging. Dead men tell no tales fathom port barque execution dock run a rig. Quarter dead men tell no tales swing the lead ahoy dance the hempen jig no prey, no pay.
-
-## Choose programming language
-At risus viverra adipiscing at in tellus integer feugiat scelerisque. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor.
-
-| Language   | Framework      | Initial years |
-|:-----------|:---------------|:-------------:|
-| Ruby       |  Ruby On Rails | 2004          |
-| Javascript |  AngularJS     | 2016          |
-| Elixir     |  Phoenix       | 2014          |
-    
-## Don't hate your programs
-Pirate fire ship red ensign grapple bounty walk the plank list tender cackle fruit handsomely. Reef sails Sea Legs line chandler landlubber or just lubber Spanish Main Chain Shot six pounders weigh anchor holystone.
-
-<blockquote  class="twitter-tweet tw-align-center"  data-lang="en"><p  lang="in"  dir="ltr">“Ada banyak manfaat saat mulai menulis dan membagikan ide yang kamu punya. Tapi untuk mulai menulis tanpa beban... menulislah untuk menulis”<a  href="https://t.co/4gePn5NlyB">https://t.co/4gePn5NlyB</a></p>&mdash; Hilman Ramadhan ☕ (@hilmanspace) <a  href="https://twitter.com/hilmanspace/status/1103158263288393728?ref_src=twsrc%5Etfw">March 6, 2019</a></blockquote>
-<script  async  src="https://platform.twitter.com/widgets.js"  charset="utf-8"></script>
-
-Sail ho Barbary Coast fire in the hole draught tackle hands long clothes piracy aye black jack. Coffer topgallant boom dance the hempen jig belay port Pirate Round gunwalls maroon grog blossom.
-
-## Learn how to learn
-Chain Shot knave parrel dance the hempen jig gangplank swing the lead overhaul run a rig haul wind shrouds. List bilged on her anchor swab no prey, no pay crow's nest Gold Road take a caulk ho parley brigantine. Port lugsail fore run a shot across the bow Jolly Roger bucko wherry loaded to the gunwalls nipper reef.
-
-  
-
-```ruby
-class Person
-	attr_writer  :password
-	attr_accessor  :name, :username
-	def  initialize(name, username, password)
-		@name  = name
-		@username  = username
-		@password  = password
-		@font_url  =  "https://fonts.googleapis.com/css"
-	end
-end
-
-student  =  Person.new("Harpi", "piharpi", "strongpassword")
-puts  student.name
-```
-Oke, dari cara diatas mulai muncul masalah juga ketika ada kepentingan temen kita yang butuh banget enggak bisa jawab langsung karena kita gk tau ada pesan masuk apa enggak makanya saya gunakan suara notif yang beda beberapa teman aja, selain itu terlihat sombong karena tidak merespon pesan padahal kita online, yah sudah mengalami hal seperti ini sebelumnya hahahaha terserah tapi pikiran orang beda2 , yah saya jelasan kenapa gak segera dibalas.
-
-
-## Conclusion
-Measured fer yer chains hearties hulk cog weigh anchor chase bilge swab scurvy heave to. Landlubber or just lubber lanyard sloop code of conduct starboard black jack wench jib sutler booty. Belaying pin transom American Main draft fathom rope's end scallywag Jolly Roger black jack crimp, plank list tender cackle fruit handsomely.
-
-Maecenas volutpat blandit aliquam etiam erat. Eget aliquet nibh _praesent tristique magna_ sit. Ullamcorper malesuada proin libero nunc consequat interdum varius.  
diff --git a/_posts/2019-01-26-how-to-name-sass-color-variables.md b/_posts/2019-01-26-how-to-name-sass-color-variables.md
deleted file mode 100644
index 488c8b7..0000000
--- a/_posts/2019-01-26-how-to-name-sass-color-variables.md
+++ /dev/null
@@ -1,69 +0,0 @@
----
-title: How to name Sass color variables
-date: 2018-11-18 11:45:47 +07:00
-modified: 2019-02-20 11:45:47 +07:00
-categories: tips
-tags: [css, sass, naming-variables]
-image: https://source.unsplash.com/FWCUZqXCrUs/800x480
----
-
-When it comes to naming Sass variables, I suck. I think I've found the perfect solution, get half way through a project, and realise what a terrible mistake I'd made.
-
-Variables in any language are often overlooked. They're treated as these things that 'ultimately only developers will see, so who cares'. But having a proper naming convention can really help save time, keep your code DRY, and more importantly make your codebase easier to understand for other developers.
-
-## The bad
-
-So let's start with the bad. Going back a few months, this is pretty much what the variables file in all of my old projects looked like:
-
-    $red: #e03c31;
-    $darker-red: #c1271d;
-    $blue: #00f;
-    $text-color: #1a1a1a;
-
-What's the problem here?
-- The variable names provide no clues as to where they sit in the hierarchy, or their relationship       with one another.
-- What's the primary color? Red? Blue?
-- What happens if our color scheme changes? We suddenly have to change every instance of ```$red```, with      our new color. These defeats the point of having variables in the first place.
-- _'Darker Red'_ ? How much darker is darker?
-
-
-## Better
-
-    $primary-color: #e03c31;
-    $secondary-color: #7fff00;
-    $text-color: #1a1a1a;
-
-Now we've provided some context, we can better see the relationship between our colors. We have a ```$primary-color``` and ```$secondary-color```, which would be our brand colors, and then provide some other utility variables such as ```$text-color```.
-
-
-## Even Better
-
-    // Internal variables
-    $x-palette-red: #e03c31;
-    $x-palette-green: #7fff00;
-
-    // Global variables
-    $palette-primary: $x-color-red;
-    $palette-secondary: $x-color-green;
-
-    $palette-paragraph: #1a1a1a;
-
-This is a method that I've recently started using in all of my new projects.
-
-First we define our colors at a very high level using internal variables. I like to prefix my internal variables with ```x```. Internal variables have one function, and that's to be assigned to other variables. This allows us to keep our global variables free of any bias, but also informs us and others working on the codebase what the actual palette color is. Because let's face it, hex codes are for machines.
-
-We've also switched around the naming of the actual color variables, to follow a 'property -> level' convention. This is particulary useful when these are surrounded by other variables for typography, grids, etc., as we can instantly scan our variables file by property.
-
-    $palette-primary: $x-color-red;
-    $palette-secondary: $x-color-blue;
-    $palette-tertiary: $x-color-green;
-
-    $font-family-primary: 'Helvetica Neue', sans-serif;
-    $font-family-secondary: 'Georgia', serif;
-
-    $line-height-base: 18px;
-    $line-height-paragraph: 16px;
-
-Likewise, we use the word 'palette' to distinguish our variables from the 'color' css property which is exclusively for text color.
-
-**For demo purpose**, Originally published at <https://fahmiirsyd.com>.
\ No newline at end of file
diff --git a/_posts/2019-02-19-how-to-clear-nunjucks-cache.md b/_posts/2019-02-19-how-to-clear-nunjucks-cache.md
deleted file mode 100644
index cbdda14..0000000
--- a/_posts/2019-02-19-how-to-clear-nunjucks-cache.md
+++ /dev/null
@@ -1,37 +0,0 @@
----
-title: How to Clear Nunjucks Cache
-date: 2019-02-19 11:45:47 +07:00
-modified: 2019-02-20 11:45:47 +07:00
-category: tips
-tags: [nonjuck, cache, pug, flores, static-site]
----
-I’m building a static site generator (again) named [Flores](). Initially, I use [Pug]() for the templating engine. But then I discovered [Nunjucks](). It has a lot more features and the syntax is quite similar to [Twig]() which I’m familiar with. I also did a quick test and the render time is quite similar when the cache option is activated.
-
-However, I had an issue when Flores is on the “watch” mode (think of Webpack watch mode). When the user edits the template file, the changes won’t be reflected on the generated HTML files. This thing happened because of Nunjucks cached the compiled template. The thing is there’s no mention in Nunjucks documentation on how to manually clear the cache.
-
-I dug into the [Nunjucks source code](https://github.com/mozilla/nunjucks) and found out that each Nunjucks loader (the object that responsible for loading the template) uses cache property to store the compiled template. You can check it on [```initCache```](https://github.com/mozilla/nunjucks/blob/v3.1.7/nunjucks/src/environment.js#L98-L108) method on ```Environment``` class.
-
-    // src/environment.js
-    initCache() {
-      // Caching and cache busting
-      this.loaders.forEach((loader) => {
-        loader.cache = {};
-        if (typeof loader.on === 'function') {
-          loader.on('update', (template) => {
-            loader.cache[template] = null;
-          });
-        }
-      });
-    }
-
-So in order to clear all the caches, all I have to do is simply set this ```cache``` property to an empty object again.
-
-    const nunjucks = require("nunjucks");
-
-    const env = nunjucks.configure("./path/to/templates");
-
-    for (let i = 0; i < env.loaders.length; i += 1) {
-      env.loaders[i].cache = {};
-    }
-
-**For demo purpose**, Originally published at <https://bagja.net>.
\ No newline at end of file
diff --git a/_posts/2019-03-6-step-to-installation-bangsring-jekyll-theme.md b/_posts/2019-03-6-step-to-installation-bangsring-jekyll-theme.md
deleted file mode 100644
index e361488..0000000
--- a/_posts/2019-03-6-step-to-installation-bangsring-jekyll-theme.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: Step to installation bangsring jekyll theme
-date: 2019-3-6 8:28:47 +07:00
-modified: 2019-02-20 11:45:47 +07:00
-categories: blog
-tags: [installation, jekyll, bangsring-theme]
-tweet: 1106842621706563584
----
diff --git a/_sass/bangsring/_base.scss b/_sass/bangsring/_base.scss
index 85905d8..6d2d1ce 100644
--- a/_sass/bangsring/_base.scss
+++ b/_sass/bangsring/_base.scss
@@ -6,14 +6,25 @@ html {
   width: 100%;
 }
 
-body, h1, h2, h3, h4, h5, h6,
-p, blockquote, pre, hr,
-dl, dd, ol, ul, figure {
-  letter-spacing: .1px;
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+hr,
+dl,
+dd,
+ol,
+ul,
+figure {
   margin: 0;
   padding: 0;
   -webkit-font-smoothing: antialiased;
-  font-family: $base-font-family;
 }
 
 /**
@@ -21,46 +32,63 @@ dl, dd, ol, ul, figure {
  */
 body {
   min-height: 100vh;
-  overflow-x: hidden; 
+  overflow-x: hidden;
   position: relative;
-  background: $neutral;
-  font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
+  background: $base;
+  font: $base-font-weight #{$base-font-size}/#{$base-line-height} $second-font-family;
   -webkit-text-size-adjust: 100%;
-  -webkit-font-feature-settings: "kern" 1;
-     -moz-font-feature-settings: "kern" 1;
-       -o-font-feature-settings: "kern" 1;
-          font-feature-settings: "kern" 1;
+  -webkit-font-feature-settings: "kern"1;
+  -moz-font-feature-settings: "kern"1;
+  -o-font-feature-settings: "kern"1;
+  font-feature-settings: "kern"1;
   font-kerning: normal;
+  border-top: 5px solid $black;
+  box-sizing: border-box;
+
+  @include media-query($on-mobile) {
+    $base-font-size: 18px;
+    font: $base-font-weight #{$base-font-size}/#{$base-line-height} $second-font-family;
+  }
 }
 
 /**
  * Set `margin-bottom` to maintain vertical rhythm
  */
-h1, h2, h3, h4, h5, h6,
-p, blockquote, pre,
-ul, ol, dl, figure,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+ul,
+ol,
+dl,
+figure,
 %vertical-rhythm {
   margin-top: $spacing-unit - 20;
   margin-bottom: $spacing-unit - 20;
 }
 
 kbd {
-  -moz-border-radius:3px;
-  -moz-box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px $white inset;
-  -webkit-border-radius:3px;
-  -webkit-box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px $white inset;
-  background-color:#f7f7f7;
-  border:1px solid #ccc;
-  border-radius:3px;
-  box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px $white inset;
-  color:#333;
-  display:inline-block;
-  font-family: Roboto;
-  font-size:14px;
-  line-height:1.4;
-  margin:0 .1em;
-  padding:.1em .6em;
-  text-shadow:0 1px 0 $white;
+  -moz-border-radius: 3px;
+  -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px $white inset;
+  -webkit-border-radius: 3px;
+  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px $white inset;
+  background-color: #f7f7f7;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px $white inset;
+  color: #333;
+  display: inline-block;
+  font-size: 14px;
+  line-height: 1.4;
+  font-family: $syntax-font-family;
+  margin: 0 .1em;
+  padding: .1em .6em;
+  text-shadow: 0 1px 0 $white;
 }
 
 /**
@@ -70,6 +98,8 @@ img {
   max-width: 100%;
   vertical-align: middle;
   -webkit-user-drag: none;
+  margin: 0 auto;
+  text-align: center;
 }
 
 /**
@@ -83,7 +113,7 @@ figure {
 /**
  * Images
  */
-figure > img {
+figure>img {
   display: block;
   position: relative;
 }
@@ -99,15 +129,17 @@ figcaption {
 /**
  * Lists
  */
-ul, ol {
-  margin-left: $spacing-unit;
+ul,
+ol {
+  margin-left: $spacing-unit - 10;
 }
 
 li {
   padding-bottom: 1px;
   padding-top: 1px;
-  > ul,
-  > ol {
+
+  >ul,
+  >ol {
     margin-bottom: 2px;
     margin-top: 0;
   }
@@ -116,13 +148,24 @@ li {
 /**
  * Headings
  */
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   font-weight: $base-font-weight;
 }
 
-h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a {
+h1>a,
+h2>a,
+h3>a,
+h4>a,
+h5>a,
+h6>a {
   text-decoration: none;
   border: none;
+
   &:hover {
     text-decoration: none;
     border: none;
@@ -135,12 +178,12 @@ h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a {
  */
 a {
   color: $black;
-  border-bottom: 1px solid #1635de;
+  border-bottom: 1px solid $smoke;
   text-decoration: none;
 
   &:hover {
     color: $black;
-    border-bottom: 2px solid #1635de;
+    border-bottom: 2px solid $blue;
   }
 }
 
@@ -155,18 +198,23 @@ del {
  * Em
  */
 em {
-  color:inherit;
+  color: inherit;
 }
 
 /**
  * Blockquotes
  */
 blockquote {
-  color: $grey;
-  border-left: 4px solid $black;
-  padding: 5px 5px 5px 15px;
-  border-radius: 2px;
-  @include relative-font-size(1);
+  color: $gray;
+  font-style: italic;
+  text-align: center;
+  opacity: .9;
+  border-top: 1px solid $light;
+  border-bottom: 1px solid $light;
+  padding: 10px;
+  margin-left: 10px;
+  margin-right: 10px;
+  font-size: 1em;
 
   > :last-child {
     margin-bottom: 0;
@@ -179,7 +227,7 @@ blockquote {
  */
 .wrapper {
   max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));
-  max-width:         calc(#{$content-width} - (#{$spacing-unit} * 2));
+  max-width: calc(#{$content-width} - (#{$spacing-unit} * 2));
   position: relative;
   margin-right: auto;
   margin-left: auto;
@@ -187,14 +235,32 @@ blockquote {
   padding-left: $spacing-unit;
   @extend %clearfix;
 
-  @include media-query($on-laptop) {
+  @include media-query($on-mobile) {
     max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit}));
-    max-width:         calc(#{$content-width} - (#{$spacing-unit}));
-    padding-right: $spacing-unit / 2;
-    padding-left: $spacing-unit / 2;
+    max-width: calc(#{$content-width} - (#{$spacing-unit}));
+    padding-right: $spacing-unit - 10;
+    padding-left: $spacing-unit - 10;
   }
 }
 
+/**
+ * Small
+ */
+small {
+  font-size: 16px;
+}
+
+/**
+ * Superscript
+ */
+sup {
+  padding: 0px 4px;
+  border-radius: 10%;
+  top: -3px;
+  left: 2px;
+  font-size: small;
+  position: relative;
+}
 
 /**
  * Table
@@ -203,13 +269,19 @@ table {
   margin: 0 auto;
   border-collapse: collapse;
   background: $white;
-  font-family: 'Roboto Mono';
+  font-family: $first-font-family;
   font-size: $small-font-size;
-  th { 
-    font-weight: 400;
+
+  th {
+    font-weight: 700;
     background: #f5f5f5;
+    text-align: left;
+    border-bottom: 2px solid #f5f5f5;
   }
-  th, td, tr {
+
+  th,
+  td,
+  tr {
     border: 1px solid $light;
     padding: 4px 8px;
   }
@@ -228,7 +300,7 @@ table {
  * When mouse block a text set this color
  */
 ::selection {
-    background: #D6EDFF;
+  // background: transparent;
 }
 
 /**
@@ -237,7 +309,9 @@ table {
 .gist {
   table {
     border: 0;
-    tr, td {
+
+    tr,
+    td {
       border: 0;
     }
   }
diff --git a/_sass/bangsring/_fonts.scss b/_sass/bangsring/_fonts.scss
index a6eda32..0ab7455 100644
--- a/_sass/bangsring/_fonts.scss
+++ b/_sass/bangsring/_fonts.scss
@@ -1,19 +1,116 @@
-// Font family
 @charset "utf-8";
-@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
-@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');unicode-range:U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
-@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');unicode-range:U+1F00-1FFF;}
-@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');unicode-range:U+0370-03FF;}
-@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;}
-@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}
-@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
-@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfCRc4EsA.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
-@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfABc4EsA.woff2) format('woff2');unicode-range:U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
-@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfCBc4EsA.woff2) format('woff2');unicode-range:U+1F00-1FFF;}
-@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfBxc4EsA.woff2) format('woff2');unicode-range:U+0370-03FF;}
-@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfCxc4EsA.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;}
-@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2) format('woff2');unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}
-@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfCRc4EsA.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfABc4EsA.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfCBc4EsA.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfBxc4EsA.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfCxc4EsA.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
 
 /* cyrillic-ext */
 @font-face {
@@ -21,7 +118,7 @@
   font-style: normal;
   font-weight: 300;
   src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fCRc4EsA.woff2) format('woff2');
-    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
 
 /* cyrillic */
@@ -30,7 +127,7 @@
   font-style: normal;
   font-weight: 300;
   src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fABc4EsA.woff2) format('woff2');
-    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 
 /* greek-ext */
@@ -39,7 +136,7 @@
   font-style: normal;
   font-weight: 300;
   src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fCBc4EsA.woff2) format('woff2');
-    unicode-range: U+1F00-1FFF;
+  unicode-range: U+1F00-1FFF;
 }
 
 /* greek */
@@ -48,7 +145,7 @@
   font-style: normal;
   font-weight: 300;
   src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBxc4EsA.woff2) format('woff2');
-    unicode-range: U+0370-03FF;
+  unicode-range: U+0370-03FF;
 }
 
 /* vietnamese */
@@ -57,7 +154,7 @@
   font-style: normal;
   font-weight: 300;
   src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fCxc4EsA.woff2) format('woff2');
-    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
 }
 
 /* latin-ext */
@@ -66,7 +163,7 @@
   font-style: normal;
   font-weight: 300;
   src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fChc4EsA.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
 /* latin */
@@ -75,62 +172,287 @@
   font-style: normal;
   font-weight: 300;
   src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 /* cyrillic-ext */
 @font-face {
-  font-family: 'Roboto Mono';
-  font-style: normal;
+  font-family: 'Source Sans Pro';
+  font-style: italic;
   font-weight: 400;
-  src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v6/L0x5DF4xlVMF-BfR8bXMIjhGq3-OXg.woff2) format('woff2');
+  font-display: swap;
+  src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7qsDJT9g.woff2) format('woff2');
   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
+
 /* cyrillic */
 @font-face {
-  font-family: 'Roboto Mono';
-  font-style: normal;
+  font-family: 'Source Sans Pro';
+  font-style: italic;
   font-weight: 400;
-  src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v6/L0x5DF4xlVMF-BfR8bXMIjhPq3-OXg.woff2) format('woff2');
+  font-display: swap;
+  src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7jsDJT9g.woff2) format('woff2');
   unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
+
 /* greek-ext */
 @font-face {
-  font-family: 'Roboto Mono';
-  font-style: normal;
+  font-family: 'Source Sans Pro';
+  font-style: italic;
   font-weight: 400;
-  src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v6/L0x5DF4xlVMF-BfR8bXMIjhHq3-OXg.woff2) format('woff2');
+  font-display: swap;
+  src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7rsDJT9g.woff2) format('woff2');
   unicode-range: U+1F00-1FFF;
 }
+
 /* greek */
 @font-face {
-  font-family: 'Roboto Mono';
-  font-style: normal;
+  font-family: 'Source Sans Pro';
+  font-style: italic;
   font-weight: 400;
-  src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v6/L0x5DF4xlVMF-BfR8bXMIjhIq3-OXg.woff2) format('woff2');
+  font-display: swap;
+  src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7ksDJT9g.woff2) format('woff2');
   unicode-range: U+0370-03FF;
 }
+
 /* vietnamese */
 @font-face {
-  font-family: 'Roboto Mono';
-  font-style: normal;
+  font-family: 'Source Sans Pro';
+  font-style: italic;
   font-weight: 400;
-  src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v6/L0x5DF4xlVMF-BfR8bXMIjhEq3-OXg.woff2) format('woff2');
+  font-display: swap;
+  src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7osDJT9g.woff2) format('woff2');
   unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
 }
+
 /* latin-ext */
 @font-face {
-  font-family: 'Roboto Mono';
-  font-style: normal;
+  font-family: 'Source Sans Pro';
+  font-style: italic;
   font-weight: 400;
-  src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v6/L0x5DF4xlVMF-BfR8bXMIjhFq3-OXg.woff2) format('woff2');
+  font-display: swap;
+  src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7psDJT9g.woff2) format('woff2');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
+
 /* latin */
 @font-face {
-  font-family: 'Roboto Mono';
-  font-style: normal;
+  font-family: 'Source Sans Pro';
+  font-style: italic;
   font-weight: 400;
-  src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v6/L0x5DF4xlVMF-BfR8bXMIjhLq38.woff2) format('woff2');
+  font-display: swap;
+  src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7nsDI.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
+
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldItalic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZclSdh18Smxg.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldItalic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZclSdo18Smxg.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* greek-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldItalic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZclSdg18Smxg.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+
+/* greek */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldItalic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZclSdv18Smxg.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+
+/* vietnamese */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldItalic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZclSdj18Smxg.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldItalic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZclSdi18Smxg.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldItalic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKwdSBYKcSV-LCoeQqfX1RYOo3qPZZclSds18Q.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNa7lqDY.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qPK7lqDY.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* greek-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNK7lqDY.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+
+/* greek */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qO67lqDY.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+
+/* vietnamese */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qN67lqDY.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNq7lqDY.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmhduz8A.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwkxduz8A.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* greek-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmxduz8A.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+
+/* greek */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlBduz8A.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+
+/* vietnamese */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmBduz8A.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmRduz8A.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@import url(https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.207/distr/fira_code.css);
\ No newline at end of file
diff --git a/_sass/bangsring/_layout.scss b/_sass/bangsring/_layout.scss
index 04d3ee7..a408b6c 100644
--- a/_sass/bangsring/_layout.scss
+++ b/_sass/bangsring/_layout.scss
@@ -2,83 +2,99 @@
  * Site intro
  */
 
-.site-intro {
-  padding-top: 5em;
-  
-  .intro-image {
-    overflow: hidden; // active for border-radius or photo inside the element
-    background: $blue-light;
-    border-radius: 100%;
+.introduction {
+  margin-top: 5em;
+  margin-bottom: 4em;
+  text-align: center;
+
+  @include media-query($on-mobile) {
+    margin-bottom: 3em;
+  }
+
+  .introduction-image {
     width: 103px;
     height: 103px;
-    animation: .5s ease-in forwards weeng;
     user-select: none;
+    border-radius: 100%;
     -ms-user-select: none;
+    background: #d8deff;
     -webkit-user-select: none;
+    border: 6px solid #eef1ff;
+    animation: 0.5s ease-in forwards weeng;
+    box-shadow: 0px 0px 2px 9px #f6f6fa;
+
     &::after {
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
       content: "";
       position: absolute;
       background: transparent;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
     }
   }
-  
-  .intro-name {
+
+  .introduction-name {
+    margin-top: 8px;
     font-size: 1.5em;
     font-weight: 600;
-    margin-bottom: 5px;
-    color: $black;
+    font-family: $first-font-family;
   }
 
-  .intro-description {
-    font-size: $base-font-size;
-    color: $grey;
-    margin: 0;
+  .introduction-description {
+    padding: 10px;
+    margin: 0 auto;
+    font-size: 16px;
+    color: $gray;
+    opacity: 0.9;
+    max-width: 393px;
+    font-family: $first-font-family;
   }
 }
 
 /**
- * Site header
+ * Site navbar
  */
 
-.site-header {
-  height: 25px;
-  margin: 16px 0 5em 0;
+.navbar {
+  height: auto;
+  max-width: -webkit-calc(890px - (#{$spacing-unit} * 2));
+  max-width: calc(890px - (#{$spacing-unit} * 2));
+  position: relative;
+  margin-right: auto;
+  margin-left: auto;
+  border-bottom: 1px solid $light;
+  padding: $spacing-unit - 15px $spacing-unit;
+  @extend %clearfix;
 }
 
 /**
  * Site nav
  */
 
-.site-nav {
-
+.menu {
   .trigger {
-    float: left;
+    float: right;
   }
 
-  .nav-trigger {
-      display: none;
+  .menu-trigger {
+    display: none;
   }
 
   .menu-icon {
     display: none;
   }
 
-  .page-link {
+  .menu-link {
     color: $black;
-    box-shadow: 1px 1px 0px 0px #dddddd;
+    font-family: $first-font-family;
     line-height: $base-line-height - 0.5;
     text-decoration: none;
-    // text-transform: capitalize;
-    background: #ebebeb;
     border-radius: 2px;
-    border: 0;
     padding: 5px 8px;
-    font-size: $small-font-size;
-    opacity: .7;
+    border: 0;
+    font-size: $small-font-size - 1;
+    opacity: 0.7;
     letter-spacing: 0.5px;
 
     &:hover {
@@ -88,21 +104,29 @@
     &:not(:last-child) {
       margin-right: 5px;
     }
+
+    @include media-query($on-mobile) {
+      opacity: .8;
+    }
   }
 
-  .page-link.active {
+  .menu-link.active {
     opacity: 1;
+    border-radius: 4em 1em 2em 1em / 1em 5em 1em 3em;
+    color: $blue;
+    background-color: $light;
   }
 
-  @include media-query($on-palm) {
+  @include media-query($on-mobile) {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 2;
     text-align: center;
-    background: #fff;
-    border-bottom: 2px solid #f5f5f5;
+    height: 50px;
+    background: $white;
+    border-bottom: 1px solid $light;
 
     label[for="nav-trigger"] {
       display: block;
@@ -117,310 +141,111 @@
       display: block;
       position: absolute;
       right: 0;
-      width: 36px;
-      height: 26px;
+      width: 50px;
+      height: 20px;
       line-height: 0;
-      padding-top: 10px;
+      padding-top: 15px;
       text-align: center;
       z-index: 10;
 
-      > svg path {
+      >svg path {
         fill: $black;
       }
     }
 
-    input ~ .trigger {
+    input[type="checkbox"]:not(:checked)~.trigger {
       clear: both;
-      display: none;
+      visibility: hidden;
     }
 
-    input:checked ~ .trigger {
+    input[type="checkbox"]:checked~.trigger {
       position: fixed;
+      animation: 0.2s ease-in forwards weeng;
       display: flex;
       flex-direction: row;
       justify-content: center;
       align-items: center;
-      background: rgba(255, 255, 255, 0.94);
+      background: rgba(255, 255, 255, 0.97);
       height: 100vh;
       width: 100%;
       top: 0;
     }
 
-    .page-link {
+    .menu-link {
       display: block;
-      box-sizing: border-box; 
-      background: none;
-      font-size: $base-font-size;
-      box-shadow: none;
+      box-sizing: border-box;
+      font-size: 1em;
 
       &:not(:last-child) {
         margin-right: 0;
+        margin-bottom: 5px;
       }
     }
   }
 }
 
-@include media-query($on-palm) {
-.site-nav .page-link.active, .site-nav .page-link { margin-bottom: 18px; padding: 0; border: 0; }
-} 
-
-@include media-query($on-mobile) {
-
-  .site-header {
-    height: 0;
-    margin: 0 0 3em 0;
-  }
-
-  main .content {
-    margin-bottom: 3em;
-  }
-
-  .content .see-all-container {
-    margin-top: 1em;
-  }
-
-  .page_number {
-    display: none;
-    visibility: hidden;
-  }
-
-  .post-next {
-    display: none;
-  }
-
-  .post-nav {
-    display: block;
-    .post-nav-item {
-      display: block;
-      width: 100%;
-    }
-
-    .post-nav-item:nth-child(even) {
-      border-left: 0;
-      padding-left: 0;
-      border-top: 1px solid $light;
-    }
-  }
-
-  footer.site-footer {
-    margin-top: 3em;
-    .crafted {
-      text-align: center;
-      float: none;
-    }
-    .copyright {
-      display: none;
-    }
-  }
-}
-
-.page-heading {
-  @include relative-font-size(1.25);
-}
-
-.see-all-container {
-  margin-top: 2em;
-  display: flex;
-  justify-content: flex-end;
-}
-
-.button {
-  padding: 4px 10px;
-  font-size: $small-font-size;
-  text-decoration: none;
-  border: 2px solid $blue;
-  color: $blue;
-  border-radius: 4px;
-  // box-shadow: 1px 1px 0px 0px #dddddd;
-  &:hover, &:focus {
-    text-decoration: none;
-    opacity: 1;
-    color: $black;
-    border: 2px solid $black;
-    // box-shadow: 0px 0px 0px 0px #dddddd;
-  }
-  &:active {
-    text-decoration: none;
-  }
-}
-
- .home-title {
-  font-size: $small-font-size;
-  letter-spacing: 2px;
-  color: $black;
-  text-transform: uppercase;
+.post-header {
+  font-size: 1.2em;
+  font-family: $first-font-family;
+  text-transform: capitalize;
   font-weight: 700;
-  span[role="img"]{
-    font-weight: 700;
-    margin-right: 5px;
-  }
 }
 
-/**
- * Site `t
- */
-.project-nav {
-  float: right;
-  clear: both;
-  button {
-    background: none;
-    cursor: pointer;
-    font-weight: 700;
-    outline: none;
-    border: none;
-    border-radius: 2px;
-    user-select: none;
-    -ms-user-select: none;
-    -webkit-user-select: none;
-    &:active {
-      background: #ebebeb;
-    }
-  }
-}
-
-.content {
-  margin-bottom: 5em;
-  .projects{
-    height: 151px; 
-    padding-top: 15px;
-    overflow: hidden;
-
-    .projects-container {
-      white-space: nowrap;
-      display: flex;
-      padding-bottom: 15px;
-      overflow-x: scroll;
-
-      :nth-child(even){
-        margin: 0 15px;
-      }
-      :nth-last-child(1) {
-        margin-right: 0;
-      }
-      .project-item {
-        width: 200px;
-        padding: 15px;
-        border-radius: 4px;
-        opacity: .8;
-        flex-shrink: 0;
-        flex-grow: 1;
-        white-space: normal;
-        
-        .project-item-title {
-          font-size: $small-font-size;
-          font-weight: 700;
-          background: transparent;
-          margin: 0;
-          letter-spacing: .1px;
-          a {
-            border-bottom: 2px solid $blue-light;
-          }
-        }
-        
-        .project-item-description {
-          font-size: $small-font-size;
-          background: transparent;
-          position: relative;
-          margin:0;
-          padding-top: 9px;
-          color: $black;
-        }
-        &:hover, &:focus {
-          opacity: 1;
-          background: $white;
-        }
-      }
-    }
-
-  }
-
-/**
- * Site blog
- */
-
-  .list-post.blog {
-    padding: 15px 15px 15px 0;
-    &:not(:first-child) {
-      border-top: 1px solid $light;
-    }
-  }
+.posts {
+  padding-top: 5px;
+  padding-bottom: 6px;
+  display: flex;
   @extend %clearfix;
 
-  .list-post.tips {
-    padding: 12px 0 12px 0;
-    border-radius: 2px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    .list-post-title {
-      background: none;
-    }
-    &:not(:first-child) {
-      border-top: 1px solid $light;
+  &:not(:first-child) {
+    border-top: 1px solid $light;
+  }
+
+  .posts-header {
+    display: inline;
+    line-height: 15px;
+  }
+
+  .posts-date {
+    font-family: $first-font-family;
+    font-size: 17px;
+    min-width: 55px;
+    color: $gray;
+    padding-right: 10px;
+
+    @include media-query($on-mobile) {
+      font-size: 16px;
     }
   }
 
-}
-
-.list-post-header {
-  margin-bottom: $spacing-unit - 15;
-  display: inline;
-  line-height: 15px;
-}
-
-.list-post-meta {
-  font-size: $small-font-size;
-  color: $black;
-  opacity: .6;
-}
-
-/**
- * Site tips
- */
-
-.list-post-header.tips {
-  .list-post-title {
-    margin: 0;
+  .posts-title {
+    margin-top: 2px;
+    margin-bottom: 0;
+    font-family: $second-font-family;
     font-weight: normal;
-  }
-  margin: 0;
-}
+    font-size: 1em;
+    display: inherit;
 
-.list-post-title {
-  // @include relative-font-size(2);
-  font-weight: 600;
-  font-size: $base-font-size;
-  display: inherit;
-
-  a {
-    color: $black;
-    text-decoration: none;
-    line-height: 22px;
-    opacity: .8;
-
-    &:hover, &focus {
-      opacity: 1;
+    a {
       color: $blue;
+      text-decoration: none;
+      line-height: 22px;
+
+      &:hover,
+      &focus {
+        color: $black;
+      }
     }
   }
-
-  @include media-query($on-laptop) {
-    // @include relative-font-size(2.25);
-  }
-}
-
-.list-post-excerpt {
-  font-size: $base-font-size;
-  display: inline;
-  color: $grey;
 }
 
 /**
- * Site image animation 
+ * Animation 
  */
+
 @keyframes weeng {
   0% {
-    opacity: .2;
+    opacity: 0.2;
   }
 
   100% {
@@ -433,90 +258,50 @@
  */
 
 .embed-responsive {
-  height: 0; 
+  height: 0;
   max-width: 100%;
-  overflow: hidden; 
-  position: relative; 
-  padding-bottom: 56.25%; 
-  margin-top: 20px;
-  iframe, object, embed {
-    top: 0; 
-    left: 0; 
-    width: 100%; 
-    height: 100%;
-    position: absolute; 
-  }
-}
-
-.tags { margin-top: 3px; }
-.tag {
-  color: $grey;
-  line-height: 1;
-  font-weight: 800;
-  display: inline-block;
-  font-size: $small-font-size;
-  border-bottom: 2px solid $blue-light;
-  &:hover {
-    color: $black;
-    border-color: $blue-light;
-  }
-}
-/**
- * 404 page
- */
-
-.er-wrapper {
-  display: flex;
-  max-width: 530px;
-  justify-content: center;
-  flex-direction: column;
-  height: 100vh;
-}
-
-.er-container {
-  top: -30px;
+  overflow: hidden;
   position: relative;
-  text-align: left;
-}
+  padding-bottom: 56.25%;
+  margin-top: 20px;
 
-.er-header {
-  font-size: 5em;
-  font-weight: bold;
-  color: $black;
-  line-height: 1.2;
-}
-
-.er-paragraph {
-  font-size: 2.531em;
-  color:#1635de;
-  font-weight: 700;
-}
-
-.er-by {
-  font-size: $base-font-size;
-  color:$black;
-  display: inline;
-  a {
-    border-bottom: 1px solid #1635de;
-    &:hover, &:focus {
-      border-bottom: 2px solid #1635de;    
-    }
+  iframe,
+  object,
+  embed {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    position: absolute;
   }
 }
 
 /**
  * Site footer
  */
-.site-footer {
-  a {
-      color: $black;
-      border-bottom: 1px solid $blue;
-      &:hover, &:focus {
-        border-bottom: 2px solid $blue;
-      }
+.footer {
+  color: $gray;
+  margin-top: 8em;
+  margin-bottom: 2em;
+  text-align: center;
+  font-size: $small-font-size;
+  font-family: $first-font-family;
+
+  @include media-query($on-mobile) {
+    margin-top: 3em;
+  }
+
+  b:not(:last-child) {
+    color: $black;
+  }
+
+  a {
+    border: 0;
+    color: $gray;
+
+    &:hover,
+    &:focus {
+      border-bottom: 2px solid $blue;
+    }
   }
-      text-align: center;
-      margin: 7em 0 2em 0;
-      font-size: $base-font-size;
-      color: $grey; 
 }
\ No newline at end of file
diff --git a/_sass/bangsring/_page.scss b/_sass/bangsring/_page.scss
new file mode 100644
index 0000000..9cd5e86
--- /dev/null
+++ b/_sass/bangsring/_page.scss
@@ -0,0 +1,235 @@
+.wrapper.post {
+  max-width: -webkit-calc(#{660px} - (#{$spacing-unit} * 2));
+  max-width: calc(#{660px} - (#{$spacing-unit} * 2));
+
+  @include media-query($on-mobile) {
+    padding-left: $spacing-unit - 10;
+    padding-right: $spacing-unit - 10;
+  }
+}
+
+/**
+ * Post title
+ */
+.header {
+  margin-top: 125px;
+
+  .header-title {
+    text-align: center;
+    font-size: 2em;
+    font-family: $first-font-family;
+    line-height: 1.2;
+    font-weight: 700;
+    color: $black;
+    margin-bottom: 20px;
+
+    @include media-query($on-mobile) {
+      font-size: 1.9em;
+    }
+  }
+}
+
+/**
+ * Post meta 
+ */
+.post-meta {
+  font-family: $first-font-family;
+  text-align: center;
+  font-size: $small-font-size;
+  margin-bottom: 5em;
+  padding-top: 3px;
+  line-height: 1.3;
+
+  time {
+    color: $gray;
+    position: relative;
+    margin-right: 24px;
+
+    &::after {
+      background: $light;
+      bottom: 1px;
+      content: " ";
+      display: block;
+      height: 2px;
+      position: absolute;
+      right: -20px;
+      width: 12px;
+    }
+  }
+
+  span[itemprop="author"] {
+    color: $gray;
+    border-bottom: 1px dotted $light;
+  }
+
+  .tags {
+    max-width: 200px;
+    margin: 27px auto 0 auto;
+
+    .tag {
+      color: $gray;
+      line-height: 1;
+      font-weight: 800;
+      display: inline-block;
+      font-size: $small-font-size - 4;
+      border-bottom: 0;
+
+      &:hover {
+        color: $black;
+        border-color: $black;
+      }
+    }
+  }
+}
+
+/**
+ * Post content
+ */
+.page-content {
+  font-size: 1em;
+  color: $gray;
+  padding-top: 8px;
+
+  iframe {
+    text-align: center;
+  }
+
+  figure {
+    margin: auto -2em;
+
+    img {
+      border-radius: 2px;
+    }
+
+    figcaption {
+      margin-top: 5px;
+      font-style: italic;
+      font-size: 15px;
+    }
+  }
+
+  >p {
+    margin: 0;
+    padding-top: $spacing-unit - 15;
+    padding-bottom: $spacing-unit - 15;
+  }
+
+  ul.task-list {
+    list-style: none;
+    margin: 0;
+
+    li input[type="checkbox"] {
+      margin-right: 10px;
+    }
+  }
+
+  dl dt {
+    font-weight: 700;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: $first-font-family;
+    color: $black;
+    font-weight: 700;
+    margin-top: $spacing-unit;
+    margin-bottom: 0;
+  }
+
+  h1 {
+    @include relative-font-size(1.75);
+  }
+
+  h2 {
+    @include relative-font-size(1.563);
+  }
+
+  h3 {
+    @include relative-font-size(1.438);
+    border-bottom: 1px solid $light;
+    padding-bottom: 4px;
+  }
+
+  h4 {
+    @include relative-font-size(1.188);
+  }
+
+  h5 {
+    @include relative-font-size(1);
+  }
+
+  h6 {
+    @include relative-font-size(0.875);
+  }
+}
+
+hr {
+  border-bottom: 0;
+  border-style: solid;
+  border-color: $light;
+}
+
+.post-nav {
+  font-family: $first-font-family;
+  font-size: $small-font-size;
+  display: flex;
+  position: relative;
+  margin-top: 5em;
+  border-top: 1px solid $light;
+  line-height: 1.4;
+
+  .post-nav-item {
+    border-bottom: 0;
+    font-weight: 800;
+    padding-bottom: 10px;
+
+    &:hover,
+    &:focus {
+      h4 {
+        color: $blue;
+      }
+    }
+
+    h4 {
+      color: $gray;
+      font-size: $small-font-size;
+      margin: 0;
+    }
+
+    width: 50%;
+    padding-top: 10px;
+    text-decoration: none;
+    box-sizing: border-box;
+
+    &:nth-child(odd) {
+      padding-left: 0;
+      padding-right: 20px;
+    }
+
+    &:nth-child(even) {
+      text-align: right;
+      padding-right: 0;
+      padding-left: 20px;
+    }
+  }
+
+  @include media-query($on-mobile) {
+    display: block;
+    font-size: $small-font-size;
+
+    .post-nav-item {
+      display: block;
+      width: 100%;
+    }
+
+    .post-nav-item:nth-child(even) {
+      border-left: 0;
+      padding-left: 0;
+      border-top: 1px solid $light;
+    }
+  }
+}
\ No newline at end of file
diff --git a/_sass/bangsring/_post.scss b/_sass/bangsring/_post.scss
deleted file mode 100644
index b3f596b..0000000
--- a/_sass/bangsring/_post.scss
+++ /dev/null
@@ -1,144 +0,0 @@
-/**
- * Post title
- */
-.post-header {
-    .post-title {
-      font-size: $small-font-size;
-      font-weight: 700;
-      margin-bottom: 5px;
-      letter-spacing: 1px;
-      text-transform: uppercase;
-    }
-
-}
-
-/**
- * Post meta 
- */
-.post-meta {
-  color: $grey;
-  font-size: $small-font-size;
-  margin-bottom: 1em;
-}
-
-/**
- * Post content
- */
-.post-content {
-  font-size: $base-font-size;
-  color: $black;
-  line-height: 27px;
-  padding: 5px 0 0 0;
-  
-  iframe {
-    text-align: center;
-  }
-
-  > p {
-    margin: 0;
-    padding-top: $spacing-unit - 20;
-    padding-bottom: $spacing-unit - 20;
-  }
-
-  ul.task-list {
-    list-style: none;
-    margin-top: 0;
-    margin-bottom: 0;
-    li input[type="checkbox"]{
-      margin-right: 10px;
-    }
-  }
-
-  dl dt {
-    font-weight: 700;
-  }
-
-  h1, h2, h3, h4, h5, h6 {
-    color: $black;
-    font-weight: 700;
-    margin-top: $spacing-unit;
-    margin-bottom: 0;
-  }
-
-  h1 {
-    @include relative-font-size(1.750);
-    
-    // Use this media queries like this, if you want responsive font
-    // @include media-query($on-laptop) {
-    //   @include relative-font-size(1.75);
-    // }
-  }
-
-  h2 {    
-    @include relative-font-size(1.563);
-  }
-
-  h3 {
-    @include relative-font-size(1.438);
-    border-bottom: 1px solid $light;
-    padding-bottom: 4px;
-  }
-
-  h4 {
-    @include relative-font-size(1.188);
-  }
-
-  h5 {
-    @include relative-font-size(1);
-  }
-
-  h6 {
-    @include relative-font-size(.875);
-  }
-
-  ul a, ol a
-  {
-    border-bottom: 1px dashed #d2c7c7;
-    &:hover {
-      border-bottom: 2px solid #1635de;      
-    }
-  }
-}
-
-
-hr {
-  border-bottom:0;
-  border-style: solid;
-  border-color: $light;
-}
-
-.post-nav {
-  display: flex;
-  position: relative;
-  margin-top: 5em;
-  border-top: 1px solid $light;
-
-  .post-nav-item {
-      border-bottom: 0;       
-      font-weight: 800;
-      padding-bottom: 10px;
-      &:hover, &:focus {
-        h4 {
-          color: $blue;
-        }
-      }
-      h4 {
-        color: $grey;
-        font-size: $small-font-size;
-        margin: 0;
-      }
-      width: 50%;
-      padding-top: 10px;
-      text-decoration: none;
-      box-sizing: border-box;
-      &:nth-child(odd) {
-          padding-left: 0;
-          padding-right: 20px;
-      }
-      &:nth-child(even) {
-          text-align: right;
-          padding-right: 0;
-          padding-left: 20px;
-      }
-  }
-}
\ No newline at end of file
diff --git a/_sass/bangsring/_syntax.scss b/_sass/bangsring/_syntax.scss
index 68db947..f825228 100644
--- a/_sass/bangsring/_syntax.scss
+++ b/_sass/bangsring/_syntax.scss
@@ -1,36 +1,182 @@
 /**
  * Code formatting
  */
+
 code {
-  letter-spacing: .1px;
   text-rendering: optimizeLegibility;
+  font-feature-settings: "calt"1;
+  font-variant-ligatures: normal;
   white-space: pre;
   word-spacing: normal;
   word-break: normal;
   word-wrap: normal;
-  font-size: $small-font-size;
-  padding: 1px 3px;
+  font-size: 15px;
+  padding: 1px 4px;
+  position: relative;
+  top: -1px;
   border: 1px solid #d8d8d8;
-  background-color: #f5f5f5;
-  color: #3B454E;
+  background-color: #f6f6f6;
   border-radius: 2px;
-  font-family: $base-syntax-font;
+  font-family: $syntax-font-family;
 }
+
 pre.highlight {
-  background-color: #f5f5f5;
-  border-radius: 5px;
-  padding: 15px;
-  overflow: auto;
-  line-height: 24px;
-  color: #3B454E;
-  font-family: $base-syntax-font;
-    > code {
-      font-size: $small-font-size;
-      padding: 0;
-      overflow-x: auto;
-      line-height: 24px;
-      border: 0;
-      font-feature-settings: "calt" 1;
-      letter-spacing: .1px;
-    }
+  margin: 0 calc(51% - 50vw);
+  padding: 25px;
+  line-height: 1;
+  font-family: $syntax-font-family;
+  display: block;
+  overflow-x: auto;
+
+  >code {
+    width: 100%;
+    max-width: 37rem;
+    margin-left: auto;
+    margin-right: auto;
+    line-height: 1.5;
+    display: block;
+    border: 0;
+    font-variant-ligatures: normal;
+    background-color: transparent;
+    font-feature-settings: "calt"1;
+  }
+}
+
+.highlight table td {
+  padding: 5px;
+}
+
+.highlight table pre {
+  margin: 0;
+}
+
+.highlight,
+.highlight .w {
+  color: #fbf1c7;
+  background-color: #282828;
+}
+
+.highlight .err {
+  color: #fb4934;
+  background-color: #282828;
+  font-weight: bold;
+}
+
+.highlight .c,
+.highlight .cd,
+.highlight .cm,
+.highlight .c1,
+.highlight .cs {
+  color: #928374;
+  font-style: italic;
+}
+
+.highlight .cp {
+  color: #8ec07c;
+}
+
+.highlight .nt {
+  color: #fb4934;
+}
+
+.highlight .o,
+.highlight .ow {
+  color: #fbf1c7;
+}
+
+.highlight .p,
+.highlight .pi {
+  color: #fbf1c7;
+}
+
+.highlight .gi {
+  color: #b8bb26;
+  background-color: #282828;
+}
+
+.highlight .gd {
+  color: #fb4934;
+  background-color: #282828;
+}
+
+.highlight .gh {
+  color: #b8bb26;
+  font-weight: bold;
+}
+
+.highlight .k,
+.highlight .kn,
+.highlight .kp,
+.highlight .kr,
+.highlight .kv {
+  color: #fb4934;
+}
+
+.highlight .kc {
+  color: #d3869b;
+}
+
+.highlight .kt {
+  color: #fabd2f;
+}
+
+.highlight .kd {
+  color: #fe8019;
+}
+
+.highlight .s,
+.highlight .sb,
+.highlight .sc,
+.highlight .sd,
+.highlight .s2,
+.highlight .sh,
+.highlight .sx,
+.highlight .s1 {
+  color: #b8bb26;
+  font-style: italic;
+}
+
+.highlight .si {
+  color: #b8bb26;
+  font-style: italic;
+}
+
+.highlight .sr {
+  color: #b8bb26;
+  font-style: italic;
+}
+
+.highlight .se {
+  color: #fe8019;
+}
+
+.highlight .nn {
+  color: #8ec07c;
+}
+
+.highlight .nc {
+  color: #8ec07c;
+}
+
+.highlight .no {
+  color: #d3869b;
+}
+
+.highlight .na {
+  color: #b8bb26;
+}
+
+.highlight .m,
+.highlight .mf,
+.highlight .mh,
+.highlight .mi,
+.highlight .il,
+.highlight .mo,
+.highlight .mb,
+.highlight .mx {
+  color: #d3869b;
+}
+
+.highlight .ss {
+  color: #83a598;
 }
\ No newline at end of file
diff --git a/_sass/main.scss b/_sass/main.scss
index 99e687e..8358251 100644
--- a/_sass/main.scss
+++ b/_sass/main.scss
@@ -1,39 +1,34 @@
 // Define defaults for each variable.
-$base-font-family: "Roboto", sans-serif !default;
-$base-syntax-font: "Roboto Mono", Hack, monospace;
-$base-font-size:   16px !default;
-$medium-font-size:  $base-font-size * 0.938 !default;
+$first-font-family: "Roboto",
+sans-serif !default;
+$second-font-family: "Source Sans Pro",
+sans-serif !default;
+$syntax-font-family: "Fira Code",
+monospace !default;
+$base-font-size: 19px !default;
+$medium-font-size: $base-font-size * 0.938 !default;
 $small-font-size: $base-font-size * 0.875 !default;
 $base-font-weight: 400 !default;
-$base-line-height: 1.5 !default;
-$spacing-unit:     30px !default;
-
-// Element Color
-$light:          #ececec !default; 
-$grey:           #3B454e !default; 
-$neutral:        #f9f9f9 !default;
-$black:          #000  !default;
-$white:          #fff !default;
-$blue:           #0036c7 !default;
-$blue-light:     #d8deff !default;
+$base-line-height: 1.688 !default;
+$spacing-unit: 30px !default;
 
+// Light Element Color
+$black: #141414 !default;
+$white: #fff !default;
+$base: #f9f9f9 !default;
+$gray: #283c46 !default;
+$blue: #0036c7 !default;
+$light: #ececec !default;
+$smoke: #d2c7c7 !default;
 
 // Width of the content area
-$content-width:    800px !default;
+$content-width: 750px !default;
 
 // State of device
-$on-palm:          600px !default;
-$on-mobile:        500px !default;
-$on-laptop:        780px !default;
-
-// Use media queries like this:
-
-// @include media-query($on-palm) {
-//   .wrapper {
-//     padding-right: $spacing-unit / 2;
-//     padding-left: $spacing-unit / 2;
-//   }
-// }
+$on-mobile: 768px;
+$on-tablet: 769px;
+$on-desktop: 1024px;
+$on-widescreen: 1152px;
 
 @mixin media-query($device) {
   @media screen and (max-width: $device) {
@@ -46,10 +41,8 @@ $on-laptop:        780px !default;
 }
 
 // Import Sass partials
-@import
-  "bangsring/fonts",
-  "bangsring/base",
-  "bangsring/post",
-  "bangsring/layout",
-  "bangsring/syntax"
-;
\ No newline at end of file
+@import "bangsring/fonts",
+"bangsring/base",
+"bangsring/layout",
+"bangsring/page",
+"bangsring/syntax";
\ No newline at end of file
diff --git a/about.md b/about.md
index 1b66a1f..1c48289 100644
--- a/about.md
+++ b/about.md
@@ -1,25 +1,21 @@
 ---
-title: About bangsring theme
+title: Colophon
 permalink: /about/
-excerpt: this is for page description
+layout: page
+excerpt: Hello peeps, I'm student of computer science from Banyuwangi, living in Jogjakarta. This blog for documentation about my programming journey, running on jekyll, hosting on netlify and using my own simple theme.
+comments: false
 ---
-Website ini untuk mendokumentasikan 🎒 petualangan saya didunia pemprograman, Blog ini berjalan menggunakan jekyllrb.com, yang dihosting melalui netlify.com dan menggunakan tema [Bangsring](http://github.com/piharpi/bangsring) terdapat beberapa progress untuk blog ini :
 
-- [ ] Social link icon.
-- [ ] Night mode Theme.
-- [ ] Nambahin HTML microdata.
-- [ ] Rapihin file ``.scss``.
-- [ ] ``<h1>`` - ``<h6>`` anchor hover.
-- [ ] Tags.
-<!-- flexible image layouts = menyesuaikan tata letak gambar sendiri jika banyak gambar yang di upload -->
+Hello peeps, I'm student of computer science from Banyuwangi, living in Jogjakarta. This blog for documentation about my programming 🎒 journey, running on jekyll, hosting on netlify and using my [own](http://github.com/piharpi/bangsring) simple theme.
 
-Silahkan melapor jika terdapat kesalahan diblog ini melalui **[issue](https://github.com/piharpi/me/issues/new?template=bug_report.md)** github.
+Day to day use Ruby, Javascript and doing fun with HTML/CSS, Ruby on Rails is my fav framework right now, i also willingness to learn another web technology; but i often forgot 🌚. If you have a question about me or else, letter to me.
 
-### 🎈 Find me 
-- github.com/**piharpi** 
-- telegram.com/**piharpi**
-- twitter.com/**piharpi**
-- ![email](https://piharpi.github.io/bangsring/assets/img/email.png), an image to avoid **spam!**
+You can **[report](https://github.com/piharpi/me/issues/new?template=bug_report.md)** if there is an broken link(s) or somethings else.
 
-##### Credits: 
-- Mountain Nature icon by [Pondok Multimedia](https://iconscout.com/icon/nature-153).
+_22 August 2019, Harpi_
+
+### Further information
+
+- [resume](<javascript::void(0)>) _(soon)_
+- justharpi[at]gmail[dot]com
+- github.com/piharpi
diff --git a/assets/img/avatar.jpg b/assets/img/avatar.jpg
new file mode 100644
index 0000000..80636e5
Binary files /dev/null and b/assets/img/avatar.jpg differ
diff --git a/assets/img/avatar.png b/assets/img/avatar.png
deleted file mode 100644
index 274ddfc..0000000
Binary files a/assets/img/avatar.png and /dev/null differ
diff --git a/assets/img/email.png b/assets/img/email.png
deleted file mode 100644
index 9369aa5..0000000
Binary files a/assets/img/email.png and /dev/null differ
diff --git a/assets/img/posts/blog/example.jpg b/assets/img/posts/blog/example.jpg
deleted file mode 100644
index 5f95594..0000000
Binary files a/assets/img/posts/blog/example.jpg and /dev/null differ
diff --git a/assets/img/posts/p1070511.jpg b/assets/img/posts/p1070511.jpg
new file mode 100644
index 0000000..5d3b9d8
Binary files /dev/null and b/assets/img/posts/p1070511.jpg differ
diff --git a/assets/img/posts/photo-1556075798-4825dfaaf498_ixlib=rb-1.2.jpg b/assets/img/posts/photo-1556075798-4825dfaaf498_ixlib=rb-1.2.jpg
new file mode 100644
index 0000000..b5cdec7
Binary files /dev/null and b/assets/img/posts/photo-1556075798-4825dfaaf498_ixlib=rb-1.2.jpg differ
diff --git a/assets/img/posts/tips/example.png b/assets/img/posts/tips/example.png
deleted file mode 100644
index 6f82d5a..0000000
Binary files a/assets/img/posts/tips/example.png and /dev/null differ
diff --git a/bangsring.gemspec b/bangsring.gemspec
index e5e78d8..824af58 100644
--- a/bangsring.gemspec
+++ b/bangsring.gemspec
@@ -14,6 +14,8 @@ Gem::Specification.new do |spec|
 
   spec.add_runtime_dependency "jekyll", "~> 3.8"
 
-  spec.add_development_dependency "bundler", "~> 1.16"
-  spec.add_development_dependency "rake", "~> 12.0"
+  spec.add_development_dependency "jekyll-feed", "~> 0.11.0"
+  spec.add_development_dependency "jekyll-sitemap"
+  
+  spec.add_development_dependency "bundler"
 end
diff --git a/blog.md b/blog.md
deleted file mode 100644
index 10c96b7..0000000
--- a/blog.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: Blog posts
-permalink: /blog/
-layout: page
-excerpt: this is for page description
----
\ No newline at end of file
diff --git a/favicon.ico b/favicon.ico
deleted file mode 100644
index b4bf80a..0000000
Binary files a/favicon.ico and /dev/null differ
diff --git a/tags.md b/tags.md
index c7556ea..cc72dc5 100644
--- a/tags.md
+++ b/tags.md
@@ -2,5 +2,21 @@
 title: Tags
 permalink: /tags/
 layout: page
-excerpt: this is for page description
----
\ No newline at end of file
+excerpt: Sorted article by tags.
+---
+
+{% for tag in site.tags %} {% capture name %}{{ tag | first }}{% endcapture %}
+
+<h4 class="post-header" id="{{ name | downcase | slugify }}">
+  {{ name }}
+</h4>
+{% for post in site.tags[name] %}
+<article class="posts">
+  <span class="posts-date">{{ post.date | date: "%b %d" }}</span>
+  <header class="posts-header">
+    <h4 class="posts-title">
+      <a href="{{ post.url }}">{{ post.title | escape }}</a>
+    </h4>
+  </header>
+</article>
+{% endfor %} {% endfor %}
diff --git a/thanks.md b/thanks.md
new file mode 100644
index 0000000..30f0314
--- /dev/null
+++ b/thanks.md
@@ -0,0 +1,17 @@
+---
+title: Acknowledgment
+permalink: /thanks/
+layout: page
+excerpt: Thanks to amazing people that i met, who help me out from follishness, connecting me with another good person, giving some advice when i'm at a bad things, pulling me from ordinary to be great.
+comments: false
+---
+
+Bismillahirrahmanirrahim, this page for thanks to amazing people that i met, who help me out from follishness, connecting me with another good person, giving some advice when i'm at a bad things, pulling me from ordinary to be great.
+
+<hr>
+Thanks to my parent, whole teacher, and friends who always supporting me, and special thanks to :
+
+- Mrs. [Irez](<javacript:void(0);>) my teacher at vocational school who always suport me, have owe on she.
+- <a href="https://et.mk/me" target="_blank">Tama</a> a guy inspiring me to made english content on this site.
+
+Hopefully the knowledge that I got from them can be useful, and become a charity for them, Aamiin.
diff --git a/tips.md b/tips.md
deleted file mode 100644
index 2a5e145..0000000
--- a/tips.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: Programming tips
-permalink: /tips/
-layout: page
-excerpt: this is for page description
----
\ No newline at end of file