I dunno what im doing

61 files changed, 1594 insertions, 0 deletions

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..d0ba6c8
--- /dev/null
+++ b/README.md
@@ -0,0 +1,2 @@
+# Ramium
+A modern hugo theme for awesome blogs
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
new file mode 100644
index 0000000..db1451a
--- /dev/null
+++ b/exampleSite/config.toml
@@ -0,0 +1,65 @@
+baseURL = "https://rafed.github.io/ramium/"
+#CanonifyURLs=true
+
+languageCode = "en-us"
+theme = "ramium"
+
+title = "Ramium"
+disqusShortname = "rafed123"
+googleAnalytics = "googra"
+summaryLength = 40
+pluralizeListTitles = false
+enableemoji = false
+
+[params]
+    description = "A description for the meta tag of the site"
+    googleSearch = "000151824860492892407:kd5zijxwj6a"
+    showDate = true # make false if dont want to show date
+    math = false # best to enable this in the front matter of a page
+
+    tagsInHome = 40
+    sectionsInHome = 5
+    paginatePostsPerPage = 5
+    paginateTagsPerPage = 6
+
+[taxonomies]
+    tag = "tags"
+
+[markup.goldmark.renderer]
+    unsafe = true
+
+[menu]
+    [[menu.main]]
+        name = "Home"
+        url = "/"
+        weight = 1
+
+    [[menu.main]]
+        identifier = "blog"
+        name = "This Blog"
+        weight = 2
+            [[menu.main]]
+                parent = "blog"
+                name = "All Tags"
+                url = "/tags/"
+                weight = 1
+            [[menu.main]]
+                parent = "blog"
+                name = "All Sections"
+                url = "/sections/"
+                weight = 2
+            [[menu.main]]
+                parent = "blog"
+                name = "All Posts"
+                url = "/posts/"
+                weight = 3
+    
+    [[menu.main]]
+        name = "Author"
+        url = "/author/"
+        weight = 3
+
+[permalinks]
+    posts = "/:section/:title/"
+    getting-started-with-ramium = "/:section/:title/"
+    introduction-to-ramium = "/:section/:title/"
\ No newline at end of file
diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md
new file mode 100644
index 0000000..b9ba878
--- /dev/null
+++ b/exampleSite/content/_index.md
@@ -0,0 +1,8 @@
+---
+title: "Ramium Theme"
+subtitle: "A modern hugo theme for awesome blogs"
+date: 2020-03-25T04:52:30+06:00
+draft: false
+---
+
+<!-- You can add a short description if you want -->
\ No newline at end of file
diff --git a/exampleSite/content/addons/admin.md b/exampleSite/content/addons/admin.md
new file mode 100644
index 0000000..6341d9b
--- /dev/null
+++ b/exampleSite/content/addons/admin.md
@@ -0,0 +1,8 @@
+---
+date: 2020-04-06T02:07:30+06:00
+title: "Admin Panel"
+draft: false
+type: "Addons"
+layout: "admin"
+url: "/admin/"
+---
diff --git a/exampleSite/content/addons/author.md b/exampleSite/content/addons/author.md
new file mode 100644
index 0000000..72bd60a
--- /dev/null
+++ b/exampleSite/content/addons/author.md
@@ -0,0 +1,13 @@
+---
+date: 2020-04-06T02:07:31+06:00
+title: "About Author"
+draft: false
+type: "Addons"
+layout: "author"
+url: "/author/"
+image: "/image/rafed.jpg"
+---
+
+Hello it's Devra! To know more about me go to [rafed.github.io](https://rafed.github.io).
+
+I hope you like this theme. I've tried to make it powerful, useful and easy to use. If you like it give it a star at [github.com/rafed/ramium](https://github.com/rafed/ramium).
\ No newline at end of file
diff --git a/exampleSite/content/addons/sections.md b/exampleSite/content/addons/sections.md
new file mode 100644
index 0000000..a4a8a05
--- /dev/null
+++ b/exampleSite/content/addons/sections.md
@@ -0,0 +1,8 @@
+---
+date: 2020-04-06T02:07:30+06:00
+title: "All Sections"
+draft: false
+type: "Addons"
+layout: "sections"
+url: "/sections/"
+---
diff --git a/exampleSite/content/getting-started-with-ramium/1. Tutorial.md b/exampleSite/content/getting-started-with-ramium/1. Tutorial.md
new file mode 100644
index 0000000..cad1b44
--- /dev/null
+++ b/exampleSite/content/getting-started-with-ramium/1. Tutorial.md
@@ -0,0 +1,8 @@
+---
+title: Tutorial
+date: 2020-03-19
+tags: ["Ramium"]
+---
+
+### Full tutorial coming soon!
+
diff --git a/exampleSite/content/introduction-to-ramium/1. About Ramium.md b/exampleSite/content/introduction-to-ramium/1. About Ramium.md
new file mode 100644
index 0000000..cfd3c4d
--- /dev/null
+++ b/exampleSite/content/introduction-to-ramium/1. About Ramium.md
@@ -0,0 +1,12 @@
+---
+title: About Ramium
+date: 2020-03-17
+tags: ["Ramium"]
+image: "/image/rafed.jpg"
+---
+
+Ramium is an awesome hugo theme for creating personal blogs. Apparently, none of the existing hugo themes were what I wanted them to be for my new blog. Or maybe I just could not find the right one. So I took upon the courtesy of making the perfect one for my own. And thus takes the birth of Ramium that I'm very proud of. Coding this theme has been very fun.
+
+Special thanks go to [Hugo](https://gohugo.io/), which is not only the world’s fastest framework for building websites but an amazing one as well. This theme exists because Hugo exists. Also a big thanks to [Bulma](https://bulma.io/), which is an open source CSS framework based on Flexbox. It was eye refreshing to see a site with layouts not from bootstrap.
+
+Check out all the [features of Ramium!](/ramium/introduction-to-ramium/features-of-ramium/) Or start using Ramium by following the [tutorial here!](/ramium/introduction-to-ramium/)
diff --git a/exampleSite/content/introduction-to-ramium/2. Features of Ramium.md b/exampleSite/content/introduction-to-ramium/2. Features of Ramium.md
new file mode 100644
index 0000000..c0850b0
--- /dev/null
+++ b/exampleSite/content/introduction-to-ramium/2. Features of Ramium.md
@@ -0,0 +1,31 @@
+---
+title: Features of Ramium
+date: 2020-03-18
+tags: ["Ramium"]
+---
+
+Ramium is Packed with awesome features that makes your blog powerful and easy to use. 
+<!--more-->
+
+### Site features
+
+- Google search bar
+- Google Analytics
+- Social sharing bar (facebook, twitter, reddit)
+- Comments with Disqus
+- Customizable navbar
+- Admin panel (Not a real admin panel though, since it's a static site. Just a panel to view a summary of the total nuimber of posts, tags and sections)
+- Mobile friendly- works great across desktops, tablets and mobiles
+- SEO friendly (Opengraph, Twitter cards)
+
+### Blogging features
+
+- Attractive landing page with easily navigable links
+- Adding featured images to posts
+- Add tags to articles and filter by the tags
+- Making sections for grouped articles (like for tutorials, or related articles)
+
+### Future plans
+- Post suggestion after articles based on tags
+- Support for facebook comments
+- Google adsense
diff --git a/exampleSite/content/posts/1. markdown-syntax.md b/exampleSite/content/posts/1. markdown-syntax.md
new file mode 100644
index 0000000..dd41b00
--- /dev/null
+++ b/exampleSite/content/posts/1. markdown-syntax.md
@@ -0,0 +1,135 @@
+---
+title: Markdown Syntax Guide
+date: 2020-04-16
+description: Sample article showcasing basic Markdown syntax and formatting for HTML elements.
+tags: ["markdown", "css", "html", "themes"]
+---
+
+This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.
+<!--more-->
+
+## Headings
+
+The following HTML `<h1>`—`<h6>` elements represent six levels of section headings. `<h1>` is the highest section level while `<h6>` is the lowest.
+
+# H1
+## H2
+### H3
+#### H4
+##### H5
+###### H6
+
+## Paragraph
+
+Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.
+
+Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.
+
+## Blockquotes
+
+The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations.
+
+#### Blockquote without attribution
+
+> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
+> **Note** that you can use *Markdown syntax* within a blockquote.
+
+#### Blockquote with attribution
+
+> Don't communicate by sharing memory, share memory by communicating.</p>
+> — <cite>Rob Pike[^1]</cite>
+
+
+[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.
+
+## Tables
+
+Tables aren't part of the core Markdown spec, but Hugo supports supports them out-of-the-box.
+
+   Name | Age
+--------|------
+    Bob | 27
+  Alice | 23
+
+#### Inline Markdown within tables
+
+| Inline&nbsp;&nbsp;&nbsp;     | Markdown&nbsp;&nbsp;&nbsp;  | In&nbsp;&nbsp;&nbsp;                | Table      |
+| ---------- | --------- | ----------------- | ---------- |
+| *italics*  | **bold**  | ~~strikethrough~~&nbsp;&nbsp;&nbsp; | `code`     |
+
+## Code Blocks
+
+#### Code block with backticks
+
+```
+html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Example HTML5 Document</title>
+</head>
+<body>
+  <p>Test</p>
+</body>
+</html>
+```
+#### Code block indented with four spaces
+
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+      <meta charset="UTF-8">
+      <title>Example HTML5 Document</title>
+    </head>
+    <body>
+      <p>Test</p>
+    </body>
+    </html>
+
+#### Code block with Hugo's internal highlight shortcode
+{{< highlight html >}}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Example HTML5 Document</title>
+</head>
+<body>
+  <p>Test</p>
+</body>
+</html>
+{{< /highlight >}}
+
+## List Types
+
+#### Ordered List
+
+1. First item
+2. Second item
+3. Third item
+
+#### Unordered List
+
+* List item
+* Another item
+* And another item
+
+#### Nested list
+
+* Item
+1. First Sub-item
+2. Second Sub-item
+
+## Other Elements — abbr, sub, sup, kbd, mark
+
+<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.
+
+H<sub>2</sub>O
+
+X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
+
+Press <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd></kbd> to end the session.
+
+Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.
+
diff --git a/exampleSite/content/posts/2. placeholder-text.md b/exampleSite/content/posts/2. placeholder-text.md
new file mode 100644
index 0000000..71bee07
--- /dev/null
+++ b/exampleSite/content/posts/2. placeholder-text.md
@@ -0,0 +1,54 @@
+---
+title: "Placeholder Text"
+date: 2020-04-15
+description: "Lorem Ipsum Dolor Si Amet"
+tags: ["markdown", "text"]
+---
+
+Lorem est tota propiore conpellat pectoribus de
+pectora summo. <!--more-->Redit teque digerit hominumque toris verebor lumina non cervice
+subde tollit usus habet Arctonque, furores quas nec ferunt. Quoque montibus nunc
+caluere tempus inhospita parcite confusaque translucet patri vestro qui optatis
+lumine cognoscere flos nubis! Fronde ipsamque patulos Dryopen deorum.
+
+1. Exierant elisi ambit vivere dedere
+2. Duce pollice
+3. Eris modo
+4. Spargitque ferrea quos palude
+
+Rursus nulli murmur; hastile inridet ut ab gravi sententia! Nomine potitus
+silentia flumen, sustinet placuit petis in dilapsa erat sunt. Atria
+tractus malis.
+
+1. Comas hunc haec pietate fetum procerum dixit
+2. Post torum vates letum Tiresia
+3. Flumen querellas
+4. Arcanaque montibus omnes
+5. Quidem et
+
+# Vagus elidunt
+
+<svg class="canon" xmlns="http://www.w3.org/2000/svg" overflow="visible" viewBox="0 0 496 373" height="373" width="496"><g fill="none"><path stroke="#000" stroke-width=".75" d="M.599 372.348L495.263 1.206M.312.633l494.95 370.853M.312 372.633L247.643.92M248.502.92l246.76 370.566M330.828 123.869V1.134M330.396 1.134L165.104 124.515"></path><path stroke="#ED1C24" stroke-width=".75" d="M275.73 41.616h166.224v249.05H275.73zM54.478 41.616h166.225v249.052H54.478z"></path><path stroke="#000" stroke-width=".75" d="M.479.375h495v372h-495zM247.979.875v372"></path><ellipse cx="498.729" cy="177.625" rx=".75" ry="1.25"></ellipse><ellipse cx="247.229" cy="377.375" rx=".75" ry="1.25"></ellipse></g></svg>
+
+[The Van de Graaf Canon](https://en.wikipedia.org/wiki/Canons_of_page_construction#Van_de_Graaf_canon)
+
+## Mane refeci capiebant unda mulcebat
+
+Victa caducifer, malo vulnere contra
+dicere aurato, ludit regale, voca! Retorsit colit est profanae esse virescere
+furit nec; iaculi matertera et visa est, viribus. Divesque creatis, tecta novat collumque vulnus est, parvas. **Faces illo pepulere** tempus adest. Tendit flamma, ab opes virum sustinet, sidus sequendo urbis.
+
+Iubar proles corpore raptos vero auctor imperium; sed et huic: manus caeli
+Lelegas tu lux. Verbis obstitit intus oblectamina fixis linguisque ausus sperare
+Echionides cornuaque tenent clausit possit. Omnia putatur. Praeteritae refert
+ausus; ferebant e primus lora nutat, vici quae mea ipse. Et iter nil spectatae
+vulnus haerentia iuste et exercebat, sui et.
+
+Eurytus Hector, materna ipsumque ut Politen, nec, nate, ignari, vernum cohaesit sequitur. Vel **mitis temploque** vocatus, inque alis, *oculos nomen* non silvis corpore coniunx ne displicet illa. Crescunt non unus, vidit visa quantum inmiti flumina mortis facto sic: undique a alios vincula sunt iactata abdita! Suspenderat ego fuit tendit: luna, ante urbem
+Propoetides **parte**.
+
+{{< css.inline >}}
+<style>
+.canon { background: white; width: 100%; height: auto;}
+</style>
+{{< /css.inline >}}
diff --git a/exampleSite/content/posts/3. rich-content.md b/exampleSite/content/posts/3. rich-content.md
new file mode 100644
index 0000000..af2cedb
--- /dev/null
+++ b/exampleSite/content/posts/3. rich-content.md
@@ -0,0 +1,38 @@
+---
+title: Rich Content
+date: 2020-04-14
+description: A brief description of Hugo Shortcodes
+tags: ["shortcodes", "privacy"]
+---
+
+Hugo ships with several [Built-in Shortcodes](https://gohugo.io/content-management/shortcodes/#use-hugo-s-built-in-shortcodes) for rich content, along with a [Privacy Config](https://gohugo.io/about/hugo-and-gdpr/) and a set of Simple Shortcodes that enable static and no-JS versions of various social media embeds.
+<!--more-->
+---
+
+## Instagram Simple Shortcode
+
+{{< instagram_simple BGvuInzyFAe hidecaption >}}
+
+<br>
+
+---
+
+## YouTube Privacy Enhanced Shortcode
+
+{{< youtube ZJthWmvUzzc >}}
+
+<br>
+
+---
+
+## Twitter Simple Shortcode
+
+{{< twitter_simple 1085870671291310081 >}}
+
+<br>
+
+---
+
+## Vimeo Simple Shortcode
+
+{{< vimeo_simple 48912912 >}}
diff --git a/exampleSite/content/posts/4. emoji-support.md b/exampleSite/content/posts/4. emoji-support.md
new file mode 100644
index 0000000..04fd7a4
--- /dev/null
+++ b/exampleSite/content/posts/4. emoji-support.md
@@ -0,0 +1,42 @@
+---
+title: Emoji Support
+date: 2020-04-13
+description: Guide to emoji usage in Hugo
+tags: ["emoji"]
+---
+
+Emoji can be enabled in a Hugo project in a number of ways. 
+<!--more-->
+The [`emojify`](https://gohugo.io/functions/emojify/) function can be called directly in templates or [Inline Shortcodes](https://gohugo.io/templates/shortcode-templates/#inline-shortcodes). 
+
+To enable emoji globally, set `enableEmoji` to `true` in your site’s [configuration](https://gohugo.io/getting-started/configuration/) and then you can type emoji shorthand codes directly in content files; e.g.
+
+<p><span class="nowrap"><span class="emojify">🙈</span> <code>:see_no_evil:</code></span>  <span class="nowrap"><span class="emojify">🙉</span> <code>:hear_no_evil:</code></span>  <span class="nowrap"><span class="emojify">🙊</span> <code>:speak_no_evil:</code></span></p>
+
+The [Emoji cheat sheet](http://www.emoji-cheat-sheet.com/) is a useful reference for emoji shorthand codes.
+
+***
+
+**N.B.** The above steps enable Unicode Standard emoji characters and sequences in Hugo, however the rendering of these glyphs depends on the browser and the platform. To style the emoji you can either use a third party emoji font or a font stack; e.g.
+
+{{< highlight html >}}
+.emoji {
+font-family: Apple Color Emoji,Segoe UI Emoji,NotoColorEmoji,Segoe UI Symbol,Android Emoji,EmojiSymbols;
+}
+{{< /highlight >}}
+
+{{< css.inline >}}
+<style>
+.emojify {
+	font-family: Apple Color Emoji,Segoe UI Emoji,NotoColorEmoji,Segoe UI Symbol,Android Emoji,EmojiSymbols;
+	font-size: 2rem;
+	vertical-align: middle;
+}
+@media screen and (max-width:650px) {
+    .nowrap {
+	display: block;
+	margin: 25px 0;
+}
+}
+</style>
+{{< /css.inline >}}
\ No newline at end of file
diff --git a/exampleSite/content/posts/5. math-typesetting.md b/exampleSite/content/posts/5. math-typesetting.md
new file mode 100644
index 0000000..6d92b86
--- /dev/null
+++ b/exampleSite/content/posts/5. math-typesetting.md
@@ -0,0 +1,45 @@
+---
+title: Math Typesetting
+date: 2020-04-12
+description: A brief guide to setup KaTeX
+tags: ["math", "markdown", "Katex"]
+math: true
+---
+
+Mathematical notation in a Hugo project can be enabled by using third party JavaScript libraries.
+<!--more-->
+
+In this example we will be using [KaTeX](https://katex.org/)
+
+- Create a partial under `/layouts/partials/math.html`
+- Within this partial reference the [Auto-render Extension](https://katex.org/docs/autorender.html) or host these scripts locally.
+- Include the partial in your templates like so:  
+
+```
+{{ if or .Params.math .Site.Params.math }}
+{{ partial "math.html" . }}
+{{ end }}
+```  
+- To enable KaTex globally set the parameter `math` to `true` in a project's configuration
+- To enable KaTex on a per page basis include the parameter `math: true` in content files.
+
+**Note:** Use the online reference of [Supported TeX Functions](https://katex.org/docs/supported.html)
+{{< math.inline >}}
+{{ if or .Page.Params.math .Site.Params.math }}
+<!-- KaTeX -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.css" integrity="sha384-dbVIfZGuN1Yq7/1Ocstc1lUEm+AT+/rCkibIcC/OmWo5f0EA48Vf8CytHzGrSwbQ" crossorigin="anonymous">
+<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.js" integrity="sha384-2BKqo+exmr9su6dir+qCw08N2ZKRucY4PrGQPPWU1A7FtlCGjmEGFqXCv5nyM5Ij" crossorigin="anonymous"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
+{{ end }}
+{{</ math.inline >}}
+
+### Examples
+
+Inline math: $$ \varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887… $$
+
+Block math:
+
+$$
+ \varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } } 
+$$
+
diff --git a/layouts/404.html b/layouts/404.html
new file mode 100644
index 0000000..5ff93c3
--- /dev/null
+++ b/layouts/404.html
@@ -0,0 +1,94 @@
+{{ define "main" }}
+
+<!-- is-fullheight-with-navbar is-bold is-light -->
+<section class="hero has-text-centered">
+    <div class="hero-body">
+        <div class="container">
+            <h1 class="title is-1">
+                404! Page not found...
+            </h1>
+
+            <br><br>
+
+            <h1 class="subtitle is-4">
+                Here's what may have happened:
+            </h1>
+            <h1 class="subtitle is-6">
+                1. The page does not exist
+            </h1>
+            <h1 class="subtitle is-6">
+                2. The page was moved to another location. Use the search bar above
+            </h1>
+            <h1 class="subtitle is-6">
+                3. The content was removed. Read an article from below.
+            </h1>
+        </div>
+    </div>
+</section>
+
+<div class="columns is-centered has-text-centered">
+    <div class="column is-10">
+        <div class="content">
+            <a href="{{ "/tags/" | relURL }}">
+                <h1>Read articles by tags</h1>
+            </a>
+            <p class="tags-summary">
+                {{ $randTags := (slice)}}
+                {{ range $name, $taxonomy := .Site.Taxonomies.tags }}
+                {{ $randTags = $randTags | append $name }}
+                {{ end }}
+                {{ $randTags = sort (first .Site.Params.TagsInHome (shuffle $randTags)) }}
+
+                {{ range $name := $randTags }}
+                <a href="{{ "/tags/" | relURL }}{{ $name | urlize }}">
+                    <span class="tag is-dark is-large is-rounded">
+                        {{ $name | humanize }}
+                    </span>
+                </a>
+                {{ end }}
+            </p>
+        </div>
+    </div>
+</div>
+
+<div class="columns is-centered has-text-centered">
+    <div class="column is-10">
+        <div class="content">
+            <a href="{{ "/sections/" | relURL }}">
+                <h1>Sections</h1>
+            </a>
+            <p class="tags-summary">
+                {{ $randSections := shuffle (where .Site.Sections ".Title" "not in" "Posts Addons") }}
+                {{ range sort (first .Site.Params.SectionsInHome $randSections) "Title" }}
+                <a href="{{ .RelPermalink }}">
+                    <span class="tag is-dark is-large">
+                        {{ .Title | humanize | title }}
+                    </span>
+                </a>
+                {{ end }}
+            </p>
+        </div>
+    </div>
+</div>
+
+
+<div class="columns is-centered">
+    <div class="column is-7">
+        <div class="content">
+            <a href="{{ "/posts/" | relURL }}">
+                <h1 class="is-3">Recent posts</h1>
+            </a>
+        </div>
+        {{ range first 5 (where .Site.RegularPages.ByPublishDate.Reverse ".Section" "!=" "Addons") }}
+        {{- partial "blog-brief.html" . -}}
+        {{ end }}
+
+        <div class="content">
+            <a href="{{ "/posts/" | relURL }}">
+                <h4 class="has-text-centered seeall">See all</h4>
+            </a>
+        </div>
+    </div>
+</div>
+
+{{ end }}
\ No newline at end of file
diff --git a/layouts/Addons/admin.html b/layouts/Addons/admin.html
new file mode 100644
index 0000000..2dae096
--- /dev/null
+++ b/layouts/Addons/admin.html
@@ -0,0 +1,89 @@
+{{ define "main" }}
+
+<div class="content">
+    <h1 class="title">Admin Panel</h1>
+
+    {{ $total_articles := len (where .Site.RegularPages "Section" "not in" "Addons") }}
+    {{ $total_tags := len ($.Site.GetPage "taxonomyTerm" "tags").Pages }}
+    {{ $total_sections := len (where .Site.Sections "Title" "not in" "Posts Addons") }}
+
+    <section class="hero is-small has-text-centered">
+        <div class="hero-body">
+            <div class="container">
+                <h1 class="title is-3">Total articles:</h1>
+                <h1 class="subtitle is-2">{{ $total_articles }}</h1>
+            </div>
+        </div>
+        <div class="hero-body">
+            <div class="container">
+                <h1 class="title is-4">Total tags:</h1>
+                <h1 class="subtitle is-3">{{ $total_tags  }}</h1>
+            </div>
+        </div>
+        <div class="hero-body">
+            <div class="container">
+                <h1 class="title is-4">Total sections:</h1>
+                <h1 class="subtitle is-3">{{ $total_sections }}</h1>
+            </div>
+        </div>
+    </section>
+
+    <section class="section">
+        <div class="content">
+            <h2>Sections Summary</h2>
+            <table>
+                <tr>
+                    <th>No.</th>
+                    <th>Section</th>
+                    <th>Total articles</th>
+                </tr>
+                <tr>
+                    <td>1</td>
+                    {{ $postsLen := len (where .Site.RegularPages ".Section" "==" "posts") }}
+                    <td><a href="{{ "/posts/" | relURL }}">Posts</a></td>
+                    <td>{{ $postsLen }}</td>
+                </tr>
+
+                {{ $counter := 2}}
+                {{ range where .Site.Sections.ByTitle ".Title" "not in" "Posts Addons"}}
+                {{ $pages_len := len (where .Site.RegularPages ".Section" "==" (.Title | lower) )}}
+                <tr>
+                    <td>{{ $counter }}</td>
+                    {{ $counter = add $counter 1}}
+                    <td><a href="{{ .RelPermalink }}">{{ .Title }}</a></td>
+                    <td>{{ $pages_len }}</td>
+                </tr>
+                {{ end }}
+
+                <tr id="admin-table-summary">
+                    <td></td>
+                    <td>Total</td>
+                    <td>{{ $total_articles }}</td>
+                </tr>
+
+            </table>
+
+            <h2>Tags Summary</h2>
+            <table>
+                <tr>
+                    <th>No.</th>
+                    <th>Tags</th>
+                    <th>Total articles</th>
+                </tr>
+                {{ $counter := 1}}
+                {{ range $name, $taxonomy := .Site.Taxonomies.tags }}
+                <tr>
+                    <td>{{ $counter }}</td>
+                    {{ $counter = add $counter 1}}
+                    <td><a href="{{ "/tags/" | relLangURL }}{{ $name | urlize }}">{{ $name }}</a></td>
+                    <td>{{ len $taxonomy }}</td>
+                </tr>
+                {{ end }}
+            </table>
+
+        </div>
+    </section>
+</div>
+
+
+{{ end }}
\ No newline at end of file
diff --git a/layouts/Addons/author.html b/layouts/Addons/author.html
new file mode 100644
index 0000000..ccb9434
--- /dev/null
+++ b/layouts/Addons/author.html
@@ -0,0 +1,15 @@
+{{ define "main" }}
+
+<div class="content">
+    <h1 class="title has-text-centered">{{ .Title }}</h1>
+
+    <figure id="author-image" style="text-align: center;" class="image">
+        <img class="is-rounded" src="{{ .Params.image | relURL }}" alt="Author's image">
+    </figure>
+
+    <div class="blog-text">
+        {{ .Content }}
+    </div>
+</div>
+
+{{ end }}
\ No newline at end of file
diff --git a/layouts/Addons/sections.html b/layouts/Addons/sections.html
new file mode 100644
index 0000000..b2c1a00
--- /dev/null
+++ b/layouts/Addons/sections.html
@@ -0,0 +1,18 @@
+{{ define "main" }}
+
+<div class="content">
+    <h1 class="title is-3">{{ .Title | title }}</h1>
+
+    <div class="sections-list">
+        {{/* $paginator := .Paginate (where .Site.Sections.ByTitle ".Title" "not in" "posts addons") .Site.Params.PaginateSectionsPerPage */}}
+
+        {{ $sections := where .Site.Sections.ByTitle ".Title" "not in" "Posts Addons" }}
+        {{ range $i, $e := $sections }}
+        <a href="{{ $e.RelPermalink }}">
+            <h1 class="title is-4"> {{ add $i 1 }}. {{ $e.Title | humanize | title }}</h1>
+        </a>
+        {{ end }}
+    </div>
+</div>
+
+{{ end }}
\ No newline at end of file
diff --git a/layouts/_default/404-baseof.html b/layouts/_default/404-baseof.html
new file mode 100644
index 0000000..27fb982
--- /dev/null
+++ b/layouts/_default/404-baseof.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="{{ .Site.LanguageCode }}">
+    {{- partial "head.html" . -}}
+    <body>
+        {{- partialCached "navbar.html" . -}}
+        {{- block "main" . }}{{- end }}
+        {{- partialCached "footer.html" . -}}
+    </body>
+</html>
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
new file mode 100644
index 0000000..6d35a22
--- /dev/null
+++ b/layouts/_default/baseof.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="{{ .Site.LanguageCode }}">
+
+{{- partial "head.html" . -}}
+
+<body>
+    {{- partialCached "navbar.html" . -}}
+    <div class="columns is-centered">
+        <div id="page-body" class="column is-7">
+            {{- block "main" . }}{{- end }}
+        </div>
+    </div>
+    {{- partialCached "footer.html" . -}}
+</body>
+
+</html>
\ No newline at end of file
diff --git a/layouts/_default/index-baseof.html b/layouts/_default/index-baseof.html
new file mode 100644
index 0000000..27fb982
--- /dev/null
+++ b/layouts/_default/index-baseof.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="{{ .Site.LanguageCode }}">
+    {{- partial "head.html" . -}}
+    <body>
+        {{- partialCached "navbar.html" . -}}
+        {{- block "main" . }}{{- end }}
+        {{- partialCached "footer.html" . -}}
+    </body>
+</html>
diff --git a/layouts/_default/index.html b/layouts/_default/index.html
new file mode 100644
index 0000000..ee34fa2
--- /dev/null
+++ b/layouts/_default/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="{{ .Site.LanguageCode }}">
+    
+    {{- partial "head.html" . -}}
+
+    <body>
+        {{- partialCached "navbar.html" . -}}
+        {{- block "main" . }}{{- end }}
+        {{- partialCached "footer.html" . -}}
+    </body>
+
+</html>
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
new file mode 100644
index 0000000..c0d921b
--- /dev/null
+++ b/layouts/_default/list.html
@@ -0,0 +1,13 @@
+{{ define "main" }}
+
+<div class="content">
+    <h1>{{ .Title | humanize | title }}</h1>
+</div>
+
+{{ range .Paginator.Pages }}
+{{- partial "blog-brief.html" . -}}
+{{ end }}
+
+{{ partial "pagination.html"}}
+
+{{ end }}
\ No newline at end of file
diff --git a/layouts/_default/section.html b/layouts/_default/section.html
new file mode 100644
index 0000000..42db9c9
--- /dev/null
+++ b/layouts/_default/section.html
@@ -0,0 +1,11 @@
+{{ define "main" }}
+
+<div class="content">
+    <h1 class="title is-3">{{ .Title | humanize | title }}</h1>
+</div>
+
+{{ range .Paginator.Pages.ByPublishDate }}
+{{- partial "blog-brief.html" . -}}
+{{ end }}
+
+{{ end }}
\ No newline at end of file
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
new file mode 100644
index 0000000..fa08540
--- /dev/null
+++ b/layouts/_default/single.html
@@ -0,0 +1,51 @@
+{{ define "main" }}
+
+<div class="content blog">
+    <h1 class="title is-3">{{ .Title | title }}</h1>
+
+    <div id="infobar" class="level is-mobile">
+        <div class="level-left">
+            {{ if or .Params.showDate .Site.Params.showDate }}
+            <div class="level-item">
+                <p class="subtitle info">
+                    {{- .Date.Format "Jan 2, 2006" }}
+                </p>
+            </div>
+            {{ end }}
+
+            <div class="level-item">
+                <p class="subtitle info">
+                    {{ partial "time-to-read.html" . }}
+                </p>
+            </div>
+        </div>
+        <div class="level-right is-hidden-touch">
+            <div class="tags">
+                {{ range .Params.tags }}
+                <a class="tag is-dark is-rounded" href="{{ "/tags/" | relURL }}{{ . | urlize }}">{{ . | humanize }}</a>
+                {{ end }}
+            </div>
+        </div>
+    </div>
+
+    <div class="tags is-hidden-desktop">
+        {{ range .Params.tags }}
+        <a class="tag is-dark is-rounded" href="{{ "/tags/" | relURL }}{{ . | urlize }}">{{ . | humanize }}</a>
+        {{ end }}
+    </div>
+
+    <div class="blog-text">
+        {{ with .Params.image }}
+        <img src="{{ . | relURL }}">
+        {{ end }}
+
+        {{ .Content }}
+    </div>
+</div>
+
+{{- partial "social-media-share.html" -}}
+<br>
+{{ template "_internal/disqus.html" }}
+<!-- {{ partial "disqus.html" . }} -->
+
+{{ end }}
\ No newline at end of file
diff --git a/layouts/_default/terms.html b/layouts/_default/terms.html
new file mode 100644
index 0000000..261888e
--- /dev/null
+++ b/layouts/_default/terms.html
@@ -0,0 +1,21 @@
+{{ define "main" }}
+
+<div class="content">
+    <h1 class="title is-3">{{ .Title }}</h1>
+
+    <ul id="all-tags">
+        {{range sort (.Paginator .Site.Params.PaginateTagsPerPage).Pages.ByTitle }}
+        <li>
+            <a href="{{ .RelPermalink }}">
+                <span class="tag is-dark is-large is-rounded">
+                    {{ .Title | humanize}}
+                </span>
+            </a>
+        </li>
+        {{ end }}
+    </ul>
+</div>
+
+{{- partial "pagination.html" . -}}
+
+{{ end }}
\ No newline at end of file
diff --git a/layouts/index.html b/layouts/index.html
new file mode 100644
index 0000000..61fe13a
--- /dev/null
+++ b/layouts/index.html
@@ -0,0 +1,88 @@
+{{ define "main" }}
+
+<!-- is-fullheight-with-navbar is-bold is-light -->
+<section class="hero has-text-centered">
+    <br><br><br>
+    <div class="hero-body">
+        <div class="container">
+            <h1 class="title is-1">
+                {{ .Title }}
+            </h1>
+            <h1 class="subtitle is-2">
+                {{ .Params.Subtitle }}
+            </h1>
+            <h1 class="subtitle is-5">
+                {{ with .Content }}
+                {{ . }}
+                {{ end }}
+            </h1>
+        </div>
+    </div>
+</section>
+
+<div class="columns is-centered has-text-centered">
+    <div class="column is-10">
+        <div class="content">
+            <a href="{{ "/tags/" | relURL }}">
+                <h1>Read articles by tags</h1>
+            </a>
+            <p class="tags-summary">
+                {{ $randTags := (slice)}}
+                {{ range $name, $taxonomy := .Site.Taxonomies.tags }}
+                {{ $randTags = $randTags | append $name }}
+                {{ end }}
+                {{ $randTags = sort (first .Site.Params.TagsInHome (shuffle $randTags)) }}
+
+                {{ range $name := $randTags }}
+                <a href="{{ "/tags/" | relURL }}{{ $name | urlize }}">
+                    <span class="tag is-dark is-large is-rounded">
+                        {{ $name | humanize }}
+                    </span>
+                </a>
+                {{ end }}
+            </p>
+        </div>
+    </div>
+</div>
+
+<div class="columns is-centered has-text-centered">
+    <div class="column is-10">
+        <div class="content">
+            <a href="{{ "/sections/" | relURL }}">
+                <h1>Sections</h1>
+            </a>
+            <p class="tags-summary">
+                {{ $randSections := shuffle (where .Site.Sections ".Title" "not in" "Posts Addons") }}
+                {{ range sort (first .Site.Params.SectionsInHome $randSections) "Title" }}
+                <a href="{{ .RelPermalink }}">
+                    <span class="tag is-dark is-large">
+                        {{ .Title | humanize | title }}
+                    </span>
+                </a>
+                {{ end }}
+            </p>
+        </div>
+    </div>
+</div>
+
+
+<div class="columns is-centered">
+    <div class="column is-7">
+        <div class="content">
+            <a href="{{ "/posts/" | relURL }}">
+                <h1 class="is-3">Recent posts</h1>
+            </a>
+        </div>
+        {{ range first 5 (where .Site.RegularPages.ByPublishDate.Reverse ".Section" "!=" "Addons") }}
+        {{- partial "blog-brief.html" . -}}
+        {{ end }}
+
+        <div class="content">
+            <a href="{{ "/posts/" | relURL }}">
+                <h4 class="has-text-centered seeall">See all</h4>
+            </a>
+        </div>
+    </div>
+</div>
+
+{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/blog-brief.html b/layouts/partials/blog-brief.html
new file mode 100644
index 0000000..7fb290f
--- /dev/null
+++ b/layouts/partials/blog-brief.html
@@ -0,0 +1,60 @@
+<div class="blog-brief">
+    <a href="{{ .RelPermalink }}">
+        <h3 class="title is-4">
+            {{ .Title | title }}
+        </h3>
+    </a>
+
+    <div class="level is-mobile details">
+        <div class="level-left">
+
+            {{ if or .Params.showDate .Site.Params.showDate }}
+            <div class="level-item">
+                <a href="{{ .RelPermalink }}">
+                    <p class="subtitle info date">
+                        {{- .Date.Format "Jan 2, 2006" }}
+                    </p>
+                </a>
+            </div>
+            {{ end }}
+
+
+            <div class="level-item">
+                <a href="{{ .RelPermalink }}">
+                    <p class="subtitle info">
+                        {{ partial "time-to-read.html" . }}
+                    </p>
+                </a>
+            </div>
+        </div>
+        <div class="level-right is-hidden-touch">
+            {{ range .Params.tags }}
+            <a class="tag is-rounded" href="{{ "/tags/" | relURL }}{{ . | urlize }}">{{ . | humanize }}</a>
+            {{ end }}
+        </div>
+    </div>
+
+    <div>
+        {{ if .Params.image }}
+            <a href="{{ .RelPermalink }}">
+                <img src="{{ .Params.image | relURL }}">
+            </a>
+        {{ end }}
+
+        <div>
+            <a href="{{ .RelPermalink }}">
+                <p class="summary">{{ .Summary | plainify }}</p>
+            </a>
+        </div>
+    </div>
+
+    <div class="level is-mobile continue-reading">
+        <div class="level-left">
+        </div>
+        <div class="level-right">
+            <a href="{{ .RelPermalink }}">Continue reading <i class="fa fa-angle-double-right"
+                    aria-hidden="true"></i></a>
+        </div>
+    </div>
+    <hr>
+</div>
\ No newline at end of file
diff --git a/layouts/partials/blog-summary-vertical.html b/layouts/partials/blog-summary-vertical.html
new file mode 100644
index 0000000..8daea8b
--- /dev/null
+++ b/layouts/partials/blog-summary-vertical.html
@@ -0,0 +1,44 @@
+<a href="{{ .RelPermalink }}" class="summary-vertical">
+
+    <article class="media">
+        <figure class="media-left">
+            <div class="image is-128x128">
+                <!-- <div class="image is-4by3"> -->
+                {{ with .Params.image }}
+                <img src="{{ . | relURL }}">
+                {{ else }}
+                <img src="{{ "/image/default.jpeg" | relURL }}">
+                {{ end }}
+            </div>
+        </figure>
+
+        <div class="media-content">
+            <div class="content">
+                <p>
+                    <strong>{{ .Title }}</strong>
+                    <small>
+                        {{- .Date.Format "Jan 2, 2006" }}
+                        {{ $time := math.Round (div (countwords .Content) 220.0) }}
+                        {{- if le $time 1 -}}
+                        (1 min read)
+                        {{- else -}}
+                        ({{ $time }} mins read)
+                        {{- end -}}
+                    </small>
+                    <br>
+                    <p>{{ .Summary }}</p>
+                </p>
+            </div>
+            <nav class="level is-mobile">
+                <div class="level-left">
+                    <!-- <a class="level-item">
+                <span class="icon is-small"><i class="fas fa-reply"></i></span>
+                </a> -->
+                </div>
+            </nav>
+        </div>
+        <div class="media-right">
+            <!-- <button class="delete"></button> -->
+        </div>
+    </article>
+</a>
\ No newline at end of file
diff --git a/layouts/partials/disqus.html b/layouts/partials/disqus.html
new file mode 100644
index 0000000..4cb97bf
--- /dev/null
+++ b/layouts/partials/disqus.html
@@ -0,0 +1,17 @@
+<div id="disqus_thread"></div>
+<script type="text/javascript">
+    (function () {
+        // Don't ever inject Disqus on localhost--it creates unwanted
+        // discussions from 'localhost:1313' on your Disqus account...
+        if (window.location.hostname == "localhost")
+            return;
+
+        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+        var disqus_shortname = '{{ .Site.DisqusShortname }}';
+        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
+        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+    })();
+</script>
+<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by
+        Disqus.</a></noscript>
+<a href="http://disqus.com/" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
\ No newline at end of file
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
new file mode 100644
index 0000000..0df2e75
--- /dev/null
+++ b/layouts/partials/footer.html
@@ -0,0 +1,17 @@
+{{ with .Site.Params.GoogleSearch }}
+<script async src="https://cse.google.com/cse.js?cx={{ . }}"></script>
+<gcse:searchresults-only></gcse:searchresults-only>
+{{ end }}
+
+<footer class="footer has-background-dark">
+    <div class="content has-text-centered has-text-white">
+        <p>
+            © 2020 Ramium. Site powered by
+            <a class="has-text-light" href="https://github.com/gohugoio/hugo" target="_blank">
+            Hugo</a> and 
+            <a class="has-text-light" href="https://github.com/rafed123/ramium/" target="_blank">
+                Ramium theme.
+            </a>
+        </p>
+    </div>
+</footer>
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
new file mode 100644
index 0000000..6e69817
--- /dev/null
+++ b/layouts/partials/head.html
@@ -0,0 +1,36 @@
+<title>
+    {{- if not .IsHome }}
+    {{ with .Title }}{{ . }} | {{ end }}
+    {{ end }}
+    {{ .Site.Title -}}
+</title>
+
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+
+<meta name="description" 
+      content="{{- with .Description }}{{ . }}
+                {{ else }}{{ with .Summary }}{{ . }}
+                {{ else }}{{ .Site.Params.description }}
+                {{ end }}{{ end -}}">
+
+<link rel="canonical" href="{{ .Permalink }}" />
+
+<link rel="icon" type="image/png" href="{{ .Site.BaseURL }}image/favicon.ico">
+
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.8.2/css/bulma.min.css">
+
+{{ template "_internal/opengraph.html" . }}
+{{ template "_internal/twitter_cards.html" . }}
+
+{{ if not (in (string .Site.BaseURL) "localhost") }}
+    {{ template "_internal/google_analytics_async.html" . }}
+{{ end }}
+
+<script src={{ "/js/ramium.js" | relURL }}></script>
+<link rel="stylesheet" href={{ "/css/ramium.css" | relURL }}>
+
+{{ if or .Params.math .Site.Params.math }}
+{{ partial "math.html" . }}
+{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/math.html b/layouts/partials/math.html
new file mode 100644
index 0000000..5104b2a
--- /dev/null
+++ b/layouts/partials/math.html
@@ -0,0 +1,8 @@
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css"
+    integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
+<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js"
+    integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz"
+    crossorigin="anonymous"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js"
+    integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"
+    onload="renderMathInElement(document.body);"></script>
\ No newline at end of file
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
new file mode 100644
index 0000000..c49bb01
--- /dev/null
+++ b/layouts/partials/navbar.html
@@ -0,0 +1,61 @@
+<nav class="navbar is-dark" role="navigation" aria-label="main navigation">
+  <div class="navbar-brand">
+    <a class="navbar-item" href={{ "/" | relURL }}>
+      {{ with .Site.Title }}
+      <strong>{{ . }} </strong>
+      {{ end }}
+    </a>
+
+    <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false"
+      data-target="navbarBasicExample">
+      <span aria-hidden="true"></span>
+      <span aria-hidden="true"></span>
+      <span aria-hidden="true"></span>
+    </a>
+  </div>
+
+  <div id="navbarBasicExample" class="navbar-menu">
+    <div class="navbar-start">
+      {{ range .Site.Menus.main }}
+      {{ if .HasChildren }}
+      <div class="navbar-item has-dropdown is-hoverable">
+        <a class="navbar-link">{{- .Name -}}</a>
+        <div class="navbar-dropdown">
+          {{ range .Children }}
+          <a class="navbar-item" href="{{ .URL }}">
+            {{- .Name -}}
+          </a>
+          {{ end }}
+        </div>
+      </div>
+      {{ else }}
+      <a class="navbar-item" href="{{ .URL }}">
+        {{- .Name -}}
+      </a>
+      {{ end }}
+      {{ end }}
+    </div>
+
+    {{ with .Site.Params.GoogleSearch }}
+    <div class="navbar-end">
+      <div class="navbar-item">
+        <form id="cse-search-box-form-id" onsubmit="return executeQuery();" role="search">
+          <div class="field has-addons">
+            <div class="control is-expanded">
+              <input id="cse-search-input-box-id" size=15 class="input" type="text" autocomplete="off"
+                placeholder="&#xf1a0; Google search" style="font-family:Arial, FontAwesome">
+            </div>
+
+            <div class="control">
+              <button type="submit" class="button is-black">
+                <i class="fa fa-search"></i>
+                </a>
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+    {{ end }}
+  </div>
+</nav>
diff --git a/layouts/partials/pagination.html b/layouts/partials/pagination.html
new file mode 100644
index 0000000..e681a7a
--- /dev/null
+++ b/layouts/partials/pagination.html
@@ -0,0 +1,92 @@
+{{ $paginator := .Paginator }}
+
+<!-- Number of links either side of the current page -->
+{{ $adjacent_links := 1 }}
+
+<!-- $max_links = ($adjacent_links * 2) + 1 -->
+{{ $max_links := (add (mul $adjacent_links 2) 1) }}
+
+<!-- Pages to print -->
+{{ $lower_limit := 1 }}
+{{ $upper_limit := $paginator.TotalPages }}
+{{ $include_lower_ellipsis := false }}
+{{ $include_upper_ellipsis := false }}
+
+{{ if gt $paginator.TotalPages (add $max_links 2) }}
+
+    <!-- If we have more pages before the current page than we can print -->
+    {{ if ge $paginator.PageNumber $adjacent_links }}
+
+        {{ $lower_limit = sub $paginator.PageNumber $adjacent_links }}
+
+        <!-- Show more pages at the end of the range -->
+        {{ if lt (sub $paginator.TotalPages $lower_limit) $max_links }}
+            {{ $lower_limit = add 1 (sub $paginator.TotalPages $max_links) }}
+        {{ end }}
+
+        <!-- Show ellipsis -->
+        {{ if gt (sub $lower_limit 1) 1 }}
+            {{ $include_lower_ellipsis = true }}
+        {{ end }}
+
+    {{ end }}
+
+    <!-- If we have more pages after the current page than we can print -->
+    {{ if gt (sub $paginator.TotalPages $paginator.PageNumber) $adjacent_links }}
+
+        {{ $upper_limit = add $paginator.PageNumber $adjacent_links }}
+
+        <!-- Show more pages at the beginning of the range -->
+        {{ if le $upper_limit $max_links }}
+            {{ $upper_limit = $max_links }}
+        {{ end }}
+
+        <!-- Show ellipsis -->
+        {{ if gt (sub $paginator.TotalPages $upper_limit) 1 }}
+            {{ $include_upper_ellipsis = true }}
+        {{ end }}
+
+    {{ end }}
+
+{{ end }}
+
+<!-- If there's more than one page -->
+{{ if gt $paginator.TotalPages 1 }}
+<section class="section">
+    <nav class="pagination is-centered">
+
+        {{ if $paginator.HasPrev }}
+            <a class="pagination-previous is-dark" href="{{ $paginator.Prev.URL }}">Previous</a>
+        {{ else }}
+            <a class="pagination-previous" disabled>Previous</a>
+        {{ end }}
+
+        {{ if $paginator.HasNext }}
+            <a class="pagination-next" href="{{ $paginator.Next.URL }}">Next page</a>
+        {{ else }}
+            <a class="pagination-next" disabled>Next page</a>
+        {{ end }}
+
+
+        <ul class="pagination-list">
+
+        {{ range $paginator.Pagers }}
+
+            <!-- Include first, last, and middle pages -->
+            {{ if or (or (eq .PageNumber 1) (eq .PageNumber $paginator.TotalPages)) (and (ge .PageNumber $lower_limit) (le .PageNumber $upper_limit)) }}
+
+                <li><a href="{{ .URL }}" class="pagination-link{{ if eq $paginator.PageNumber .PageNumber }} is-current{{ end }}">{{ .PageNumber }}</a></li>
+
+                <!-- If we're on the first page and inserting an ellipsis, or just before the last page and inserting an ellipsis -->
+                {{ if or (and (eq .PageNumber 1) (eq $include_lower_ellipsis true)) (and (eq .PageNumber $upper_limit) (eq $include_upper_ellipsis true)) }}
+                    <li><span class="pagination-ellipsis">&hellip;</span></li>
+                {{ end }}
+
+            {{ end }}
+
+        {{ end }}
+
+        </ul>
+    </nav>
+</section>
+{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/social-media-share.html b/layouts/partials/social-media-share.html
new file mode 100644
index 0000000..e8f3537
--- /dev/null
+++ b/layouts/partials/social-media-share.html
@@ -0,0 +1,50 @@
+<div id="social-media-share" class="has-text-centered">
+	<p><i>Sharing is caring!</i></p>
+	<br>
+	
+	<div class="share-buttons">
+	    <a  href="https://www.facebook.com/sharer/sharer.php?u={{ .Permalink }}"
+	        onclick="socialMediaPopUp(this.href, '', 500, 500); return false;"
+	        title="Share on Facebook. Opens in a new window.">
+	        <img src={{ "/img/icons/45px/facebook.png" | relURL }}>
+	    </a>
+
+	    <a  href="https://twitter.com/intent/tweet?text={{ .Title }}&url={{ .Permalink }}"
+	        onclick="socialMediaPopUp(this.href, '', 500, 500); return false;"
+	        title="Share on Twitter. Opens in a new window." >
+	        <img src={{ "/img/icons/45px/twitter.png" | relURL }}>
+	    </a>
+
+		<a  href="http://www.reddit.com/submit?url={{ .Permalink }}"
+	        onclick="socialMediaPopUp(this.href, '', 900, 500); return false;"
+	        title="Share on Reddit. Opens in a new window." >
+	        <img src={{ "/img/icons/45px/reddit.png" | relURL }}>
+	    </a>
+
+	    <a  href="http://pinterest.com/pin/create/button/?url={{ .Permalink }}"
+	        onclick="socialMediaPopUp(this.href, '', 900, 500); return false;"
+	        title="Share on Pinterest. Opens in a new window." >
+	        <img src={{ "/img/icons/45px/pinterest.png" | relURL }}>
+	    </a>
+
+	    <a  href="http://www.tumblr.com/share/link?url={{ .Permalink }}"
+	        onclick="socialMediaPopUp(this.href, '', 900, 500); return false;"
+	        title="Share on Tumblr. Opens in a new window." >
+	        <img src={{ "/img/icons/45px/tumblr.png" | relURL }}>
+	    </a>
+
+		<a  href="https://www.linkedin.com/shareArticle?mini=true&url={{ .Permalink }}
+			&title={{ .Title }}&summary={{ .Summary }}&source=rafed123.github.io"
+	        onclick="socialMediaPopUp(this.href, '', 900, 500); return false;"
+	        title="Share on LinkedIn. Opens in a new window." >
+	        <img src={{ "/img/icons/45px/linkedin.png" | relURL }}>
+	    </a>
+
+	    <a  href="mailto:?subject={{ .Title }}&amp;body=Check out this site {{ .Permalink }}"
+	        title="Share via Email. Opens in a new window." >
+	        <img src={{ "/img/icons/45px/mail.png" | relURL }}>
+	    </a>
+	</div>
+</div>
+
+
diff --git a/layouts/partials/suggestions.html b/layouts/partials/suggestions.html
new file mode 100644
index 0000000..50402f2
--- /dev/null
+++ b/layouts/partials/suggestions.html
@@ -0,0 +1,2 @@
+{{/* $filteredPosts := where (where .Site.Pages "Type" "blog") "UniqueID" "!= ".UniqueID }}
+{{ $relatedPosts := shuffle $filteredPosts | first 3 */}}
\ No newline at end of file
diff --git a/layouts/partials/time-to-read.html b/layouts/partials/time-to-read.html
new file mode 100644
index 0000000..71369ea
--- /dev/null
+++ b/layouts/partials/time-to-read.html
@@ -0,0 +1,6 @@
+{{ $time := math.Round (div (countwords .Content) 180.0) }}
+{{- if le $time 1 -}}
+    1 min read
+{{- else -}}
+    {{ $time }} mins read
+{{- end -}}
\ No newline at end of file
diff --git a/layouts/posts/list.html b/layouts/posts/list.html
new file mode 100644
index 0000000..2c2c2c7
--- /dev/null
+++ b/layouts/posts/list.html
@@ -0,0 +1,14 @@
+{{ define "main" }}
+
+<div class="content">
+    <h1 class="title is-3">{{ .Title }}</h1>
+</div>
+
+{{ $paginator := .Paginate (where .Site.RegularPages.ByDate.Reverse ".Section" "!=" "addons") .Site.Params.PaginatePostsPerPage }}
+{{ range $paginator.Pages }}
+{{- partial "blog-brief.html" . -}}
+{{ end }}
+
+{{- partial "pagination.html" . -}}
+
+{{ end }}
\ No newline at end of file
diff --git a/static/LICENSE b/static/LICENSE
new file mode 100644
index 0000000..70ee850
--- /dev/null
+++ b/static/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Rafed Muhammad Yasir
+
+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.
diff --git a/static/css/ramium.css b/static/css/ramium.css
new file mode 100644
index 0000000..4cf0c05
--- /dev/null
+++ b/static/css/ramium.css
@@ -0,0 +1,188 @@
+
+/******* navbar ****/
+
+.navbar-brand a {
+    font-size: 20px;
+}
+
+input:focus::placeholder {
+    color: transparent;
+}
+
+/******* HOME PAGE *******/
+
+.tags-summary  {
+    line-height: 2.7;
+}
+
+#title-banner {
+    font-size: 120px;
+}
+
+.seeall {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    background-color: rgb(214, 214, 214);
+}
+
+.seeall:hover {
+    background-color: rgb(187, 187, 187);
+}
+
+@media all and (max-width: 768px) {
+    #all-tags {
+        list-style-type: none;
+    }
+}
+
+@media all and (min-width: 769px) {
+    #all-tags {
+        columns: 2;
+        list-style-type: none;
+    }
+}
+
+/**** BLOG MAIN ********/
+
+#page-body {
+    margin-top: 2em;
+    min-height: 75vh;
+    position: relative;
+}
+
+.info {
+    font-size: 0.9em;
+}
+
+h1.title.is-3 {
+    margin-bottom: 0.4em;
+}
+
+@media all and (max-width: 1023px) {
+    #infobar {
+        margin-bottom: 0.5em;
+    }
+}
+
+.blog-text {
+    font-size: 1.2em;
+    color: rgba(0, 0, 0, 0.84);
+    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
+    line-height: 1.7;
+    margin-top: 1.8em;
+}
+
+.blog-text img {
+    max-width: 85%;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 1em;
+    margin-bottom: 1em;
+}
+
+#admin-table-summary {
+    font-weight: bold;
+}
+
+#author-image {
+    width: 180px;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+/* ----- BLOG BRIEF ------- */
+
+.blog-brief .is-4 {
+    margin-bottom: 0.3em;
+}
+.blog-brief .is-4:hover {
+    text-decoration: underline;
+}
+
+.blog-brief .date {
+    font-weight: 500;
+}
+
+.blog-brief .info {
+    font-size: 0.8em;
+}
+
+.blog-brief .summary {
+    color: black;
+    opacity: 0.84;
+    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
+    font-size: 1.1em;
+
+    overflow: hidden;
+    max-height: 4.4em;
+    min-height: 1.1em;
+}
+
+@media all and (min-width: 769px) { /*for large devices*/
+    .blog-brief img {
+        height: 5em;
+        float: left;       
+        margin-right: 0.8em;
+        display: block;
+    }
+}
+
+@media all and (max-width: 768px) { /*FOR MOBILE*/
+    .blog-brief img {
+        float: clear;
+        max-width: 85%;
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+        margin-bottom: 0.8em;
+    }
+}
+
+.continue-reading {
+    clear: both;
+    margin-top: 0.5em;
+    font-weight: 450;
+}
+
+.continue-reading a {
+    color: black;
+    opacity: 0.84;
+}
+
+.continue-reading a:hover {
+    text-decoration: underline;
+    color: black;
+    opacity: 0.84;
+}
+
+/***** BULMA FIX ******/
+
+.columns {
+    margin: 0;
+}
+
+/**************/
+
+.sections-list h1 {
+    line-height: 1.5em;
+}
+
+.sections-list a:hover {
+    text-decoration: underline;
+}
+
+/******** Footer *******/
+
+.footer p {
+    font-size: 0.9em;
+}
+
+.footer a {
+    text-decoration: underline;
+}
+
+.cse .gsc-control-cse, .gsc-control-cse {
+    padding: 0px;
+}
\ No newline at end of file
diff --git a/static/img/icons/45px/facebook.png b/static/img/icons/45px/facebook.png
new file mode 100644
index 0000000..144c094
--- /dev/null
+++ b/static/img/icons/45px/facebook.png
diff --git a/static/img/icons/45px/github.png b/static/img/icons/45px/github.png
new file mode 100644
index 0000000..1eab1dc
--- /dev/null
+++ b/static/img/icons/45px/github.png
diff --git a/static/img/icons/45px/instagram.png b/static/img/icons/45px/instagram.png
new file mode 100644
index 0000000..0a6216c
--- /dev/null
+++ b/static/img/icons/45px/instagram.png
diff --git a/static/img/icons/45px/linkedin.png b/static/img/icons/45px/linkedin.png
new file mode 100644
index 0000000..0a51a52
--- /dev/null
+++ b/static/img/icons/45px/linkedin.png
diff --git a/static/img/icons/45px/mail.png b/static/img/icons/45px/mail.png
new file mode 100644
index 0000000..5f029f6
--- /dev/null
+++ b/static/img/icons/45px/mail.png
diff --git a/static/img/icons/45px/pinterest.png b/static/img/icons/45px/pinterest.png
new file mode 100644
index 0000000..4733954
--- /dev/null
+++ b/static/img/icons/45px/pinterest.png
diff --git a/static/img/icons/45px/quora.png b/static/img/icons/45px/quora.png
new file mode 100644
index 0000000..1dc8376
--- /dev/null
+++ b/static/img/icons/45px/quora.png
diff --git a/static/img/icons/45px/reddit.png b/static/img/icons/45px/reddit.png
new file mode 100644
index 0000000..4985258
--- /dev/null
+++ b/static/img/icons/45px/reddit.png
diff --git a/static/img/icons/45px/rss.png b/static/img/icons/45px/rss.png
new file mode 100644
index 0000000..83eb9c5
--- /dev/null
+++ b/static/img/icons/45px/rss.png
diff --git a/static/img/icons/45px/search.png b/static/img/icons/45px/search.png
new file mode 100644
index 0000000..5932fec
--- /dev/null
+++ b/static/img/icons/45px/search.png
diff --git a/static/img/icons/45px/sharethis.png b/static/img/icons/45px/sharethis.png
new file mode 100644
index 0000000..7449989
--- /dev/null
+++ b/static/img/icons/45px/sharethis.png
diff --git a/static/img/icons/45px/tumblr.png b/static/img/icons/45px/tumblr.png
new file mode 100644
index 0000000..2fee814
--- /dev/null
+++ b/static/img/icons/45px/tumblr.png
diff --git a/static/img/icons/45px/twitter.png b/static/img/icons/45px/twitter.png
new file mode 100644
index 0000000..504dc41
--- /dev/null
+++ b/static/img/icons/45px/twitter.png
diff --git a/static/img/icons/45px/viber.png b/static/img/icons/45px/viber.png
new file mode 100644
index 0000000..8941503
--- /dev/null
+++ b/static/img/icons/45px/viber.png
diff --git a/static/img/icons/45px/vimeo.png b/static/img/icons/45px/vimeo.png
new file mode 100644
index 0000000..bba32b3
--- /dev/null
+++ b/static/img/icons/45px/vimeo.png
diff --git a/static/img/icons/45px/whatsapp.png b/static/img/icons/45px/whatsapp.png
new file mode 100644
index 0000000..71721a3
--- /dev/null
+++ b/static/img/icons/45px/whatsapp.png
diff --git a/static/img/icons/45px/wordpress.png b/static/img/icons/45px/wordpress.png
new file mode 100644
index 0000000..bb10b82
--- /dev/null
+++ b/static/img/icons/45px/wordpress.png
diff --git a/static/img/icons/45px/youtube.png b/static/img/icons/45px/youtube.png
new file mode 100644
index 0000000..f0ef0f9
--- /dev/null
+++ b/static/img/icons/45px/youtube.png
diff --git a/static/js/ramium.js b/static/js/ramium.js
new file mode 100644
index 0000000..4556a6a
--- /dev/null
+++ b/static/js/ramium.js
@@ -0,0 +1,40 @@
+// Mobile navbar toggle
+document.addEventListener('DOMContentLoaded', () => {
+  // Get all "navbar-burger" elements
+  const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
+
+  if ($navbarBurgers.length > 0) {
+
+    // Add a click event on each of them
+    $navbarBurgers.forEach( el => {
+      el.addEventListener('click', () => {
+
+        // Get the target from the "data-target" attribute
+        const target = el.dataset.target;
+        const $target = document.getElementById(target);
+
+        el.classList.toggle('is-active');
+        $target.classList.toggle('is-active');
+      });
+    });
+  }
+});
+
+// Google search engine function
+function executeQuery() {
+  var input = document.getElementById('cse-search-input-box-id');
+  var element = google.search.cse.element.getElement('searchresults-only0');
+  if (input.value == '') {
+    element.clearAllResults();
+  } else {
+    element.execute(input.value);
+  }
+  return false;
+}
+
+// Social media share
+function socialMediaPopUp(url, title, width, height) {
+	var left = (screen.width/2)-(width/2);
+	var top = (screen.height/2)-(height/2);
+	window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=no, copyhistory=no, width='+ width +', height='+ height +', top=' + top + ', left=' + left);
+} 
diff --git a/theme.toml b/theme.toml
new file mode 100644
index 0000000..232fcce
--- /dev/null
+++ b/theme.toml
@@ -0,0 +1,23 @@
+# theme.toml template for a Hugo theme
+# See https://github.com/gohugoio/hugoThemes#themetoml for an example
+
+name = "Ramium"
+license = "MIT"
+licenselink = "https://github.com/rafed123/ramium/blob/master/LICENSE"
+description = ""
+homepage = "http://rafed123.github.io/ramium"
+tags = []
+features = []
+min_version = "0.572"
+
+[author]
+  name = "Rafed Muhammad Yasir"
+  homepage = "rafed123.github.io"
+
+# If porting an existing theme
+[original]
+  name = ""
+  homepage = ""
+  repo = ""
+
+pluralizeListTitles = false
\ No newline at end of file