diff --git a/.DS_Store b/.DS_Store
index 6b25352..94e76f2 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/.gitmodules b/.gitmodules
new file mode 100644
index 0000000..4b8be73
--- /dev/null
+++ b/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "themes/hugo-webslides"]
+	path = themes/hugo-webslides
+	url = https://github.com/rcjach/hugo-webslides.git
diff --git a/.hugo_build.lock b/.hugo_build.lock
new file mode 100644
index 0000000..e69de29
diff --git a/archetypes/default.md b/archetypes/default.md
new file mode 100644
index 0000000..00e77bd
--- /dev/null
+++ b/archetypes/default.md
@@ -0,0 +1,6 @@
+---
+title: "{{ replace .Name "-" " " | title }}"
+date: {{ .Date }}
+draft: true
+---
+
diff --git a/config.toml b/config.toml
new file mode 100644
index 0000000..378642a
--- /dev/null
+++ b/config.toml
@@ -0,0 +1,24 @@
+baseurl         = "/"
+theme           = "hugo-webslides"
+languageCode    = "en-us"
+title           = "A Hugo theme for creating Webslides.js presentations"
+
+[params]
+  author = "RCJacH"
+  homepage = "RCJacH.github.io"
+
+[params.webslides]
+  banner = false
+  slideshow = true
+  vertical = false
+  autoslide = false
+  changeOnClick = false
+  disableLoop = false
+  minWheelDelta = 40
+  disableNavigateOnScroll = false
+  scrollWait = 450
+  slideOffset = 50
+  hideIndex = false
+
+[blackfriday]
+extensionsmask = ["autoHeaderIds"]
\ No newline at end of file
diff --git a/content/_index.md b/content/_index.md
new file mode 100644
index 0000000..2a97a46
--- /dev/null
+++ b/content/_index.md
@@ -0,0 +1,154 @@
++++
+title = "Hugo-Webslides"
++++
+<!--: .wrap .size-70 ..aligncenter bgimage=images/pencil.jpg -->
+
+
+## **Hugo-Webslides**
+
+Use markdown to write contents and render with [**WebSlides**](https://webslides.tv) to HTML.
+{ .text-intro }
+
+[{{< svg fa-github >}}Github](https://github.com/RCJacH/hugo-webslides)
+
+---
+
+<!--: .wrap -->
+
+## **WebSlides Demos**
+Here's what you can do with [WebSlides](https://webslides.tv).
+
+- {{< gallery title="Why WebSlides" href="#slide=10" src="https://webslides.tv/static/images/demos-why.png" >}}Why WebSlides{{< /gallery >}}
+- {{< gallery title="Landings" href="https://webslides.tv/demos/landings" src="https://webslides.tv/static/images/demos-landings.png" >}}Landings{{< /gallery >}}
+- {{< gallery title="Portfolios" href="https://webslides.tv/demos/portfolios" src="https://webslides.tv/static/images/demos-portfolios.png" >}}Portfolios{{< /gallery >}}
+- {{< gallery title="Keynote" href="https://webslides.tv/demos/apple" src="https://webslides.tv/static/images/demos-apple.png" >}}Keynote{{< /gallery >}}
+{ .flexblock .gallery }
+
+---
+<!--: .wrap -->
+
+## **More Examples**
+<small>Note. None of these slides are currently ported to Hugo-Webslides...YET.</small>
+
+- {{< gallery title="Netflix's Culture" href="https://webslides.tv/demos/netflix-culture" src="https://webslides.tv/static/images/demos-netflix.png" >}}Netflix{{< /gallery >}}
+- {{< gallery title="Longform Articles" href="https://webslides.tv/demos/longforms" src="https://webslides.tv/static/images/demos-longforms.png" >}}Longforms{{< /gallery >}}
+- {{< gallery title="Interviews" href="https://webslides.tv/demos/interviews" src="https://webslides.tv/static/images/demos-interviews.png" >}}Interviews{{< /gallery >}}
+{ .flexblock .gallery }
+
+
+---
+<!-- : .wrap .size-40 -->
+
+### **Configuration**
+
+You can modify WebSlides settings directly from your project config.toml.
+{ .text-intro }
+
+~~~toml
+[params.webslides]
+  banner = false
+  slideshow = true
+  vertical = false
+  autoslide = false
+  changeOnClick = false
+  disableLoop = false
+  minWheelDelta = 40
+  disableNavigateOnScroll = false
+  scrollWait = 450
+  slideOffset = 50
+  hideIndex = false
+~~~
+
+
+---
+<!-- : .wrap -->
+
+|||v
+
+### **All from one markdown file**
+
+Use three dashes "<code>-</code>" to create a separate slide page.
+
+|||
+
+~~~md
+
+Slide1
+
+---
+
+Slide2
+
+~~~
+
+---
+<!-- : .wrap -->
+
+
+|||
+
+~~~
+content
+├── home
+│   ├── home1.md (weight: 1)
+│   └── home2.md (weight: 2)
+└── _index.md (initial page)
+~~~
+
+|||
+
+### Or not.
+
+You can combine and arrange files with the weight parameter in front matter, and categorize .md files into different folders.
+
+---
+<!-- : .aligncenter -->
+
+## Slide Attributes
+
+Assign attributes to a slide by using the following notation.
+
+~~~
+---
+<!-- : .class .class2 ..sub-class bg=bg-class bgimage=(frame|dark|light)|http://image-url/ bgpos=POSITION -->
+~~~
+
+~~~html
+<section id="section-x" class="bg-class slide current" style="">
+  <span class="background-POSITION" style="background-image:url('http://image-url/')"></span>
+  <span class="background frame"></span>
+  <div class="class class2">
+    <div class="sub-class">
+      CONTENT
+    </div>
+  </div>
+</section>
+~~~
+---
+<!-- : .wrap -->
+
+### Assign class to elements
+
+note: ***depreciated*** with the introduction of [Hugo's native block attribute](https://gohugo.io/news/0.81.0-relnotes#attribute-lists-after-markdown-blocks)
+
+- {{< flexblock "Headers and Paragraphs" 6 >}}
+<span># <!-</span>- : .hClass -<span>-></span>Header<br>
+<span><!-</span>- : .pClass -<span>-></span>Paragraph
+~~~html
+<h1 class="hClass">Header</h1>
+<p class="pClass">Paragraph</p>
+~~~
+{{< /flexblock >}}
+
+- {{< flexblock "Lists" 6 >}}
+<span><!-</span>- : .listClass -<span>-></span><br>
+<span>-</span> list1<br>
+<span>-</span> list2
+~~~
+<ul class="listClass">
+  <li>list1</li>
+  <li>list2</li>
+</ul>
+~~~
+{{< /flexblock >}}
+{ .flexblock }
diff --git a/content/home/install.md b/content/home/install.md
new file mode 100644
index 0000000..95fc431
--- /dev/null
+++ b/content/home/install.md
@@ -0,0 +1,14 @@
++++
+title = "Install Now"
+weight = 1
+bg = "bg-gradient-h"
++++
+<!-- : .wrap -->
+
+### **Install Now**
+Run from the root of your Hugo site:
+{.text-intro}
+
+~~~
+$ git clone https://github.com/RCJacH/hugo-webslides.git themes/hugo-webslides
+~~~
diff --git a/content/why.md b/content/why.md
new file mode 100644
index 0000000..7c78c56
--- /dev/null
+++ b/content/why.md
@@ -0,0 +1,120 @@
++++
+weight = 2
++++
+<!--: .wrap .aligncenter -->
+
+# Good Karma {.text-landing}
+
+[**WebSlides**](http://webslides.tv) &mdash; HTML presentations made easy. <br>
+{.text-intro}
+Hypertext and beauty as narrative elements.
+
+[Twitter](https://twitter.com/webslides)
+[Dribble](https://dribbble.com/tags/webslides)
+[Github](https://github.com/webslides/webslides)
+
+---
+<!--: .wrap .fadeInUp bg=bg-black bg=aligncenter bgimage=frame|https://source.unsplash.com/OkAAx4mI2Hc/ -->
+
+# Everyone {{< svg fa-heart-o >}} Stories
+
+---
+<!--: .wrap ..content-center -->
+
+## **Why WebSlides?**
+
+<blockquote>
+  <p>"I feel guilty as a web designer when I have to use PowerPoint and Keynote. So I made <a href="https://twitter.com/search?q=%23webslides&amp;src=typd">#WebSlides</a>."</p>
+  <p><cite> <img class="avatar-40" src="https://raw.githubusercontent.com/webslides/WebSlides/master/static/images/avatar.jpg" alt="Avatar"> <a href="http://twitter.com/jlantunez/">@jlantunez</a>.</cite></p>
+</blockquote>
+
+---
+<!--: .wrap -->
+
+|||v
+
+### **WebSlides is really easy**
+Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.
+{.text-intro}
+
+Code is clean, scalable, and well documented. It uses **intuitive markup** with popular naming conventions. There's no need to overuse classes or nesting. **Based on [SimpleSlides](https://github.com/jennschiffer/SimpleSlides), by [Jenn Schiffer](http://jennmoney.biz)** :)
+
+|||
+
+<pre>&lt;article id="webslides"&gt;
+  <span class="code-comment">&lt;!-- Slide 1 --&gt;</span>
+  &lt;section&gt;
+    &lt;h1&gt;Design for trust&lt;/h1&gt;
+  &lt;/section&gt;
+  <span class="code-comment">&lt;!-- Slide 2 --&gt;</span>
+  &lt;section class="bg-primary"&gt;
+    &lt;div class="wrap"&gt;
+      &lt;h2&gt;.wrap = container (width: 90%)&lt;/h2&gt;
+    &lt;/div&gt;
+  &lt;/section&gt;
+&lt;/article&gt;
+</pre>
+
+---
+<!--: .wrap -->
+
+{{< div class="content-left" >}}
+## WebSlides was made to inspire people.
+{{< /div >}}
+
+{{< div class="content-left" >}}
+There are excellent presentation tools out there. WebSlides is **an open source solution** for telling stories. Hypertext and beauty as narrative elements.
+{{< /div >}}
+
+- {{< flexblock "<span>&rarr;</span> Keyboard navigation" >}}with arrow keys.{{< /flexblock >}}
+- <div><h2>{{< svg fa-link >}}Go to a specific slide</h2>URL: #slide=number</div>
+- <div><h2>{{< svg fa-clock-o >}}Slide counter</h2>Current/Total number.</div>
+{.flexblock .features}
+
+---
+<!--: .wrap -->
+
+- {{< flexblock "<span>100<sup>%</sup></span> customizable" >}}Well documented.{{< /flexblock >}}
+- {{< flexblock "<span>40<sup>+</sup></span> Beautiful Components" >}}Covers, cards, quotes...{{< /flexblock >}}
+- <div><h2>{{< svg fa-list >}}Flexible blocks</h2>with auto-fill and equal height.</div>
+- <div><h2>{{< svg fa-text-height >}}Vertical rhythm</h2>Use multiples of 8.</div>
+- <div><h2>{{< svg fa-language >}}Fade transition</h2>to all slides.</div>
+- {{< flexblock "<span>500<sup>+</sup></span>SVG Icons" >}}Font Awesome Kit.{{< /flexblock >}}
+{.flexblock .features}
+
+---
+<!--： .wrap -->
+
+|||v
+
+### Support
+
+Making a beautiful HTML presentation has never been so rewarding.
+
+- **Demos:** [Landings](https://webslides.tv/demos/landings) &middot; [Portfolios](https://webslides.tv/demos/portfolios.html)
+- **Docs:** [Components](https://webslides.tv/demos/components.html) &middot; [Classes](https://webslides.tv/demos/classes.html)
+- **Tags:** [Dribble](https://dribbble.com/tags/webslides) &middot; [Instagram](https://instagram.com/webslides)
+{.description}
+
+|||
+
+[<img class="aligncenter" src="https://raw.githubusercontent.com/webslides/WebSlides/master/static/images/setup.png" alt="WebSlides Files">](https://github.com/webslides/webslides")
+
+|||
+
+### Extensible
+
+The best way to inspire with your content is to connect on a personal level:
+
+- **Animations:** [Animate.css](https://github.com/daneden/animate.css/).
+- **Images:** [Unsplash](http://unsplash.com).
+- **Videos:** [Pixabay](https://pixabay.com/en/videos).
+{.description}
+
+---
+<!--: bg=bg-apple bg=aligncenter .wrap bgimage=https://webslides.tv/static/images/tim-cook.png bgpos=right-bottom -->
+
+## One more thing...
+
+[Make your keynote &mdash; <code>.bg-apple</code>](https://webslides.tv/demos/keynote.html)
+{.fadeInUp}
diff --git a/themes/.DS_Store b/themes/.DS_Store
new file mode 100644
index 0000000..5cfe10a
Binary files /dev/null and b/themes/.DS_Store differ
diff --git a/themes/hugo-webslides b/themes/hugo-webslides
new file mode 160000
index 0000000..86ef389
--- /dev/null
+++ b/themes/hugo-webslides
@@ -0,0 +1 @@
+Subproject commit 86ef38925f97e866ea491314d690bc4c57302b6a