diff --git a/.gitignore b/.gitignore
index 2ca8682..bbaa4fd 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,4 @@ _site/
 .sass-cache/
 .jekyll-cache/
 .jekyll-metadata
+README.md
\ No newline at end of file
diff --git a/404.md b/404.md
new file mode 100644
index 0000000..d2b889f
--- /dev/null
+++ b/404.md
@@ -0,0 +1,5 @@
+---
+title: You lost from my journey
+permalink: "/404.html"
+layout: 404
+---
\ No newline at end of file
diff --git a/Gemfile b/Gemfile
new file mode 100644
index 0000000..43b6a9b
--- /dev/null
+++ b/Gemfile
@@ -0,0 +1,33 @@
+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?
+
diff --git a/Gemfile.lock b/Gemfile.lock
new file mode 100644
index 0000000..4f1cf13
--- /dev/null
+++ b/Gemfile.lock
@@ -0,0 +1,72 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    addressable (2.5.2)
+      public_suffix (>= 2.0.2, < 4.0)
+    colorator (1.1.0)
+    concurrent-ruby (1.1.2)
+    em-websocket (0.5.1)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0.6.0)
+    eventmachine (1.2.7)
+    ffi (1.9.25)
+    forwardable-extended (2.6.0)
+    http_parser.rb (0.6.0)
+    i18n (0.9.5)
+      concurrent-ruby (~> 1.0)
+    jekyll (3.8.5)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      em-websocket (~> 0.5)
+      i18n (~> 0.7)
+      jekyll-sass-converter (~> 1.0)
+      jekyll-watch (~> 2.0)
+      kramdown (~> 1.14)
+      liquid (~> 4.0)
+      mercenary (~> 0.3.3)
+      pathutil (~> 0.9)
+      rouge (>= 1.7, < 4)
+      safe_yaml (~> 1.0)
+    jekyll-feed (0.11.0)
+      jekyll (~> 3.3)
+    jekyll-sass-converter (1.5.2)
+      sass (~> 3.4)
+    jekyll-sitemap (1.2.0)
+      jekyll (~> 3.3)
+    jekyll-watch (2.1.2)
+      listen (~> 3.0)
+    kramdown (1.17.0)
+    liquid (4.0.1)
+    listen (3.1.5)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
+      ruby_dep (~> 1.2)
+    mercenary (0.3.6)
+    pathutil (0.16.2)
+      forwardable-extended (~> 2.6)
+    public_suffix (3.0.3)
+    rb-fsevent (0.10.3)
+    rb-inotify (0.9.10)
+      ffi (>= 0.5.0, < 2)
+    rouge (3.3.0)
+    ruby_dep (1.5.0)
+    safe_yaml (1.0.4)
+    sass (3.6.0)
+      sass-listen (~> 4.0.0)
+    sass-listen (4.0.0)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  jekyll (~> 3.8.3)
+  jekyll-feed (~> 0.11.0)
+  jekyll-sass-converter (~> 1.5, >= 1.5.2)
+  jekyll-sitemap
+  rouge (= 3.3.0)
+  tzinfo-data
+
+BUNDLED WITH
+   1.17.1
diff --git a/README.md b/README.md
index 99351c9..a5753df 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,5 @@
-# Bangsring 
-​	Adalah tema jekyll minimalis, ringan dan responsive, sempurna untuk Personal site juga blog anda, membuat diri anda seperti orang  professional,  bisa dijankan melalui [Github Pages](https://pages.github.com/), [Netlify](https://www.netlify.com/), maupun server sendiri,  anda juga bisa menyesuaikan tema ini dengan mengedit kode sumber, cukup untuk perkenalanya, klik untuk [demo](https://piharpi.github.io/bangsring).
+# Bangsring Jekyll Theme
+Adalah tema jekyll minimalis, ringan dan responsive, sempurna untuk Personal site juga blog anda, membuat diri anda seperti orang  professional,  bisa dijankan melalui [Github Pages](https://pages.github.com/), [Netlify](https://www.netlify.com/), maupun server sendiri,  anda juga bisa menyesuaikan tema ini dengan mengedit kode sumber, cukup untuk perkenalanya.
 
 
 
@@ -10,7 +10,6 @@ GAMBAR RESPONSIVE(DESKTOP, TAB, MOBILE) DISINI
 ## Fitur Penting
 
 - Tentu responsive dialat apapun.
-
 - Tampilan yang nyaman dibaca, tidak merusak matamu. 
 - Compatible dengan browser tua i.e: Internet Explorer.
 - Compatible dengan Github Pages and Netlify. 
@@ -19,6 +18,8 @@ GAMBAR RESPONSIVE(DESKTOP, TAB, MOBILE) DISINI
 - Commenting support powered by Disqus(optional).
 - Optimized for search engines with support for [Twitter Cards](https://dev.twitter.com/cards/overview) and [Open Graph](http://ogp.me/) data
 
+## Demo
+
 
 
 ## Installation
@@ -31,37 +32,49 @@ Directory Structure
 bangsring
 ├── _data                      # data files for customizing the theme
 |  ├── menus.yml          	   # navigation links
-|  └── projects.yml            # list projects
+|  └── projects.yml            # list your projects
+├── _drafts                    # drafts folder
 ├── _includes
-|  ├── analytics-providers     # snippets for analytics (Google and custom)
-|  ├── comments-providers      # snippets for comments
-|  ├── toc                     # table of contents helper
-|  └── ...
+|  ├── blog.html               # snippets for analytics (Google and custom)
+|  ├── cover.html              # snippets for comments
+|  ├── disqus_comment.html     # snippets for comments
+|  ├── footer.html             # snippets for comments
+|  ├── head.html               # snippets for comments
+|  ├── header.html             # snippets for comments
+|  ├── pagination.html         # snippets for comments
+|  ├── post-nav.html           # snippets for comments
+|  ├── tags.html               # snippets for comments
+|  └── tips.html               # snippet o
 ├── _layouts
-|  ├── page.html   # tag/category archive for Jekyll Archives plugin
-|  ├── blog.html            # archive base
-|  ├── tags.html               # archive listing posts grouped by tags
-|  └── category.html             # splash page
+|  ├── 404.html                # tag/category archive for Jekyll Archives plugin
+|  ├── compress.html           # archive base
+|  ├── default.html            # archive base
+|  ├── home.html               # archive base
+|  ├── page.html               # archive base
+|  └── post.html               # splash page
 ├── _sass                      # SCSS partials
 ├── assets
 |  ├── css
 |  |  └── style.scss           # main stylesheet, loads SCSS partials from _sass
 |  ├── image                   # image assets for posts/pages/collections/etc.
-|  |  ├── posts				   #
-|  |  ├── logo.jpg	
+|  |  ├── posts				         
+|  |  |  ├── blog	
+|  |  |  └── tips              # main stylesheet, loads SCSS partials from _sass
+|  |  └── avatar.png           # main stylesheet, loads SCSS partials from _sass
 |  ├── js
-|  |  ├── plugins              # jQuery plugins
-|  |  ├── vendor               # vendor scripts
-|  |  ├── _main.js             # plugin settings and other scripts to load after jQuery
-|  |  └── main.min.js          # optimized and concatenated script file loaded before 
+|  |  ├── disqus.js            # plugin settings and other scripts to load after jQuery
+|  |  └── galite.js            # optimized and concatenated script file loaded before 
 ├── _config.yml                # site configuration
 ├── Gemfile                    # gem file dependencies
-├── index.html                 # paginated home page showing recent posts
+├── 404.md                     # paginated home page showing recent posts
+├── about.md                   # paginated home page showing recent posts
+├── blog.md                    # paginated home page showing recent posts
+├── index.md                   # paginated home page showing recent posts
+├── tags.md                    # paginated home page showing recent posts
+├── tips.md                    # paginated home page showing recent posts
 └── package.json               # NPM build scripts
 ```
 
-
-
 ## Berkontribusi
 
 Having trouble working with the theme? Found a typo in the documentation? Interested in adding a feature or [fixing a bug](https://github.com/mmistakes/minimal-mistakes/issues)? Then by all means [submit an issue](https://github.com/mmistakes/minimal-mistakes/issues/new) or [pull request](https://help.github.com/articles/using-pull-requests/). If this is your first pull request, it may be helpful to read up on the [GitHub Flow](https://guides.github.com/introduction/flow/) first.
@@ -84,19 +97,4 @@ Theme documentation and demo pages can be found in the [`/docs`](https://github.
 
 ## License
 
-MIT License
-
-Copyright (c) 2019 Mahendrata Harpi
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights 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 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.
\ No newline at end of file
+MIT License 
\ No newline at end of file
diff --git a/_config.yml b/_config.yml
new file mode 100644
index 0000000..644c2e0
--- /dev/null
+++ b/_config.yml
@@ -0,0 +1,72 @@
+# 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.
+lang: en-US
+timezone: Asia/Jakarta
+icon: /favicon.ico
+
+# User settings
+author: 
+  name: Leah Rutherford
+  username: piharpi
+  email: justharpi@gmail.com
+  avatar: /assets/img/avatar.png
+
+# Url settings
+url: https://piharpi.github.io/bangsring/
+baseurl: ""
+permalink: /:title
+google_analytics: UA-105586262-2
+fb_appid: 1806380839422028
+
+collections_dir: _posts
+collections:
+  blog:
+    output: true
+    permalink: /blog/:title
+  tips:
+    output: true
+    permalink: /tips/:title
+
+# Markdown settings
+markdown: kramdown
+syntax_highlighter: rouge
+
+# Default front matter
+defaults:
+  -
+    scope:
+      path: "" # an empty string here means all files in the project
+    values:
+      layout: post
+      image: /assets/img/piharpi.png
+
+# Build settings
+sass:
+  style: compressed
+include:
+  - _redirects
+  - .htaccess
+exclude:
+  - CNAME
+  - Gemfile
+  - Gemfile.lock
+  - LICENSE
+  - CHANGELOG.md
+  - README.md
+  - node_modules 
+
+# jekyll-feed plugin settings
+feed:
+  collections: 
+    - blog
+    - tips
+
+# Plugins
+plugins:
+  - jekyll-feed
+  - jekyll-sass-converter
+  - jekyll-sitemap
diff --git a/_data/menus.yml b/_data/menus.yml
new file mode 100644
index 0000000..8ae01d5
--- /dev/null
+++ b/_data/menus.yml
@@ -0,0 +1,14 @@
+- title : Home
+  url   : /
+
+- title : Blog
+  url   : /blog/
+
+- title : Tips
+  url   : /tips/
+
+- title : About 
+  url   : /about/
+
+- title : RSS 
+  url   : /feed/
\ No newline at end of file
diff --git a/_data/projects.yml b/_data/projects.yml
new file mode 100644
index 0000000..d947579
--- /dev/null
+++ b/_data/projects.yml
@@ -0,0 +1,22 @@
+
+
+- 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
new file mode 100644
index 0000000..65b8716
--- /dev/null
+++ b/_includes/blog.html
@@ -0,0 +1,15 @@
+<h4 class="home-title"><span role="img" aria-label="book">📘</span>blog posts</h4>
+<div class="content">
+{% for post in site.blog %}
+<article class="list-post blog">
+    <header class="list-post-header">
+      <h2 class="list-post-title">
+        <a href="{{ post.url | relative_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/cover.html b/_includes/cover.html
new file mode 100644
index 0000000..6a2650b
--- /dev/null
+++ b/_includes/cover.html
@@ -0,0 +1,12 @@
+<div class="site-intro">
+  {% assign url = page.url %}
+    {% if url == "/" %}
+      <figure class="intro-image">
+        <img src="{{ site.author.avatar }}" 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
new file mode 100644
index 0000000..2304536
--- /dev/null
+++ b/_includes/disqus_comment.html
@@ -0,0 +1,21 @@
+<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
new file mode 100644
index 0000000..81a9bfd
--- /dev/null
+++ b/_includes/footer.html
@@ -0,0 +1,8 @@
+<footer class="site-footer">
+    <p><span class="crafted">Crafted with 🍩 in Banyuwangi, <b>IDN</b>.</span></p>
+</footer>
+<script src="/assets/js/galite.js"></script>
+<script>
+  var galite = galite || {};
+  galite.UA = "{{ site.google_analytics }}";
+</script>
\ No newline at end of file
diff --git a/_includes/head.html b/_includes/head.html
new file mode 100644
index 0000000..1f8594b
--- /dev/null
+++ b/_includes/head.html
@@ -0,0 +1,56 @@
+<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' }}">
+  {% if paginator.previous_page %}
+  <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 %}
+  <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 %}">
+  {% if page.location %}
+  <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">
+  {% 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 }}">
+  {% if page.image %}
+  <meta property="og:image" content="{{ page.image }}">
+  {% else %}
+  <meta property="og:image" content="{{ site.image }}">
+  {% 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 }}"/>
+  {% if page.image %}
+  <meta name="twitter:image" content="{{ page.image }}">
+  {% else %}
+  <meta name="twitter:image" content="{{ site.image }}">
+  {% endif %}
+  {% feed_meta %}
+  <link rel="shortcut icon" type="image/png" sizes="32x32" href="{{ site.icon }}"/>
+  <link rel="apple-touch-icon" href="{{ site.icon }}">
+  <link rel="stylesheet" href="/assets/css/style.css">
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</head>
\ No newline at end of file
diff --git a/_includes/header.html b/_includes/header.html
new file mode 100644
index 0000000..9d92230
--- /dev/null
+++ b/_includes/header.html
@@ -0,0 +1,25 @@
+<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 }}">{{ menu.title }}</a>
+            {% else %}
+              <a class="page-link" href="{{ menu.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
new file mode 100644
index 0000000..8c961f1
--- /dev/null
+++ b/_includes/pagination.html
@@ -0,0 +1,14 @@
+<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
new file mode 100644
index 0000000..1529596
--- /dev/null
+++ b/_includes/post-nav.html
@@ -0,0 +1,14 @@
+<aside 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>
+  {% 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>
+  {% endif %}
+</aside>
\ No newline at end of file
diff --git a/_includes/tags.html b/_includes/tags.html
new file mode 100644
index 0000000..ae4a2fb
--- /dev/null
+++ b/_includes/tags.html
@@ -0,0 +1,16 @@
+{% 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="{{ site.baseurl }}{{ post.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
new file mode 100644
index 0000000..eacbf7a
--- /dev/null
+++ b/_includes/tips.html
@@ -0,0 +1,20 @@
+<h4 class="home-title"><span role="img" aria-label="coffee">☕️</span>programming tips</h4>
+<div class="content">
+  {% for post in site.tips %}
+  <article class="list-post tips">
+    <header class="list-post-header tips">
+      <h2 class="list-post-title">
+        <a href="{{ post.url | relative_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
new file mode 100644
index 0000000..48c3575
--- /dev/null
+++ b/_layouts/404.html
@@ -0,0 +1,24 @@
+---
+layout: compress
+---
+
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: site.lang | default: " en " }}">
+
+{% include head.html %}
+
+<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>
+      </div>
+    </div>
+  </main>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/_layouts/compress.html b/_layouts/compress.html
new file mode 100644
index 0000000..8b71fb8
--- /dev/null
+++ b/_layouts/compress.html
@@ -0,0 +1,4 @@
+---
+---
+
+{% if site.compress_html.ignore.envs contains jekyll.environment %}{{ content }}{% else %}{% capture _content %}{{ content }}{% endcapture %}{% if site.compress_html.endings == "all" %}{% assign _endings = "html head body li dt dd p rt rp optgroup option colgroup caption thead tbody tfoot tr td th" | split: " " %}{% else %}{% assign _endings = site.compress_html.endings %}{% endif %}{% for _element in _endings %}{% capture _end %}</{{ _element }}>{% endcapture %}{% assign _content = _content | remove: _end %}{% endfor %}{% if site.compress_html.comments.size == 2 %}{% assign _comment_befores = _content | split: site.compress_html.comments.first %}{% for _comment_before in _comment_befores %}{% assign _comment_content = _comment_before | split: site.compress_html.comments.last | first %}{% if _comment_content %}{% capture _comment %}{{ site.compress_html.comments.first }}{{ _comment_content }}{{ site.compress_html.comments.last }}{% endcapture %}{% assign _content = _content | remove: _comment %}{% endif %}{% endfor %}{% endif %}{% assign _pre_befores = _content | split: "<pre" %}{% assign _content = "" %}{% for _pre_before in _pre_befores %}{% assign _pres = _pre_before | split: "</pre>" %}{% case _pres.size %}{% when 2 %}{% capture _content %}{{ _content }}<pre{{ _pres.first }}</pre>{{ _pres.last | split: " " | join: " " }}{% endcapture %}{% when 1 %}{% capture _content %}{{ _content }}{{ _pres.last | split: " " | join: " " }}{% endcapture %}{% endcase %}{% endfor %}{% if site.compress_html.clippings == "all" %}{% assign _clippings = "html head title base link meta style body article section nav aside h1 h2 h3 h4 h5 h6 hgroup header footer address p hr blockquote ol ul li dl dt dd figure figcaption main div table caption colgroup col tbody thead tfoot tr td th" | split: " " %}{% else %}{% assign _clippings = site.compress_html.clippings %}{% endif %}{% for _element in _clippings %}{% assign _edges = " <e;<e; </e>;</e>;</e> ;</e>" | replace: "e", _element | split: ";" %}{% assign _content = _content | replace: _edges[0], _edges[1] | replace: _edges[2], _edges[3] | replace: _edges[4], _edges[5] %}{% endfor %}{{ _content }}{% endif %}
diff --git a/_layouts/default.html b/_layouts/default.html
new file mode 100644
index 0000000..c6c2270
--- /dev/null
+++ b/_layouts/default.html
@@ -0,0 +1,20 @@
+---
+layout: compress
+---
+
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: site.lang | default: " en " }}">
+
+{% include head.html %}
+
+<body>
+    <div class="wrapper">
+    {% include cover.html %}
+    <main aria-label="Content">
+            {{ content }}
+    </main>
+    {% include footer.html %}
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/_layouts/home.html b/_layouts/home.html
new file mode 100644
index 0000000..0b98889
--- /dev/null
+++ b/_layouts/home.html
@@ -0,0 +1,73 @@
+---
+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.blog limit:3 %}
+      <article class="list-post blog">
+        <header class="list-post-header">
+          <h4 class="list-post-title">
+            <a href="{{ post.url | relative_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 }}/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.tips reversed limit: 3 %}
+      <article class="list-post tips">
+        <header class="list-post-header tips">
+          <h4 class="list-post-title">
+            <a href="{{ post.url | relative_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 }}/tips">See All</a>
+    </nav>
+  </div>
+</div>
\ No newline at end of file
diff --git a/_layouts/page.html b/_layouts/page.html
new file mode 100644
index 0000000..26a8a71
--- /dev/null
+++ b/_layouts/page.html
@@ -0,0 +1,28 @@
+---
+layout: compress
+file: page.url
+---
+
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: site.lang | default: " en " }}">
+
+{% include head.html %}
+
+<body>
+  <div class="wrapper">
+  
+    {% include cover.html %}
+
+    <main aria-label="Content">
+      <div class="content">
+
+        {% include {{ page.url | remove: "/" }}.html %}
+
+      </div>
+    </main>
+    
+    {% include footer.html %}
+
+  </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/_layouts/post.html b/_layouts/post.html
new file mode 100644
index 0000000..54403e7
--- /dev/null
+++ b/_layouts/post.html
@@ -0,0 +1,64 @@
+---
+layout: compress
+---
+
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: site.lang | default: "en" }}">
+
+{% 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>
+    {% endif %}
+    <div class="post-content" itemprop="articleBody">
+        {{ content }}
+
+        {% 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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/_posts/_blog/2018-09-28-overhaul-lanyard-gun-prow-jack.md b/_posts/_blog/2018-09-28-overhaul-lanyard-gun-prow-jack.md
new file mode 100644
index 0000000..c453d55
--- /dev/null
+++ b/_posts/_blog/2018-09-28-overhaul-lanyard-gun-prow-jack.md
@@ -0,0 +1,37 @@
+---
+title: Overhaul lanyard gun prow jack 
+date: 2018-09-28 09:45:47 +07:00
+tags: [story, antagonist]
+thumbnail: "/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/_blog/2018-11-18-think-classic-lorem-ipsum-passe?.md b/_posts/_blog/2018-11-18-think-classic-lorem-ipsum-passe?.md
new file mode 100644
index 0000000..1ed28ab
--- /dev/null
+++ b/_posts/_blog/2018-11-18-think-classic-lorem-ipsum-passe?.md
@@ -0,0 +1,94 @@
+---
+title: Think classic lorem ipsum is passé?
+date: 2018-11-18 11:38:47 +07:00
+tags: [demo, bangsring, jekyll, github-pages]
+thumbnail: 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/_blog/2019-03-6-snow-tackle-mizzen-hardtack-line.md b/_posts/_blog/2019-03-6-snow-tackle-mizzen-hardtack-line.md
new file mode 100644
index 0000000..51e37a8
--- /dev/null
+++ b/_posts/_blog/2019-03-6-snow-tackle-mizzen-hardtack-line.md
@@ -0,0 +1,6 @@
+---
+title: Step to installation bangsring jekyll theme
+date: 2019-3-6 8:28:47 +07:00
+tags: [installation, jekyll, bangsring-theme]
+tweet: 1106842621706563584
+---
diff --git a/_posts/_tips/2018-07-12-tender-overhaul-lanyard-gun-prow-jack-tar.md b/_posts/_tips/2018-07-12-tender-overhaul-lanyard-gun-prow-jack-tar.md
new file mode 100644
index 0000000..919c390
--- /dev/null
+++ b/_posts/_tips/2018-07-12-tender-overhaul-lanyard-gun-prow-jack-tar.md
@@ -0,0 +1,97 @@
+---
+title: React Component with Dot Notation
+date: 2019-02-19 11:45:47 +07:00
+tags: [react, javascript, dot-notation]
+layout: post  
+thumbnail: https://media.giphy.com/media/dIxkmtCuuBQuM9Ux1E/200w_d.gif
+---
+
+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/_tips/2019-01-26-buccaner-bucko-jury-mast-rum.md b/_posts/_tips/2019-01-26-buccaner-bucko-jury-mast-rum.md
new file mode 100644
index 0000000..6673aa5
--- /dev/null
+++ b/_posts/_tips/2019-01-26-buccaner-bucko-jury-mast-rum.md
@@ -0,0 +1,69 @@
+---
+title: How to name Sass color variables
+date: 2018-11-18 11:45:47 +07:00
+tags: [css, sass, naming-variables]
+layout: post
+comment: true
+thumbnail: 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/_tips/2019-02-19-galleon-yello-jack-chase-guns-bounty.md b/_posts/_tips/2019-02-19-galleon-yello-jack-chase-guns-bounty.md
new file mode 100644
index 0000000..d3da826
--- /dev/null
+++ b/_posts/_tips/2019-02-19-galleon-yello-jack-chase-guns-bounty.md
@@ -0,0 +1,37 @@
+---
+title: How to Clear Nunjucks Cache
+date: 2019-02-19 11:45:47 +07:00
+modified: 2019-02-20 11:45:47 +07:00
+tags: [nonjuck, cache, pug, flores, static-site]
+layout: post
+---
+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/_sass/bangsring/_base.scss b/_sass/bangsring/_base.scss
new file mode 100644
index 0000000..85905d8
--- /dev/null
+++ b/_sass/bangsring/_base.scss
@@ -0,0 +1,244 @@
+/**
+ * Reset some basic elements
+ */
+html {
+  overflow-x: hidden;
+  width: 100%;
+}
+
+body, h1, h2, h3, h4, h5, h6,
+p, blockquote, pre, hr,
+dl, dd, ol, ul, figure {
+  letter-spacing: .1px;
+  margin: 0;
+  padding: 0;
+  -webkit-font-smoothing: antialiased;
+  font-family: $base-font-family;
+}
+
+/**
+ * Basic styling
+ */
+body {
+  min-height: 100vh;
+  overflow-x: hidden; 
+  position: relative;
+  background: $neutral;
+  font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-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;
+  font-kerning: normal;
+}
+
+/**
+ * Set `margin-bottom` to maintain vertical rhythm
+ */
+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;
+}
+
+/**
+ * Images
+ */
+img {
+  max-width: 100%;
+  vertical-align: middle;
+  -webkit-user-drag: none;
+}
+
+/**
+ * Figures
+ */
+figure {
+  position: relative;
+}
+
+
+/**
+ * Images
+ */
+figure > img {
+  display: block;
+  position: relative;
+}
+
+/**
+ * Caption Image
+ */
+figcaption {
+  font-size: 13px;
+  text-align: center;
+}
+
+/**
+ * Lists
+ */
+ul, ol {
+  margin-left: $spacing-unit;
+}
+
+li {
+  padding-bottom: 1px;
+  padding-top: 1px;
+  > ul,
+  > ol {
+    margin-bottom: 2px;
+    margin-top: 0;
+  }
+}
+
+/**
+ * Headings
+ */
+h1, h2, h3, h4, h5, h6 {
+  font-weight: $base-font-weight;
+}
+
+h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a {
+  text-decoration: none;
+  border: none;
+  &:hover {
+    text-decoration: none;
+    border: none;
+  }
+}
+
+
+/**
+ * Links
+ */
+a {
+  color: $black;
+  border-bottom: 1px solid #1635de;
+  text-decoration: none;
+
+  &:hover {
+    color: $black;
+    border-bottom: 2px solid #1635de;
+  }
+}
+
+/**
+ * Del
+ */
+del {
+  color: inherit;
+}
+
+/**
+ * Em
+ */
+em {
+  color:inherit;
+}
+
+/**
+ * Blockquotes
+ */
+blockquote {
+  color: $grey;
+  border-left: 4px solid $black;
+  padding: 5px 5px 5px 15px;
+  border-radius: 2px;
+  @include relative-font-size(1);
+
+  > :last-child {
+    margin-bottom: 0;
+    margin-top: 0;
+  }
+}
+
+/**
+ * Wrapper
+ */
+.wrapper {
+  max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));
+  max-width:         calc(#{$content-width} - (#{$spacing-unit} * 2));
+  position: relative;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: $spacing-unit;
+  padding-left: $spacing-unit;
+  @extend %clearfix;
+
+  @include media-query($on-laptop) {
+    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;
+  }
+}
+
+
+/**
+ * Table
+ */
+table {
+  margin: 0 auto;
+  border-collapse: collapse;
+  background: $white;
+  font-family: 'Roboto Mono';
+  font-size: $small-font-size;
+  th { 
+    font-weight: 400;
+    background: #f5f5f5;
+  }
+  th, td, tr {
+    border: 1px solid $light;
+    padding: 4px 8px;
+  }
+}
+
+/**
+ * Clearfix
+ */
+%clearfix:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+/**
+ * When mouse block a text set this color
+ */
+::selection {
+    background: #D6EDFF;
+}
+
+/**
+ * Github Gist clear border 
+ */
+.gist {
+  table {
+    border: 0;
+    tr, td {
+      border: 0;
+    }
+  }
+}
\ No newline at end of file
diff --git a/_sass/bangsring/_fonts.scss b/_sass/bangsring/_fonts.scss
new file mode 100644
index 0000000..a6eda32
--- /dev/null
+++ b/_sass/bangsring/_fonts.scss
@@ -0,0 +1,136 @@
+// 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;}
+
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Roboto';
+  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;
+}
+
+/* cyrillic */
+@font-face {
+  font-family: 'Roboto';
+  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;
+}
+
+/* greek-ext */
+@font-face {
+  font-family: 'Roboto';
+  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;
+}
+
+/* greek */
+@font-face {
+  font-family: 'Roboto';
+  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;
+}
+
+/* vietnamese */
+@font-face {
+  font-family: 'Roboto';
+  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;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  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;
+}
+
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  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;
+}
+
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v6/L0x5DF4xlVMF-BfR8bXMIjhGq3-OXg.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-weight: 400;
+  src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v6/L0x5DF4xlVMF-BfR8bXMIjhPq3-OXg.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-weight: 400;
+  src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v6/L0x5DF4xlVMF-BfR8bXMIjhHq3-OXg.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v6/L0x5DF4xlVMF-BfR8bXMIjhIq3-OXg.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v6/L0x5DF4xlVMF-BfR8bXMIjhEq3-OXg.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-weight: 400;
+  src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v6/L0x5DF4xlVMF-BfR8bXMIjhFq3-OXg.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-weight: 400;
+  src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v6/L0x5DF4xlVMF-BfR8bXMIjhLq38.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;
+}
diff --git a/_sass/bangsring/_layout.scss b/_sass/bangsring/_layout.scss
new file mode 100644
index 0000000..04d3ee7
--- /dev/null
+++ b/_sass/bangsring/_layout.scss
@@ -0,0 +1,522 @@
+/**
+ * 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%;
+    width: 103px;
+    height: 103px;
+    animation: .5s ease-in forwards weeng;
+    user-select: none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    &::after {
+      content: "";
+      position: absolute;
+      background: transparent;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+  }
+  
+  .intro-name {
+    font-size: 1.5em;
+    font-weight: 600;
+    margin-bottom: 5px;
+    color: $black;
+  }
+
+  .intro-description {
+    font-size: $base-font-size;
+    color: $grey;
+    margin: 0;
+  }
+}
+
+/**
+ * Site header
+ */
+
+.site-header {
+  height: 25px;
+  margin: 16px 0 5em 0;
+}
+
+/**
+ * Site nav
+ */
+
+.site-nav {
+
+  .trigger {
+    float: left;
+  }
+
+  .nav-trigger {
+      display: none;
+  }
+
+  .menu-icon {
+    display: none;
+  }
+
+  .page-link {
+    color: $black;
+    box-shadow: 1px 1px 0px 0px #dddddd;
+    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;
+    letter-spacing: 0.5px;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &:not(:last-child) {
+      margin-right: 5px;
+    }
+  }
+
+  .page-link.active {
+    opacity: 1;
+  }
+
+  @include media-query($on-palm) {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 2;
+    text-align: center;
+    background: #fff;
+    border-bottom: 2px solid #f5f5f5;
+
+    label[for="nav-trigger"] {
+      display: block;
+      float: right;
+      width: 36px;
+      height: 36px;
+      z-index: 2;
+      cursor: pointer;
+    }
+
+    .menu-icon {
+      display: block;
+      position: absolute;
+      right: 0;
+      width: 36px;
+      height: 26px;
+      line-height: 0;
+      padding-top: 10px;
+      text-align: center;
+      z-index: 10;
+
+      > svg path {
+        fill: $black;
+      }
+    }
+
+    input ~ .trigger {
+      clear: both;
+      display: none;
+    }
+
+    input:checked ~ .trigger {
+      position: fixed;
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      background: rgba(255, 255, 255, 0.94);
+      height: 100vh;
+      width: 100%;
+      top: 0;
+    }
+
+    .page-link {
+      display: block;
+      box-sizing: border-box; 
+      background: none;
+      font-size: $base-font-size;
+      box-shadow: none;
+
+      &:not(:last-child) {
+        margin-right: 0;
+      }
+    }
+  }
+}
+
+@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;
+  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;
+    }
+  }
+  @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;
+    }
+  }
+
+}
+
+.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;
+    font-weight: normal;
+  }
+  margin: 0;
+}
+
+.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;
+      color: $blue;
+    }
+  }
+
+  @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 
+ */
+@keyframes weeng {
+  0% {
+    opacity: .2;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+/**
+ * Responsive Embed : vidio
+ */
+
+.embed-responsive {
+  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;
+  position: relative;
+  text-align: left;
+}
+
+.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;    
+    }
+  }
+}
+
+/**
+ * Site footer
+ */
+.site-footer {
+  a {
+      color: $black;
+      border-bottom: 1px solid $blue;
+      &: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/_post.scss b/_sass/bangsring/_post.scss
new file mode 100644
index 0000000..b3f596b
--- /dev/null
+++ b/_sass/bangsring/_post.scss
@@ -0,0 +1,144 @@
+/**
+ * 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
new file mode 100644
index 0000000..68db947
--- /dev/null
+++ b/_sass/bangsring/_syntax.scss
@@ -0,0 +1,36 @@
+/**
+ * Code formatting
+ */
+code {
+  letter-spacing: .1px;
+  text-rendering: optimizeLegibility;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  font-size: $small-font-size;
+  padding: 1px 3px;
+  border: 1px solid #d8d8d8;
+  background-color: #f5f5f5;
+  color: #3B454E;
+  border-radius: 2px;
+  font-family: $base-syntax-font;
+}
+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;
+    }
+}
\ No newline at end of file
diff --git a/_sass/main.scss b/_sass/main.scss
new file mode 100644
index 0000000..28bf80f
--- /dev/null
+++ b/_sass/main.scss
@@ -0,0 +1,55 @@
+// 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;
+$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;
+
+
+// Width of the content area
+$content-width:    780px !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;
+//   }
+// }
+
+@mixin media-query($device) {
+  @media screen and (max-width: $device) {
+    @content;
+  }
+}
+
+@mixin relative-font-size($ratio) {
+  font-size: $base-font-size * $ratio;
+}
+
+// Import Sass partials
+@import
+  "bangsring/fonts",
+  "bangsring/base",
+  "bangsring/post",
+  "bangsring/layout",
+  "bangsring/syntax"
+;
\ No newline at end of file
diff --git a/about.md b/about.md
new file mode 100644
index 0000000..ef52b89
--- /dev/null
+++ b/about.md
@@ -0,0 +1,25 @@
+---
+title: About bangsring theme
+permalink: /about/
+excerpt: this is for page description
+---
+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 -->
+
+Silahkan melapor jika terdapat kesalahan diblog ini melalui **[issue](https://github.com/piharpi/me/issues/new?template=bug_report.md)** github.
+
+### 🎈 Find me 
+- github.com/**piharpi** 
+- telegram.com/**piharpi**
+- twitter.com/**piharpi**
+- ![email](/assets/img/email.png), an image to avoid **spam!**
+
+##### Credits: 
+- Mountain Nature icon by [Pondok Multimedia](https://iconscout.com/icon/nature-153).
diff --git a/assets/css/style.scss b/assets/css/style.scss
new file mode 100644
index 0000000..a93cc06
--- /dev/null
+++ b/assets/css/style.scss
@@ -0,0 +1 @@
+@import "main";
\ No newline at end of file
diff --git a/assets/img/avatar.png b/assets/img/avatar.png
new file mode 100644
index 0000000..274ddfc
Binary files /dev/null and b/assets/img/avatar.png differ
diff --git a/assets/img/email.png b/assets/img/email.png
new file mode 100644
index 0000000..9369aa5
Binary files /dev/null and b/assets/img/email.png differ
diff --git a/assets/img/posts/blog/example.jpg b/assets/img/posts/blog/example.jpg
new file mode 100644
index 0000000..5f95594
Binary files /dev/null and b/assets/img/posts/blog/example.jpg differ
diff --git a/assets/img/posts/tips/example.png b/assets/img/posts/tips/example.png
new file mode 100644
index 0000000..6f82d5a
Binary files /dev/null and b/assets/img/posts/tips/example.png differ
diff --git a/assets/js/disqus.js b/assets/js/disqus.js
new file mode 100644
index 0000000..f490611
--- /dev/null
+++ b/assets/js/disqus.js
@@ -0,0 +1 @@
+!function(t,e,n){"use strict";var o=function(t,e){var n,o;return function(){var i=this,r=arguments,d=+new Date;n&&d<n+t?(clearTimeout(o),o=setTimeout(function(){n=d,e.apply(i,r)},t)):(n=d,e.apply(i,r))}},i=!1,r=!1,d=!1,s=!1,a="unloaded",u=!1,l=function(){if(!u||!e.body.contains(u)||"loaded"==u.disqusLoaderStatus)return!0;var n,o,i=t.pageYOffset,l=(n=u,o=n.getBoundingClientRect(),{top:o.top+e.body.scrollTop,left:o.left+e.body.scrollLeft}).top;if(l-i>t.innerHeight*r||i-l-u.offsetHeight-t.innerHeight*r>0)return!0;var c,f,p,y=e.getElementById("disqus_thread");y&&y.removeAttribute("id"),u.setAttribute("id","disqus_thread"),u.disqusLoaderStatus="loaded","loaded"==a?DISQUS.reset({reload:!0,config:d}):(t.disqus_config=d,"unloaded"==a&&(a="loading",c=s,f=function(){a="loaded"},(p=e.createElement("script")).src=c,p.async=!0,p.setAttribute("data-timestamp",+new Date),p.addEventListener("load",function(){"function"==typeof f&&f()}),(e.head||e.body).appendChild(p)))};t.addEventListener("scroll",o(i,l)),t.addEventListener("resize",o(i,l)),t.disqusLoader=function(t,n){n=function(t,e){var n,o={};for(n in t)Object.prototype.hasOwnProperty.call(t,n)&&(o[n]=t[n]);for(n in e)Object.prototype.hasOwnProperty.call(e,n)&&(o[n]=e[n]);return o}({laziness:1,throttle:250,scriptUrl:!1,disqusConfig:!1},n),r=n.laziness+1,i=n.throttle,d=n.disqusConfig,s=!1===s?n.scriptUrl:s,(u="string"==typeof t?e.querySelector(t):"number"==typeof t.length?t[0]:t)&&(u.disqusLoaderStatus="unloaded"),l()}}(window,document);
\ No newline at end of file
diff --git a/assets/js/galite.js b/assets/js/galite.js
new file mode 100644
index 0000000..810673f
--- /dev/null
+++ b/assets/js/galite.js
@@ -0,0 +1 @@
+(function(b,l,e,g,h,f){1!==parseInt(e.msDoNotTrack||b.doNotTrack||e.doNotTrack,10)&&b.addEventListener("load",function(){var r=(new Date).getTime();b.galite=b.galite||{};var m=new XMLHttpRequest,n="https://www.google-analytics.com/collect?cid="+(l.uid=l.uid||Math.random()+"."+Math.random())+"&v=1&tid="+galite.UA+"&dl="+f(h.location.href)+"&ul=en-us&de=UTF-8",a=function(b){var d="",c;for(c in b){if(void 0===b[c])return!1;d+=f(b[c])}return d},p={dt:[h.title],sd:[g.colorDepth,"-bit"],sr:[g.availHeight,"x",g.availWidth],vp:[innerWidth,"x",innerHeight],dr:[h.referrer]},k;for(k in p){var q=k+"="+a(p[k]);q&&(n+="&"+q)}a=function(b,d){var c="",a;for(a in d)c+="&"+a+"="+f(d[a]);return function(){var a=n+c+(galite.anonymizeIp?"&aip=1":"")+"&t="+f(b)+"&z="+(new Date).getTime();if(e.sendBeacon)e.sendBeacon(a);else try{m.open("GET",a,!1),m.send()}catch(t){(new Image).src=a}}};setTimeout(a("pageview",null),100);b.addEventListener("unload",a("timing",{utc:"JS Dependencies",utv:"unload",utt:(new Date).getTime()-r}))})})(window,localStorage,navigator,screen,document,encodeURIComponent)
\ No newline at end of file
diff --git a/bangsring.gemspec b/bangsring.gemspec
new file mode 100644
index 0000000..e5e78d8
--- /dev/null
+++ b/bangsring.gemspec
@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+Gem::Specification.new do |spec|
+  spec.name          = "bangsring"
+  spec.version       = "0.1.0"
+  spec.authors       = ["piharpi"]
+  spec.email         = ["justharpi@gmail.com"]
+
+  spec.summary       = "🏖 Bangsring is minimalist Jekyll theme for running a personal site and blog."
+  spec.homepage      = "https://github.com/piharpi/bangsring"
+  spec.license       = "MIT"
+
+  spec.files         = `git ls-files -z`.split("\x0").select { |f| f.match(%r!^(assets|_layouts|_includes|_sass|LICENSE|README)!i) }
+
+  spec.add_runtime_dependency "jekyll", "~> 3.8"
+
+  spec.add_development_dependency "bundler", "~> 1.16"
+  spec.add_development_dependency "rake", "~> 12.0"
+end
diff --git a/blog.md b/blog.md
new file mode 100644
index 0000000..10c96b7
--- /dev/null
+++ b/blog.md
@@ -0,0 +1,6 @@
+---
+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
new file mode 100644
index 0000000..b4bf80a
Binary files /dev/null and b/favicon.ico differ
diff --git a/index.md b/index.md
new file mode 100644
index 0000000..bf0c84b
--- /dev/null
+++ b/index.md
@@ -0,0 +1,3 @@
+---
+layout: home
+---
\ No newline at end of file
diff --git a/tags.md b/tags.md
new file mode 100644
index 0000000..c7556ea
--- /dev/null
+++ b/tags.md
@@ -0,0 +1,6 @@
+---
+title: Tags
+permalink: /tags/
+layout: page
+excerpt: this is for page description
+---
\ No newline at end of file
diff --git a/tips.md b/tips.md
new file mode 100644
index 0000000..2a5e145
--- /dev/null
+++ b/tips.md
@@ -0,0 +1,6 @@
+---
+title: Programming tips
+permalink: /tips/
+layout: page
+excerpt: this is for page description
+---
\ No newline at end of file