arrange edit project/profile modals

19 files changed, 459 insertions, 234 deletions

diff --git a/public/assets/javascripts/ui/CreateProjectModal.js b/public/assets/javascripts/ui/CreateProjectModal.js
new file mode 100644
index 0000000..44c5a20
--- /dev/null
+++ b/public/assets/javascripts/ui/CreateProjectModal.js
@@ -0,0 +1,50 @@
+
+
+var CreateProjectModal = ModalView.extend({
+	el: ".mediaDrawer.newProject",
+	action: "/project/new",
+
+	events: {
+		"submit form": "submit"
+	},
+
+	initialize: function(){
+		this.$form = this.$("form")
+		this.$errors = this.$(".errors")
+		this.$errorList = this.$(".errorList")
+	},
+
+	reset: function(){
+		this.$("input").not("[type='submit']").not("[type='hidden']").val("")
+	},
+	
+	load: function(){
+		this.reset()
+		this.show()
+	},
+	
+	submit: function(e){
+		e.preventDefault()
+
+		this.$errors.hide();
+		this.$errorList.empty()
+
+		var fields = this.$form.serializeArray()
+		
+		var request = $.post(this.action, $.param(fields));
+		request.done($.proxy(function (response) {
+			if (response.error) {
+				this.$errors.show();
+				for (var key in response.error.errors) {
+					this.$errorList.append('<div>' + response.error.errors[key].message + '</div>');
+				}
+				return
+			}
+			else {
+				window.location.href = "/profile"
+			}
+		}, this));
+	}
+
+})
+
diff --git a/public/assets/javascripts/ui/EditProfileModal.js b/public/assets/javascripts/ui/EditProfileModal.js
new file mode 100644
index 0000000..de8a8be
--- /dev/null
+++ b/public/assets/javascripts/ui/EditProfileModal.js
@@ -0,0 +1,49 @@
+
+var EditProfileModal = ModalView.extend({
+	el: ".mediaDrawer.editProfile",
+	action: "/project/edit",
+
+	events: {
+		"submit form": "submit"
+	},
+
+	initialize: function(){
+		this.$form = this.$("form")
+		this.$errors = this.$(".errors")
+		this.$errorList = this.$(".errorList")
+	},
+
+	reset: function(){
+		this.$("input").not("[type='submit']").not("[type='hidden']").val("")
+	},
+	
+	load: function(){
+		this.reset()
+		this.show()
+	},
+	
+	submit: function(e){
+		e.preventDefault()
+
+		this.$errors.hide();
+		this.$errorList.empty()
+
+		var fields = this.$form.serializeArray()
+		
+		var request = $.post(this.action, $.param(fields));
+		request.done($.proxy(function (response) {
+			if (response.error) {
+				this.$errors.show();
+				for (var key in response.error.errors) {
+					this.$errorList.append('<div>' + response.error.errors[key].message + '</div>');
+				}
+				return
+			}
+			else {
+				window.location.href = "/profile"
+			}
+		}, this));
+	}
+
+})
+
diff --git a/public/assets/javascripts/ui/EditProjectModal.js b/public/assets/javascripts/ui/EditProjectModal.js
new file mode 100644
index 0000000..356d8b7
--- /dev/null
+++ b/public/assets/javascripts/ui/EditProjectModal.js
@@ -0,0 +1,49 @@
+
+var EditProjectModal = ModalView.extend({
+	el: ".mediaDrawer.editProject",
+	action: "/project/edit",
+
+	events: {
+		"submit form": "submit"
+	},
+
+	initialize: function(){
+		this.$form = this.$("form")
+		this.$errors = this.$(".errors")
+		this.$errorList = this.$(".errorList")
+	},
+
+	reset: function(){
+		this.$("input").not("[type='submit']").not("[type='hidden']").val("")
+	},
+	
+	load: function(){
+		this.reset()
+		this.show()
+	},
+	
+	submit: function(e){
+		e.preventDefault()
+
+		this.$errors.hide();
+		this.$errorList.empty()
+
+		var fields = this.$form.serializeArray()
+		
+		var request = $.post(this.action, $.param(fields));
+		request.done($.proxy(function (response) {
+			if (response.error) {
+				this.$errors.show();
+				for (var key in response.error.errors) {
+					this.$errorList.append('<div>' + response.error.errors[key].message + '</div>');
+				}
+				return
+			}
+			else {
+				window.location.href = "/profile"
+			}
+		}, this));
+	}
+
+})
+
diff --git a/public/assets/javascripts/ui/MasterView.js b/public/assets/javascripts/ui/MasterView.js
index 9657c56..e99777e 100644
--- a/public/assets/javascripts/ui/MasterView.js
+++ b/public/assets/javascripts/ui/MasterView.js
@@ -5,11 +5,17 @@ var MasterView = View.extend({
 	events: {
 		"click [data-role='show-signup-modal']": 'showSignUpModal',
 		"click [data-role='show-signin-modal']": 'showSignInModal',
+		"click [data-role='create-project-modal']": 'showCreateProjectModal',
+		"click [data-role='edit-project-modal']": 'showEditProjectModal',
+		"click [data-role='edit-profile-modal']": 'showEditProfileModal',
 	},
 	
 	initialize: function(){
 		this.signUpModal = new SignUpModal()
 		this.signInModal = new SignInModal()
+		this.createProjectModal = new CreateProjectModal()
+		this.editProjectModal = new EditProjectModal()
+		this.editProfileModal = new EditProfileModal()
 
 		$("body").removeClass("loading")
 		// app.launch()
@@ -25,6 +31,21 @@ var MasterView = View.extend({
 		e.preventDefault()
 		this.signInModal.load()
 	},
+	
+	showCreateProjectModal: function(e){
+		e.preventDefault()
+		this.createProjectModal.load()
+	},
+
+	showEditProjectModal: function(e){
+		e.preventDefault()
+		this.editProjectModal.load()
+	},
+	
+	showEditProfileModal: function(e){
+		e.preventDefault()
+		this.editProfileModal.load()
+	},
 
 })
 
diff --git a/public/assets/javascripts/vendor/view.js b/public/assets/javascripts/vendor/view.js
index ef5d330..823a75b 100644
--- a/public/assets/javascripts/vendor/view.js
+++ b/public/assets/javascripts/vendor/view.js
@@ -1,128 +1,128 @@
 var View = (function($, _){
 
-  var View = function(options) {
-    this.cid = _.uniqueId('view');
-    options || (options = {});
-    _.extend(this, _.pick(options, viewOptions));
-    this._ensureElement();
-    this.initialize.apply(this, arguments);
-    this.delegateEvents();
-  };
+	var View = function(options) {
+		this.cid = _.uniqueId('view');
+		options || (options = {});
+		_.extend(this, _.pick(options, viewOptions));
+		this._ensureElement();
+		this.initialize.apply(this, arguments);
+		this.delegateEvents();
+	};
 
-  var delegateEventSplitter = /^(\S+)\s*(.*)$/;
+	var delegateEventSplitter = /^(\S+)\s*(.*)$/;
 
-  var viewOptions = ['model', 'collection', 'el', 'id', 'attributes', 'className', 'tagName', 'events'];
+	var viewOptions = ['model', 'collection', 'el', 'id', 'attributes', 'className', 'tagName', 'events'];
 
-  _.extend(View.prototype, {
+	_.extend(View.prototype, {
 
-    // The default `tagName` of a View's element is `"div"`.
-    tagName: 'div',
+		// The default `tagName` of a View's element is `"div"`.
+		tagName: 'div',
 
-    $: function(selector) {
-      return this.$el.find(selector);
-    },
+		$: function(selector) {
+			return this.$el.find(selector);
+		},
 
-    initialize: function(){},
+		initialize: function(){},
 
-    setElement: function(element, delegate) {
-      if (this.$el) this.undelegateEvents();
-      this.$el = element instanceof $ ? element : $(element);
-      this.el = this.$el[0];
-      if (delegate !== false) this.delegateEvents();
-      return this;
-    },
+		setElement: function(element, delegate) {
+			if (this.$el) this.undelegateEvents();
+			this.$el = element instanceof $ ? element : $(element);
+			this.el = this.$el[0];
+			if (delegate !== false) this.delegateEvents();
+			return this;
+		},
 
-    // Set callbacks, where `this.events` is a hash of
-    //
-    // *{"event selector": "callback"}*
-    //
-    //     {
-    //       'mousedown .title':  'edit',
-    //       'click .button':     'save',
-    //       'click .open':       function(e) { ... }
-    //     }
-    //
-    // pairs. Callbacks will be bound to the view, with `this` set properly.
-    // Uses event delegation for efficiency.
-    // Omitting the selector binds the event to `this.el`.
-    // This only works for delegate-able events: not `focus`, `blur`, and
-    // not `change`, `submit`, and `reset` in Internet Explorer.
-    delegateEvents: function(events) {
-      if (!(events || (events = _.result(this, 'events')))) return this;
-      this.undelegateEvents();
-      for (var key in events) {
-        var method = events[key];
-        if (!_.isFunction(method)) method = this[events[key]];
-        if (!method) continue;
+		// Set callbacks, where `this.events` is a hash of
+		//
+		// *{"event selector": "callback"}*
+		//
+		//		 {
+		//			 'mousedown .title':	'edit',
+		//			 'click .button':		 'save',
+		//			 'click .open':			 function(e) { ... }
+		//		 }
+		//
+		// pairs. Callbacks will be bound to the view, with `this` set properly.
+		// Uses event delegation for efficiency.
+		// Omitting the selector binds the event to `this.el`.
+		// This only works for delegate-able events: not `focus`, `blur`, and
+		// not `change`, `submit`, and `reset` in Internet Explorer.
+		delegateEvents: function(events) {
+			if (!(events || (events = _.result(this, 'events')))) return this;
+			this.undelegateEvents();
+			for (var key in events) {
+				var method = events[key];
+				if (!_.isFunction(method)) method = this[events[key]];
+				if (!method) continue;
 
-        var match = key.match(delegateEventSplitter);
-        var eventName = match[1], selector = match[2];
-        method = _.bind(method, this);
-        eventName += '.delegateEvents' + this.cid;
-        if (selector === '') {
-          this.$el.on(eventName, method);
-        } else {
-          this.$el.on(eventName, selector, method);
-        }
-      }
-      return this;
-    },
+				var match = key.match(delegateEventSplitter);
+				var eventName = match[1], selector = match[2];
+				method = _.bind(method, this);
+				eventName += '.delegateEvents' + this.cid;
+				if (selector === '') {
+					this.$el.on(eventName, method);
+				} else {
+					this.$el.on(eventName, selector, method);
+				}
+			}
+			return this;
+		},
 
-    // Clears all callbacks previously bound to the view with `delegateEvents`.
-    undelegateEvents: function() {
-      this.$el.off('.delegateEvents' + this.cid);
-      return this;
-    },
+		// Clears all callbacks previously bound to the view with `delegateEvents`.
+		undelegateEvents: function() {
+			this.$el.off('.delegateEvents' + this.cid);
+			return this;
+		},
 
-    // Ensure that the View has a DOM element to render into.
-    // If `this.el` is a string, pass it through `$()`, take the first
-    // matching element, and re-assign it to `el`. Otherwise, create
-    // an element from the `id`, `className` and `tagName` properties.
-    _ensureElement: function() {
+		// Ensure that the View has a DOM element to render into.
+		// If `this.el` is a string, pass it through `$()`, take the first
+		// matching element, and re-assign it to `el`. Otherwise, create
+		// an element from the `id`, `className` and `tagName` properties.
+		_ensureElement: function() {
 			this.setElement(_.result(this, 'el'), false);
-    }
+		}
 
-  });
+	});
 
 
-  var extend = function(protoProps, staticProps) {
-  	var staticProps = staticProps || {}
-    var parent = this;
-    var child;
-    var childEvents = {};
+	var extend = function(protoProps, staticProps) {
+		var staticProps = staticProps || {}
+		var parent = this;
+		var child;
+		var childEvents = {};
 
-    // The constructor function for the new subclass is either defined by you
-    // (the "constructor" property in your `extend` definition), or defaulted
-    // by us to simply call the parent's constructor.
-    if (protoProps && _.has(protoProps, 'constructor')) {
-      child = protoProps.constructor;
-    } else {
-      child = function(){ return parent.apply(this, arguments); };
-    }
+		// The constructor function for the new subclass is either defined by you
+		// (the "constructor" property in your `extend` definition), or defaulted
+		// by us to simply call the parent's constructor.
+		if (protoProps && _.has(protoProps, 'constructor')) {
+			child = protoProps.constructor;
+		} else {
+			child = function(){ return parent.apply(this, arguments); };
+		}
 
-    // Extend events so we can subclass views
-    _.extend(childEvents, parent.prototype.events, protoProps.events)
+		// Extend events so we can subclass views
+		_.extend(childEvents, parent.prototype.events, protoProps.events)
 
-    // Add static properties to the constructor function, if supplied.
-    _.extend(child, parent, staticProps);
+		// Add static properties to the constructor function, if supplied.
+		_.extend(child, parent, staticProps);
 
-    // Set the prototype chain to inherit from `parent`, without calling
-    // `parent`'s constructor function.
-    var Surrogate = function(){ this.constructor = child; };
-    Surrogate.prototype = parent.prototype;
-    child.prototype = new Surrogate;
+		// Set the prototype chain to inherit from `parent`, without calling
+		// `parent`'s constructor function.
+		var Surrogate = function(){ this.constructor = child; };
+		Surrogate.prototype = parent.prototype;
+		child.prototype = new Surrogate;
 
-    // Add prototype properties (instance properties) to the subclass,
-    // if supplied.
-    if (protoProps) _.extend(child.prototype, protoProps);
+		// Add prototype properties (instance properties) to the subclass,
+		// if supplied.
+		if (protoProps) _.extend(child.prototype, protoProps);
 
-    // Set a convenience property in case the parent's prototype is needed
-    // later.
-    child.prototype.__super__ = parent.prototype;
+		// Set a convenience property in case the parent's prototype is needed
+		// later.
+		child.prototype.__super__ = parent.prototype;
 		child.prototype.events = childEvents
 
-    return child;
-  };
+		return child;
+	};
 
 	View.extend = extend;
 	
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 48e5e20..85ecdb4 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -333,20 +333,15 @@ h5{
 /* PROFILE PAGE */
 .profilepage .profilePic {
   font-size: 148px;
-  background: url(http://www.clevelandfoundation.org/wp-content/uploads/2012/10/ivan-discussing-his-eye-surgery.jpg);
   background-size: cover;
   background-position: center;
 }
 .editProfile {
-  padding: 8px;
-  float: right;
   margin-right: 10px;
-  font-size: 38px;
   color: black;
   font-weight: 100;
   text-decoration: none
 }
-
 .editProfile span {
   vertical-align: middle;
 }
@@ -356,6 +351,9 @@ h5{
   padding: 8px;
   margin: 14px;
 }
+.topLinks span {
+  font-weight: 300;
+}
 .topLinks a {
   padding: 8px;
   color: black;
@@ -426,6 +424,9 @@ h5{
 	font-size: 16px;
 	font-weight: 300;
 }
+.profilepage .bio span:nth-of-type:after { content: ' &middot; ' }
+.profilepage .bio span:last-of-type:after { display: none; }
+
 
 .templates {
   padding-top: 7vh;
diff --git a/server/index.js b/server/index.js
index a45ff36..01f861b 100644
--- a/server/index.js
+++ b/server/index.js
@@ -68,7 +68,8 @@ app.get('/auth/twitter', auth.login('twitter'));
 app.get('/auth/twitter/callback', auth.loggedIn('twitter'));
 app.get('/auth/facebook', auth.login('facebook'));
 app.get('/auth/facebook/callback', auth.loggedIn('facebook'));
-
+app.get('/profile', views.profile)
+app.get(/^\/([-_a-zA-Z0-9]+)\/?$/, views.profile)
 
 
 /*
diff --git a/server/lib/middleware.js b/server/lib/middleware.js
index cace91f..83613e3 100644
--- a/server/lib/middleware.js
+++ b/server/lib/middleware.js
@@ -39,6 +39,7 @@ var middleware = {
 		res.locals.token = req.csrfToken();
 		res.locals.logged_in = req.isAuthenticated()
 		res.locals.user = req.user || {}
+		res.locals.config = config
 		next()
 	},
 
diff --git a/server/lib/schemas/Project.js b/server/lib/schemas/Project.js
new file mode 100644
index 0000000..a0382b3
--- /dev/null
+++ b/server/lib/schemas/Project.js
@@ -0,0 +1,38 @@
+/* jshint node: true */
+
+var NONALPHANUMERICS_REGEX = new RegExp('[^-_a-zA-Z0-9]', 'g')
+
+var mongoose = require('mongoose'),
+	_ = require('lodash'),
+	config = require('../../../config.json');
+
+var ProjectSchema = new mongoose.Schema({
+	name: { type: String, required: true },
+	slug: {
+		type: String,
+		required: true,
+		validate: [function (val){
+			val = (val || this.displayName || "").replace(/\s/g,"-").replace(NONALPHANUMERICS_REGEX, '-').replace(/-+/g,"-")
+			if (! val.length) return false
+			return true
+		},"{PATH} name is required"]
+	},
+	privacy: {
+		type: Boolean,
+		default: false,
+	},
+	photo: {
+		type: String,
+	},
+	about: {
+		type: String,
+		default: ""
+	},
+	user_id: { type: mongoose.Schema.ObjectId, index: true },
+	created_at: { type: Date },
+	updated_at: { type: Date },
+});
+
+
+module.exports = exports = mongoose.model('project', ProjectSchema);
+exports.schema = ProjectSchema;
diff --git a/server/lib/schemas/User.js b/server/lib/schemas/User.js
index ef8fef6..d78bfd2 100644
--- a/server/lib/schemas/User.js
+++ b/server/lib/schemas/User.js
@@ -10,7 +10,7 @@ var UserSchema = new mongoose.Schema({
 	twitter_id: String,
 	facebook_id: String,
 	
-	displayName: String,
+	displayName: { type: String, default: "" },
 	username: {
 		type: String,
 		required: true,
@@ -36,13 +36,10 @@ var UserSchema = new mongoose.Schema({
 			return true
 		}, "{PATH} is not an acceptable name"]
 	},
-	email: {
-		type: String,
-		default: "",
-	},
+	email: { type: String, efault: "" },
 	emailVerified: {
 		type: Boolean,
-		default: false,
+	 default: false,
 	},
 	password: {
 		type: String,
@@ -51,15 +48,11 @@ var UserSchema = new mongoose.Schema({
 			return true
 		}, "{PATH} is not an acceptable password"]
 	},
-	photo: {
-		type: String,
-	},
-	bio: {
-		type: String,
-		default: ""
-	},
-	website: String,
-	twitterName: String,
+	location: { type: String, default: "" },
+	photo: { type: String, default: "" },
+	bio: { type: String, default: "" },
+	website: { type: String, default: "" },
+	twitterName: { type: String, default: "" },
 	isAdmin: { type: Boolean, default: false }
 });
 
diff --git a/server/lib/views.js b/server/lib/views.js
index 4ab2a21..a8723eb 100644
--- a/server/lib/views.js
+++ b/server/lib/views.js
@@ -1,23 +1,45 @@
 /* jshint node: true */
 
 var User = require('./schemas/User'),
+	Project = require('./schemas/Project'),
 	config = require('../../config'),
 	_ = require('lodash');
 
 exports.login = function (req, res) {
 	res.render('login', {
-		config: config
 	});
 };
 
 exports.home = function (req, res) {
 	res.render('home', {
-		config: config
 	})
 }
 
 exports.profile = function (req, res) {
-	res.render('profile', {
-		config: config
-	})
+	var username = req.params[0]
+	if (username) {
+		User.findOne({ username: username }, function (err, user) {
+			user ? next(user) : done(err, {}, [])
+		})
+	}
+	else if (req.user) {
+		next(req.user)
+	}
+	else {
+		done()
+	}
+	
+	function next(user){
+		Project.find({ user_id: user._id }, function(err, projects){
+			done(err, user, projects)
+		})
+	}
+	
+	function done(err, user, projects){
+		if (! user) { return res.redirect('/') }
+		res.render('profile', {
+			profile: user,
+			projects: projects || [],
+		})
+	}
 }
diff --git a/views/edit-profile.ejs b/views/partials/edit-profile.ejs
index 0e39ade..1ac69d7 100644
--- a/views/edit-profile.ejs
+++ b/views/partials/edit-profile.ejs
@@ -1,13 +1,5 @@
-<!doctype html>
-<html>
-<head>
-	<title>vvalls</title>
-	[[ include partials/meta ]]
-</head>
-<body>
-<div class="rapper page">
-	<a href="/" class="logo"><img src="/assets/img/logo4.svg"></a>
-
+<div class="mediaDrawer fixed animate editProfile">
+	<span class="close">X</span>
 	<div id="form_container">
 
 		<form enctype="multipart/form-data" method="post">
@@ -72,12 +64,4 @@
 				<input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
 			</li>
 		</ul>
-	</form>
-</div>
-
-[[ include partials/footer ]]
-
-</div>
-</body>
-[[ include partials/scripts ]]
-</html>
+	</form>
\ No newline at end of file
diff --git a/views/partials/header.ejs b/views/partials/header.ejs
index 4ba9773..fce96cc 100644
--- a/views/partials/header.ejs
+++ b/views/partials/header.ejs
@@ -4,6 +4,7 @@
 [[ if (logged_in) { ]]
 	<span>[[- user.displayName ]]</span>
 	<a href="/profile" class="topLink">View Profile</a>
+	<a href="/profile" data-role="edit-profile-modal" class="topLink editProfile">Edit Profile <span class="icon-ios7-gear-outline"></span></a>
 	<a href="/logout" class="topLink">Sign Out</a>
 [[ } else { ]]
 	<a href="#" data-role="show-signup-modal" class="signUp topLink">Sign Up</a>
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index 46c5d50..c8f65f6 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -47,5 +47,8 @@
 <script type="text/javascript" src="assets/javascripts/ui/MasterView.js"></script>
 <script type="text/javascript" src="assets/javascripts/ui/SignInModal.js"></script>
 <script type="text/javascript" src="assets/javascripts/ui/SignUpModal.js"></script>
+<script type="text/javascript" src="assets/javascripts/ui/CreateProjectModal.js"></script>
+<script type="text/javascript" src="assets/javascripts/ui/EditProjectModal.js"></script>
+<script type="text/javascript" src="assets/javascripts/ui/EditProfileModal.js"></script>
 
 <script type="text/javascript" src="assets/javascripts/app.js"></script>
diff --git a/views/partials/signin.ejs b/views/partials/signin.ejs
index c285811..3341aec 100644
--- a/views/partials/signin.ejs
+++ b/views/partials/signin.ejs
@@ -1,3 +1,5 @@
+[[ if (! logged_in) { ]]
+
 <div class="mediaDrawer fixed animate signin">
 	<span class="close">X</span>
 	<div class="box">
@@ -71,3 +73,5 @@
 		</form>
 	</div>
 </div>
+
+[[ } ]]
diff --git a/views/profile.ejs b/views/profile.ejs
index 5ac75c5..26f1ee1 100644
--- a/views/profile.ejs
+++ b/views/profile.ejs
@@ -6,109 +6,46 @@
 </head>
 <body class="loading">
 <div class="rapper page">
-	<a href="/" class="logo"><img src="assets/img/logo4.svg"></a>
-	<a href="/edit-profile.html" class="topLink editProfile">edit profile <span class="icon-ios7-gear-outline"></span></a>
+	[[- include partials/header ]]
 	
 	<table class="profilepage">
 		<tr>
+			[[ if (profile.photo && profile.photo.length) { ]]
+			<td class="border profilePic" style="background-image:url([[- profile.photo ]])">
+			</td>
+			[[ } else { ]]
 			<td class="border profilePic">
-				<!--IF NO PIC
 				<span class="icon-ios7-person-outline"></span>
-				-->
 			</td>
+			[[ } ]]
 			<td class="bio">
-				<h2>Ivan Sidorov</h2>
+				<h2>[[- profile.displayName ]]</h2>
+				[[ if (profile.location) { ]]
+				<span>
+					[[- profile.location ]]
+				</span>
+				[[ } ]]
+				[[ if (profile.website && profile.website.length) { ]]
+				<span>
+					<a href="[[- profile.website ]]">[[- profile.website ]]</a>
+				</span>
+				[[ } ]]
+				[[ if (profile.twitterName && profile.twitterName.length) { ]]
 				<span>
-					New York City &middot; <a href="#">http://example.com/</a> &middot; <a href="#">@twitter</a>
+					<a href="https://twitter.com/[[- profile.twitterName ]]">@[[- profile.twitterName ]]</a>
 				</span>
+				[[ } ]]
 			</td>
 		</tr>
 	</table>
 	
-	<h1>Ivan has 4 projects</h1>
-	
-	<table>
-		<tr>
-			<td class="border room1">
-				<div class="editBtn">edit</div>
-				<div class="formHolder fixed animate">
-					<span class="close">X</span>
-					<div class="formInner">
-						<form enctype="multipart/form-data" method="post">
-							<ul>
-								<li class="section_break">
-									<h3>Edit Room</h3>
-								</li>
-								<li>
-									<label class="description" for="element_3">Name:</label>
-									<div>
-										<input id="element_3_1" name= "element_3_1" class="element text" type="text" maxlength="255" value="Idea For Show"/>
-									</div>
-								</li>		
-								<li>
-									<label class="description" for="element_2">Description:</label>
-									<div>
-										<textarea placeholder="short description"></textarea>
-									</div> 
-								</li>		
-								<li>
-									<label class="description" for="element_5">URL:</label>
-									<div>
-										<input id="element_5" name="element_5" class="element text medium" type="text" maxlength="255" value="http://vvalls.com/t987"/> 
-									</div> 
-								</li>		
-								<li>
-									<label class="description" for="element_4">Privacy:</label>
-									<div class="radio-group">
-										<input id="opt_1" class="radio-group__option" type="radio" name="opt" checked="checked">
-										<label class="radio-group__label" for="opt_1">
-											Everyone
-										</label>
-
-										<input id="opt_2" class="radio-group__option" type="radio" name="opt">
-										<label class="radio-group__label" for="opt_2">
-											Just for me
-										</label>
-									</div>
-								</li>		
-								<li class="buttons">
-									<input type="hidden" name="form_id" value="795208" />
+	[[ include projects/list-projects ]]
 
-									<input class="button_text" type="submit" name="submit" value="Submit" />
-								</li>
-								<hr>
-								<li class="subButtons">
-									<a href="#">Clone Project</a>
-									<a href="#">Delete Project</a>
-								</li>
-							</ul>
-						</form>
-					</div>
-				</div>
-				<a href="/" class="roomName">Idea for Show</a>
-			</td>
-			<td class="border room1">
-				<div class="editBtn">edit</div>
-				<a href="/" class="roomName">Thing I'm Working On</a>
-			</td>
-			<td class="room1">
-				<div class="editBtn">edit</div>
-				<a href="/" class="roomName">Pace Gallery</a>
-			</td>
-		</tr>
-	</table>
-	
-	<table>
-		<tr>
-			<td class="room1">
-				<div class="editBtn">edit</div>
-				<a href="/" class="roomName">Pace Gallery</a>
-			</td>
-		</tr>
-	</table>
-	
-	<a href="#loadmore" class="viewMore" id="createProject">create project</a>
+	<a href="#" data-role="create-project-modal" class="viewMore" id="createProject">create project</a>
 	
+	[[ include partials/edit-profile ]]
+	[[ include projects/create-project ]]
+	[[ include projects/edit-project ]]
 	[[ include partials/footer ]]
 
 </div>
diff --git a/views/partials/newproject.ejs b/views/projects/create-project.ejs
index fc34295..e151f3a 100644
--- a/views/partials/newproject.ejs
+++ b/views/projects/create-project.ejs
@@ -15,4 +15,4 @@
 			<input id="saveForm" class="button_text" type="submit" name="submit" value="Create Project" />
 		</form>
 	</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/views/projects/edit-project.ejs b/views/projects/edit-project.ejs
new file mode 100644
index 0000000..0441b9f
--- /dev/null
+++ b/views/projects/edit-project.ejs
@@ -0,0 +1,52 @@
+<div class="mediaDrawer fixed animate editProject">
+	<span class="close">X</span>
+	<div class="formInner">
+		<form enctype="multipart/form-data" method="post">
+			<ul>
+				<li class="section_break">
+					<h3>Edit Room</h3>
+				</li>
+				<li>
+					<label class="description" for="name">Name:</label>
+					<div>
+						<input id="name" name= "name" class="element text" type="text" maxlength="255" value="Idea For Show">
+					</div>
+				</li>		
+				<li>
+					<label class="description" for="description">Description:</label>
+					<div>
+						<textarea placeholder="short description" id="description"></textarea>
+					</div> 
+				</li>		
+				<li>
+					<label class="description" for="url">URL:</label>
+					<div>
+						<input id="url" name="slug" class="element text medium" type="text" maxlength="255" value="http://vvalls.com/t987"> 
+					</div> 
+				</li>		
+				<li>
+					<label class="description" for="element_4">Privacy:</label>
+					<div class="radio-group">
+						<input id="opt_1" class="radio-group__option" type="radio" name="privacy" checked="checked">
+						<label class="radio-group__label" for="opt_1">
+							Everyone
+						</label>
+
+						<input id="opt_2" class="radio-group__option" type="radio" name="privacy">
+						<label class="radio-group__label" for="opt_2">
+							Just for me
+						</label>
+					</div>
+				</li>		
+				<li class="buttons">
+					<input class="button_text" type="submit" value="Submit" >
+				</li>
+				<hr>
+				<li class="subButtons">
+					<a href="#">Clone Project</a>
+					<a href="#">Delete Project</a>
+				</li>
+			</ul>
+		</form>
+	</div>
+</div>
diff --git a/views/projects/list-projects.ejs b/views/projects/list-projects.ejs
new file mode 100644
index 0000000..4e5be75
--- /dev/null
+++ b/views/projects/list-projects.ejs
@@ -0,0 +1,19 @@
+[[ if (projects.length) { ]]
+	<h1>[[- profile.username ]] has [[- projects.length ]] project[[- projects.length != 1 && "s" ]]</h1>
+	
+	<table>
+		<tr>
+
+		[[ projects.forEach(function(project) { ]]
+			<td class="border room1">
+				[[ if (profile._id == project.user_id) { ]]
+				<div class="editBtn">edit</div>
+				[[ } ]]
+				<a href="/" class="roomName">[[- project.name ]]</a>
+			</td>
+		[[ }) ]]
+
+		</tr>
+	</table>
+
+[[ } ]]