mitchell/mywebsite
1
0
Fork 0
mirror of https://github.com/mgerb/mywebsite synced 2026-01-12 02:42:48 +00:00
Code Issues Releases Wiki Activity

Added blog

Browse Source
This commit is contained in:
mgerb42
2015-07-21 13:20:21 -05:00
parent c17442131f
commit 38c9fab9cc
10 changed files with 317 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/bootstrap/css/bootstrap.icon-large.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

BIN
public/bootstrap/img/glyphicons.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 109 KiB

BIN
public/images/aboutme.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 109 KiB

BIN
public/images/headerBackground.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 587 KiB

After

Width:  |  Height:  |  Size: 1.7 MiB

BIN
public/images/headerBackground1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 587 KiB

167
public/stylesheets/style.css
View File

@@ -15,9 +15,9 @@ a {
}
.header {
height: 500px;
background: url("../images/headerBackground.jpg") center;
background-size: cover;
height: 400px;
background: url("../images/headerBackground.jpg") center no-repeat;
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;
}

9
routes/index.js
View File

@@ -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;

60
views/blogposts/7-21-15.jade Normal file
View File

@@ -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.

130
views/index.jade
View File

@@ -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.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
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.blog-header
h1.blog-title mitchellG.me
p.lead.blog-description A "blog" about computer related projects that I find interesting.
div.row
div.col-lg-8.blog-main
include ./blogposts/7-21-15.jade
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

2
views/layout.jade
View File

@@ -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")