Code Snippets-JavaScript

// Displays a message to the user depending on the time of day //
var today = new Date();
var currentTime = today.getHours();
var currentGreeting;
if (currentTime > 18) {
currentGreeting = "Good evening, get that beauty rest
tonight, you need it!";
} else if (currentTime > 12) {
currentGreeting = "Good afternoon, I hope you had a
good lunch!";
} else if (currentTime > 0) {
currentGreeting = "Good morning, rise and shine, a new
} else {
currentGreeting = "Hello and Welcome!";

If/else if statement

Using a JavaScript if/else if statement to make a decision. This script will generate a message based on the current time. These statements are important in JavaScript to make decisions in the program.

var d = new Date();
var weekday = new Array(7);
weekday[0] = "Sunday"; weekday[1] = " Monday "; weekday[2] = "Tuesday";
weekday[3] = "Wednesday"; weekday[4] = "Thursday";
weekday[5] = "Friday"; weekday[6] = "Saturday";
var n = weekday[d.getDay()];
var a = new Date();
var monthNames = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", " October ", "November", "December"];
var date = weekday[d.getDay()] + " " + monthNames[a.getMonth()] +
" " + a.getDate() + ", " + a.getFullYear();
document.getElementById("date").innerHTML = date;

JavaScript Date

Using JavaScript date methods to show the full date on a website.

Code Snippet-CSS

/* Animation keyframes for icons below carousel */
@keyframes icon-fade {
0% {opacity: 0.1;}
25% {opacity: 0.3;}
50% {opacity: 0.5;}
75% {opacity: 0.8;}
100% {opacity: 1;}
.icon {
opacity: 0;
animation-name: icon-fade;
animation-duration: 20s;
animation-delay: 3s;
animation-fill-mode: forwards;
animation-iteration-count: 1;

Using CSS Animation

Using CSS animation on the opacity property to fade-in the icons on the front page of this site. They start hidden then slowly fade in.

/* Style panels */
.panel-default {
background-color: #0080ff;
height: 200px;
border-radius: 8px;
border-color: #4d4d4d;
overflow: hidden;
.panel-default:hover {
box-shadow: 8px 8px 8px #000;

Styling divs

This is the code to style the menu div panels in the custom layout in the layouts section below. The overflow is set to hidden to keep the bottom contents from overflowing the div and gives it a better look.

Code Snippets-jQuery

//1. Hide text $(".some_text span").hide(); //2. Add button $(".some_text").append(""); //3. When button is pressed $("button").click(function () { //3.1 Show text $(".some_text span").show(); //3.2 Get rid of button $(this).remove(); });

Text revealer button

Using jQuery to hide and show text.

$(document).ready(function () { $('div.hidden').fadeIn(1000).removeClass('hidden'); });

Fade in page

Using jQuery to fade-in a home page. Simple, but very cool effect. Create a div below the body tag, set the class to hidden, then use jQuery for the effect. The hidden class gets removed and shows the page. A fade-in longer than this will probably deter users from the site.

Code Snippet-PHP

function theme_add_google_fonts() { wp_enqueue_style( 'theme-google-fonts-1', '', false ); wp_enqueue_style( 'theme-google-fonts-2', '', false ); wp_enqueue_style( 'theme-google-fonts-3', '', false ); wp_enqueue_style( 'theme-google-fonts-4', '', false ); } add_action( 'wp_enqueue_scripts', 'theme_add_google_fonts' );

PHP function

Using a PHP function to add Google fonts to a WordPress theme. (Actually it's this one! :) )


palm trees


Messing around with the opacity property. Gives backgrounds a see-through (transparent) look. Very cool looking if you ask me!

I love technology!

Letter Spacing

Using the letter spacing property to bring attention to this paragraph and make it stand out. I have also demonstrated the text-transform property, changing the letters to uppercase.

    Favorite Web Languages

  1. CSS
  2. jQuery
  3. JavaScript
  4. PHP
  5. HTML

Ordered List element

Using the HTML ordered list element to rank my favorite web development languages. They are all great in one way or another but I think these are my top three.

Sport Favorite Player
Hockey Nathan Mackinnon
Baseball Masahiro Tanaka
Football Odell Beckham Jr.
Basketball Stephen Curry

Table element

Using the table element to list my favorite sports and favorite player for each sport. Using the Bootstrap classes and a little extra styling of my own!

CSS Hover effect

Using the CSS hover pseudo element to hover over first image to reveal a second image. This could also be done with some simple JavaScript or jQuery.

Iframe element

Using the iframe element to display one of my favorite web pages.

Using jQuery Bootstrap panels


Hockey Info

I have loved hockey since the day I realized it existed. It is a fast-paced, yet fun sport that I grew up playing for about 18 years total between playing roller hockey first, then transitioning to ice hockey. It is played five on five (5 on 5) with 3 forwards (center, left wing, and right wing) and 2 defensemen. If you count the goalie, then there are six players on the ice for each team, unless there is a penalty. The object of the game is to put the puck in the net and stop the opponent from putting the puck in the net, too. Players have to look out for themselves and their teammates offensively and defensively. The goalies job is strictly defense, so they are not worried about scoring goals. It has happened though and is quite a feat when it does happen.

Disc golf

Disc golf is a fun yet frustrating sport. It is played just like real golf, and the object is to get your disc in the basket in the least amount of throws (or strokes) possible. This is done with special discs made for disc golf: distance drivers (used on tee-off), mid-range and fairway drivers, and putter discs. It takes practice to get good, and it is worth every bit of the time and effort. I still need to work on my game and I have improved a lot since I started throwing discs for the first time. There are some good places to play where I live and I hope to keep checking out more courses in the near future. I can only practice a hand full of times during the winter so that can throw me off when I start to play when it finally gets warmer.

game console

Video Games

Video games are a fun way to entertain yourself. I personally enjoy a few different genres of games. On my PS4 (PlayStation 4) I like sports games: hockey, baseball, football, and basketball; role playing, action/shooter/war and open-world games where the character(s) are free to roam. Games have come a very long way since Nintendo released their first console. I still remember Christmas Day 1989 is the day I would fall in love with the video game world. The graphics on the modern systems (PS4, XBOX One) are excellent and the player likeness and arena and stadium authenticity for the sports games is downright amazing. There is an great article on the evolution of gaming systems here for those of you interested in video games.

HTML Video

Google Map

Using Google Maps API to display where my favorite disc golf course is. (hint: it's Leadville!)


Some of the layouts I have created or customized. I will post more projects in the future.

Custom Layout

Experimenting with a custom layout I built with Bootstrap. I wanted a different looking menu than the default navbar at the top. Also displays a message and date using JavaScript and a cool jQuery page fade-in when the page loads. This layout is not a finished product, as I want to continue to build out the homepage and the rest of the pages as well, but I think it is a good start.

Cover layout

Bootstrap layout

Experimenting with a Bootstrap cover layout from the site. I have added a background and customized the colors a bit. I would like to revisit this project in the future and find more ways to customize the home page and build out the other pages.

Portfolio site

Portfolio site

I can show off this project too, of course! I built this custom layout for my portfolio site (the one your on now!). I used the Bootstrap framework for the layout and the CMS WordPress to manage the content and custom CSS to style elements the way I wanted. It is still a work in progress as I will be adding more in the future. Not too shabby for my first website!