From 4d8a3b424ac410e21279a2c83246a9a9f8c224c9 Mon Sep 17 00:00:00 2001
From: "David A. Viramontes" <dviramontes@gmail.com>
Date: Sun, 2 Sep 2018 20:10:46 -0500
Subject: [PATCH 1/4] update: bg color

---
 less/site.less                | 3 ++-
 resources/public/css/site.css | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/less/site.less b/less/site.less
index db4afae..3542da1 100644
--- a/less/site.less
+++ b/less/site.less
@@ -4,6 +4,7 @@
 @blackish: #0A0608;
 @lightgray: #C5C5C5;
 @darkgray: #606060;
+@background: rgba(242, 236, 225, 1);
 
 html {
   height: 100%;
@@ -11,7 +12,7 @@ html {
 
 body {
   color: @blackish;
-  background-color: @offwhite;
+  background-color: @background;
   margin: 0;
   height: 100%;
   @media screen and (min-width: 500px) {
diff --git a/resources/public/css/site.css b/resources/public/css/site.css
index 335a29b..47becd0 100644
--- a/resources/public/css/site.css
+++ b/resources/public/css/site.css
@@ -4,7 +4,7 @@ html {
 }
 body {
   color: #0a0608;
-  background-color: #f8f8f8;
+  background-color: #f2ece1;
   margin: 0;
   height: 100%;
   font-family: Quicksand;

From c1128895c5cafa545d3c29cc58806b88e641f70c Mon Sep 17 00:00:00 2001
From: "David A. Viramontes" <dviramontes@gmail.com>
Date: Sun, 2 Sep 2018 22:35:18 -0500
Subject: [PATCH 2/4] fetch: projects from contentful, add env vars via get-env
 macro in clj

---
 project.clj                          |  16 +++--
 src/clj/mmm/core.clj                 |   1 -
 src/clj/mmm_clj/core.clj             |   2 +
 src/clj/mmm_clj/env.clj              |   9 +++
 src/clj/{mmm => mmm_clj}/handler.clj |   2 +-
 src/clj/{mmm => mmm_clj}/server.clj  |   2 +-
 src/cljs/mmm/events.cljs             |  46 +++---------
 src/cljs/mmm/views/home.cljs         | 104 +++++++--------------------
 8 files changed, 57 insertions(+), 125 deletions(-)
 delete mode 100644 src/clj/mmm/core.clj
 create mode 100644 src/clj/mmm_clj/core.clj
 create mode 100644 src/clj/mmm_clj/env.clj
 rename src/clj/{mmm => mmm_clj}/handler.clj (95%)
 rename src/clj/{mmm => mmm_clj}/server.clj (93%)

diff --git a/project.clj b/project.clj
index a8fc72a..bc39806 100644
--- a/project.clj
+++ b/project.clj
@@ -12,6 +12,7 @@
                  [compojure "1.6.0"]
                  [ring "1.6.0"]
                  [cljs-ajax "0.6.0"]
+                 [environ "1.1.0"]
                  [day8.re-frame/http-fx "0.1.3"]
                  [adzerk/env "0.4.0"]]
 
@@ -26,13 +27,13 @@
 
   :min-lein-version "2.5.3"
 
-  :source-paths ["src/clj"]
+  :source-paths ["src/clj" "src/cljs"]
 
   :clean-targets ^{:protect false} ["resources/public/js/compiled" "target"
                                     "test/js"]
 
   :figwheel {:css-dirs     ["resources/public/css"]
-             :ring-handler mmm.handler/dev-handler}
+             :ring-handler mmm-clj.handler/dev-handler}
 
   :less {:source-paths ["less"]
          :target-path  "resources/public/css"}
@@ -42,13 +43,14 @@
    {:dependencies [[binaryage/devtools "0.8.2"]]
 
     :plugins      [[lein-figwheel "0.5.8"]
+                   [environ "1.0.1"]
                    [lein-doo "0.1.7"]]}}
 
 
   :cljsbuild
   {:builds
    [{:id           "dev"
-     :source-paths ["src/cljs"]
+     :source-paths ["src/clj" "src/cljs"]
      :figwheel     {:on-jsload "mmm.core/mount-root"}
      :compiler     {:main                 mmm.core
                     :output-to            "resources/public/js/compiled/app.js"
@@ -60,7 +62,7 @@
 
 
     {:id           "min"
-     :source-paths ["src/cljs"]
+     :source-paths ["src/clj" "src/cljs"]
      :jar          true
      :compiler     {:main            mmm.core
                     :output-to       "resources/public/js/compiled/app.js"
@@ -69,14 +71,14 @@
                     :pretty-print    false}}
 
     {:id           "test"
-     :source-paths ["src/cljs" "test/cljs"]
+     :source-paths ["src/clj" "src/cljs" "test/cljs"]
      :compiler     {:main          mmm.runner
                     :output-to     "resources/public/js/compiled/test.js"
                     :output-dir    "resources/public/js/compiled/test/out"
                     :optimizations :none}}]}
 
-  :main mmm.server
+  :main mmm-clj.server
 
-  :aot [mmm.server]
+  :aot [mmm-clj.server]
 
   :prep-tasks [["cljsbuild" "once" "min"] "compile"])
diff --git a/src/clj/mmm/core.clj b/src/clj/mmm/core.clj
deleted file mode 100644
index dad6572..0000000
--- a/src/clj/mmm/core.clj
+++ /dev/null
@@ -1 +0,0 @@
-(ns mmm.core)
diff --git a/src/clj/mmm_clj/core.clj b/src/clj/mmm_clj/core.clj
new file mode 100644
index 0000000..2fd8940
--- /dev/null
+++ b/src/clj/mmm_clj/core.clj
@@ -0,0 +1,2 @@
+(ns mmm-clj.core
+  (:gen-class))
diff --git a/src/clj/mmm_clj/env.clj b/src/clj/mmm_clj/env.clj
new file mode 100644
index 0000000..b7c91a9
--- /dev/null
+++ b/src/clj/mmm_clj/env.clj
@@ -0,0 +1,9 @@
+(ns mmm-clj.env
+  (:require [environ.core :refer [env]]
+            [adzerk.env :as env]))
+
+(env/def mmm-contentful-server-space-id (System/getenv "MMM_CONTENTFUL_SERVER_SPACE_ID"))
+
+(env/def mmm-contentful-server-access-token (System/getenv "MMM_CONTENTFUL_SERVER_ACCESS_TOKEN"))
+
+(defmacro get-env [k] (get env k))
\ No newline at end of file
diff --git a/src/clj/mmm/handler.clj b/src/clj/mmm_clj/handler.clj
similarity index 95%
rename from src/clj/mmm/handler.clj
rename to src/clj/mmm_clj/handler.clj
index 8489a31..1d56786 100644
--- a/src/clj/mmm/handler.clj
+++ b/src/clj/mmm_clj/handler.clj
@@ -1,4 +1,4 @@
-(ns mmm.handler
+(ns mmm-clj.handler
   (:require [compojure.core :refer [GET defroutes]]
             [compojure.route :refer [resources]]
             [ring.util.response :refer [resource-response]]
diff --git a/src/clj/mmm/server.clj b/src/clj/mmm_clj/server.clj
similarity index 93%
rename from src/clj/mmm/server.clj
rename to src/clj/mmm_clj/server.clj
index 7b7a407..cded6f0 100644
--- a/src/clj/mmm/server.clj
+++ b/src/clj/mmm_clj/server.clj
@@ -1,4 +1,4 @@
-(ns mmm.server
+(ns mmm-clj.server
   (:require [mmm.handler :refer [handler]]
             [config.core :refer [env]]
             [ring.adapter.jetty :refer [run-jetty]])
diff --git a/src/cljs/mmm/events.cljs b/src/cljs/mmm/events.cljs
index c21068e..e580188 100644
--- a/src/cljs/mmm/events.cljs
+++ b/src/cljs/mmm/events.cljs
@@ -1,14 +1,10 @@
 (ns mmm.events
-  (:require-macros [adzerk.env :as env])
+  (:require-macros [mmm-clj.env :refer [get-env]])
   (:require [re-frame.core :as rf]
             [ajax.core :as ajax :refer [POST]]
             [day8.re-frame.http-fx]
             [mmm.db :as db]))
 
-(env/def GRAPHQL_API_KEY "MMM_WWW_GRAPHQL_COOL_API_KEY")
-
-(defonce graphql-endpoint "https://api.graph.cool/simple/v1/cj2wiig1p3rcq0154lhr2nbk5")
-
 (rf/reg-event-db
   :initialize-db
   (fn [_ _]
@@ -19,28 +15,6 @@
   (fn [db [_ active-view]]
     (assoc db :active-view active-view)))
 
-(rf/reg-event-fx
-  :get-profile-data
-  (fn [{db :db} [_ user query]]
-    ;; TODO: add loading state...
-    {:db         db
-     :http-xhrio {:method          :post
-                  :headers         {:Authorization (str "Bearer " GRAPHQL_API_KEY)}
-                  :format          (ajax/json-request-format)
-                  :params          {:query query}
-                  :uri             graphql-endpoint
-                  :response-format (ajax/json-response-format {:keywords? true})
-                  :on-success      [:get-profile-data-success user]}}))
-
-(rf/reg-event-db
-  :get-profile-data-success
-  (rf/path [:profiles])
-  (fn [db [_ user & [{data :data}]]]
-    (let [{:keys [allProjects Collaborator]} data]
-      (-> db
-        (assoc-in [user] (merge (db user) Collaborator))
-        (assoc-in [user :projects] allProjects)))))
-
 (rf/reg-event-db
   :set-titles
   (rf/path [:view-titles])
@@ -54,15 +28,17 @@
 
 (rf/reg-event-fx
   :get-contentful-data
-  (fn [{db :db} [_ db-key query]]
+  (fn [{db :db} [_ db-key]]
     (when-not (db-key db)
-      (let [endpoint "http://localhost:8000/___graphql/"
-            space-id "x84uyf33pmv4"]
+      (let [endpoint "https://cdn.contentful.com"
+            space-id (get-env :mmm-contentful-server-space-id)
+            access-token (get-env :mmm-contentful-server-access-token)]
         {:db         db
-         :http-xhrio {:method          :post
+         :http-xhrio {:method          :get
+                      :headers         {:Authorization (str "Bearer " access-token)}
                       :format          (ajax/json-request-format)
-                      :params          {:query query}
-                      :uri             (str endpoint space-id)
+                      :params          {:access_token access-token}
+                      :uri             (str endpoint "/spaces/" space-id "/environments/master/entries")
                       :response-format (ajax/json-response-format {:keywords? true})
                       :on-failure      [:get-contentful-data-failed]
                       :on-success      [:get-contentful-data-success db-key]}}))))
@@ -75,5 +51,5 @@
 
 (rf/reg-event-db
   :get-contentful-data-success
-  (fn [db [_ db-key & [{data :data}]]]
-    (assoc db db-key data)))
\ No newline at end of file
+  (fn [db [_ db-key & [{items :items}]]]
+    (assoc db db-key items)))
\ No newline at end of file
diff --git a/src/cljs/mmm/views/home.cljs b/src/cljs/mmm/views/home.cljs
index 47515eb..fbc4c72 100644
--- a/src/cljs/mmm/views/home.cljs
+++ b/src/cljs/mmm/views/home.cljs
@@ -2,90 +2,34 @@
   (:require [re-frame.core :as rf]
             [mmm.components.bubble :refer [bubble]]))
 
-(def query
-  "{
-    allContentfulProject {
-      edges {
-        node {
-          title
-          cover {
-            id
-          }
-          category
-        }
-      }
-		},
-    allContentfulAsset {
-      edges {
-        node {
-          id
-          resize(width: 500) {
-            src
-          }
-        }
-      }
-		}
-	}")
-
-(def projects [{:title "project 1"
-                :cover "img/projects/tony-seltzer.gif"
-                :category ["art"]},
-               {:title "project 1"
-                :cover "img/projects/tony-seltzer.gif"
-                :category ["art"]},
-               {:title "project 1"
-                :cover "img/projects/tony-seltzer.gif"
-                :category ["art"]},
-               {:title "project 1"
-                :cover "img/projects/tony-seltzer.gif"
-                :category ["art"]},
-               {:title "project 1"
-                :cover "img/projects/tony-seltzer.gif"
-                :category ["art"]},
-               {:title "project 1"
-                :cover "img/projects/tony-seltzer.gif"
-                :category ["art"]},
-               {:title "project 1"
-                :cover "img/projects/tony-seltzer.gif"
-                :category ["online shop"]},
-               {:title "project 1"
-                :cover "img/projects/tony-seltzer.gif"
-                :category ["online shop"]},
-               {:title "project 1"
-                :cover "img/projects/tony-seltzer.gif"
-                :category ["business", "online shop"]},
-               {:title "project 1"
-                :cover "img/projects/tony-seltzer.gif"
-                :category ["education", "nonprofit"]}])
-
-(defn filter-by-cat [cat]
+(defn filter-by-cat [cat projects]
   (filter (fn [p]
             (some
               #(when (= % cat) %)
               (:category p)))
-    projects))
+          projects))
 
 (defn home-view []
-  ;(let [db-key :projects]                                    ;; 0. declare unique db-key
-  ;  (rf/reg-sub db-key #(db-key %))                          ;; 1. register subscriber db-key
-  ;  (rf/dispatch [:get-contentful-data db-key query :media]) ;; 2. retrieve contentful data & pass key for assoc in db
-  ;  (if-let [projects (rf/subscribe [db-key])]
-  ;    (prn projects)
-  (let [categories ["art"
-                    "business"
-                    "online shop"
-                    "nonprofit"
-                    "education"
-                    "installation"
-                    "mobile"]]
-    [:div
-     [:div
-      (for [cat categories
-            :let [projects (filter-by-cat cat)]]
-        ^{:key (gensym)}
+  (let [db-key :projects]
+    (rf/reg-sub db-key #(db-key %))
+    (rf/dispatch [:get-contentful-data db-key])
+    (if-let [projects (map #(:fields %) @(rf/subscribe [db-key]))]
+      (let [categories ["art"
+                        "business"
+                        "online shop"
+                        "nonprofit"
+                        "education"
+                        "installation"
+                        "mobile"]]
         [:div
-         [:h1 cat]
-         (for [project projects
-               :let [{:keys [title cover category]} project]]
-           ^{:key (gensym)}
-           [bubble :blue title])])]]))
\ No newline at end of file
+         [:div
+          (for [cat categories
+                :let [projects (filter-by-cat cat projects)]]
+            ^{:key (gensym)}
+            [:div
+             [:h1 cat]
+             (for [project projects
+                   :let [{:keys [title cover category]} project]]
+               ^{:key (gensym)}
+               [bubble :blue title])])]])
+      [:div "loading..."])))
\ No newline at end of file

From 515f50813fdeab13cc54810a0da254ee58a79d52 Mon Sep 17 00:00:00 2001
From: "David A. Viramontes" <dviramontes@gmail.com>
Date: Sun, 2 Sep 2018 22:57:05 -0500
Subject: [PATCH 3/4] update: css

---
 less/site.less                | 7 +------
 resources/public/css/site.css | 7 +------
 src/cljs/mmm/views/home.cljs  | 2 +-
 3 files changed, 3 insertions(+), 13 deletions(-)

diff --git a/less/site.less b/less/site.less
index dc68127..005e6a1 100644
--- a/less/site.less
+++ b/less/site.less
@@ -83,42 +83,36 @@ a {
   &:nth-child(1) {
     transform: translate(43%, 0);
     .label-bubble {
-      align-items: flex-start;
       justify-content: center;
     }
   }
   &:nth-child(2) {
     transform: translate(86%, 25%);
     .label-bubble {
-      align-items: center;
       justify-content: flex-end;
     }
   }
   &:nth-child(3) {
     transform: translate(86%, 75%);
     .label-bubble {
-      align-items: center;
       justify-content: flex-end;
     }
   }
   &:nth-child(4) {
     transform: translate(43%, 100%);
     .label-bubble {
-      align-items: flex-end;
       justify-content: center;
     }
   }
   &:nth-child(5) {
     transform: translate(0, 75%);
     .label-bubble {
-      align-items: center;
       justify-content: flex-start;
     }
   }
   &:nth-child(6) {
     transform: translate(0, 25%);
     .label-bubble {
-      align-items: center;
       justify-content: flex-start;
     }
   }
@@ -169,6 +163,7 @@ a {
 .label-bubble {
   display: flex;
   flex-flow: row wrap;
+  align-items: center;
   padding: 0.9em;
   .label { width: 100% }
 }
diff --git a/resources/public/css/site.css b/resources/public/css/site.css
index 4d6b5e1..36eb56c 100644
--- a/resources/public/css/site.css
+++ b/resources/public/css/site.css
@@ -62,42 +62,36 @@ a {
   transform: translate(43%, 0);
 }
 .bubble-wrap-outer:nth-child(1) .label-bubble {
-  align-items: flex-start;
   justify-content: center;
 }
 .bubble-wrap-outer:nth-child(2) {
   transform: translate(86%, 25%);
 }
 .bubble-wrap-outer:nth-child(2) .label-bubble {
-  align-items: center;
   justify-content: flex-end;
 }
 .bubble-wrap-outer:nth-child(3) {
   transform: translate(86%, 75%);
 }
 .bubble-wrap-outer:nth-child(3) .label-bubble {
-  align-items: center;
   justify-content: flex-end;
 }
 .bubble-wrap-outer:nth-child(4) {
   transform: translate(43%, 100%);
 }
 .bubble-wrap-outer:nth-child(4) .label-bubble {
-  align-items: flex-end;
   justify-content: center;
 }
 .bubble-wrap-outer:nth-child(5) {
   transform: translate(0, 75%);
 }
 .bubble-wrap-outer:nth-child(5) .label-bubble {
-  align-items: center;
   justify-content: flex-start;
 }
 .bubble-wrap-outer:nth-child(6) {
   transform: translate(0, 25%);
 }
 .bubble-wrap-outer:nth-child(6) .label-bubble {
-  align-items: center;
   justify-content: flex-start;
 }
 .bubble-wrap-inner {
@@ -139,6 +133,7 @@ a {
 .label-bubble {
   display: flex;
   flex-flow: row wrap;
+  align-items: center;
   padding: 0.9em;
 }
 .label-bubble .label {
diff --git a/src/cljs/mmm/views/home.cljs b/src/cljs/mmm/views/home.cljs
index 8833490..520fb78 100644
--- a/src/cljs/mmm/views/home.cljs
+++ b/src/cljs/mmm/views/home.cljs
@@ -39,7 +39,7 @@
 
              (for [project projects
                    :let [{:keys [title cover]} project
-                         n (.indexOf all-projects project)
+                         n (.indexOf projects project)
                          color (nth colors n)]]
                ^{:key (gensym)}
                [bubble color cover title])]])])

From 56f09e50ea4138f640f95e57d502aed55e006e31 Mon Sep 17 00:00:00 2001
From: eemshi <oreneemshi@gmail.com>
Date: Mon, 3 Sep 2018 01:05:08 -0600
Subject: [PATCH 4/4] wip project view

---
 less/site.less                  | 36 +++++++++++++++++++++++++++------
 project.clj                     |  1 +
 resources/public/css/site.css   | 32 ++++++++++++++++++++++++-----
 src/cljs/mmm/db.cljs            |  1 +
 src/cljs/mmm/events.cljs        |  7 +++++--
 src/cljs/mmm/routes.cljs        |  3 +++
 src/cljs/mmm/subs.cljs          |  5 +++++
 src/cljs/mmm/views/main.cljs    |  4 +++-
 src/cljs/mmm/views/project.cljs | 19 +++++++++++++++++
 9 files changed, 94 insertions(+), 14 deletions(-)
 create mode 100644 src/cljs/mmm/views/project.cljs

diff --git a/less/site.less b/less/site.less
index 005e6a1..96587e7 100644
--- a/less/site.less
+++ b/less/site.less
@@ -2,6 +2,7 @@
 
 @offwhite: #F8F8F8;
 @blackish: #0A0608;
+@reddish: #fbb4ae;
 @lightgray: #C5C5C5;
 @darkgray: #606060;
 @background: rgba(242, 236, 225, 1);
@@ -39,20 +40,16 @@ body {
 
 h1 {
   font-weight: 400;
-  font-size: 2.5em;
+  font-size: 2em;
 }
 
 h2, h3 {
   font-weight: 300;
 }
 
-h2 {
-  padding: 2px 8px 2px 6px;
-}
-
 a {
   text-decoration: underline;
-  color: @offwhite;
+  color: @reddish;
 }
 
 .projects-gallery {
@@ -66,6 +63,10 @@ a {
   text-align: center;
   width: 470px;
   height: 630px;
+  @media screen and (max-width: 500px) {
+    width: 317px;
+    height: 450px;
+  }
 }
 
 .category-projects {
@@ -75,8 +76,16 @@ a {
 .bubble-wrap-outer {
   position: absolute;
   top: 0;
+
   width: 252px;
   height: 252px;
+
+  @media screen and (max-width: 500px) {
+    width: 170px;
+    height: 170px;
+    font-size: 0.8em;
+  }
+
   &:hover {
     z-index: 15;
   }
@@ -168,6 +177,21 @@ a {
   .label { width: 100% }
 }
 
+.project-view-wrap {
+  display: flex;
+  flex-flow: row wrap;
+
+  .project-view-details {
+    margin: 1.75em 2em 0 2em;
+  }
+
+  .project-view-image {
+    width: 252px;
+    height: 252px;
+    margin: 2em 0 0 2em;
+  }
+}
+
 header {
   text-align: center;
   .img-wrapper {
diff --git a/project.clj b/project.clj
index bc39806..fd7619c 100644
--- a/project.clj
+++ b/project.clj
@@ -7,6 +7,7 @@
                  [org.clojure/core.async "0.2.391"]
                  [re-com "1.0.0"]
                  [secretary "1.2.3"]
+                 [camel-snake-kebab "0.4.0"]
                  [cljsjs/jquery "2.2.4-0"]
                  [cljsjs/photoswipe "4.1.1-0"]
                  [compojure "1.6.0"]
diff --git a/resources/public/css/site.css b/resources/public/css/site.css
index 36eb56c..f6887af 100644
--- a/resources/public/css/site.css
+++ b/resources/public/css/site.css
@@ -22,18 +22,15 @@ body {
 }
 h1 {
   font-weight: 400;
-  font-size: 2.5em;
+  font-size: 2em;
 }
 h2,
 h3 {
   font-weight: 300;
 }
-h2 {
-  padding: 2px 8px 2px 6px;
-}
 a {
   text-decoration: underline;
-  color: #f8f8f8;
+  color: #fbb4ae;
 }
 .projects-gallery {
   width: 100%;
@@ -46,6 +43,12 @@ a {
   width: 470px;
   height: 630px;
 }
+@media screen and (max-width: 500px) {
+  .category-wrap {
+    width: 317px;
+    height: 450px;
+  }
+}
 .category-projects {
   position: relative;
 }
@@ -55,6 +58,13 @@ a {
   width: 252px;
   height: 252px;
 }
+@media screen and (max-width: 500px) {
+  .bubble-wrap-outer {
+    width: 170px;
+    height: 170px;
+    font-size: 0.8em;
+  }
+}
 .bubble-wrap-outer:hover {
   z-index: 15;
 }
@@ -139,6 +149,18 @@ a {
 .label-bubble .label {
   width: 100%;
 }
+.project-view-wrap {
+  display: flex;
+  flex-flow: row wrap;
+}
+.project-view-wrap .project-view-details {
+  margin: 1.75em 2em 0 2em;
+}
+.project-view-wrap .project-view-image {
+  width: 252px;
+  height: 252px;
+  margin: 2em 0 0 2em;
+}
 header {
   text-align: center;
 }
diff --git a/src/cljs/mmm/db.cljs b/src/cljs/mmm/db.cljs
index 5d2aef0..6bd6d31 100644
--- a/src/cljs/mmm/db.cljs
+++ b/src/cljs/mmm/db.cljs
@@ -2,6 +2,7 @@
 
 (def default-db
   {:active-view nil
+   :project-in-view nil
    :view-titles {:title    "mmmanyfold"
                  :subtitle "web + app dev studio"}
    :content-css-class "default-content"
diff --git a/src/cljs/mmm/events.cljs b/src/cljs/mmm/events.cljs
index e580188..facc2c8 100644
--- a/src/cljs/mmm/events.cljs
+++ b/src/cljs/mmm/events.cljs
@@ -12,8 +12,11 @@
 
 (rf/reg-event-db
   :set-active-view
-  (fn [db [_ active-view]]
-    (assoc db :active-view active-view)))
+  (fn [db [_ active-view & [project-name]]]
+    (if project-name
+      (assoc db :active-view active-view
+                :project-in-view project-name)
+      (assoc db :active-view active-view))))
 
 (rf/reg-event-db
   :set-titles
diff --git a/src/cljs/mmm/routes.cljs b/src/cljs/mmm/routes.cljs
index dc6dc30..d194ef9 100644
--- a/src/cljs/mmm/routes.cljs
+++ b/src/cljs/mmm/routes.cljs
@@ -40,5 +40,8 @@
   (defroute "/david" []
             (rf/dispatch [:set-active-view :davm-view]))
 
+  (defroute "/:project" [project]
+            (rf/dispatch [:set-active-view :project-view project]))
+
   ;; --------------------
   (hook-browser-navigation!))
diff --git a/src/cljs/mmm/subs.cljs b/src/cljs/mmm/subs.cljs
index e0c97d9..4eed556 100644
--- a/src/cljs/mmm/subs.cljs
+++ b/src/cljs/mmm/subs.cljs
@@ -11,6 +11,11 @@
   (fn [db _]
     (:active-view db)))
 
+(rf/reg-sub
+  :project-in-view
+  (fn [db _]
+    (:project-in-view db)))
+
 (rf/reg-sub
   :project-list
   (fn [db _]
diff --git a/src/cljs/mmm/views/main.cljs b/src/cljs/mmm/views/main.cljs
index cbfe1be..91fc406 100644
--- a/src/cljs/mmm/views/main.cljs
+++ b/src/cljs/mmm/views/main.cljs
@@ -3,13 +3,15 @@
             [re-com.core :as re-com]
             [mmm.views.home :refer [home-view]]
             [mmm.views.davm :refer [davm-view]]
-            [mmm.views.contact :refer [contact-view]]))
+            [mmm.views.contact :refer [contact-view]]
+            [mmm.views.project :refer [project-view]]))
 
 (defn- views [view-name]
        (case view-name
              :home-view [home-view]
              :contact-view [contact-view]
              :davm-view [davm-view]
+             :project-view [project-view]
              [:div]))
 
 (defn view []
diff --git a/src/cljs/mmm/views/project.cljs b/src/cljs/mmm/views/project.cljs
new file mode 100644
index 0000000..ceea6a9
--- /dev/null
+++ b/src/cljs/mmm/views/project.cljs
@@ -0,0 +1,19 @@
+(ns mmm.views.project
+  (:require [re-frame.core :as rf]))
+
+(defn project-view []
+  (let [project @(rf/subscribe [:project-in-view])]
+    [:div.project-view-wrap
+     [:div.project-view-image
+      [:div.img-bubble {:style {:width "100%"
+                                :height "100%"
+                                :background-size "100%"
+                                :border-radius "50%"
+                                :border-color "#b3cde3"
+                                :background-image (str "url('" "img/projects/tony-seltzer.gif" "')")}}]]
+     [:div.project-view-details
+      [:h1 "Remember the Memories"]
+      [:h2 "Website for Tony Seltzer's \"Remember the Memories\" tape release via Letter Racer."]
+      [:h2 [:a {:href "http://tonyseltzer.letterracer.com/"} "tonyseltzer.letterracer.com"]]
+      [:p "Tech: jQuery, three.js"]
+      [:p "Album art by NSP"]]]))
\ No newline at end of file