Add static file, change eifel tower to my avatar

8 files changed, 153 insertions, 5 deletions

diff --git a/backend/christine.website/main.go b/backend/christine.website/main.go
index 3100f0c..d0c6d3f 100644
--- a/backend/christine.website/main.go
+++ b/backend/christine.website/main.go
@@ -110,6 +110,7 @@ func main() {
 		http.Error(w, "Not Found", http.StatusNotFound)
 	})
 	http.Handle("/dist/", http.FileServer(http.Dir("./frontend/static/")))
+	http.Handle("/static/", http.FileServer(http.Dir(".")))
 	http.HandleFunc("/", writeIndexHTML)
 
 	log.Fatal(http.ListenAndServe(":9090", nil))
diff --git a/frontend/src/BlogIndex.purs b/frontend/src/BlogIndex.purs
index a52e6bd..6fbdc6d 100644
--- a/frontend/src/BlogIndex.purs
+++ b/frontend/src/BlogIndex.purs
@@ -61,7 +61,7 @@ post (Post state) =
   div
     [ className "col s6" ]
     [ div
-      [ className "card pink lighten-4" ]
+      [ className "card pink lighten-5" ]
       [ div
         [ className "card-content black-text" ]
         [ span [ className "card-title" ] [ text state.title ]
@@ -70,7 +70,7 @@ post (Post state) =
         , span [] [ text state.summary ]
         ]
       , div
-        [ className "card-action pink" ]
+        [ className "card-action pink lighten-5" ]
         [ link state.link [] [ text "Read More" ] ]
       ]
     ]
diff --git a/frontend/src/Layout.purs b/frontend/src/Layout.purs
index f809b9c..c68cada 100644
--- a/frontend/src/Layout.purs
+++ b/frontend/src/Layout.purs
@@ -9,8 +9,9 @@ import DOM (DOM)
 import Network.HTTP.Affjax (AJAX)
 import Prelude (($), (#), map, pure)
 import Pux (EffModel, noEffects, mapEffects, mapState)
-import Pux.Html (Html, a, code, div, h1, h3, h4, li, nav, p, pre, text, ul)
-import Pux.Html.Attributes (classID, className, id_, role, href)
+import Pux.Html as H
+import Pux.Html (style, Html, a, code, div, h1, h2, h3, h4, li, nav, p, pre, text, ul, img, span)
+import Pux.Html.Attributes (classID, className, id_, role, href, src, rel)
 import Pux.Router (link)
 
 data Action
@@ -116,9 +117,47 @@ contact =
       ]
     ]
 
+index :: Html Action
+index =
+  div
+  [ className "row panel" ]
+  [ H.link [ rel "stylesheet", href "/static/css/about/main.css" ] []
+  , div
+    [ className "col m4 bg_blur valign-wrapper center-align" ]
+    [ div
+      [ className "valign center-align fb_wrap" ]
+      [ link "/contact"
+        [ className "btn follow_btn" ]
+        [ text "Contact Me" ]
+      ]
+    ]
+  , div
+    [ className "col m8" ]
+    [ div
+      [ className "header" ]
+      [ h1 [] [ text "Christine Dodrill" ]
+      , h4 [] [ text "Rockstar Hacker, Freelance Programmer, Gopher, Cloud Architect" ]
+      , span [] [ text "I am a GitHub power user. I am constantly learning new languages and tools. I strongly believe in knowing many languages and ways to do things so I can pick the right tool for the job." ]
+      , h2 [] [ text "Skills" ]
+      , ul
+        []
+        [ li [] [ text "Go, Moonscript, Lua, Python, C, Nim, Haskell" ]
+        , li [] [ text "Docker deployments" ]
+        , li [] [ text "Research, Development and Experimentation" ]
+        ]
+      , h2 [] [ text "Side Projects" ]
+      , ul
+        []
+        [ li [] [ text "Real-time globally distributed chat server maintenance" ]
+        , li [] [ text "Mashups of chat, video and music" ]
+        ]
+      ]
+    ]
+  ]
+
 page :: Route -> State -> Html Action
 page NotFound _ = h1 [] [ text "not found" ]
-page Home state = map Child $ Counter.view state.count
+page Home _ = index
 page Resume state = h1 [] [ text "Christine Dodrill" ]
 page BlogIndex state = map BIChild $ BlogIndex.view state.bistate
 page (BlogPost _) state = map BEChild $ BlogEntry.view state.bestate
diff --git a/frontend/support/index.html b/frontend/support/index.html
index 74e914e..f56eab7 100644
--- a/frontend/support/index.html
+++ b/frontend/support/index.html
@@ -8,6 +8,7 @@
 
     <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
+    <link rel="stylesheet" href="/static/css/main.css">
   </head>
   <body>
     <div id="app"></div>
diff --git a/static/css/about/main.css b/static/css/about/main.css
new file mode 100644
index 0000000..900fdd1
--- /dev/null
+++ b/static/css/about/main.css
@@ -0,0 +1,104 @@
+img.textwrap-right {
+	float: right;
+	margin: 10px;
+}
+
+.well {
+	margin-top:-20px;
+	text-align:center;
+	cursor:pointer;
+	font-size: 25px;
+	padding: 15px;
+	border-radius: 0px !important;
+}
+
+.well:hover {
+	margin-top:-20px;
+	border:2px solid black;
+	text-align:center;
+	cursor:pointer;
+	font-size: 25px;
+	padding: 15px;
+	border-radius: 0px !important;
+}
+
+.bg_blur
+{
+	background-image:url('/static/img/avatar.png');
+	height: 512px;
+	background-size: cover;
+	overflow: visible;
+}
+
+.fb_wrap {
+		margin: 0 auto;
+		padding: 10px;
+}
+
+.follow_btn {
+	text-decoration: none;
+	height: 20%;
+	padding: 10px;
+	background-color: #E5B7CE;
+	padding-top: 6px;
+	color: #fff;
+	text-align: center;
+	font-size: 20px;
+	opacity: 1.0;
+}
+
+.follow_btn:hover {
+	text-decoration: none;
+	background-color: #FE9ACD;
+	padding: 10px;
+	padding-top: 6px;
+	color: #fff;
+	text-align: center;
+	font-size: 20px;
+	border: 4px solid rgba(255, 255, 255, 0.8);
+}
+
+.header{
+	color : #808080;
+	margin-left:10%;
+	margin-top:70px;
+}
+
+.picture{
+	height:150px;
+	width:150px;
+	top: 75px;
+	left:-75px;
+	float: left;
+}
+
+.picture_mob{
+	position: absolute;
+	width: 35%;
+	left: 35%;
+	bottom: 70%;
+}
+
+.btn-style{
+	color: #fff;
+	background-color: #007FBE;
+	border-color: #adadad;
+	width: 33.3%;
+}
+
+.btn-style:hover {
+	color: #333;
+	background-color: #3D5DE0;
+	border-color: #adadad;
+	width: 33.3%;
+}
+
+@media (max-width: 767px) {
+	.header{
+		text-align : center;
+	}
+
+	.nav{
+		margin-top : 30px;
+	}
+}
diff --git a/static/css/main.css b/static/css/main.css
new file mode 100644
index 0000000..8411af4
--- /dev/null
+++ b/static/css/main.css
@@ -0,0 +1,3 @@
+body {
+    background-color: #FFCCE6;
+}
\ No newline at end of file
diff --git a/static/img/about/tower.jpg b/static/img/about/tower.jpg
new file mode 100644
index 0000000..3d9f264
--- /dev/null
+++ b/static/img/about/tower.jpg
diff --git a/static/img/avatar.png b/static/img/avatar.png
new file mode 100644
index 0000000..f4b9014
--- /dev/null
+++ b/static/img/avatar.png