added the frame of the website

src/cljs/website/core.cljs

@@ -1,18 +1,10 @@
 (ns website.core
     (:require [reagent.core :as reagent :refer [atom]]
               [secretary.core :as secretary :include-macros true]
-              [accountant.core :as accountant]))
+              [accountant.core :as accountant]
+              [website.tobbar :refer [topbar]]
+              [website.home :refer [home-page]]))
 
-;; -------------------------
-;; Views
-
-(defn home-page []
-  [:div [:h2 "Welcome to website"]
-   [:div [:a {:href "/about"} "go to about page"]]])
-
-(defn about-page []
-  [:div [:h2 "About website"]
-   [:div [:a {:href "/"} "go to the home page"]]])
 
 ;; -------------------------
 ;; Routes
@@ -20,13 +12,16 @@
 (defonce page (atom #'home-page))
 
 (defn current-page []
-  [:div [@page]])
+  [:div
+   [topbar]
+   [:div.columns
+    [:div.column.is-offset-1.is-10
+     [:br]
+     [@page]]]])
 
 (secretary/defroute "/" []
   (reset! page #'home-page))
 
-(secretary/defroute "/about" []
-  (reset! page #'about-page))
 
 ;; -------------------------
 ;; Initialize app

src/cljs/website/home.cljs

@@ -0,0 +1,27 @@
+(ns website.home
+  (:require [website.logo :refer [logo]]
+            [website.notebook :refer [notebook]]))
+
+
+(defn important [w]
+  [:span.has-text-weight-semibold w])
+
+
+(defn home-page []
+  [:div.columns
+   [:div.column
+    [:article.message
+     [:div.message-body
+      [:p.subtitle (important "Clojupyter") " brings " (important "clojure") " to the " (important "jupyter notebook") "."]
+      [:article.content
+       [:p "Enjoy the full Clojure repl experience with…"]
+       [:ul
+        [:li "Full jupyter notebook support"]
+        [:li "Charting"]
+        [:li [notebook "geom.ipynb" "Latex, Markdown, HTML and Hiccup"]]
+        [:li "parinfer"]
+        [:li "Leiningen integration"]]]]]]
+   [:div.column.is-flex-tablet.has-text-centered {:style {:justify-content "center" :flex-direction "column"}}
+    [:span.title {:style {:width "100%"}}
+     [logo 133]]]])
+

src/cljs/website/logo.cljs

@@ -0,0 +1,4 @@
+(ns website.logo)
+
+(defn logo [size]
+  [:img {:src "/images/clojupyter-logo.svg" :height size :width (* 3 size) :alt "clojure logo"}])

src/cljs/website/notebook.cljs

@@ -0,0 +1,7 @@
+(ns website.notebook)
+
+(def root "http://nbviewer.jupyter.org/github/didiercrunch/graphly/blob/master/")
+
+(defn notebook [name msg]
+  (let [url-safe-name (js/encodeURIComponent name)]
+    [:a {:href (str root url-safe-name)} msg]))

src/cljs/website/tobbar.cljs

@@ -0,0 +1,19 @@
+(ns website.tobbar
+   (:require [website.logo :refer [logo]]))
+
+(def github-link
+  [:a.title.is-5 {:href "https://github.com/clojupyter"}
+    [:i.fab.fa-github]])
+
+
+(defn topbar []
+  [:div
+   [:nav.navbar.is-primary.is-transparent {:role "navigation" :aria-label "main navigation"}
+    [:div.navbar-brand
+     [:a.navbar-item
+      [logo 30]
+      [:span.title {:style {:margin-left "0.5em"}} "clojupyter"]]]
+    [:div.navbar-end
+     [:a.navbar-item
+      [:span github-link]]]]])
+