JONATHAN EARP

Blog

New Portfolio Entry - gorramgames.com

Some friends and I have really gotten into virtual photography. This is basically taking beautiful pictures inside videogames. Most games these days have built in photo-modes that make this an easy task. This led me to create gorramgames.com. This ia a videogame review website that has the potential for other content such as news, entertainment, etc.

gorramgames image

gorramgames.com homepage


This is the first time that I've delved into a content management system. The one I used for this website is Wordpress. Wordpress was fairly self-explainatory to use and had the option to add a lot of features utilizing plug-ins. It is an expensive platform though if you want to use all of its features.

The great thing about Wordpress is that I can add contributers to the website, so other people can write articles for the website without having any knowledge of HTML. This is great because The burden of creating content is not all placed on me and I can have a working relationship with contributers.

Wordpress has also allowed me to experiment with Ads. Linking the page to google adsense allows me to place Ads where I want without them disrupting the content and have the potential for the website to pay for itself if it gets pupular enough.

02/05/2020

New Portfolio Entry - mojosquirrel.com:

A personal project that is an ongoing process. My new website, mojosquirrel.com is a portal to a gaming server. I host it off a Linux server I build running an i3-8700 intel processor that has good single core processing speed for the price. The purpose is to host an online real-time map of the game world that I am running, have a point of contact for server issues, as well as disseminate the server address to the public.

mojosquirrel image

mojosquirrel.com homepage


A hurdle that I came across when making this website is that a :hover class that works on a computer will not work the same way for a mobile device. So my dropdown menu would not work on a phone. To get around this I used the code below:

onclick="void(0)"

When adding the "onclick" attribute to an interactive div, the div becomes clickable on mobile devices while still retaining the :hover functionality in a normal web browser.

02/15/2019

New Portfolio Entry - reformsiding.com:

I have completed version 1.0 of a website for a local business and put it online via Amazon Web Services. It was an interesting challenge working with a client. There was a lot of coordination needed in figuring out what the client wanted and what I could actually do in the timeframe provided. The outcome of this process:

Reformsiding image

reformsiding.com homepage


One thing that I learned from creating this website was the fact that a website viewed on a mobile device will not automatically format to the smaller size created by the @media tag in the CSS file. What I had to do instead was use a meta tag which changed the dimensions of the website based on the device that is viewing it.

meta name="viewport" content="width=device-width, initial-scale=1"

Adding the above code to the header of the webpages solved the scaling issue I was having with mobile devices.

02/14/2019

Cool Code - Show More JQuery:

I added a "show more" button in my blog. It uses JQuery to remove a class I add to posts that I do not want to show initially when the page loads. I decided to do this early so the website looks more streamlined and doesn't eventually become an endless scrolling main-page where the user gets lost.


//javascript
$(function(){
   $("#showMore").on("click", function() {
   var hiddenDivs = $('div.hidden');
   if (hiddenDivs.length > 0)
   {
      hiddenDivs.slice(0,3).removeClass('hidden');
   }
   })
});


This is a cool feature of javascript and JQuery because I am able to actively change the CSS of a webpage while navigating the webpage.

08/27/2018

Tool - Adobe XD:

Adobe XD is a cool free tool for making templates for web design. It is very easy to use and is a great prototyping tool for figuring out what a certain website design will look like in different formats. You can even link boxes on one template to act as a button to move to another template in order to simulate how a website would actually work in the real world. This only think I don't like about it is you still have to write out the HTML and CSS in order to actually make the website a reality (life can't be too easy). However, it is a great free-tool to make images and logos to put into the website later.

example template

Example template made in Adobe XD.

08/20/2018