Added blog

public/stylesheets/style.css

@@ -15,9 +15,9 @@ a {
 }
 
 .header {
-	height: 500px;
+	height: 400px;
-	background: url("../images/headerBackground.jpg") center;
+	background: url("../images/headerBackground.jpg") center no-repeat;
-	background-size: cover;
+  background-size: cover;
 }
 
 .headerText{
@@ -50,3 +50,164 @@ a {
 .colorRed {
 	color: red;
 }
+
+.timeForm {
+  width: 33.3%;
+  display: inline;
+}
+
+.aboutMeImage {
+  width: 100%;
+  height: 100%;
+}
+
+.center {
+  margin-left: auto;
+  margin-right: auto;
+  display: block;
+}
+
+/*
+ * Override Bootstrap's default container.
+ */
+
+@media (min-width: 1200px) {
+  .container {
+    width: 970px;
+  }
+}
+
+
+/*
+ * Masthead for nav
+ */
+
+.blog-masthead {
+  background-color: #428bca;
+  -webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
+          box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
+}
+
+/* Nav links */
+.blog-nav-item {
+  position: relative;
+  display: inline-block;
+  padding: 10px;
+  font-weight: 500;
+  color: #cdddeb;
+}
+.blog-nav-item:hover,
+.blog-nav-item:focus {
+  color: #fff;
+  text-decoration: none;
+}
+
+/* Active state gets a caret at the bottom */
+.blog-nav .active {
+  color: #fff;
+}
+.blog-nav .active:after {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 0;
+  height: 0;
+  margin-left: -5px;
+  vertical-align: middle;
+  content: " ";
+  border-right: 5px solid transparent;
+  border-bottom: 5px solid;
+  border-left: 5px solid transparent;
+}
+
+
+/*
+ * Blog name and description
+ */
+
+.blog-header {
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+.blog-title {
+  margin-top: 30px;
+  margin-bottom: 0;
+  font-size: 60px;
+  font-weight: normal;
+}
+.blog-description {
+  font-size: 20px;
+  color: #999;
+}
+
+
+/*
+ * Main column and sidebar layout
+ */
+
+.blog-main {
+  font-size: 18px;
+  line-height: 1.5;
+}
+
+/* Sidebar modules for boxing content */
+.sidebar-module {
+  padding: 15px;
+  margin: 0 -15px 15px;
+}
+.sidebar-module-inset {
+  padding: 15px;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+}
+.sidebar-module-inset p:last-child,
+.sidebar-module-inset ul:last-child,
+.sidebar-module-inset ol:last-child {
+  margin-bottom: 0;
+}
+
+
+/* Pagination */
+.pager {
+  margin-bottom: 60px;
+  text-align: left;
+}
+.pager > li > a {
+  width: 140px;
+  padding: 10px 20px;
+  text-align: center;
+  border-radius: 30px;
+}
+
+
+/*
+ * Blog posts
+ */
+
+.blog-post {
+  margin-bottom: 60px;
+}
+.blog-post-title {
+  margin-bottom: 5px;
+  font-size: 40px;
+}
+.blog-post-meta {
+  margin-bottom: 20px;
+  color: #999;
+}
+
+
+/*
+ * Footer
+ */
+
+.blog-footer {
+  padding: 40px 0;
+  color: #999;
+  text-align: center;
+  background-color: #f9f9f9;
+  border-top: 1px solid #e5e5e5;
+}
+.blog-footer p:last-child {
+  margin-bottom: 0;
+}

routes/index.js

@@ -23,12 +23,19 @@ router.post('/', function(req, res,next) {
 	
 	var number = req.body.number;
 	var date = req.body.date;
-	var time = req.body.time;
+	var hours = req.body.hours;
+	var minutes = req.body.minutes;
+	var ampm = req.body.ampm;
 	var message = req.body.message;
 	var carrier = req.body.carrier;
 	var invalid = {};
 	var validInputs = true;
 
+	hours = ("0" + hours).slice(-2);
+	minutes = ("0" + minutes).slice(-2);
+
+	var time = hours + ":" + minutes + ampm;
+
 	if(!numberValidator(number)){
 		invalid.number = 'Invalid Number';
 		validInputs = false;

views/blogposts/7-21-15.jade

@@ -0,0 +1,60 @@
+div.blog-post
+	h2.blog-post-title First Blog Post
+	p.blog-post-meta July 21st 2015 by Mitchell
+	p.
+		My first blog post introduces this website and the motives behind it.
+		I discuss setting up a Node.js webserver for the first time and 
+		my experiences with it thus far.
+	hr
+	p.
+		I have had this site up for awhile now, but I've decided to turn it
+		into a blog style website, more or less. I first started working on the site
+		because I wanted to learn new web development tools, in this case, Node.js and MongoDB.
+	p.
+		I already had previous experience with SQL databases and other server side scripting
+		languages such as PHP and JSP, but I heard good things about Node.js and I wanted to
+		familiarize myself with a NoSQL database. At first, Node.js was a bit confusing to work
+		with and figure everything out. Now that I am starting to get the hang of Node and MongoDB
+		I am enjoying them more and more.
+
+	h2 Setting up Node.js for the first time
+	p.
+		There are multiple ways to get up and running with Node. Node uses "modules" and has some
+		that are already built in. Others need to be installed with the NPM package manager, which
+		will become your friend. I am going focus on installing Node.js with Express, which is a
+		web framework for Node.js.
+	code$ sudo apt-get install nodejs
+	br
+	code$ sudo apt-get install npm
+	br
+	p.
+		Once you have both Node.js and NPM installed, install Express and MongoDB.
+		We are going to install and use express generator to easily create a skeleton that we can
+		work from.
+	code$ npm install express-generator -g
+	br
+	p 
+	|Based on your system, installing MongoDB may be a bit different. 
+	a(href="http://docs.mongodb.org/manual/") Here is a guide on how to install.
+	p Once express generator is installed, it is extremely simple to set up a new Node application.
+	code$ express myapp
+	br
+	p This will generate a new fold "myapp" with prebuild folders and files.
+	code$ cd myapp
+	br
+	code$ npm install
+	br
+	code$ npm start
+	p.
+		Now as easy as that sounds, you have a Node web application running on your machine.
+		You can navigate to your web app at localhost:3000 (It's configured to use port 3000 by default)
+	p 
+		|Express organizes everything nicely in the 
+		a(href="https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller") Model View Controller 
+		|software pattern. Folders are split up into views, routes, and public files. 
+		|If you are implementing a database, you would also create a "models" folder. 
+		|There is also a folder which contains Node modules. 
+		|When you use NPM to install new modules this is where they will be located.
+	p.
+		Node is a very powerful tool that I plan on exploring more in the future.
+		As development of this site continues, I plan to submit more content similar to this.

views/index.jade

@@ -3,52 +3,88 @@ extends layout
 block content
 	div.header
 		div.centerDiv
-			h1.headerText.textCenter mitchellG.me
+	nav.blog-nav
-
 	div.container
-		h1.textCenter Enter Reminder
+		
-		form(action="/", method="post")
+		div.blog-header
-			div.form-signin
+			h1.blog-title mitchellG.me
-				Span Phone Number:
+			p.lead.blog-description A "blog" about computer related projects that I find interesting.
-				if (number != null)
+		div.row
-					Span.colorRed= " " + number
+			div.col-lg-8.blog-main
-				br
+				include ./blogposts/7-21-15.jade
-				input.form-control(required type="text", name="number", placeholder="555-555-5555")
-				br
-				Span Carrier:
-				select.form-control(name="carrier")
-					option(value="@vtext.com") Verizon
-					option(value="@txt.att.net") AT&T
-					option(value="@tmomail.net") T-Mobile
-					option(value="@messaging.sprintpcs.com ") Sprint
-					option(value="@vmobl.com") Virgin Mobile
-					option(value="@mmst5.tracfone.com") Tracfone
-					option(value="@mymetropcs.com") Metro PCS
-					option(value="@myboostmobile.com") Boost Mobile
-					option(value="@sms.mycricket.com") Cricket
-					option(value="@messaging.nextel.com") Nextel
-					option(value="@message.alltel.com") Alltel
-					option(value="@ptel.com") Ptel
-					option(value="@tms.suncom.com") Suncom
-					option(value="@qwestmp.com") Quest
-					option(value="@email.uscc.net") U.S. Cellular
-				br
-				Span Date:
-				if (date != null)
-					Span.colorRed= " " + date
-				br
-				input.form-control(required type="text", name="date", id="datepicker" placeholder="MM/DD/YYYY")
-				br
-				Span Time:
-				if (time != null)
-					Span.colorRed= " " + time
-				br
-				input.form-control(required type="text", name="time", id="timepicker" placeholder="12:00am")
-				br
-				Span Message:
-				textarea.form-control(required type="textarea", name="message", placeholder="Type your message here...")
-				br
-				input(hidden type="text" name="timeZone" id="timeZone")
-				input(type="submit", value="Remind Me", id="submitButton").btn.btn-lg.btn-primary.btn-block
 
-					
+
+
+
+			div.col-sm-4.blog-sidebar
+				h1.textCenter About Me
+				img.aboutMeImage.center.img-rounded(src="images/aboutme.jpg")
+				br
+				div.sidebar-module.sidebar-module-inset
+					p.
+						I'm 22 years old and I'm currently attending Winona State University as a Computer Science major.
+						I am graduating in Spring of 2016 and plan to pursue a career in the field of software development.
+					a(href="https://www.linkedin.com/pub/mitchell-gerber/b3/391/125" target="_blank")
+						i.icon-large.icon-linked-in
+				div.sidebar-module
+					h3.textCenter Enter Reminder
+					form(action="/", method="post")
+						div.form-signin
+							Span Phone Number:
+							if (number != null)
+								Span.colorRed= " " + number
+							br
+							input.form-control(required type="text", name="number", placeholder="555-555-5555")
+							br
+							Span Carrier:
+							select.form-control(name="carrier")
+								option(value="@vtext.com") Verizon
+								option(value="@txt.att.net") AT&T
+								option(value="@tmomail.net") T-Mobile
+								option(value="@messaging.sprintpcs.com ") Sprint
+								option(value="@vmobl.com") Virgin Mobile
+								option(value="@mmst5.tracfone.com") Tracfone
+								option(value="@mymetropcs.com") Metro PCS
+								option(value="@myboostmobile.com") Boost Mobile
+								option(value="@sms.mycricket.com") Cricket
+								option(value="@messaging.nextel.com") Nextel
+								option(value="@message.alltel.com") Alltel
+								option(value="@ptel.com") Ptel
+								option(value="@tms.suncom.com") Suncom
+								option(value="@qwestmp.com") Quest
+								option(value="@email.uscc.net") U.S. Cellular
+							br
+							Span Date:
+							if (date != null)
+								Span.colorRed= " " + date
+							br
+							input.form-control(required type="text", name="date", id="datepicker" placeholder="MM/DD/YYYY")
+							br
+							Span Time:
+							if (time != null)
+								Span.colorRed= " " + time
+							br
+							select.form-control.timeForm(name="hours")
+								-for(var i = 1; i < 13; i++)
+									option(value=i)= i
+							select.form-control.timeForm(name="minutes")
+								-for(var i = 1; i < 60; i++)
+									option(value=i)= i
+							select.form-control.timeForm(name="ampm")
+								option(value="am") AM
+								option(calue="pm") PM
+							br
+							br
+							Span Message:
+							textarea.form-control(required type="textarea", name="message", placeholder="Type your message here...")
+							br
+							input(hidden type="text" name="timeZone" id="timeZone")
+							input(type="submit", value="Remind Me", id="submitButton").btn.btn-lg.btn-primary.btn-block
+	footer.blog-footer
+		p Site created and managed by Mitchell Gerber
+		Span &#169;2015
+		br
+		Span Glyphicons provided by
+		br
+		a(href="http://glyphicons.com/" target="_blank")
+			Span glyphicons.com

views/layout.jade

@@ -6,6 +6,7 @@ html
     link(rel='stylesheet', href='/stylesheets/style.css')
     link(rel='stylesheet', href='jquery-ui-1.11.4/jquery-ui.css')
     link(rel='stylesheet', href='jquery-timepicker/jquery.timepicker.css')
+    link(rel='stylesheet', href='bootstrap/css/bootstrap.icon-large.min.css')
     link(href='http://fonts.googleapis.com/css?family=Arvo', rel='stylesheet', type='text/css')
   body
     block content
@@ -13,5 +14,4 @@ html
   script(src="bootstrap/js/bootstrap.js")
   script(src="jquery-ui-1.11.4/jquery-ui.js")
   script(src="jquery-timepicker/jquery.timepicker.js")
-  script(src="javascripts/notify.min.js")
   script(src="javascripts/custom.js")